Update landing page with claude

apps/next/src/components/layout/header/controls/AvatarDropdown.tsx

@@ -1,8 +1,14 @@
 'use client';
+
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { useConvexAuth, useQuery } from 'convex/react';
+
+import { api } from '@gib/backend/convex/_generated/api.js';
 import {
   BasedAvatar,
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -10,9 +16,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@gib/ui';
-import { useConvexAuth, useQuery } from 'convex/react';
-import { useAuthActions } from '@convex-dev/auth/react';
-import { api } from '@gib/backend/convex/_generated/api.js';
 
 export const AvatarDropdown = () => {
   const router = useRouter();
@@ -21,12 +24,30 @@ export const AvatarDropdown = () => {
   const user = useQuery(api.auth.getUser, {});
   const currentImageUrl = useQuery(
     api.files.getImageUrl,
-    user?.image ? { storageId: user.image } : 'skip',
+    user?.image ? { storageId: user.image as any } : 'skip',
   );
 
-  if (isLoading)
-    return <BasedAvatar className='animate-pulse lg:h-10 lg:w-10' />;
-  if (!isAuthenticated) return <div />;
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="bg-muted h-8 w-16 animate-pulse rounded-md" />
+        <div className="bg-muted h-9 w-9 animate-pulse rounded-full" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/sign-in">Sign In</Link>
+        </Button>
+        <Button size="sm" asChild>
+          <Link href="/sign-in">Get Started</Link>
+        </Button>
+      </div>
+    );
+  }
 
   return (
     <DropdownMenu>
@@ -34,37 +55,34 @@ export const AvatarDropdown = () => {
         <BasedAvatar
           src={currentImageUrl}
           fullName={user?.name}
-          className='lg:h-10 lg:w-10'
-          fallbackProps={{ className: 'text-xl font-semibold' }}
-          userIconProps={{ size: 32 }}
+          className="h-9 w-9"
+          fallbackProps={{ className: 'text-sm font-semibold' }}
+          userIconProps={{ size: 20 }}
         />
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent align="end">
         {(user?.name ?? user?.email) && (
           <>
-            <DropdownMenuLabel className='font-bold text-center'>
+            <DropdownMenuLabel className="text-center font-bold">
               {user.name?.trim() ?? user.email?.trim()}
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
           </>
         )}
         <DropdownMenuItem asChild>
-          <Link
-            href='/profile'
-            className='w-full justify-center cursor-pointer'
-          >
+          <Link href="/profile" className="w-full cursor-pointer">
             Edit Profile
           </Link>
         </DropdownMenuItem>
-        <DropdownMenuSeparator className='h-[2px]' />
+        <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
           <button
             onClick={() =>
               void signOut().then(() => {
-                router.push('/signin');
+                router.push('/');
               })
             }
-            className='w-full justify-center cursor-pointer'
+            className="w-full cursor-pointer"
           >
             Sign Out
           </button>