feat: add menu drawer

Author: gary-van-woerkens

public/illustrations/Insurance.png

@@ -13,16 +13,18 @@
     flex
     flex-1
     gap-y-3
-    /* flex-col */
     text-base
-    bg-no-repeat
     to-pink-200
+    antialiased
+    bg-no-repeat
     from-sky-400
     overflow-hidden
     ;
 
+    font-family: var(--font-source-sans-pro);
+
     background-size: 50rem 35rem, auto;
-    background-position: calc(100vw - 30rem) calc(100vh - 30rem), 0 0;
+    background-position: calc(100vw - 30rem) calc(100vh - 27rem), 0 0;
     background-image: url(/clouds.webp), linear-gradient(to bottom right, var(--tw-gradient-stops));
   }
 
@@ -37,8 +39,11 @@
     ;
   }
 
-  h1 {
+  /* h1 {
     @apply container mx-auto px-12 text-xl text-sky-600;
+  } */
+  h2 {
+    @apply text-3xl;
   }
 
   button, button[type="submit"] {
@@ -50,15 +55,17 @@
     text-sm
     rounded
     relative
+    text-white
+    bg-pink-400
     items-center
+    font-semibold
     justify-center
     transition-all
+    /* text-stone-100 */
     focus:shadow-lg
     active:enabled:shadow
     hover:enabled:shadow-lg
     focus-visible:outline-none
-    bg-pink-400
-    text-stone-100
     hover:bg-pink-500
     active:bg-pink-300
     disabled:bg-pink-300
@@ -171,7 +178,7 @@
   .messages {
     @apply
     flex
-    px-6
+    px-14
     pt-6
     gap-6
     pb-12
@@ -196,11 +203,11 @@
     ;
   }
 
-  .message.user {
+  .message.assistant {
     @apply mr-48 bg-blue-100;
   }
 
-  .message.assistant {
+  .message.user {
     @apply ml-48 bg-green-100;
   }
 
@@ -220,13 +227,45 @@
     @apply absolute h-full shadow z-20 bg-white p-3 flex flex-col gap-6;
   } */
 
-  .menu {
-    @apply bg-white p-3 flex flex-col gap-6;
-  }
   /* .menu {
-    @apply p-3 flex flex-col gap-6 bg-black bg-opacity-10;
+    @apply p-3 flex flex-col gap-6;
   } */
 
+  .menu-toggle {
+    @apply absolute z-20 top-6 left-6 w-auto
+    focus:shadow-none
+    active:enabled:shadow-none
+    hover:enabled:shadow-none;
+  }
+
+  .menu-toggle svg {
+    @apply text-white;
+  }
+
+  .menu {
+    @apply
+    p-6
+    z-30
+    w-72
+    flex
+    fixed
+    top-0
+    gap-6
+    left-0
+    h-full
+    flex-col
+    /* bg-black */
+    bg-white
+    transform
+    /* bg-opacity-50 */
+    translate-x-0
+    transition-transform;
+  }
+
+  .menu.collapsed {
+    @apply -translate-x-full;
+  }
+
   .controls {
     @apply flex gap-3;
   }
@@ -239,6 +278,10 @@
     @apply flex items-center gap-2;
   }
 
+  .threads li a {
+    @apply truncate;
+  }
+
   .threads li a, .threads li svg {
     @apply text-slate-800;
     /* @apply text-white; */
@@ -248,6 +291,79 @@
     @apply text-pink-500;
   }
 
+  .home {
+    @apply flex-1 flex flex-col items-center justify-center;
+  }
+
+  .home h1 {
+    @apply text-9xl text-sky-900 mb-12;
+    text-shadow: 0px 1px 1px white;
+    font-family: var(--font-dancing-script);
+  }
+
+  /* .themes {
+    @apply flex flex-1 px-12;
+  } */
+
+  .themes {
+    /* @apply flex flex-wrap flex-1 items-start content-center justify-center mx-12; */
+    /* @apply flex flex-wrap flex-1 bg-blue-100 items-start; */
+  }
+
+  .themes a[href] {
+    @apply no-underline;
+  }
+
+  .themes .tile {
+    @apply
+    m-6
+    py-3
+    pr-6
+    pl-1
+    /* pl-40 */
+    rounded
+    text-lg
+    bg-white
+    shadow-lg
+    text-slate-800
+    hover:shadow-xl
+    ;
+
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    background-position: 1rem center;
+  }
+
+  .themes .tile.retirement {
+    background-image: url(/illustrations/calculator.png);
+  }
+
+  .themes .tile.insurance {
+    background-image: url(/illustrations/insurance.png);
+  }
+
+  .themes .tile.train {
+    background-image: url(/illustrations/train.png);
+  }
+
+  .themes .tile.education {
+    background-image: url(/illustrations/education.png);
+  }
+
+  .themes .tile.court {
+    background-image: url(/illustrations/court.png);
+  }
+
+  .themes .tile h2 {
+    @apply mb-3;
+    font-weight: 600;
+  }
+
+  .themes .tile .text {
+    @apply ml-32 my-3;
+  }
+
   footer {
     @apply
     px-7

public/illustrations/calculator.png

@@ -30,6 +30,20 @@ const sourceSans = localFont({
   ],
 })
 
+const dancingScript = localFont({
+  preload: true,
+  display: "swap",
+  fallback: ["serif"],
+  variable: "--font-dancing-script",
+  src: [
+    {
+      weight: "400",
+      style: "normal",
+      path: "../fonts/DancingScript-Regular.ttf",
+    },
+  ],
+})
+
 const sourceCode = localFont({
   weight: "400",
   preload: true,
@@ -40,17 +54,21 @@ const sourceCode = localFont({
   src: "../fonts/SourceCodePro-Regular.ttf",
 })
 
-const Layout = ({ children }: { children: React.ReactNode }) => (
-  <html lang="en" className={`${sourceSans.variable} ${sourceCode.variable}`}>
-    <head />
-    <body>
-      <ThreadsProvider>
-        <Menu />
-        {children}
-        {/* <Footer /> */}
-      </ThreadsProvider>
-    </body>
-  </html>
-)
-
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html
+      lang="en"
+      className={`${sourceSans.variable} ${sourceCode.variable} ${dancingScript.variable}`}
+    >
+      <head />
+      <body>
+        <ThreadsProvider>
+          <Menu />
+          {children}
+          {/* <Footer /> */}
+        </ThreadsProvider>
+      </body>
+    </html>
+  )
+}
 export default Layout

public/illustrations/court.png

@@ -1,16 +1,21 @@
-import Form from "@/components/form"
+// import Form from "@/components/form"
 import Footer from "@/components/footer"
-import Messages from "@/components/messages"
-import { ChatProvider } from "@/hooks/use-chat"
+import Themes from "@/components/themes"
+// import Messages from "@/components/messages"
+// import { ChatProvider } from "@/hooks/use-chat"
 
-export default function Page({ params: { id } }: { params: { id: string } }) {
+export default function Page() {
   return (
     <main>
-      <ChatProvider threadId={id}>
-        <Messages />
-        <Form />
-        <Footer />
-      </ChatProvider>
+      {/* <ChatProvider threadId={id}> */}
+      {/* <Messages />
+        <Form /> */}
+      <div className="home">
+        <h1>LegIA</h1>
+        <Themes />
+      </div>
+      <Footer />
+      {/* </ChatProvider> */}
     </main>
   )
 }