增加首页。

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 (

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%));
+  }
+}

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>
+  );
+}