feat: add website assets (#12)

assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/components/common/logo.rs

@@ -5,7 +5,7 @@ pub fn Logo() -> Element {
     rsx! {
         div { class: "flex items-center",
             img {
-                src: "./logo.jpg",
+                src: "./logo.webp",
                 alt: "AI Book Logo",
                 class: "w-24 h-24 object-contain"
             }

src/components/dashboard/analytics.rs

@@ -1,12 +1,36 @@
+use crate::server::auth::controller::about_me;
 use crate::server::book::controller::fetch_analytics_data;
 use crate::server::book::response::AnalyticsData;
 use dioxus::prelude::*;
+use gloo_storage::SessionStorage;
+use gloo_storage::Storage;
 
 #[component]
 pub fn AnalyticsPage() -> Element {
     let mut analytics = use_signal(|| AnalyticsData::default());
+    let mut user_token = use_signal(|| "".to_string());
+    let navigator = use_navigator();
+
+    use_effect(move || {
+        spawn(async move {
+            let token: String = SessionStorage::get("jwt").unwrap_or_default();
+            if token.is_empty() {
+                navigator.push("/login");
+            } else {
+                match about_me(token.clone()).await {
+                    Ok(data) => {
+                        let _user = data.data.user;
+                        user_token.set(token.clone());
+                    }
+                    Err(_) => {
+                        navigator.push("/login");
+                    }
+                }
+            }
+        });
+    });
     let _ = use_resource(move || async move {
-        match fetch_analytics_data().await {
+        match fetch_analytics_data(user_token()).await {
             Ok(response) => {
                 analytics.set(response.data);
             }
@@ -15,31 +39,46 @@ pub fn AnalyticsPage() -> Element {
             }
         }
     });
+
     rsx! {
         div {
             class: "pb-6",
-            h1 { class: "text-3xl font-bold mb-6", "Analytics" }
+            h1 { class: "text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100", "Analytics" }
             div {
                 class: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
-                MetricCard { title: "Total Books", value: analytics().engagement.total_books.to_string() }
-                MetricCard { title: "Total Chapters", value: analytics().engagement.total_chapters.to_string() }
-                MetricCard { title: "Avg Chapters per Book", value: format!("{:.2}", analytics().engagement.avg_chapters_per_book) }
-                MetricCard { title: "Trending Topic", value: analytics().predictions.trending_genre.clone() }
-                MetricCard { title: "Projected Growth", value: format!("{:.2}%", analytics().predictions.projected_growth) }
-                MetricCard { title: "Avg Gen Time", value: format!("{:.2}s", analytics().ai_usage.avg_gen_time) }
-                MetricCard { title: "Success Rate", value: format!("{:.2}%", analytics().ai_usage.success_rate) }
+                MetricCard { title: "Total Books", value: analytics().engagement.total_books.to_string(), index: 0 }
+                MetricCard { title: "Total Chapters", value: analytics().engagement.total_chapters.to_string(), index: 1 }
+                MetricCard { title: "Avg Chapters per Book", value: format!("{:.2}", analytics().engagement.avg_chapters_per_book), index: 2 }
+                MetricCard { title: "Trending Topic", value: analytics().predictions.trending_genre.clone(), index: 3 }
+                MetricCard { title: "Projected Growth", value: format!("{:.2}%", analytics().predictions.projected_growth), index: 4 }
+                MetricCard { title: "Avg Gen Time", value: format!("{:.2}s", analytics().ai_usage.avg_gen_time), index: 5 }
+                MetricCard { title: "Success Rate", value: format!("{:.2}%", analytics().ai_usage.success_rate), index: 6 }
             }
         }
     }
 }
 
 #[component]
-fn MetricCard(title: String, value: String) -> Element {
+fn MetricCard(title: String, value: String, index: usize) -> Element {
+    let card_shades = vec![
+        "bg-gray-100 dark:bg-gray-900",
+        "bg-gray-200 dark:bg-gray-800",
+        "bg-gray-300 dark:bg-gray-700",
+    ];
+
+    let color = card_shades[index % card_shades.len()];
+
     rsx! {
         div {
-            class: "p-4 rounded-lg shadow-md",
-            h2 { class: "text-lg font-medium mb-2", "{title}" }
-            p { class: "text-2xl font-bold", "{value}" }
+            class: format!("p-6 rounded-lg shadow-lg transform transition hover:scale-105 hover:shadow-xl {}", color),
+            h2 {
+                class: "text-lg font-medium mb-2 text-gray-800 dark:text-gray-100",
+                "{title}"
+            }
+            p {
+                class: "text-2xl font-bold text-gray-900 dark:text-gray-50",
+                "{value}"
+            }
         }
     }
 }

src/components/dashboard/navbar.rs

@@ -2,8 +2,8 @@ use crate::components::spinner::Spinner;
 use crate::components::spinner::SpinnerSize;
 use crate::pages::dashboard::toggle_theme;
 use dioxus::prelude::*;
-use gloo_storage::SessionStorage;
 use gloo_storage::Storage;
+use gloo_storage::{LocalStorage, SessionStorage};
 
 #[component]
 pub fn Navbar(dark_mode: bool) -> Element {
@@ -16,6 +16,7 @@ pub fn Navbar(dark_mode: bool) -> Element {
         loading.set(false);
 
         SessionStorage::clear();
+        LocalStorage::clear();
         navigator.push("/login");
     };
 
@@ -35,7 +36,7 @@ pub fn Navbar(dark_mode: bool) -> Element {
                         class: format!("p-2 rounded-full flex items-center justify-center {}", if dark_mode { "bg-gray-700" } else { "bg-gray-200" }),
                         onclick: move |_| show_dropdown.set(!show_dropdown()),
                         img {
-                            src: "./features.png",
+                            src: "./features.webp",
                             alt: "User profile image",
                             class: "w-8 h-8 rounded-full"
                         }

src/components/features.rs

@@ -6,10 +6,13 @@ use crate::components::features::grid::Grid;
 use crate::theme::Theme;
 use crate::theme::THEME;
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_brands_icons::{FaGoogle, FaRust};
+use dioxus_free_icons::icons::fa_regular_icons::{FaChartBar, FaCompass, FaKeyboard, FaStar};
+use dioxus_free_icons::Icon;
 
 #[derive(Props, Clone, PartialEq)]
 struct Feature {
-    icon: &'static str,
+    icon: Element,
     title: &'static str,
     description: &'static str,
 }
@@ -20,32 +23,56 @@ pub fn Features() -> Element {
 
     let features = vec![
         Feature {
-            icon: "./icons/globe.svg",
+            icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaCompass,
+            }},
             title: "Language Support",
             description: "Generate content in any languages, expanding your reach globally.",
         },
         Feature {
-            icon: "./icons/ai.svg",
+            icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaGoogle,
+            }},
             title: "Powered by Google Gemini AI",
             description: "Utilize the advanced capabilities of Google Gemini models for high-quality content generation.",
         },
         Feature {
-            icon: "./icons/security.svg",
+            icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaRust,
+            }},
             title: "Built on Rust for Security",
             description: "Enjoy peace of mind with a Rust-powered frontend and backend ensuring a secure experience.",
         },
         Feature {
-            icon: "./icons/lightning.svg",
+            icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaStar,
+            }},
             title: "Real-Time Content Generation",
             description: "Get instant results with fast and responsive AI-powered content generation.",
         },
         Feature {
-            icon: "./icons/dashboard.svg",
+            icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaChartBar,
+            }},
             title: "Advanced Analytics Dashboard",
             description: "Monitor and track the performance of generated content with an in-depth analytics dashboard.",
         },
         Feature {
-            icon: "./icons/developer.svg",
+            icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaKeyboard,
+            }},
             title: "Developer-Friendly Platform",
             description: "Designed with developers in mind for easy customization and integration.",
         },
