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
-      className='flex min-h-screen items-center justify-center'
-    >
+    <main 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">
-        <p>{type === 'signIn' ? 'Sign In' : 'Sign Up'} with</p>
+      <div className="my-auto flex flex-row space-x-1">
         <Image
-          src={'/misc/auth/gibs_auth_wide_header.png'}
+          src={'/misc/auth/gibs-auth-logo.png'}
           className=""
           alt="Gib's Auth"
-          width={100}
-          height={100}
+          width={30}
+          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,84 +106,84 @@ export const ResetPasswordForm = ({ preloadedUser }: ResetFormProps) => {
   // TO DO: Make a function to get provider type from user.
   return (
     //user.provider !== 'password'
-    !user?.email
-  ) ? (
-    <div />
-  ) : (
-    <>
-      <Separator />
-      <CardHeader>
-        <CardTitle className="text-2xl">Change Password</CardTitle>
-        <CardDescription>
-          Update your password to keep your account secure
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(handleSubmit)}
-            className="space-y-6"
-          >
-            <FormField
-              control={form.control}
-              name="currentPassword"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Current Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    Enter your current password.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="newPassword"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>New Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    Enter your new password. Must be at least 8 characters.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="confirmPassword"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Confirm Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" {...field} />
-                  </FormControl>
-                  <FormDescription>
-                    Please re-enter your new password to confirm.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <div className="flex justify-center">
-              <SubmitButton
-                className="w-2/3 text-[1.0rem] lg:w-1/3"
-                disabled={loading}
-                pendingText="Updating Password..."
-              >
-                Update Password
-              </SubmitButton>
-            </div>
-          </form>
-        </Form>
-      </CardContent>
-    </>
+    !user?.email ? (
+      <div />
+    ) : (
+      <>
+        <Separator />
+        <CardHeader>
+          <CardTitle className="text-2xl">Change Password</CardTitle>
+          <CardDescription>
+            Update your password to keep your account secure
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-6"
+            >
+              <FormField
+                control={form.control}
+                name="currentPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Current Password</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Enter your current password.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>New Password</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Enter your new password. Must be at least 8 characters.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input type="password" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Please re-enter your new password to confirm.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex justify-center">
+                <SubmitButton
+                  className="w-2/3 text-[1.0rem] lg:w-1/3"
+                  disabled={loading}
+                  pendingText="Updating Password..."
+                >
+                  Update Password
+                </SubmitButton>
+              </div>
+            </form>
+          </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 }) => {