Implement Fluid Emerald app redesign

resources/js/layouts/auth/AuthCardLayout.vue

@@ -9,41 +9,65 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import { home } from '@/routes/index';
+import type { AuthLayoutProps } from '@/types';
 
-defineProps<{
-    title?: string;
-    description?: string;
-}>();
+defineProps<AuthLayoutProps>();
 </script>
 
 <template>
     <div
-        class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10"
+        class="bg-background relative flex min-h-svh flex-col items-center justify-center overflow-hidden p-5 sm:p-8"
     >
-        <div class="flex w-full max-w-md flex-col gap-6">
+        <div
+            class="pointer-events-none absolute inset-0 overflow-hidden"
+            aria-hidden="true"
+        >
+            <div
+                class="bg-primary/12 absolute -left-24 -top-24 size-80 rounded-full blur-3xl"
+            />
+            <div
+                class="bg-secondary/55 absolute -bottom-36 -right-20 size-[28rem] rounded-full blur-3xl"
+            />
+            <div
+                class="absolute inset-0 bg-[linear-gradient(to_right,var(--outline-variant)_1px,transparent_1px),linear-gradient(to_bottom,var(--outline-variant)_1px,transparent_1px)] bg-[size:48px_48px] opacity-[0.08]"
+            />
+        </div>
+
+        <div class="relative flex w-full max-w-[28rem] flex-col gap-7">
             <Link
                 :href="home()"
-                class="flex items-center gap-2 self-center font-medium"
+                class="group flex items-center gap-3 self-center font-semibold"
             >
-                <div class="flex h-9 w-9 items-center justify-center">
-                    <AppLogoIcon
-                        class="size-9 fill-current text-black dark:text-white"
-                    />
+                <div
+                    class="bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg shadow-[0_10px_28px_rgba(34,197,94,0.22)] transition-transform group-hover:-translate-y-0.5"
+                >
+                    <AppLogoIcon class="size-5 fill-current" />
                 </div>
+                <span class="text-lg tracking-tight">KanbanGit</span>
             </Link>
 
-            <div class="flex flex-col gap-6">
-                <Card class="rounded-xl">
-                    <CardHeader class="px-10 pb-0 pt-8 text-center">
-                        <CardTitle class="text-xl">{{ title }}</CardTitle>
+            <div class="flex flex-col gap-4">
+                <Card
+                    class="border-outline-variant/80 rounded-xl py-0 shadow-[0_24px_70px_rgba(10,20,35,0.12)] hover:shadow-[0_24px_70px_rgba(10,20,35,0.12)]"
+                >
+                    <CardHeader
+                        class="px-6 pb-0 pt-7 text-center sm:px-9 sm:pt-9"
+                    >
+                        <CardTitle
+                            class="text-2xl font-semibold tracking-[-0.025em]"
+                            >{{ title }}</CardTitle
+                        >
                         <CardDescription>
                             {{ description }}
                         </CardDescription>
                     </CardHeader>
-                    <CardContent class="px-10 py-8">
+                    <CardContent class="px-6 pb-7 pt-7 sm:px-9 sm:pb-9">
                         <slot />
                     </CardContent>
                 </Card>
+                <p class="text-muted-foreground text-center text-xs">
+                    Open source project management, hosted on your terms.
+                </p>
             </div>
         </div>
     </div>