Update landing page with claude

apps/next/src/components/layout/auth/profile/sign-out.tsx

@@ -1,22 +1,53 @@
 'use client';
 
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuthActions } from '@convex-dev/auth/react';
+import { LogOut } from 'lucide-react';
 
-import { SubmitButton } from '@gib/ui';
+import {
+  Button,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@gib/ui';
 
 export const SignOutForm = () => {
   const { signOut } = useAuthActions();
   const router = useRouter();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleSignOut = async () => {
+    setIsSigningOut(true);
+    try {
+      await signOut();
+      router.push('/');
+    } catch (error) {
+      console.error('Sign out error:', error);
+      setIsSigningOut(false);
+    }
+  };
 
   return (
-    <div className="flex justify-center">
-      <SubmitButton
-        className="w-5/6 cursor-pointer text-[1.0rem] font-semibold hover:bg-red-700/60 lg:w-2/3 dark:hover:bg-red-300/80"
-        onClick={() => void signOut().then(() => router.push('/sign-in'))}
-      >
-        Sign Out
-      </SubmitButton>
-    </div>
+    <>
+      <CardHeader>
+        <CardTitle>Sign Out</CardTitle>
+        <CardDescription>
+          End your current session and return to the home page
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button
+          variant="destructive"
+          className="w-full"
+          onClick={handleSignOut}
+          disabled={isSigningOut}
+        >
+          <LogOut className="mr-2 h-4 w-4" />
+          {isSigningOut ? 'Signing Out...' : 'Sign Out'}
+        </Button>
+      </CardContent>
+    </>
   );
 };