Index page

sycamore-rs · Oct 15, 2024 · cd168aa · cd168aa
1 parent 7d6371c
commit cd168aa
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/src/layout.rs b/src/layout.rs
@@ -5,16 +5,16 @@ fn Header() -> View {
     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-10") {
+                div(class="flex flex-row justify-between items-center h-12") {
                     a(href="/") {
                         img(src="/logo.svg", alt="Sycamore Logo", class="h-10 w-10")
                     }
                     div(class="flex flex-row space-x-4") {
                         a(href="https://github.com/sycamore-rs/sycamore") {
-                            i(class="bi bi-github text-3xl hover:text-gray-600", aria-label="GitHub")
+                            i(class="bi bi-github text-2xl hover:text-gray-600", aria-label="GitHub")
                         }
                         a(href="https://discord.gg/vDwFUmm6mU") {
-                            i(class="bi bi-discord text-3xl hover:text-gray-600", aria-label="Discord")
+                            i(class="bi bi-discord text-2xl hover:text-gray-600", aria-label="Discord")
                         }
                     }
                 }
@@ -40,7 +40,7 @@ pub fn Layout(children: Children) -> View {
     view! {
         div(class="flex flex-col min-h-screen") {
             Header {}
-            main(class="mt-10 flex-grow") {
+            main(class="mt-12 mb-10 flex-grow") {
                 (children)
             }
             Footer {}

diff --git a/src/pages/index.rs b/src/pages/index.rs
@@ -3,6 +3,48 @@ use sycamore::prelude::*;
 #[component]
 pub fn Index() -> View {
     view! {
-        h1 { "Sycamore" }
+        div(class="flex flex-col container mx-auto") {
+            div(class="mt-20 flex flex-col md:flex-row gap-10 items-center justify-between") {
+                div {
+                    h1(class="text-5xl pb-5 font-bold") {
+                        "Reactive Apps with"
+                        br {}
+                        "Effortless Performance."
+                    }
+                    p(class="text-2xl") {
+                        "Sycamore is a next generation Rust UI library."
+                    }
+
+                    div(class="flex flex-row flex-wrap gap-4 font-semibold mt-10") {
+                        a(class="block px-5 py-1.5 w-40 text-center bg-orange-400 rounded-full hover:bg-orange-500 transition-colors", href="/book") {
+                            "Read the Book"
+                        }
+                        a(class="block px-5 py-1.5 w-40 text-center text-white bg-gray-800 rounded-full hover:bg-gray-900 transition-colors", href="https://discord.gg/vDwFUmm6mU") {
+                            "Join the Discord"
+                        }
+                    }
+                }
+                // Code example
+                div(class="flex-grow w-full md:w-auto") {
+                    pre(class="bg-gray-800 rounded-lg mx-auto p-5 text-white w-full md:max-w-[550px]") {
+                        code {
+                            r#"use sycamore::prelude::*;
+
+#[component]
+fn Counter(initial: i32) -> View {
+    let mut value = create_signal(initial);
+
+    view! {
+        button(on:click=move |_| value += 1) {
+            "Count: " (value)
+        }
+    }
+}
+                                "#
+                        }
+                    }
+                }
+            }
+        }
     }
 }