Changes before I try out opencode for landing page.

apps/next/src/app/layout.tsx

@@ -7,8 +7,8 @@ import { ConvexClientProvider } from '@/components/providers';
 import { generateMetadata } from '@/lib/metadata';
 import { ConvexAuthNextjsServerProvider } from '@convex-dev/auth/nextjs/server';
 import PlausibleProvider from 'next-plausible';
-
 import { ThemeProvider, Toaster } from '@gib/ui';
+import Header from '@/components/layout/header';
 
 export const metadata: Metadata = generateMetadata();
 
@@ -50,6 +50,7 @@ const RootLayout = ({
               disableTransitionOnChange
             >
               <ConvexClientProvider>
+                <Header />
                 {children}
                 <Toaster />
               </ConvexClientProvider>

apps/next/src/app/page.tsx

@@ -2,9 +2,7 @@
 
 const Home = async () => {
   return (
-    <main
+    <main className="flex min-h-screen items-center justify-center">
-      className='flex min-h-screen items-center justify-center'
-    >
       Hello!
     </main>
   );

apps/next/src/components/layout/auth/buttons/gibs-auth.tsx

@@ -26,15 +26,15 @@ export const GibsAuthSignInButton = ({
       className="text-lg font-semibold"
       {...buttonProps}
     >
-      <div className="my-auto flex flex-col space-x-1">
+      <div className="my-auto flex flex-row space-x-1">
-        <p>{type === 'signIn' ? 'Sign In' : 'Sign Up'} with</p>
         <Image
-          src={'/misc/auth/gibs_auth_wide_header.png'}
+          src={'/misc/auth/gibs-auth-logo.png'}
           className=""
           alt="Gib's Auth"
-          width={100}
+          width={30}
-          height={100}
+          height={30}
         />
+        <p>{type === 'signIn' ? 'Sign In' : 'Sign Up'} with Gib&apos;s Auth</p>
       </div>
     </Button>
   );

apps/next/src/components/layout/auth/profile/reset-password.tsx

@@ -106,8 +106,7 @@ export const ResetPasswordForm = ({ preloadedUser }: ResetFormProps) => {
   // TO DO: Make a function to get provider type from user.
   return (
     //user.provider !== 'password'
-    !user?.email
+    !user?.email ? (
-  ) ? (
       <div />
     ) : (
       <>
@@ -185,5 +184,6 @@ export const ResetPasswordForm = ({ preloadedUser }: ResetFormProps) => {
           </Form>
         </CardContent>
       </>
+    )
   );
 };

apps/next/src/components/layout/header/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { cn } from '@gib/ui';
+import type { ComponentProps } from 'react';
+//import { Controls } from './controls';
+
+export default function Header(headerProps: ComponentProps<'header'>) {
+  return (
+    <header
+      className='w-full px-4 md:px-6 lg:px-20 my-8'
+      {...headerProps}
+    >
+      <div className='flex items-center justify-between'>
+        <div className='flex flex-1 justify-start'/>
+        <div className='shrink-0'>
+          <Link
+            href='/'
+            scroll={false}
+            className='flex flex-row items-center justify-center px-4'
+          >
+            <Image
+              src='/favicon.ico'
+              alt='Convex Monorepo Logo'
+              width={100}
+              height={100}
+              className='w-10 md:w-[120px]'
+            />
+            <h1
+              className='title-text text-base md:text-4xl lg:text-8xl
+              bg-linear-to-r from-[#281A65] via-[#363354] to-accent-foreground
+              dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]
+              font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
+            >
+              Convex Monorepo
+            </h1>
+          </Link>
+
+        </div>
+
+        <div className='flex-1 flex justfiy-end'>
+
+        </div>
+      </div>
+    </header>
+  );
+};
+

apps/next/src/middleware.ts

@@ -6,7 +6,7 @@ import {
 } from '@convex-dev/auth/nextjs/server';
 
 const isSignInPage = createRouteMatcher(['/sign-in']);
-const isProtectedRoute = createRouteMatcher(['/', '/profile']);
+const isProtectedRoute = createRouteMatcher(['/profile']);
 
 export default convexAuthNextjsMiddleware(
   async (request, { convexAuth }) => {

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "convex-turbo",
@@ -91,7 +92,6 @@
         "@types/node": "catalog:",
         "@types/react": "catalog:react19",
         "@types/react-dom": "catalog:react19",
-        "baseline-browser-mapping": "^2.9.14",
         "eslint": "catalog:",
         "prettier": "catalog:",
         "tailwindcss": "catalog:",

tools/eslint/base.ts

@@ -55,12 +55,12 @@ export const baseConfig = defineConfig(
     rules: {
       ...turboPlugin.configs.recommended.rules,
       '@typescript-eslint/no-unused-vars': [
-        'error',
+        'warn',
         { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
       ],
       '@typescript-eslint/consistent-type-imports': [
         'warn',
-        { prefer: 'type-imports', fixStyle: 'separate-type-imports' },
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
       ],
       '@typescript-eslint/no-misused-promises': [
         2,

tools/tailwind/.cache/.prettiercache

@@ -1 +1 @@
-[["1","2","3","4","5","6"],{"key":"7","value":"8"},{"key":"9","value":"10"},{"key":"11","value":"12"},{"key":"13","value":"14"},{"key":"15","value":"16"},{"key":"17","value":"18"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/package.json",{"size":851,"mtime":1766222924000,"hash":"19","data":"20"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/postcss-config.js",{"size":70,"mtime":1768155639000,"hash":"21","data":"22"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/eslint.config.ts",{"size":143,"mtime":1768155639000,"hash":"23","data":"24"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/theme.css",{"size":6741,"mtime":1766222924000,"hash":"25","data":"26"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/tsconfig.json",{"size":94,"mtime":1766222924000,"hash":"27","data":"28"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/.cache/.prettiercache",{"size":1160,"mtime":1768171236844,"hash":"29"},"0d22e47f57739db9de04c6f8420d6fb5",{"hashOfOptions":"30"},"9a944fbda06979be39571bd9bd00b0d9",{"hashOfOptions":"31"},"b8fec960cb32340eea62ca1485093e68",{"hashOfOptions":"32"},"5dd421d25d104c47e1ab36df41ed0f7d",{"hashOfOptions":"33"},"b3c77d33a30318d89c9c2cafcbe00bbe",{"hashOfOptions":"34"},"e96b5ac7b7aca2012f7ddbe4daef9e4c","1821576240","2434669165","2442413358","1994519264","1135731447"]
+[["1","2","3","4","5","6"],{"key":"7","value":"8"},{"key":"9","value":"10"},{"key":"11","value":"12"},{"key":"13","value":"14"},{"key":"15","value":"16"},{"key":"17","value":"18"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/.cache/.prettiercache",{"size":1160,"mtime":1768155639602},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/package.json",{"size":851,"mtime":1766222924000,"hash":"19","data":"20"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/tsconfig.json",{"size":94,"mtime":1766222924000,"hash":"21","data":"22"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/eslint.config.ts",{"size":143,"mtime":1768155639344,"hash":"23","data":"24"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/theme.css",{"size":7273,"mtime":1768320378203,"hash":"25","data":"26"},"/home/gib/Documents/Code/convex-monorepo/tools/tailwind/postcss-config.js",{"size":70,"mtime":1768155639454,"hash":"27","data":"28"},"0d22e47f57739db9de04c6f8420d6fb5",{"hashOfOptions":"29"},"b3c77d33a30318d89c9c2cafcbe00bbe",{"hashOfOptions":"30"},"b8fec960cb32340eea62ca1485093e68",{"hashOfOptions":"31"},"5dd421d25d104c47e1ab36df41ed0f7d",{"hashOfOptions":"32"},"9a944fbda06979be39571bd9bd00b0d9",{"hashOfOptions":"33"},"2330637293","1661020794","1348931563","2703662435","1371209456"]

tools/tailwind/theme.css

@@ -1,100 +1,128 @@
 :root {
-  --background: oklch(0.9875 0.0045 314.8053);
+  --background: oklch(1 0 0);
-  --foreground: oklch(0.2277 0.0105 312.0161);
+  --foreground: oklch(0.2178 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.2277 0.0105 312.0161);
+  --card-foreground: oklch(0.2178 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.2277 0.0105 312.0161);
+  --popover-foreground: oklch(0.2178 0 0);
-  --primary: oklch(0.5605 0.1911 350.0331);
+  --primary: oklch(0.4962 0.1431 24.425);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.967 0.0106 316.4921);
+  --secondary: oklch(1 0 0);
-  --secondary-foreground: oklch(0.4536 0.0226 309.5036);
+  --secondary-foreground: oklch(0.5091 0.1037 77.9544);
-  --muted: oklch(0.967 0.0106 316.4921);
+  --muted: oklch(1 0 0);
-  --muted-foreground: oklch(0.5653 0.021 306.4429);
+  --muted-foreground: oklch(0.4733 0.0095 73.6526);
-  --accent: oklch(0.967 0.0106 316.4921);
+  --accent: oklch(0.9904 0.0107 95.1597);
-  --accent-foreground: oklch(0.5605 0.1911 350.0331);
+  --accent-foreground: oklch(0.4207 0.1299 25.7118);
-  --destructive: oklch(0.6368 0.2078 25.3313);
+  --destructive: oklch(0.4698 0.1588 26.5277);
   --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9419 0.016 310.0997);
+  --border: oklch(0.9888 0.0045 78.2984);
-  --input: oklch(1 0 0);
+  --input: oklch(0.9888 0.0045 78.2984);
-  --ring: oklch(0.5605 0.1911 350.0331);
+  --ring: oklch(0.4962 0.1431 24.425);
-  --chart-1: oklch(0.5605 0.1911 350.0331);
+  --chart-1: oklch(0.5345 0.1896 27.2949);
-  --chart-2: oklch(0.6747 0.1492 345.9482);
+  --chart-2: oklch(0.4962 0.1431 24.425);
-  --chart-3: oklch(0.7729 0.1045 344.4709);
+  --chart-3: oklch(0.4207 0.1299 25.7118);
-  --chart-4: oklch(0.8625 0.0636 341.4088);
+  --chart-4: oklch(0.5879 0.1441 52.0651);
-  --chart-5: oklch(0.9411 0.0261 343.2843);
+  --chart-5: oklch(0.5007 0.1219 48.7222);
-  --sidebar: oklch(0.967 0.0106 316.4921);
+  --sidebar: oklch(1 0 0);
-  --sidebar-foreground: oklch(0.4536 0.0226 309.5036);
+  --sidebar-foreground: oklch(0.2178 0 0);
-  --sidebar-primary: oklch(0.5605 0.1911 350.0331);
+  --sidebar-primary: oklch(0.4962 0.1431 24.425);
   --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9419 0.016 310.0997);
+  --sidebar-accent: oklch(0.9904 0.0107 95.1597);
-  --sidebar-accent-foreground: oklch(0.5605 0.1911 350.0331);
+  --sidebar-accent-foreground: oklch(0.4207 0.1299 25.7118);
-  --sidebar-border: oklch(0.9155 0.0235 310.6964);
+  --sidebar-border: oklch(0.9888 0.0045 78.2984);
-  --sidebar-ring: oklch(0.5605 0.1911 350.0331);
+  --sidebar-ring: oklch(0.4962 0.1431 24.425);
+  --font-sans: Poppins, sans-serif;
+  --font-serif: Libre Baskerville, serif;
+  --font-mono: Victor Mono, ui-monospace, monospace;
   --radius: 0.75rem;
-  --shadow-2xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-x: 1px;
-  --shadow-xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-y: 1px;
+  --shadow-blur: 16px;
+  --shadow-spread: -2px;
+  --shadow-opacity: 0.25;
+  --shadow-color: #4f1716;
+  --shadow-2xs: 1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.13);
+  --shadow-xs: 1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.13);
   --shadow-sm:
-    0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+    1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.25),
+    1px 1px 2px -3px hsl(1.0526 56.4356% 19.8039% / 0.25);
   --shadow:
-    0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+    1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.25),
+    1px 1px 2px -3px hsl(1.0526 56.4356% 19.8039% / 0.25);
   --shadow-md:
-    0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
+    1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.25),
+    1px 2px 4px -3px hsl(1.0526 56.4356% 19.8039% / 0.25);
   --shadow-lg:
-    0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
+    1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.25),
+    1px 4px 6px -3px hsl(1.0526 56.4356% 19.8039% / 0.25);
   --shadow-xl:
-    0px 2px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
+    1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.25),
-  --shadow-2xl: 0px 2px 10px 0px hsl(0 0% 0% / 0.13);
+    1px 8px 10px -3px hsl(1.0526 56.4356% 19.8039% / 0.25);
-  --tracking-normal: 0rem;
+  --shadow-2xl: 1px 1px 16px -2px hsl(1.0526 56.4356% 19.8039% / 0.63);
+  --tracking-normal: 0em;
   --spacing: 0.25rem;
 
   @variant dark {
-    --background: oklch(0.1836 0.0111 311.9111);
+    --background: oklch(0.2291 0.006 56.0708);
-    --foreground: oklch(0.9788 0.0057 308.3962);
+    --foreground: oklch(1 0 0);
-    --card: oklch(0.1836 0.0111 311.9111);
+    --card: oklch(0.2849 0.0062 34.2972);
-    --card-foreground: oklch(0.9788 0.0057 308.3962);
+    --card-foreground: oklch(1 0 0);
-    --popover: oklch(0.1836 0.0111 311.9111);
+    --popover: oklch(0.2849 0.0062 34.2972);
-    --popover-foreground: oklch(0.9788 0.0057 308.3962);
+    --popover-foreground: oklch(1 0 0);
-    --primary: oklch(0.6747 0.1492 345.9482);
+    --primary: oklch(0.5487 0.1583 42.935);
-    --primary-foreground: oklch(0.1836 0.0111 311.9111);
+    --primary-foreground: oklch(1 0 0);
-    --secondary: oklch(0.2551 0.0142 310.7968);
+    --secondary: oklch(0.5007 0.1219 48.7222);
-    --secondary-foreground: oklch(0.721 0.0184 308.1777);
+    --secondary-foreground: oklch(0.9904 0.0107 95.1597);
-    --muted: oklch(0.2551 0.0142 310.7968);
+    --muted: oklch(0.2419 0.006 56.0946);
-    --muted-foreground: oklch(0.6288 0.0177 309.9946);
+    --muted-foreground: oklch(0.9323 0.0026 48.7175);
-    --accent: oklch(0.2551 0.0142 310.7968);
+    --accent: oklch(0.5879 0.1441 52.0651);
-    --accent-foreground: oklch(0.6747 0.1492 345.9482);
+    --accent-foreground: oklch(0.9904 0.0107 95.1597);
-    --destructive: oklch(0.3958 0.1331 25.723);
+    --destructive: oklch(0.6794 0.1595 23.146);
     --destructive-foreground: oklch(1 0 0);
-    --border: oklch(0.2941 0.0175 310.1142);
+    --border: oklch(0.3992 0.0092 80.6881);
-    --input: oklch(0.2551 0.0142 310.7968);
+    --input: oklch(0.3992 0.0092 80.6881);
-    --ring: oklch(0.6747 0.1492 345.9482);
+    --ring: oklch(0.5487 0.1583 42.935);
-    --chart-1: oklch(0.6747 0.1492 345.9482);
+    --chart-1: oklch(0.7783 0.1096 20.5454);
-    --chart-2: oklch(0.5605 0.1911 350.0331);
+    --chart-2: oklch(0.6794 0.1595 23.146);
-    --chart-3: oklch(0.4988 0.1668 350);
+    --chart-3: oklch(0.6002 0.181 25.4561);
-    --chart-4: oklch(0.4373 0.1428 349.7487);
+    --chart-4: oklch(0.8435 0.146 88.9511);
-    --chart-5: oklch(0.3738 0.1177 349.3988);
+    --chart-5: oklch(0.7766 0.1493 77.051);
-    --sidebar: oklch(0.2103 0.0107 311.9806);
+    --sidebar: oklch(0.2291 0.006 56.0708);
-    --sidebar-foreground: oklch(0.721 0.0184 308.1777);
+    --sidebar-foreground: oklch(1 0 0);
-    --sidebar-primary: oklch(0.6747 0.1492 345.9482);
+    --sidebar-primary: oklch(0.5345 0.1896 27.2949);
-    --sidebar-primary-foreground: oklch(0.1836 0.0111 311.9111);
+    --sidebar-primary-foreground: oklch(1 0 0);
-    --sidebar-accent: oklch(0.2551 0.0142 310.7968);
+    --sidebar-accent: oklch(0.5879 0.1441 52.0651);
-    --sidebar-accent-foreground: oklch(0.6747 0.1492 345.9482);
+    --sidebar-accent-foreground: oklch(0.9904 0.0107 95.1597);
-    --sidebar-border: oklch(0.2941 0.0175 310.1142);
+    --sidebar-border: oklch(0.3992 0.0092 80.6881);
-    --sidebar-ring: oklch(0.6747 0.1492 345.9482);
+    --sidebar-ring: oklch(0.5345 0.1896 27.2949);
+    --font-sans: Poppins, sans-serif;
+    --font-serif: Libre Baskerville, serif;
+    --font-mono: Victor Mono, ui-monospace, monospace;
     --radius: 0.75rem;
-    --shadow-2xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.1);
+    --shadow-x: 1px;
-    --shadow-xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.1);
+    --shadow-y: 1px;
+    --shadow-blur: 16px;
+    --shadow-spread: -2px;
+    --shadow-opacity: 0.25;
+    --shadow-color: oklch(0.266 0.079 36.259);
+    --shadow-2xs: 1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.13);
+    --shadow-xs: 1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.13);
     --shadow-sm:
-      0px 2px 10px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+      1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.25),
+      1px 1px 2px -3px hsl(12.8833 84.8059% 14.417% / 0.25);
     --shadow:
-      0px 2px 10px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+      1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.25),
+      1px 1px 2px -3px hsl(12.8833 84.8059% 14.417% / 0.25);
     --shadow-md:
-      0px 2px 10px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+      1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.25),
+      1px 2px 4px -3px hsl(12.8833 84.8059% 14.417% / 0.25);
     --shadow-lg:
-      0px 2px 10px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+      1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.25),
+      1px 4px 6px -3px hsl(12.8833 84.8059% 14.417% / 0.25);
     --shadow-xl:
-      0px 2px 10px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+      1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.25),
-    --shadow-2xl: 0px 2px 10px 0px hsl(0 0% 0% / 0.5);
+      1px 8px 10px -3px hsl(12.8833 84.8059% 14.417% / 0.25);
+    --shadow-2xl: 1px 1px 16px -2px hsl(12.8833 84.8059% 14.417% / 0.63);
   }
 }
 
@@ -132,8 +160,9 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -148,11 +177,4 @@
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
-
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-  --tracking-normal: var(--tracking-normal);
-  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
 }