feat(ui) construction banner

frontend/app/layout.tsx

@@ -21,6 +21,9 @@ export default function RootLayout({
         <html lang="en" suppressHydrationWarning>
         <body className={ `transition duration-300 dark:bg-[#282830] min-h-screen` }>
         <NextThemesProvider attribute="class" defaultTheme="system">
+            <div className={ 'fixed top-0 w-full h-15 bg-yellow-600 z-50' }>
+                <p className={ 'font-bold text-2xl text-center' }>*System Under Construction*</p>
+            </div>
             { children }
         </NextThemesProvider>
         </body>

frontend/app/page.tsx

@@ -8,18 +8,31 @@ import Link from 'next/link';
 
 export default function Home() {
 
-    const isMobile = useScreenSizeTrigger('lg');
+    const isMobile = useScreenSizeTrigger('sm');
-
-    // 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` }>
+        <div>
-            <ul className={ `flex flex-col space-y-2 w-full` }>
+            <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 p-12' }
+            >
+                <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 }>
@@ -34,16 +47,14 @@ export default function Home() {
                                             href={ meta.href }
                                         >
                                             { meta.icon }
-                                <p className={ `font-bold hidden lg:block` }>{ meta.display_name }</p>
+                                            <p className={ `font-bold hidden sm:block` }>{ meta.display_name }</p>
                                         </Button>
                                     </li>
                                 ))
                             }
                         </ul>
-            <div
+                    </div>
-                className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
+                </div>
-            >
-                <div className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur' }></div>
             </div>
         </div>
     );