From 86dc65ab8a20dd265578f81a2db6a64b8d148326 Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Thu, 3 Jul 2025 01:57:44 +0800
Subject: [PATCH] feat(frontend) little update that proves the repo is still
 alive

---
 frontend/app/page.tsx | 73 +++++++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 15ab87c..5ed5fe7 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -10,40 +10,51 @@ export default function Home() {
 
     const isMobile = useScreenSizeTrigger('lg');
 
-    // const [ test, setTest, removeTest ] = useLocalStorage('test', 'test_value');
-    // console.log(test);
-    // setTest('test value 2');
-    // console.log(test);
-    // removeTest();
-    // console.log(test);
-
     return (
-        <div className={ `h-dvh relative` }>
-            <ul className={ `flex flex-col space-y-2 w-full` }>
-                {
-                    entries.map((meta, key) => (
-                        <li key={ key }>
-                            <Button
-                                as={ Link }
-                                variant={ `light` }
-                                color={ `default` }
-                                fullWidth
-                                isIconOnly={ isMobile }
-                                className={ 'flex lg:justify-start w-fit lg:w-full' }
-                                aria-label={ `navbar: ${ meta.display_name }` }
-                                href={ meta.href }
-                            >
-                                { meta.icon }
-                                <p className={ `font-bold hidden lg:block` }>{ meta.display_name }</p>
-                            </Button>
-                        </li>
-                    ))
-                }
-            </ul>
+        <div>
+            <div className={ `min-h-dvh h-min content-center` }>
+                <p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
+            </div>
+
             <div
-                className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
+                // className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
+                className={ 'absolute bottom-0 w-full h-60 p-12' }
             >
-                <div className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur' }></div>
+                <div
+                    className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
+
+                    <div className={ 'w-full flex justify-between' }>
+                        <div className={ 'p-16' }>
+                            test
+                        </div>
+
+                        <div className={ 'w-0.5 h-full bg-neutral-400' }></div>
+                    </div>
+
+                    <div className={ 'h-full content-center p-4 pr-3' }>
+                        <ul className={ `grid grid-cols-2 w-full` }>
+                            {
+                                entries.map((meta, key) => (
+                                    <li key={ key }>
+                                        <Button
+                                            as={ Link }
+                                            variant={ `light` }
+                                            color={ `default` }
+                                            fullWidth
+                                            isIconOnly={ isMobile }
+                                            className={ 'flex lg:justify-start w-fit lg:w-full' }
+                                            aria-label={ `navbar: ${ meta.display_name }` }
+                                            href={ meta.href }
+                                        >
+                                            { meta.icon }
+                                            <p className={ `font-bold hidden lg:block` }>{ meta.display_name }</p>
+                                        </Button>
+                                    </li>
+                                ))
+                            }
+                        </ul>
+                    </div>
+                </div>
             </div>
         </div>
     );