Merge pull request #63 from opeolluwa/dev

chore: build the home page

utils-web/Cargo.toml

@@ -14,26 +14,33 @@ leptos_router = { version = "0.6.11", features = ["csr"] }
 leptos_meta = { version = "0.6.11", features = ["csr"] }
 gloo-net = { version = "0.2", features = ["http"] }
 log = "0.4.21"
+serde = { version = "1.0.201", features = ["derive"] }
+leptos_image = { version = "0.2.0", optional = true }
 
+[features]
+leptos_image = ["dep:leptos_image"]
 
 
-[package.metadata.leptos]
-# Path, relative to root, to generat rust code to
-gen_file = "src/server/generated.rs"
-# Path to the source index.html file
-index_file = "index.html"
-# [Optional] Files in the asset_dir will be copied to the target/site directory
-assets_dir = "public"
-# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
-end2end_test_cmd = "npx playwright test"
-# On which port to serve the client side rendered site (when using --csr option)
-csr_port = 3000
-# The port to use for automatic reload monitoring
-reload_port = 3001
-
-[package.metadata.leptos.style]
-# Main style file. If scss or sass then it will be compiled to css.
-# the parent folder will be watched for changes
-file = "style/output.css"
-# A https://browsersl.ist query
-browserquery = "defaults"
+
+
+
+# [package.metadata.leptos]
+# # Path, relative to root, to generat rust code to
+# gen_file = "src/server/generated.rs"
+# # Path to the source index.html file
+# index_file = "index.html"
+# # [Optional] Files in the asset_dir will be copied to the target/site directory
+# assets_dir = "public"
+# # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+# end2end_test_cmd = "npx playwright test"
+# # On which port to serve the client side rendered site (when using --csr option)
+# csr_port = 3000
+# # The port to use for automatic reload monitoring
+# reload_port = 3001
+
+# [package.metadata.leptos.style]
+# # Main style file. If scss or sass then it will be compiled to css.
+# # the parent folder will be watched for changes
+# file = "style/output.css"
+# # A https://browsersl.ist query
+# browserquery = "defaults"

utils-web/index.html

