updated ui

.firebase/hosting.ZGlzdA.cache

@@ -1,6 +1,6 @@
 gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
-vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
-index.html,1722222914381,805fa7a060ef8a493b4c81a9e8d91840a4c4fc16684b2fca0a372f0ca083d625
-assets/index-DxCExS9O.css,1722222914378,4377a6ea049c9170993134850382f72a085bb4ebc7903f9f87562ed5cb967db2
 leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
-assets/index-Bv-Xh_8w.js,1722222914456,b2a0a072f0214724ee39a631cf1bcbd2cde41c074d29c28253031ff4c742ce3f
+vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
+index.html,1722224461474,145a371360fae7a63d91ef3de808533529c75c6ec85e34ebe9e50bf67e29778a
+assets/index-DxCExS9O.css,1722224461368,4377a6ea049c9170993134850382f72a085bb4ebc7903f9f87562ed5cb967db2
+assets/index-Cj9EcH0s.js,1722224461500,e2adb872cd17812eb9d2f9d4c53dd71c45c3a80cbd2e8cf7ce190ace0f8b3a42

ComingSoon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Heading } from '@chakra-ui/react';
+
+function ComingSoon() {
+  return (
+    <Box
+      width="100vw"
+      height="100vh"
+      backgroundImage="url('public/LeetMigo_banner_main_01.png')"
+      backgroundPosition="center"
+      backgroundRepeat="no-repeat"
+      backgroundSize="cover"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="rgba(0, 0, 0, 0.7)"
+    >
+      <Heading size="2xl" color="white">
+        Feature Coming Soon!
+      </Heading>
+    </Box>
+  );
+}
+
+export default ComingSoon;

index.html

@@ -4,24 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>LeetMigo</title><!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
-    <!-- Optional theme -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-
-    <!-- Latest compiled and minified JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-
-    <!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
-<!-- Optional theme -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-
-<!-- Latest compiled and minified JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-
+    <title>LeetMigo</title>
     <style>
       body, html {
         height: 100%;
@@ -31,12 +14,12 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: #282c34; /* Replace with the actual background color you want */
+        background-color: #282c34;
         color: white;
       }
       #root {
         width: 100%;
-        min-height: 100vh; /* Minimum height to fill the full viewport height */
+        min-height: 100vh;
         display: flex;
         flex-direction: column;
       }

index.js

@@ -1,14 +1,20 @@
-import { Web5 } from '@web5/api'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import theme from './theme';
 
-const { web5, did: aliceDid } = await Web5.connect();
+const container = document.getElementById('root');
+const root = createRoot(container);
 
-  // Create the record
-  const { record } = await web5.dwn.records.create({
-    data: 'Hello Web5',
-    message: {
-      dataFormat: 'text/plain',
-    },
-  });
-
-  // Read the record
-  const readResult = await record.data.text();
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <ChakraProvider theme={theme}>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <App />
+      </ChakraProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);