From 86243b79c2e57b14df4590aac13fbcbaea3f66a9 Mon Sep 17 00:00:00 2001
From: MohFarawati <mf@planetmutlu.com>
Date: Tue, 14 Jul 2026 22:20:47 +0200
Subject: [PATCH] feat(portfolio): real project-detail hero, no wasted space

The detail page rendered an empty <PageHero /> (blank gradient band) with the
real title buried in a card lower down (Phase 0 finding).

- Populate the detail PageHero with the project category (badge), title and
  summary, so the top of the page is a proper header.
- Slim the in-content ProjectHeader to back-link + meta chips + preview button,
  removing the now-duplicated title and summary. Applies across all three
  detail templates (grid/story/case-study).

Verified: eslint clean, no new type errors.
---
 app/[locale]/(site)/portfolio/[slug]/page.tsx | 10 +++++++++-
 components/site/portfolio-project-detail.tsx  |  9 +--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/[locale]/(site)/portfolio/[slug]/page.tsx b/app/[locale]/(site)/portfolio/[slug]/page.tsx
index 741b7ac..cff548c 100644
--- a/app/[locale]/(site)/portfolio/[slug]/page.tsx
+++ b/app/[locale]/(site)/portfolio/[slug]/page.tsx
@@ -58,10 +58,18 @@ export default async function PortfolioItemPage({
   }
 
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });
+  const title = getLocalizedValue(item.title, localeKey);
+  const category = getLocalizedValue(item.category.name, localeKey);
+  const summary = getLocalizedValue(item.summary, localeKey);
 
   return (
     <>
-      <PageHero />
+      <PageHero
+        locale={localeKey}
+        badge={category}
+        lines={[{ text: title, tone: "soft", align: "center" }]}
+        description={summary}
+      />
 
       <Container size="wide" className="pb-12 lg:pb-16">
         <PortfolioProjectDetail
diff --git a/components/site/portfolio-project-detail.tsx b/components/site/portfolio-project-detail.tsx
index e4bd014..e829dd2 100644
--- a/components/site/portfolio-project-detail.tsx
+++ b/components/site/portfolio-project-detail.tsx
@@ -235,14 +235,7 @@ function ProjectHeader({
             <Link href={getLocalizedPath(locale, "/portfolio", defaultLocale)}>{t("back")}</Link>
           </Button>
 
-          <h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl lg:text-5xl">
-            {getLocalizedValue(item.title, locale)}
-          </h1>
-          <p className="mt-4 max-w-3xl text-base leading-8 text-muted-foreground sm:text-lg">
-            {getLocalizedValue(item.summary, locale)}
-          </p>
-
-          <div className="mt-8">
+          <div className="mt-6">
             <ProjectMeta item={item} locale={locale} />
           </div>