@@ -13,6 +13,7 @@
     <link data-trunk rel="rust" data-wasm-opt="z" />
     <link data-trunk rel="icon" type="image/ico" href="/public/favicon.ico" />
     <link data-trunk rel="tailwind-css" href="/style/tailwind.css" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
     <style>
         .open-sans-300 {
             font-family: "Open Sans", sans-serif;

utils-web/src/app.rs

@@ -4,6 +4,7 @@ use crate::pages::home::Home;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
+// use leptos_image::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -15,10 +16,10 @@ pub fn App() -> impl IntoView {
         <Router>
             <Routes>
                 <Route path="" view=move || view! { <Home/> }/>
-                <Route path="/auth/login" view=move || view! { <Login/> }/>
-                <Route path="/auth/sescurity-question" view=move || view! { <SecurityQuestion/> }/>
-                <Route path="/auth/reset" view=move || view! { <ResetAccount/> }/>
-                <Route path="/auth/mfa" view=move || view! { <MultiFactorAuth/> }/>
+                <Route path="/login" view=move || view! { <Login/> }/>
+                <Route path="/sescurity-question" view=move || view! { <SecurityQuestion/> }/>
+                <Route path="/reset" view=move || view! { <ResetAccount/> }/>
+                <Route path="/mfa" view=move || view! { <MultiFactorAuth/> }/>
                 <Route path="/dashboard" view=move || view! { <Dashboard/> }/>
 
             </Routes>

utils-web/src/components/button.rs

@@ -1,4 +1,12 @@
+use leptos::{component, view, Children, IntoView};
 
-pub fn button(){
-
-}
+/// the app button component
+#[component]
+pub fn Button(
+    /// additional tailwind or custom css classes
+    class: &'static str,
+    /// the element that goes into the button
+    children: Children,
+) -> impl IntoView {
+    view! { <button class=format!("px-4 py-2 rounded {class}")>{children()}</button> }
+}

utils-web/src/components/card.rs

@@ -1,5 +1 @@
-
-
-pub fn card(){
-
-}
+pub fn card() {}

utils-web/src/components/icon.rs

@@ -0,0 +1,15 @@
+use leptos::{component, view, IntoView};
+
+/// the app icon component, built on remx icon
+#[component]
+pub fn Icon(
+    #[prop(default = "")]
+    /// the remix icon identifier
+    icon: &'static str,
+    /// tailwind classes
+    #[prop(default = "")]
+    /// the remix icon identifier
+    class: &'static str,
+) -> impl IntoView {
+    view! { <i class=format!("{icon} {class}")></i> }
+}

utils-web/src/components/input.rs

@@ -1,5 +1 @@
-
-
-pub fn input(){
-
-}
+pub fn input() {}

utils-web/src/components/mod.rs

@@ -1,5 +1,6 @@
 pub mod button;
 pub mod card;
+pub mod icon;
 pub mod input;
 pub mod text;
 pub mod view;

utils-web/src/components/text.rs

@@ -1,5 +1 @@
-
-
-pub fn text(){
-
-}
+pub fn text() {}

utils-web/src/components/view.rs

@@ -1,5 +1 @@
-
-
-pub fn view(){
-
-}
+pub fn view() {}

utils-web/src/layouts/default.rs

@@ -0,0 +1,13 @@
+use crate::partials::footer::AppFooter;
+use crate::partials::nav::AppNavigation;
+use leptos::{component, view, Children, IntoView};
+
+/// the default application layout, with footer, viewbox, and navigation
+#[component]
+pub fn Layout(children: Children, class: &'static str) -> impl IntoView {
+    view! {
+        <AppNavigation/>
+        <main class="container my-8">{children()}</main>
+        <AppFooter/>
+    }
+}

utils-web/src/layouts/mod.rs

@@ -0,0 +1 @@
+pub mod default;

utils-web/src/main.rs

@@ -1,6 +1,8 @@
 mod app;
 mod components;
+mod layouts;
 mod pages;
+mod partials;
 
 use app::*;
 use leptos::*;

utils-web/src/pages/home.rs

@@ -1,21 +1,45 @@
+use crate::components::button::Button;
+use crate::components::icon::Icon;
+use crate::layouts::default::Layout;
 use leptos::{component, view, IntoView};
 
 #[component]
 pub fn Home() -> impl IntoView {
     view! {
-        <div class="container bg-red">
-            <header>
-                <div>
-                    <h1 class="text-5xl text-center">Everything that goes here goes here</h1>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo consectetur facilis, dicta, in magni incidunt esse neque, iste rem libero omnis asperiores earum? Eligendi magnam, ratione harum saepe fugiat similique?
-                    </p>
-                </div>
-                <div>
-                    <img src="public/default-img.png" alt="utils web"/>
+        <Layout class="">
+            <header class="h-[60vh] sm:h-[75vh] flex flex-col item-center justify-center">
+                <h1 class="text-3xl sm:text-5xl text-center capitalize font-medium ">
+                    One Stop toolbox for every developer
+                </h1>
+                <p class="leading-2 sm:w-2/3 mx-auto mt-2 py-2 text-center">
+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo consectetur facilis, dicta, in magni incidunt esse neque, 
+                </p>
+                <div class="flex items-center w-fit gap-2 mx-auto my-4 ">
+                    <Button class="bg-[#101010] text-white w-fit flex items-center justify-center text-center">
+                        "Download"
+                        <Icon icon="ri-arrow-down-circle-fill" class="text-2xl block ml-2"/>
+                    </Button>
+                    <Button class="border-2  border-gray-500 items-center justify-center text-center  bg-gray-50 ">
+                        Read the docs
+                    </Button>
+
                 </div>
             </header>
+            <section class="sm:flex justify-between items-center sm:my-[100px]">
 
-        </div>
+                <div class="sm:w-1/2">
+                    <h2 class="font-medium text-3xl leading-3 mb-2">Some heading</h2>
+                    <p class="leading-2 my-4">
+                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus labore beatae eum sed ad natus perspiciatis. Facere molestias incidunt molestiae maxime perferendis consequatur ullam tenetur! Mollitia porro numquam voluptatibus aut?
+                    </p>
+                     <Button class="border-2  border-gray-500 items-center justify-center text-center  bg-gray-50 ">
+                    Get Started
+                </Button>
+                </div>
+               <div>
+               <img src="./placeholder.jpeg" alt="./utils-featrures"/>
+               </div>
+            </section>
+        </Layout>
     }
 }