Implement Fluid Emerald app redesign

resources/js/pages/projects/Index.vue

@@ -29,13 +29,13 @@ const breadcrumbs: BreadcrumbItem[] = [
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Projects" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
                 <Heading
                     title="Projects"
-                    description="Create and browse project spaces that will later host boards, backlog, and settings."
+                    description="Browse project spaces with their own board, backlog, workflow, repositories, and access."
                 />
 
                 <Button
@@ -49,17 +49,11 @@ const breadcrumbs: BreadcrumbItem[] = [
                 </Button>
             </div>
 
-            <div
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
+            <div v-if="status" class="status-success">
                 {{ status }}
             </div>
 
-            <div
-                v-if="projects.length === 0"
-                class="text-muted-foreground rounded-xl border border-dashed px-6 py-10 text-center text-sm"
-            >
+            <div v-if="projects.length === 0" class="empty-state">
                 No projects exist yet. Create the first one to start building
                 out board, backlog, and settings areas.
             </div>
@@ -71,10 +65,8 @@ const breadcrumbs: BreadcrumbItem[] = [
                     :href="show(project.id)"
                     class="group block"
                 >
-                    <Card
-                        class="border-border/80 group-hover:border-primary/40 h-full transition-colors"
-                    >
-                        <CardHeader class="gap-3">
+                    <Card class="group-hover:border-primary/40 h-full py-0">
+                        <CardHeader class="gap-3 p-5">
                             <div class="flex items-start justify-between gap-3">
                                 <div class="space-y-1">
                                     <CardTitle>{{ project.name }}</CardTitle>
@@ -90,7 +82,7 @@ const breadcrumbs: BreadcrumbItem[] = [
                         </CardHeader>
 
                         <CardContent
-                            class="text-muted-foreground flex items-center gap-2 text-sm"
+                            class="border-outline-variant/60 text-muted-foreground flex items-center gap-2 border-t px-5 py-4 text-sm"
                         >
                             <Folder class="size-4" />
                             Open board, backlog, and settings hub