refine admin cards and form headers

components/admin/portfolio-project-form.tsx

@@ -4,13 +4,18 @@ import type { PortfolioProjectViewMode, PortfolioSectionType } from "@prisma/cli
 import {
   ArrowDown,
   ArrowUp,
+  BookOpenText,
+  BriefcaseBusiness,
   CalendarDays,
   CheckCircle2,
   ChevronLeft,
   ChevronRight,
   CircleAlert,
   CircleDashed,
+  Files,
   FolderTree,
+  Grid2x2,
+  ImagePlus,
   Layers3,
   Link2,
   Plus,
@@ -23,11 +28,14 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
 
 import { MediaFieldPicker, type MediaFieldState } from "@/components/admin/media-field-picker";
+import { StatsCard } from "@/components/dashboard/stats-card";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import {
   Select,
   SelectContent,
@@ -125,10 +133,11 @@ const viewModeOptions: Array<{
   value: PortfolioProjectViewMode;
   label: string;
   description: string;
+  icon: typeof Grid2x2;
 }> = [
-  { value: "GRID", label: "Grid", description: "Balanced modular layout." },
-  { value: "STORY", label: "Story", description: "Narrative section flow." },
-  { value: "CASE_STUDY", label: "Case Study", description: "Structured challenge and result view." },
+  { value: "GRID", label: "Grid", description: "Balanced modular layout.", icon: Grid2x2 },
+  { value: "STORY", label: "Story", description: "Narrative section flow.", icon: BookOpenText },
+  { value: "CASE_STUDY", label: "Case Study", description: "Structured challenge and result view.", icon: BriefcaseBusiness },
 ];
 
 const wizardSteps: Array<{
@@ -307,21 +316,28 @@ function LocaleInputs({
 }) {
   return (
     <div className="space-y-3">
-      <p className="text-sm font-medium text-foreground">{title}</p>
       <div className="grid gap-3 xl:grid-cols-3">
         {locales.map((locale) => (
-          <AppCard key={`${title}-${locale.suffix}`} level={2} padding="sm" className="space-y-2 rounded-nested">
+          <AppCard
+            key={`${title}-${locale.suffix}`}
+            level={2}
+            layer="single"
+            padding="sm"
+            className="space-y-2 rounded-nested"
+          >
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{locale.label}</p>
             {multiline ? (
               <Textarea
                 name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
                 rows={5}
+                placeholder={`${title} ${locale.label}`}
                 value={values[locale.suffix]}
                 onChange={(event) => onChange(locale.suffix, event.target.value)}
               />
             ) : (
               <Input
                 name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
+                placeholder={`${title} ${locale.label}`}
                 value={values[locale.suffix]}
                 onChange={(event) => onChange(locale.suffix, event.target.value)}
               />
@@ -387,6 +403,89 @@ function SubmitButton() {
   );
 }
 
+function ViewModeCard({
+  active,
+  label,
+  description,
+  icon: Icon,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  description: string;
+  icon: typeof Grid2x2;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "rounded-surface border px-4 py-4 text-left transition-colors",
+        active
+          ? "border-primary bg-primary text-primary-foreground shadow-sm"
+          : "border-border/70 bg-background hover:border-input hover:bg-accent/10",
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <div
+          className={cn(
+            "flex h-10 w-10 items-center justify-center rounded-nested border transition-colors",
+            active
+              ? "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground"
+              : "border-border/70 bg-surface-2 text-muted-foreground",
+          )}
+        >
+          <Icon className="h-4 w-4" />
+        </div>
+        <div className="min-w-0">
+          <p className={cn("text-sm font-semibold", active ? "text-primary-foreground" : "text-foreground")}>
+            {label}
+          </p>
+          <p className={cn("mt-1 text-sm", active ? "text-primary-foreground/80" : "text-muted-foreground")}>
+            {description}
+          </p>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function ToggleField({
+  id,
+  name,
+  checked,
+  title,
+  description,
+  onCheckedChange,
+}: {
+  id: string;
+  name: string;
+  checked: boolean;
+  title: string;
+  description: string;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <label
+      htmlFor={id}
+      className="flex items-start justify-between gap-3 rounded-nested border border-input bg-card px-4 py-3 transition-colors hover:bg-accent/20"
+    >
+      <div>
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+      <Checkbox
+        id={id}
+        name={name}
+        checked={checked}
+        onCheckedChange={(value) => onCheckedChange(value === true)}
+        className="mt-0.5"
+      />
+    </label>
+  );
+}
+
 export function PortfolioProjectForm({
   action,
   categories,
@@ -484,7 +583,7 @@ export function PortfolioProjectForm({
 
   if (!project && availableCategories.length === 0) {
     return (
-      <AppCard level={3} padding="lg" className="rounded-surface">
+      <AppCard level={3} layer="single" padding="lg" className="rounded-surface">
         <div className="space-y-4">
           <div className="space-y-2">
             <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Portfolio Setup</p>
@@ -528,7 +627,7 @@ export function PortfolioProjectForm({
       <input ref={sectionsInputRef} type="hidden" name="sections" value={sectionsPayload} />
       <input ref={assetsInputRef} type="hidden" name="assets" value={assetsPayload} />
 
-      <AppCard level={3} padding="lg" className="sticky top-4 z-10">
+      <AppCard level={3} layer="single" padding="lg" className="space-y-6">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
             <div className="space-y-3">
@@ -548,31 +647,23 @@ export function PortfolioProjectForm({
             </div>
 
             <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Current Step</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">
-                  {wizardSteps[currentStepIndex]?.label ?? "Basics"}
-                </p>
-              </AppCard>
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Sections</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">{sections.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Assets</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">{assets.length}</p>
-              </AppCard>
-              <AppCard level={2} padding="sm" className="rounded-nested">
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Progress</p>
-                <p className="mt-2 text-sm font-semibold text-foreground">
-                  {progress.filter((step) => step.complete).length}/{progress.length} ready
-                </p>
-              </AppCard>
+              <StatsCard
+                title="Step"
+                value={wizardSteps[currentStepIndex]?.label ?? "Basics"}
+                icon={Layers3}
+              />
+              <StatsCard title="Sections" value={String(sections.length)} icon={Files} />
+              <StatsCard title="Assets" value={String(assets.length)} icon={ImagePlus} />
+              <StatsCard
+                title="Progress"
+                value={`${progress.filter((step) => step.complete).length}/${progress.length}`}
+                icon={CheckCircle2}
+              />
             </div>
           </div>
 
           {showValidation && firstIncompleteStep ? (
-            <AppCard level={2} padding="sm" className="rounded-nested border-status-warning/30">
+            <div className="rounded-nested border border-status-warning/30 bg-status-warning-soft px-4 py-3">
               <div className="flex items-start gap-3">
                 <CircleAlert className="mt-0.5 h-4 w-4 text-status-warning" />
                 <div className="space-y-1">
@@ -582,59 +673,59 @@ export function PortfolioProjectForm({
                   </p>
                 </div>
               </div>
-            </AppCard>
+            </div>
           ) : null}
         </div>
       </AppCard>
 
       <Tabs value={currentStep} onValueChange={(value) => setCurrentStep(value as PortfolioWizardStep)}>
-        <TabsList className="grid w-full gap-3 rounded-surface bg-transparent p-0 lg:grid-cols-4">
-          {wizardSteps.map((step, index) => {
-            const stepProgress = progress.find((entry) => entry.key === step.key);
-            const isActive = currentStep === step.key;
+        <div className="grid gap-6 xl:grid-cols-[300px_minmax(0,1fr)] xl:items-start">
+          <AppCard level={2} layer="single" padding="sm" className="xl:sticky xl:top-4">
+            <TabsList className="grid h-auto w-full gap-3 rounded-none bg-transparent p-0">
+              {wizardSteps.map((step, index) => {
+                const stepProgress = progress.find((entry) => entry.key === step.key);
+                const isActive = currentStep === step.key;
 
-            return (
-              <TabsTrigger
-                key={step.key}
-                value={step.key}
-                className={cn(
-                  "w-full rounded-surface border border-border/80 bg-surface-2 p-0 text-left hover:bg-accent/30",
-                  isActive && "border-input bg-accent/20 text-foreground shadow-xs",
-                )}
-              >
-                <div className="flex w-full flex-col gap-3 p-4">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="flex items-center gap-3">
-                      <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-background text-sm font-semibold text-foreground">
-                        {index + 1}
-                      </span>
-                      <div>
-                        <p className="text-sm font-semibold text-foreground">{step.label}</p>
-                        <p className="text-xs text-muted-foreground">{step.description}</p>
-                      </div>
-                    </div>
-                    {stepProgress?.complete ? (
-                      <CheckCircle2 className="h-4 w-4 text-status-success" />
-                    ) : (
-                      <CircleDashed className="h-4 w-4 text-muted-foreground" />
+                return (
+                  <TabsTrigger
+                    key={step.key}
+                    value={step.key}
+                    className={cn(
+                      "w-full rounded-nested border border-border/80 bg-background p-0 text-left hover:bg-accent/30",
+                      isActive && "border-input bg-accent/20 text-foreground shadow-xs",
                     )}
-                  </div>
-                  <div className="flex items-center justify-between gap-3">
-                    <StepStateBadge
-                      complete={Boolean(stepProgress?.complete)}
-                      active={isActive}
-                      showValidation={showValidation && !stepProgress?.complete}
-                    />
-                    <p className="text-xs text-muted-foreground">{stepProgress?.summary}</p>
-                  </div>
-                </div>
-              </TabsTrigger>
-            );
-          })}
-        </TabsList>
+                  >
+                    <div className="flex w-full flex-col gap-3 p-4">
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="flex items-center gap-3">
+                          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-surface-2 text-sm font-semibold text-foreground">
+                            {index + 1}
+                          </span>
+                          <div>
+                            <p className="text-sm font-semibold text-foreground">{step.label}</p>
+                          </div>
+                        </div>
+                        {stepProgress?.complete ? (
+                          <CheckCircle2 className="h-4 w-4 text-status-success" />
+                        ) : (
+                          <CircleDashed className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </div>
+                      <StepStateBadge
+                        complete={Boolean(stepProgress?.complete)}
+                        active={isActive}
+                        showValidation={showValidation && !stepProgress?.complete}
+                      />
+                    </div>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </AppCard>
 
-        <TabsContent value="basics">
-          <AppCard level={3} padding="lg">
+          <div className="space-y-6">
+        <TabsContent value="basics" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
             <section className="space-y-6">
               <SectionHeader
                 title="Basic Information"
@@ -643,7 +734,7 @@ export function PortfolioProjectForm({
 
               <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                 <div className="space-y-2">
-                  <Label htmlFor="categoryId">Category</Label>
+                  <Label htmlFor="categoryId" className="sr-only">Category</Label>
                   <div className="relative">
                     <FolderTree className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Select
@@ -666,12 +757,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="slug">Slug</Label>
+                  <Label htmlFor="slug" className="sr-only">Slug</Label>
                   <div className="relative">
                     <Text className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="slug"
                       name="slug"
+                      placeholder="Slug"
                       value={projectState.slug}
                       onChange={(event) =>
                         setProjectState((current) => ({ ...current, slug: event.target.value }))
@@ -682,12 +774,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="clientName">Client</Label>
+                  <Label htmlFor="clientName" className="sr-only">Client</Label>
                   <div className="relative">
                     <UserRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="clientName"
                       name="clientName"
+                      placeholder="Client"
                       value={projectState.clientName}
                       onChange={(event) =>
                         setProjectState((current) => ({ ...current, clientName: event.target.value }))
@@ -698,12 +791,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="projectYear">Year</Label>
+                  <Label htmlFor="projectYear" className="sr-only">Year</Label>
                   <div className="relative">
                     <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="projectYear"
                       name="projectYear"
+                      placeholder="Year"
                       type="number"
                       min="2000"
                       max="2100"
@@ -717,12 +811,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="previewUrl">Preview URL</Label>
+                  <Label htmlFor="previewUrl" className="sr-only">Preview URL</Label>
                   <div className="relative">
                     <Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="previewUrl"
                       name="previewUrl"
+                      placeholder="Preview URL"
                       value={projectState.previewUrl}
                       onChange={(event) =>
                         setProjectState((current) => ({ ...current, previewUrl: event.target.value }))
@@ -733,12 +828,13 @@ export function PortfolioProjectForm({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="sortOrder">Sort Order</Label>
+                  <Label htmlFor="sortOrder" className="sr-only">Sort Order</Label>
                   <div className="relative">
                     <Layers3 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                       id="sortOrder"
                       name="sortOrder"
+                      placeholder="Sort Order"
                       type="number"
                       min="0"
                       value={projectState.sortOrder}
@@ -753,59 +849,45 @@ export function PortfolioProjectForm({
 
               <div className="grid gap-3 xl:grid-cols-3">
                 {viewModeOptions.map((option) => (
-                  <button
+                  <ViewModeCard
                     key={option.value}
-                    type="button"
+                    active={projectState.viewMode === option.value}
+                    label={option.label}
+                    description={option.description}
+                    icon={option.icon}
                     onClick={() => setProjectState((current) => ({ ...current, viewMode: option.value }))}
-                    className={cn(
-                      "rounded-surface border px-4 py-4 text-left transition-colors",
-                      projectState.viewMode === option.value
-                        ? "border-input bg-accent/20"
-                        : "border-border/70 bg-background hover:border-input hover:bg-accent/10",
-                    )}
-                  >
-                    <p className="text-sm font-semibold text-foreground">{option.label}</p>
-                    <p className="mt-1 text-sm text-muted-foreground">{option.description}</p>
-                  </button>
+                  />
                 ))}
               </div>
 
               <div className="grid gap-3 md:grid-cols-2">
-                <label className="flex items-center justify-between rounded-nested border border-input bg-card px-4 py-3">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">Featured</p>
-                    <p className="text-xs text-muted-foreground">Highlight the project across the portfolio.</p>
-                  </div>
-                  <input
-                    type="checkbox"
-                    name="isFeatured"
-                    checked={projectState.isFeatured}
-                    onChange={(event) =>
-                      setProjectState((current) => ({ ...current, isFeatured: event.target.checked }))
-                    }
-                  />
-                </label>
-                <label className="flex items-center justify-between rounded-nested border border-input bg-card px-4 py-3">
-                  <div>
-                    <p className="text-sm font-medium text-foreground">Published</p>
-                    <p className="text-xs text-muted-foreground">Only published projects appear on public pages.</p>
-                  </div>
-                  <input
-                    type="checkbox"
-                    name="isPublished"
-                    checked={projectState.isPublished}
-                    onChange={(event) =>
-                      setProjectState((current) => ({ ...current, isPublished: event.target.checked }))
-                    }
-                  />
-                </label>
+                <ToggleField
+                  id="isFeatured"
+                  name="isFeatured"
+                  checked={projectState.isFeatured}
+                  title="Featured"
+                  description="Highlight the project across the portfolio."
+                  onCheckedChange={(checked) =>
+                    setProjectState((current) => ({ ...current, isFeatured: checked }))
+                  }
+                />
+                <ToggleField
+                  id="isPublished"
+                  name="isPublished"
+                  checked={projectState.isPublished}
+                  title="Published"
+                  description="Only published projects appear on public pages."
+                  onCheckedChange={(checked) =>
+                    setProjectState((current) => ({ ...current, isPublished: checked }))
+                  }
+                />
               </div>
             </section>
           </AppCard>
         </TabsContent>
 
-        <TabsContent value="content">
-          <AppCard level={3} padding="lg">
+        <TabsContent value="content" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
             <section className="space-y-6">
               <SectionHeader
                 title="Localized Content"
@@ -855,8 +937,8 @@ export function PortfolioProjectForm({
           </AppCard>
         </TabsContent>
 
-        <TabsContent value="sections">
-          <AppCard level={3} padding="lg">
+        <TabsContent value="sections" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
             <section className="space-y-6">
               <SectionHeader
                 title="Sections"
@@ -945,7 +1027,7 @@ export function PortfolioProjectForm({
 
                     <div className="grid gap-4 md:grid-cols-2">
                       <div className="space-y-2">
-                        <Label>Type</Label>
+                        <Label className="sr-only">Type</Label>
                         <Select
                           value={section.type}
                           onValueChange={(value) =>
@@ -973,8 +1055,9 @@ export function PortfolioProjectForm({
 
                       {section.type === "LINK" ? (
                         <div className="space-y-2">
-                          <Label>Link URL</Label>
+                          <Label className="sr-only">Link URL</Label>
                           <Input
+                            placeholder="Link URL"
                             value={section.linkUrl}
                             onChange={(event) =>
                               setSections((current) =>
@@ -1046,48 +1129,50 @@ export function PortfolioProjectForm({
           </AppCard>
         </TabsContent>
 
-        <TabsContent value="assets">
-          <div className="space-y-6">
-            <AppCard level={3} padding="lg">
-              <section className="space-y-6">
-                <SectionHeader
-                  title="Cover Media"
-                  description="Choose the primary cover that represents the project in listings."
-                />
+        <TabsContent value="assets" className="mt-0">
+          <AppCard level={3} layer="single" padding="lg">
+            <div className="space-y-8">
+              <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
+                <div className="space-y-6">
+                  <section className="space-y-6">
+                    <SectionHeader
+                      title="Cover Media"
+                      description="Choose the primary cover that represents the project in listings."
+                    />
 
-                <MediaFieldPicker
-                  title="Cover"
-                  value={coverMedia}
-                  onChange={setCoverMedia}
-                  options={mediaOptions}
-                  hasInitialValue={Boolean(project?.coverImagePath || project?.coverMediaAssetId)}
-                  inputName="coverMedia"
-                  fileFieldName="coverFile"
-                  allowClear
-                  clearLabel="Remove Cover"
-                  emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
-                />
-              </section>
-            </AppCard>
+                    <MediaFieldPicker
+                      title="Cover"
+                      value={coverMedia}
+                      onChange={setCoverMedia}
+                      options={mediaOptions}
+                      hasInitialValue={Boolean(project?.coverImagePath || project?.coverMediaAssetId)}
+                      inputName="coverMedia"
+                      fileFieldName="coverFile"
+                      allowClear
+                      clearLabel="Remove Cover"
+                      emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
+                    />
+                  </section>
 
-            <AppCard level={3} padding="lg">
-              <section className="space-y-6">
-                <SectionHeader
-                  title="Assets"
-                  description="Assets stay ordered and ready for localized alt text."
-                  action={(
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
-                    >
-                      <Plus className="h-4 w-4" />
-                      Add Asset
-                    </Button>
-                  )}
-                />
+                  <Separator />
 
-                <div className="space-y-4">
+                  <section className="space-y-6">
+                    <SectionHeader
+                      title="Assets"
+                      description="Assets stay ordered and ready for localized alt text."
+                      action={(
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
+                        >
+                          <Plus className="h-4 w-4" />
+                          Add Asset
+                        </Button>
+                      )}
+                    />
+
+                    <div className="grid gap-4 md:grid-cols-2">
                   {assets.map((asset, index) => (
                     <div
                       key={asset.id ?? `asset-${index}`}
@@ -1181,14 +1266,50 @@ export function PortfolioProjectForm({
                       />
                     </div>
                   ))}
+                    </div>
+                  </section>
                 </div>
-              </section>
-            </AppCard>
-          </div>
+
+                <div className="space-y-4 lg:sticky lg:top-4 lg:self-start">
+                  <AppCard level={2} layer="single" padding="sm" className="space-y-4">
+                    <div className="flex items-center gap-2">
+                      <ImagePlus className="h-4 w-4 text-brand-primary" />
+                      <p className="text-sm font-semibold text-foreground">Assets Overview</p>
+                    </div>
+
+                    <div className="grid gap-3">
+                      <StatsCard title="Cover" value={coverMedia.assetId ? "Selected" : "Missing"} icon={ImagePlus} />
+                      <StatsCard title="Assets" value={String(assets.length)} icon={Files} />
+                      <StatsCard
+                        title="Ready"
+                        value={String(
+                          assets.filter((asset) =>
+                            isPortfolioAssetReady({
+                              mediaAssetId: asset.media.assetId,
+                              altAr: asset.altAr,
+                              altEn: asset.altEn,
+                              altDe: asset.altDe,
+                            }),
+                          ).length,
+                        )}
+                        icon={CheckCircle2}
+                      />
+                    </div>
+
+                    <div className="rounded-nested border border-dashed border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
+                      Start with the cover, then add gallery assets. Each asset needs media plus localized alt text.
+                    </div>
+                  </AppCard>
+                </div>
+              </div>
+            </div>
+          </AppCard>
         </TabsContent>
+          </div>
+        </div>
       </Tabs>
 
-      <AppCard level={3} padding="lg">
+      <AppCard level={3} layer="single" padding="lg">
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-wrap gap-2">
             <Button