From 4892f270062f066db588fc727b95956872eaca7a Mon Sep 17 00:00:00 2001
From: MohFarawati <mf@planetmutlu.com>
Date: Tue, 14 Jul 2026 22:19:05 +0200
Subject: [PATCH] feat(home): image-led featured projects section

Bring imagery to the homepage projects block (Phase 3), matching the portfolio
gallery.

- Thread coverImagePath through ProjectCardCopy and the home mapping.
- Rewrite ProjectsSection as image-first cards (reusing PortfolioCover with the
  branded placeholder fallback): whole-card link, featured project spans two
  columns with a larger cover, type-scale title, meta + stack badges, hover
  lift. Replaces the previous text-only cards.

Verified: eslint clean; no new type errors (pre-existing Prisma-gen anys only).
---
 app/[locale]/(site)/page.tsx         |   1 +
 components/home/projects-section.tsx | 120 ++++++++++++++++-----------
 components/home/types.ts             |   1 +
 3 files changed, 72 insertions(+), 50 deletions(-)

diff --git a/app/[locale]/(site)/page.tsx b/app/[locale]/(site)/page.tsx
index da8f60e..6bcc712 100644
--- a/app/[locale]/(site)/page.tsx
+++ b/app/[locale]/(site)/page.tsx
@@ -180,6 +180,7 @@ export default async function HomePage({ params }: HomePageProps) {
       String(project.projectYear),
     ],
     featured: index === 0,
+    coverImagePath: project.coverImagePath,
   }));
 
   const fallbackProjectCards: ProjectCardCopy[] = projectsCopy.fallbackItems.map((item) => ({
diff --git a/components/home/projects-section.tsx b/components/home/projects-section.tsx
index a484f2c..b19c5de 100644
--- a/components/home/projects-section.tsx
+++ b/components/home/projects-section.tsx
@@ -1,8 +1,9 @@
 import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
 
+import { PortfolioCover } from "@/components/site/portfolio-cover";
 import { Badge } from "@/components/ui/badge";
-import { AppCard } from "@/components/ui/app-card";
+import { cn } from "@/lib/utils";
 import { SectionHeading } from "./section-heading";
 import type { ProjectCardCopy, ProjectsSectionCopy } from "./types";
 
@@ -20,66 +21,85 @@ export function ProjectsSection({ copy, items }: ProjectsSectionProps) {
         description={copy.description}
       />
 
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 xl:gap-6">
-        {items.map((item, index) => (
-          <AppCard
-            key={`${item.title}-${index}`}
-            layer="single"
-            interactive
-            className={[
-              "group h-full border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:bg-background/80 hover:shadow-lg",
-              index === 0 ? "lg:col-span-2" : "",
-            ].join(" ")}
-          >
-            <div className="flex h-full flex-col gap-6 p-6">
-              <div className="flex flex-wrap items-center gap-2">
-                {item.meta.map((metaItem) => (
-                  <Badge
-                    key={metaItem}
-                    variant="outline"
-                    className="border-border/80 bg-background text-muted-foreground transition-colors duration-300 group-hover:border-border-strong group-hover:text-foreground/80"
-                  >
-                    {metaItem}
-                  </Badge>
-                ))}
+      <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
+        {items.map((item, index) => {
+          const featured = Boolean(item.featured);
+
+          return (
+            <Link
+              key={`${item.title}-${index}`}
+              href={item.href}
+              className={cn(
+                "group flex h-full flex-col overflow-hidden rounded-surface border border-border bg-surface-1 shadow-card transition duration-300 ease-out hover:-translate-y-1 hover:shadow-panel focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+                featured && "lg:col-span-2",
+              )}
+            >
+              <div
+                className={cn(
+                  "relative overflow-hidden",
+                  featured ? "aspect-[16/10]" : "aspect-[4/3]",
+                )}
+              >
+                <PortfolioCover
+                  src={item.coverImagePath ?? null}
+                  title={item.title}
+                  category={item.meta[0]}
+                  sizes={
+                    featured
+                      ? "(min-width: 1024px) 66vw, 100vw"
+                      : "(min-width: 1024px) 33vw, 100vw"
+                  }
+                />
               </div>
 
-              <div className="space-y-3">
-                <h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
-                  {item.title}
-                </h3>
-                <p className="text-sm leading-7 text-muted-foreground">{item.summary}</p>
-              </div>
-
-              <div className="space-y-3">
-                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
-                  {copy.stackLabel}
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  {item.stack.map((stackItem) => (
+              <div className="flex flex-1 flex-col p-6">
+                <div className="flex flex-wrap items-center gap-2">
+                  {item.meta.map((metaItem) => (
                     <Badge
-                      key={stackItem}
-                      variant="secondary"
-                      className="bg-secondary/70 text-foreground transition-colors duration-300 group-hover:bg-secondary"
+                      key={metaItem}
+                      variant="outline"
+                      className="border-border text-caption text-muted-foreground"
                     >
-                      {stackItem}
+                      {metaItem}
                     </Badge>
                   ))}
                 </div>
-              </div>
 
-              <div className="mt-auto">
-                <Link
-                  href={item.href}
-                  className="inline-flex items-center gap-2 text-sm font-medium text-foreground transition-all duration-200 group-hover:translate-x-0.5"
+                <h3
+                  className={cn(
+                    "mt-4 font-semibold tracking-tight text-foreground",
+                    featured ? "text-h3 sm:text-h2" : "text-h3",
+                  )}
                 >
+                  {item.title}
+                </h3>
+
+                <p className="mt-2 line-clamp-2 text-small leading-relaxed text-muted-foreground">
+                  {item.summary}
+                </p>
+
+                {item.stack.length > 0 ? (
+                  <div className="mt-4 flex flex-wrap gap-2">
+                    {item.stack.map((stackItem) => (
+                      <Badge
+                        key={stackItem}
+                        variant="secondary"
+                        className="bg-secondary/70 text-caption text-foreground"
+                      >
+                        {stackItem}
+                      </Badge>
+                    ))}
+                  </div>
+                ) : null}
+
+                <span className="mt-auto inline-flex items-center gap-2 pt-6 text-caption font-medium text-foreground/70 transition-colors group-hover:text-brand-primary">
                   {item.cta}
-                  <ArrowUpRight className="h-4 w-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
-                </Link>
+                  <ArrowUpRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+                </span>
               </div>
-            </div>
-          </AppCard>
-        ))}
+            </Link>
+          );
+        })}
       </div>
     </section>
   );
diff --git a/components/home/types.ts b/components/home/types.ts
index a8f9077..82395b8 100644
--- a/components/home/types.ts
+++ b/components/home/types.ts
@@ -71,6 +71,7 @@ export type ProjectCardCopy = {
   cta: string;
   meta: string[];
   featured?: boolean;
+  coverImagePath?: string | null;
 };
 
 export type ProjectsSectionCopy = {