@@ -61,7 +88,7 @@ pub fn Features() -> Element {
 
                 div { class: "relative mb-12",
                     img {
-                        src: "./features.png",
+                        src: "./features.webp",
                         alt: "AIBook Icon",
                         class: "w-24 h-24 mx-auto animate-bounce"
                     }

src/components/features/grid.rs

@@ -14,7 +14,7 @@ pub fn Grid(props: FeatureGridProps) -> Element {
             class: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-10",
             for feature in &props.features {
                 FeatureItem {
-                    icon: feature.icon,
+                    icon: feature.icon.clone(),
                     title: feature.title,
                     description: feature.description,
                 }

src/components/features/item.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 
 #[derive(Props, PartialEq, Clone)]
 pub struct ItemProps {
-    icon: &'static str,
+    icon: Element,
     title: &'static str,
     description: &'static str,
 }
@@ -21,10 +21,9 @@ pub fn FeatureItem(props: ItemProps) -> Element {
                 if dark_mode == Theme::Dark { "bg-gray-800 hover:bg-gray-700" } else { "bg-white hover:bg-gray-100" },
                 "transform hover:-translate-y-1 hover:shadow-lg"
             ),
-            img {
-                src: props.icon,
-                alt: format!("{} icon", props.title),
-                class: "w-12 h-12 mb-4 transform transition-transform duration-300 hover:scale-110"
+            div {
+                class: "w-12 h-12 mb-4 transform transition-transform duration-300 hover:scale-110",
+                {props.icon}
             }
             h3 {
                 class: format!(

src/components/footer/icon.rs

@@ -1,25 +1,14 @@
 use dioxus::prelude::*;
 
 #[component]
-pub fn SocialIcon(href: &'static str) -> Element {
+pub fn SocialIcon(href: &'static str, icon: Element) -> Element {
     rsx! {
         li {
             a {
                 href: "{href}",
+                target: "_black",
                 class: "p-2 bg-gray-800 rounded-full hover:text-black transition-colors",
-                svg {
-                    class: "w-6 h-6",
-                    fill: "none",
-                    stroke: "currentColor",
-                    view_box: "0 0 24 24",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    path {
-                        stroke_linecap: "round",
-                        stroke_linejoin: "round",
-                        stroke_width: "2",
-                        d: "M5 10l7-7m0 0l7 7m-7-7v18"
-                    }
-                }
+                {icon}
             }
         }
     }

src/components/footer/links.rs

@@ -1,5 +1,7 @@
 use crate::components::footer::icon::SocialIcon;
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_brands_icons::{FaGithub, FaLinkedin, FaTwitter};
+use dioxus_free_icons::Icon;
 
 #[component]
 pub fn ContactLink(label: &'static str, href: &'static str, text: &'static str) -> Element {
@@ -42,8 +44,21 @@ pub fn SocialLinks() -> Element {
     rsx! {
         ul {
             class: "flex space-x-4",
-            SocialIcon { href: "#" },
-            SocialIcon { href: "#" },
+            SocialIcon { href: "https://www.linkedin.com/in/opensass", icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaLinkedin,
+            }} },
+            SocialIcon { href: "https://www.x.com/opensassorg", icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaTwitter,
+            }} },
+            SocialIcon { href: "https://www.github.com/opensass", icon: rsx! {Icon {
+                width: 30,
+                height: 30,
+                icon: FaGithub,
+            }} },
         }
     }
 }

src/components/footer/logo.rs

@@ -7,7 +7,7 @@ pub fn Logo() -> Element {
             class: "mb-6 lg:mb-0",
             div {
                 class: "flex items-center space-x-2 mb-4",
-                img { src: "/logo.jpg", alt: "Logo", class: "h-24" },
+                img { src: "/logo.webp", alt: "Logo", class: "h-24" },
             }
             p { class: "text-sm text-gray-400", "Your secure, Rust-powered SaaS platform for effortless content creation with Google Gemini AI." }
         }

src/components/hero.rs

@@ -37,7 +37,7 @@ pub fn Hero() -> Element {
                     class: "pt-8 max-w-3xl mx-auto text-center bg-clip-text bg-gradient-to-r from-purple-200 to-red-800 animate-glow",
                     p {
                         class: "text-lg md:text-xl text-gray-600 dark:text-gray-400",
-                        "Create blogs, articles, and social posts effortlessly with AIbook."
+                        "Create books and social posts effortlessly with AIbook."
                     }
                 }
             }

src/components/pricing.rs

@@ -62,7 +62,7 @@ pub fn Pricing() -> Element {
 
             div { class: "max-w-[1200px] mx-auto text-center",
                 img {
-                    src: "./pricing.png",
+                    src: "./pricing.webp",
                     alt: "AIBook Pricing",
                     class: "w-32 h-32 mx-auto animate-bounce transition-transform duration-300 ease-in-out hover:scale-110 hover:rotate-12"
                 }