From 7893d352391be99d5a2cff327261ff8dc05a1a3a Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 26 Aug 2024 00:14:02 +0800
Subject: [PATCH] feat(demo): update Home

---
 demo/src/pages/home.rs | 59 +++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs
index 2954d4d..d2234be 100644
--- a/demo/src/pages/home.rs
+++ b/demo/src/pages/home.rs
@@ -1,3 +1,4 @@
+use crate::components::SiteHeader;
 use leptos::prelude::*;
 use leptos_router::hooks::{use_navigate, use_query_map};
 use thaw::*;
@@ -12,31 +13,41 @@ pub fn Home() -> impl IntoView {
         navigate(&path, Default::default());
     }
     view! {
-        <Layout
-            position=LayoutPosition::Absolute
-            content_style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
-        >
-            <h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Thaw UI"</h1>
-            <p>"An easy to use leptos component library"</p>
-            <Space>
-                <Button
-                    appearance=ButtonAppearance::Primary
-                    on_click=move |_| {
-                        navigate("/components/button", Default::default());
-                    }
-                >
-                    "Read the docs"
-                </Button>
-                <Button
-                    appearance=ButtonAppearance::Subtle
-                    on_click=move |_| {
-                        _ = window().open_with_url("http://github.com/thaw-ui/thaw");
-                    }
-                >
+        <Layout position=LayoutPosition::Absolute>
+            <SiteHeader/>
+            <Layout
+                position=LayoutPosition::Absolute
+                attr:style="top: 64px"
+            >
+                <div style="width: 1100px; margin: calc(50vh - 200px) auto 0; display: flex">
+                    <div style="width: 50%">
+                        <h2 style="line-height: 64px; font-size: 56px; margin: 0 0 18px">"Thaw UI"</h2>
+                        <p style="line-height: 36px; font-size: 24px">"An easy to use leptos component library"</p>
+                        <Space>
+                            <Button
+                                appearance=ButtonAppearance::Primary
+                                on_click=move |_| {
+                                    navigate("/components/button", Default::default());
+                                }
+                            >
+                                "Read the docs"
+                            </Button>
+                            <Button
+                                appearance=ButtonAppearance::Subtle
+                                on_click=move |_| {
+                                    _ = window().open_with_url("http://github.com/thaw-ui/thaw");
+                                }
+                            >
 
-                    "Github"
-                </Button>
-            </Space>
+                                "Github"
+                            </Button>
+                        </Space>
+                    </div>
+                    <div style="width: 50%; text-align: center">
+                        <img src="/logo.svg" style="width: 200px"/>
+                    </div>
+                </div>
+            </Layout>
         </Layout>
     }
 }