feat: onboarding done

front/src/app/globals.css

@@ -15,13 +15,15 @@ body {
   min-height: 100svh;
   margin: 0 auto;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 @media (min-width: 391px) {
   body {
-    margin: 20px auto;
+    margin: 2rem auto;
     border-radius: 20px;
-    min-height: calc(100svh - 40px);
+    min-height: calc(100svh - 4rem);
     overflow: hidden;
   }
 }
@@ -33,10 +35,4 @@ body {
   to {
     transform: rotate(360deg);
   }
-}
-
-.spinner {
-  width: 120;
-  height: 120;
-  animation: spin 1s linear infinite;
-}
+}

front/src/app/layout.tsx

@@ -10,12 +10,14 @@ import { MeProvider } from "@/providers/MeProvider";
 import { TransactionProvider } from "@/providers/TransactionProvider";
 
 export const metadata = {
-  title: "HocusPocus XYZ",
+  title: "Smart Wallet",
+  description: "Passkeys X ERC-4337",
 };
 
 const css = {
   padding: "1rem",
-  minHeight: "calc(100svh - 2rem)",
+  flexGrow: 1,
+  flexBasis: "100%",
   display: "flex",
 };
 
@@ -29,7 +31,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               <SmartWalletProvider>
                 <WalletConnectProvider>
                   <ThemeProvider attribute="class">
-                    <Theme style={css} radius={"full"} accentColor={"red"}>
+                    <Theme style={css} radius={"full"} accentColor={"teal"}>
                       <ModalProvider>{children}</ModalProvider>
                     </Theme>
                   </ThemeProvider>

front/src/components/BaseLogo/index.tsx

@@ -0,0 +1,15 @@
+type Props = {
+  style?: React.CSSProperties;
+};
+
+export default function BaseLogo({ style }: Props) {
+  return (
+    <svg style={style} viewBox="0 0 416 111" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M110.034 55.017C110.034 85.402 85.359 110.034 54.921 110.034C26.0432 110.034 2.35281 87.8625 0 59.6416H72.8467V50.3923H0C2.35281 22.1714 26.0432 0 54.921 0C85.359 0 110.034 24.6319 110.034 55.017ZM314.358 100.066C333.455 100.066 345.98 89.7739 345.98 74.2731C345.98 59.8883 336.555 53.068 322.295 50.7119L309.646 48.6037C299.974 46.9917 293.525 42.7754 293.525 33.4749C293.525 24.0505 300.718 16.8581 314.358 16.8581C327.627 16.8581 334.447 23.5544 335.191 33.1029H344.74C343.996 20.4543 334.323 9.16968 314.482 9.16968C294.889 9.16968 284.101 20.2062 284.101 33.847C284.101 48.3557 293.897 55.0521 307.29 57.2842L320.063 59.2683C330.727 61.1284 336.679 65.4686 336.679 74.6451C336.679 85.4337 327.875 92.378 314.482 92.378C300.594 92.378 291.913 85.6817 291.169 74.2731H281.745C282.489 89.1539 293.897 100.066 314.358 100.066ZM173.574 98.3303H138.852V11.0298H172.334C187.091 11.0298 197.383 19.7102 197.383 33.599C197.383 43.6435 191.679 50.3398 182.503 52.5719V52.944C193.415 55.0521 200.111 62.4925 200.111 74.1491C200.111 89.1539 189.075 98.3303 173.574 98.3303ZM171.094 49.3478C181.635 49.3478 188.083 43.6435 188.083 34.715V33.4749C188.083 24.5465 181.635 18.9662 171.094 18.9662H148.153V49.3478H171.094ZM172.21 90.3939C183.743 90.3939 190.811 84.0696 190.811 74.3971V73.157C190.811 63.1125 183.619 57.0362 172.086 57.0362H148.153V90.3939H172.21ZM275.216 98.3303H265.295L257.855 74.6451H223.133L215.693 98.3303H206.268L234.914 11.0298H246.198L275.216 98.3303ZM240.99 20.5783H240.246L225.613 66.8327H255.499L240.99 20.5783ZM359.949 98.3303V11.0298H416V19.0902H369.25V49.0998H412.28V57.0362H369.25V90.2699H416V98.3303H359.949Z"
+      />
+    </svg>
+  );
+}

front/src/components/HomePage/index.tsx

@@ -2,15 +2,38 @@
 
 import OnBoarding from "@/components/OnBoarding";
 import { useMe } from "@/providers/MeProvider";
-import { Button, Flex } from "@radix-ui/themes";
+import { Button, Flex, Heading, Kbd, Link } from "@radix-ui/themes";
 import Balance from "../Balance";
 import NavBar from "../NavBar";
 import History from "../History";
 import { Text } from "@radix-ui/themes";
 import Address from "@/components/Address";
+import styled from "@emotion/styled";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+
+const Container = styled(Flex)`
+  position: relative;
+  width: 100%;
+  gap: 2rem;
+  background-color: "red";
+`;
+
+const Hero = styled(Flex)`
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+const Title = styled(Heading)`
+  text-align: center;
+`;
 
 export default function Home() {
-  const { me, disconnect } = useMe();
+  const { me, disconnect, isMounted } = useMe();
+
+  if (!isMounted) return null;
 
   if (me) {
     return (