From bf888c8c5208872f2c04d663257edc5429f155fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 25 Dec 2024 10:21:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A6=96=E9=A1=B5=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx               |  5 ++++-
 src/pages/Home.module.css | 17 +++++++++++++++++
 src/pages/Home.tsx        |  9 +++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Home.module.css
 create mode 100644 src/pages/Home.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c09df27..a466f14 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,11 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { Notifications } from './components/Notifications';
+import { Home } from './pages/Home';
 import { MainLayout } from './pages/MainLayout';
 
-const routes = createBrowserRouter([{ path: '/', element: <MainLayout /> }]);
+const routes = createBrowserRouter([
+  { path: '/', element: <MainLayout />, children: [{ index: true, element: <Home /> }] },
+]);
 
 export function App() {
   return (
diff --git a/src/pages/Home.module.css b/src/pages/Home.module.css
new file mode 100644
index 0000000..77ccdf7
--- /dev/null
+++ b/src/pages/Home.module.css
@@ -0,0 +1,17 @@
+@layer pages {
+  .home_layout {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 48);
+  }
+  .sologon {
+    font-size: calc(var(--font-size) * 6);
+    font-style: italic;
+    filter: drop-shadow(0 0 calc(var(--spacing) * 4) oklch(from var(--color-yudubai) l c h / 50%));
+  }
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..19b62d9
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,9 @@
+import styles from './Home.module.css';
+
+export function Home() {
+  return (
+    <div className={styles.home_layout}>
+      <div className={styles.sologon}>Color your UI design</div>
+    </div>
+  );
+}