Merge pull request #67 from opeolluwa/master

sync forks
opeolluwa · May 15, 2024 · b13e8b4 · b13e8b4
2 parents 590f247 + aed196b
commit b13e8b4
Show file tree

Hide file tree

Showing 36 changed files with 392 additions and 325 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/utils-web/.DS_Store b/utils-web/.DS_Store
diff --git a/utils-web/index.html b/utils-web/index.html
@@ -9,117 +9,32 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
         rel="stylesheet">
-    <link rel="stylesheet" href="./style/tailwind.css">
+    <link rel="stylesheet" href="./style/output.css">
     <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" />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <style>
-        .open-sans-300 {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 300;
-            font-style: normal;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-400 {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 400;
-            font-style: normal;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-600 {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 600;
-            font-style: normal;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-
-        .open-sans-700 {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 700;
-            font-style: normal;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-800 {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 800;
-            font-style: normal;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-300-italic {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 300;
-            font-style: italic;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-400-italic {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 400;
-            font-style: italic;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-
-        .open-sans-600-italic {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 600;
-            font-style: italic;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-700-italic {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 700;
-            font-style: italic;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
-        .open-sans-800-italic {
-            font-family: "Open Sans", sans-serif;
-            font-optical-sizing: auto;
-            font-weight: 800;
-            font-style: italic;
-            font-variation-settings:
-                "wdth" 100;
-        }
-
         body {
             font-family: "Open Sans", sans-serif;
             font-optical-sizing: auto;
             font-weight: 400;
             font-style: normal;
             font-variation-settings:
                 "wdth" 100;
+            background-color: #000 !important;
+            color: #fff;
         }
     </style>
 </head>
 
 <body>
 
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
 </body>
 
 </html>
diff --git a/utils-web/public/.DS_Store b/utils-web/public/.DS_Store
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-1.png b/utils-web/public/illlustrations/drawkit-transport-scene-1.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-10.png b/utils-web/public/illlustrations/drawkit-transport-scene-10.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-11.png b/utils-web/public/illlustrations/drawkit-transport-scene-11.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-12.png b/utils-web/public/illlustrations/drawkit-transport-scene-12.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-2.png b/utils-web/public/illlustrations/drawkit-transport-scene-2.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-3.png b/utils-web/public/illlustrations/drawkit-transport-scene-3.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-4.png b/utils-web/public/illlustrations/drawkit-transport-scene-4.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-5.png b/utils-web/public/illlustrations/drawkit-transport-scene-5.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-6.png b/utils-web/public/illlustrations/drawkit-transport-scene-6.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-7.png b/utils-web/public/illlustrations/drawkit-transport-scene-7.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-8.png b/utils-web/public/illlustrations/drawkit-transport-scene-8.png
diff --git a/utils-web/public/illlustrations/drawkit-transport-scene-9.png b/utils-web/public/illlustrations/drawkit-transport-scene-9.png
diff --git a/utils-web/public/snapshot.png b/utils-web/public/snapshot.png
diff --git a/utils-web/snapshot.png b/utils-web/snapshot.png
diff --git a/utils-web/src/app.rs b/utils-web/src/app.rs
@@ -1,6 +1,9 @@
-use crate::pages::authorize::{Login, MultiFactorAuth, ResetAccount, SecurityQuestion};
+use crate::pages::authorize::{MultiFactorAuth, ResetAccount, SecurityQuestion};
 use crate::pages::dashboard::Dashboard;
 use crate::pages::home::Home;
+use crate::pages::login::Login;
+use crate::pages::mfa::MultiFactorAuthorization;
+use crate::pages::docs::Docs;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
@@ -19,8 +22,9 @@ pub fn App() -> impl IntoView {
                 <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="/mfa" view=move || view! { <MultiFactorAuthorization/> }/>
                 <Route path="/dashboard" view=move || view! { <Dashboard/> }/>
+                <Route path="/docs" view=move || view! { <Docs/> }/>
 
             </Routes>
         </Router>

diff --git a/utils-web/src/components/card.rs b/utils-web/src/components/card.rs
@@ -1 +1,13 @@
-pub fn card() {}
+use leptos::{component, view, Children, IntoView};
+
+/// the app card component
+#[component]
+pub fn Card(
+    /// additional tailwind or custom css classes
+    #[prop(default = "")]
+    class: &'static str,
+    /// the element that goes into the button
+    children: Children,
+) -> impl IntoView {
+    view! { <div class=format!("px-4 py-2 rounded {class}")>{children()}</div> }
+}
diff --git a/utils-web/src/components/icon.rs b/utils-web/src/components/icon.rs
@@ -11,5 +11,5 @@ pub fn Icon(
     /// the remix icon identifier
     class: &'static str,
 ) -> impl IntoView {
-    view! { <i class=format!("{icon} {class}")></i> }
+    view! { <i class=format!("ri-{icon} {class}")></i> }
 }
diff --git a/utils-web/src/components/logo.rs b/utils-web/src/components/logo.rs
@@ -0,0 +1,13 @@
+use leptos::{component, view, IntoView};
+
+#[component]
+pub fn Logo() -> impl IntoView {
+    view! {
+        <div class="mb-6 md:mb-0">
+            <a href="/" class="flex items-center">
+
+                <span class="self-center text-2xl font-semibold whitespace-nowrap">Utils</span>
+            </a>
+        </div>
+    }
+}
diff --git a/utils-web/src/components/mod.rs b/utils-web/src/components/mod.rs
@@ -2,5 +2,6 @@ pub mod button;
 pub mod card;
 pub mod icon;
 pub mod input;
+pub mod logo;
 pub mod text;
 pub mod view;
diff --git a/utils-web/src/layouts/dashboard.rs b/utils-web/src/layouts/dashboard.rs
diff --git a/utils-web/src/layouts/default.rs b/utils-web/src/layouts/default.rs
@@ -4,7 +4,13 @@ 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 {
+pub fn Layout(
+    /// elements injected into the DOM node
+    children: Children,
+    /// tailwind/css classes
+    #[prop(default = "")]
+    class: &'static str,
+) -> impl IntoView {
     view! {
         <AppNavigation/>
         <main class="container my-8">{children()}</main>

diff --git a/utils-web/src/pages/authorize.rs b/utils-web/src/pages/authorize.rs
@@ -5,11 +5,6 @@ pub fn SecurityQuestion() -> impl IntoView {
     view! { <div>Security Question</div> }
 }
 
-#[component]
-pub fn Login() -> impl IntoView {
-    view! { <div>Login</div> }
-}
-
 #[component]
 pub fn MultiFactorAuth() -> impl IntoView {
     view! { <div>MultiFactorAuth</div> }

diff --git a/utils-web/src/pages/docs.rs b/utils-web/src/pages/docs.rs
@@ -0,0 +1,22 @@
+use crate::components::button::Button;
+use crate::components::card::Card;
+use crate::components::icon::Icon;
+use crate::layouts::default::Layout;
+use leptos::{component, view, IntoView};
+use serde::{Deserialize, Serialize};
+
+#[component]
+pub fn Docs() -> impl IntoView {
+    view! {
+        <Layout>
+            <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, aspernatur. Maiores accusantium iusto consectetur, eveniet iste maxime placeat minima odit voluptas alias corrupti, tempore temporibus, molestiae ab aliquid neque sunt!
+            </div>
+
+            <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus libero porro aut, accusantium consequatur ab est quisquam, voluptas ad sint temporibus reiciendis non quia, minima sequi excepturi officia omnis praesentium?
+            </div>
+
+        </Layout>
+    }
+}
diff --git a/utils-web/src/pages/home.rs b/utils-web/src/pages/home.rs
@@ -1,44 +1,112 @@
 use crate::components::button::Button;
+use crate::components::card::Card;
 use crate::components::icon::Icon;
 use crate::layouts::default::Layout;
 use leptos::{component, view, IntoView};
+use serde::{Deserialize, Serialize};
 
+/// the application features section
+#[derive(Serialize, Deserialize, Debug, Default)]
+struct Feature {
+    /// the heading
+    title: &'static str,
+    /// feature icon
+    icon: &'static str,
+    /// the featuresb text
+    text: &'static str,
+}
+/// call the rom methods to create the feature
+impl Feature {
+    pub fn from(icon: &'static str, title: &'static str, text: &'static str) -> Self {
+        Self { title, icon, text }
+    }
+}
+
+// https://dribbble.com/shots/21248762-Crox-Encryption-Solutions-for-Developers
 #[component]
 pub fn Home() -> impl IntoView {
+    let features: Vec<Feature> = vec![
+        Feature::from(
+            "database-2-line",
+            "Persistence",
+            "Distributed storage for important information",
+        ),
+        Feature::from(
+            "train-line",
+            "file generator",
+            "Ships with configurabele project files generator",
+        ),
+        Feature::from(
+            "lock-password-fill",
+            "secure",
+            "Built with only memory-safe and fault tollerant APIs",
+        ),
+        Feature::from(
+            "flashlight-line",
+            "fast",
+            "Built from ground up with Rust and Web assembly for speed",
+        ),
+    ];
     view! {
-        <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>
+        <Layout class="text-white">
+            <header class="h-[60vh] sm:h-[75vh] sm:flex py-20  text-center sm:text-left gap-8 items-center justify-center">
+                <div>
+                    <h1 class="text-3xl sm:text-5xl  capitalize font-bold ">
+                        Enhance your developer experience with Utils
+                    // Super Charge your developer Journey with utils !
+                    </h1>
+                    <p class="leading-1  my-4 py-2 text-gray-500 text-xl ">
+                        Transform your developer experience with a comprehensive suite of Utilities designed to streamline workflows, boost productivity, and elevate the quality of your projects.
+                    </p>
+                    <div class="flex  gap-2 mx-auto my-4 ">
+                        <Button class="bg-violet-800 text-white w-fit flex items-center justify-center text-center rounded-full px-4 ">
+                            "Download"
+                            <Icon icon="arrow-down-circle-fill" class="text-2xl block ml-2"/>
+                        </Button>
+                        <Button class=" items-center justify-center text-center ">
+                            Read the docs
+                        </Button>
+                    </div>
 
                 </div>
+                <div class="shadow-inner shadow-violet-600 rounded-xl hidden sm:block">
+                    <img
+                        src="https://ik.imagekit.io/nethbooks/cdn/Screenshot%202024-05-15%20at%2009.47.41_tZQ7Yh4mj.png?updatedAt=1715763698464"
+                        alt=""
+                    />
+                </div>
             </header>
-            <section class="sm:flex justify-between items-center sm:my-[100px]">
+            <section class="flex flex-col justify-between items-center">
+
+                <h2 class="font-extrabold text-center capitalize text-3xl sm:text-5xl leading-1 mb-2 bg-gradient-to-r from-violet-800 to-[#FCB900]  via-red-500 from-25% inline-block text-transparent bg-clip-text">
+                    // data-aos="fade-up"
+                    // data-aos-offset="200"
+                    // data-aos-delay="50"
+                    // data-aos-duration="1000"
+                    // data-aos-easing="ease-in-out"
+                    // data-aos-mirror="true"
+                    Powerful features to enhance your developer exprience
+                </h2>
+                <p class="text-gray-400 text-xl mt-2 mb-8">
+                    Utils is built by developer for  developers
+                </p>
+                <div class="flex gap-8 items-center mt-8">
+                    {features
+                        .into_iter()
+                        .map(|feature| {
+                            view! {
+                                <Card class="py-20 flex flex-col justify-start items-start gap-4 px-20 rounded w-1/4 bg-[#101010] cursor-pointer">
+                                    <Icon icon=feature.icon class="text-4xl"/>
+                                    <h2 class="text-2xl capitalize font-medium">{feature.title}</h2>
+                                    <p class="text-gray-500 leading-1 my-1 text-xl :first-letter:capitalize">
+                                        {feature.text}
+                                    </p>
+                                </Card>
+                            }
+                        })
+                        .collect::<Vec<_>>()}
 
-                <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>
     }