refine admin cards and form headers

components/admin/portfolio-projects-overview.tsx

@@ -1,4 +1,4 @@
-import { ExternalLink, Plus, Tags } from "lucide-react";
+import { ExternalLink, FolderKanban, Plus, Tags, CheckCircle2 } from "lucide-react";
 import Link from "next/link";
 
 import { StatsCard } from "@/components/dashboard/stats-card";
@@ -39,12 +39,13 @@ export async function PortfolioProjectsOverview({
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
-        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[520px]">
-          <StatsCard title="Projects" value={String(projects.length)} />
-          <StatsCard title="Categories" value={String(categories.length)} />
+        <div className="grid gap-4 md:grid-cols-3 xl:min-w-[620px]">
+          <StatsCard title="Projects" value={String(projects.length)} icon={FolderKanban} />
+          <StatsCard title="Categories" value={String(categories.length)} icon={Tags} />
           <StatsCard
             title="Published"
             value={String(projects.filter((project) => project.isPublished).length)}
+            icon={CheckCircle2}
           />
         </div>
 
@@ -81,10 +82,10 @@ export async function PortfolioProjectsOverview({
         ))}
       </div>
 
-      <div className="grid gap-4">
+      <div className="grid gap-4 xl:grid-cols-2">
         {projects.map((project, index) => (
           <MotionFade key={project.id} delay={0.06 + index * 0.03}>
-            <AppCard interactive>
+            <AppCard interactive layer="single" className="h-full">
               <CardContent className="flex flex-col gap-4 p-5 lg:flex-row lg:items-center lg:justify-between">
                 <div className="space-y-2">
                   <div className="flex flex-wrap items-center gap-2">
@@ -121,7 +122,7 @@ export async function PortfolioProjectsOverview({
         ))}
 
         {projects.length === 0 ? (
-          <AppCard>
+          <AppCard layer="single" className="xl:col-span-2">
             <CardContent className="p-6 text-sm text-muted-foreground">
               {copy.empty}
             </CardContent>