Feature cards

sycamore-rs · Oct 16, 2024 · ba38d19 · ba38d19
1 parent 3572ded
commit ba38d19
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 8 deletions.
diff --git a/src/layout.rs b/src/layout.rs
@@ -6,7 +6,7 @@ fn Header() -> View {
         header(class="fixed top-0 z-50 w-full border-b-2 border-gray-200 bg-gray-100") {
             nav(class="px-4") {
                 div(class="flex flex-row justify-between items-center h-12") {
-                    a(class="flex flex-row items-center hover:underline", href="/") {
+                    a(class="flex flex-row items-center hover:underline font-semibold", href="/") {
                         img(src="/logo.svg", alt="Sycamore Logo", class="h-10 w-10 mr-2")
                         "Sycamore"
                     }
@@ -41,7 +41,7 @@ pub fn Layout(children: Children) -> View {
     view! {
         div(class="flex flex-col min-h-screen") {
             Header {}
-            main(class="mt-12 mb-10 flex-grow") {
+            main(class="mt-12 pb-10 flex-grow bg-gray-50") {
                 (children)
             }
             Footer {}

diff --git a/src/pages/index.rs b/src/pages/index.rs
@@ -4,15 +4,15 @@ use sycamore::prelude::*;
 pub fn Index() -> View {
     view! {
         div(class="flex flex-col container mx-2 md:mx-auto") {
-            div(class="mt-20 flex flex-col md:flex-row gap-10 items-center justify-between") {
+            div(class="mt-10 md:mt-20 flex flex-col md:flex-row gap-10 items-center justify-between") {
                 div(class="max-w-[530px]") {
                     h1(class="text-5xl pb-5 font-bold bg-gradient-to-br from-orange-800 from-20% to-orange-800 to-80% via-orange-950 text-transparent bg-clip-text") {
                         "Reactive Apps with"
                         br {}
                         "Effortless Performance."
                     }
                     p(class="text-2xl") {
-                        "Sycamore is a next generation Rust UI library powered by fine-grained reactivity."
+                        span(class="font-bold text-orange-900") { "Sycamore" } " is a next generation Rust UI library powered by fine-grained reactivity."
                     }
 
                     div(class="flex flex-row flex-wrap gap-4 font-semibold mt-10") {
@@ -30,7 +30,7 @@ pub fn Index() -> View {
                 }
                 // Code example
                 div(class="flex-grow w-full md:w-auto") {
-                    pre(class="bg-gray-800 rounded-lg mx-auto text-white text-xs sm:text-sm md:text-base overflow-x-hidden w-full md:max-w-[550px] language-rust") {
+                    pre(class="bg-gray-800 rounded-lg mx-auto text-white text-xs sm:text-sm md:text-base overflow-x-hidden w-full md:max-w-[550px] shadow-lg language-rust") {
                         code(class="language-rust") {
                             r#"use sycamore::prelude::*;
 
@@ -50,14 +50,91 @@ fn Counter(initial: i32) -> View {
             }
 
             // Feature descriptions
-            h2(class="text-4xl font-bold mt-20") {
-                "Features"
+            div {
+                h2(class="text-4xl text-center font-bold mt-20 mb-5") {
+                    "Features"
+                }
+                div(class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4") {
+                    FeatureCard(
+                        icon="rocket-takeoff-fill",
+                        title="Effortless Performance",
+                    ) {
+                        p {
+                            "Sycamore is built on top of "
+                            a(href="https://www.rust-lang.org", class="underline") { "Rust" } " and "
+                            a(href="https://webassembly.org/", class="underline") { "WebAssembly" }
+                            ", giving you full control over performance."
+                        }
+                    }
+                    FeatureCard(
+                        icon="arrow-left-right",
+                        title="Fine-Grained Reactivity",
+                    ) {
+                        p {
+                            "Sycamore's reactivity system is fine-grained, meaning that only the parts of your app that need to be updated will be."
+                        }
+                    }
+                    FeatureCard(
+                        icon="body-text",
+                        title="Type-checked UI",
+                    ) {
+                        p {
+                            "Whether you use our custom DSL or the builder API, Sycamore type-checks your code to catch errors at compile-time."
+                        }
+                    }
+                    FeatureCard(
+                        icon="database-fill",
+                        title="Server Side Rendering (SSR)",
+                    ) {
+                        p {
+                            "Sycamore supports Server Side Rendering out of the box. If you don't need it, however, SPA mode works just as well."
+                        }
+                    }
+                    FeatureCard(
+                        icon="arrow-clockwise",
+                        title="Async and Suspense"
+                    ) {
+                        p {
+                            "Easily load and display asynchronous data using the resources and suspense API with first-class async/await support."
+                        }
+                    }
+                    FeatureCard(
+                        icon="grid-3x3",
+                        title="Built-in Routing",
+                    ) {
+                        p {
+                            "Sycamore comes with a built-in router that supports both client-side navigation and server side rendering."
+                        }
+                    }
+                }
             }
 
             // News
-            h2(class="text-4xl font-bold mt-20") {
+            h2(class="text-4xl text-center font-bold mt-20") {
                 "News"
             }
         }
     }
 }
+
+#[component(inline_props)]
+fn FeatureIcon(icon: &'static str) -> View {
+    view! {
+        div(class="h-12 w-12 bg-orange-400 text-white text-2xl rounded-lg flex items-center justify-center mx-auto mb-3") {
+            i(class=format!("bi bi-{icon}"))
+        }
+    }
+}
+
+#[component(inline_props)]
+fn FeatureCard(icon: &'static str, title: &'static str, children: Children) -> View {
+    view! {
+        div(class="hover:shadow-lg hover:bg-white rounded-lg py-4 px-5 transition mx-auto max-w-[500px]") {
+            FeatureIcon(icon=icon)
+            h3(class="text-xl font-semibold text-center") {
+                (title)
+            }
+            (children)
+        }
+    }
+}