Refactor site header, heroes, and design system

app/[locale]/(site)/portfolio/page.tsx

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
-import { ArrowUpRight, CalendarDays, FolderKanban } from "lucide-react";
+import { ArrowUpRight, CalendarDays } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
+import { PageHero } from "@/components/layout/page-hero";
 import { MotionFade } from "@/components/motion-fade";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { AppCard } from "@/components/ui/app-card";
@@ -55,24 +56,11 @@ export default async function PortfolioPage({
   ]);
 
   return (
-    <Container className="flex flex-col gap-section py-10 lg:py-14">
-      <MotionFade>
-        <AppCard level={3}>
-          <CardContent className="p-6 lg:p-10">
-            <div className="flex items-center gap-3">
-              <FolderKanban className="h-5 w-5 text-brand-primary" />
-              <h1 className="text-3xl font-semibold text-foreground sm:text-4xl">
-                {t("title")}
-              </h1>
-            </div>
-            <p className="mt-4 max-w-3xl text-base text-muted-foreground sm:text-lg">
-              {t("intro")}
-            </p>
-          </CardContent>
-        </AppCard>
-      </MotionFade>
+    <>
+      <PageHero title={t("title")} description={t("intro")} />
 
-      <section className="flex flex-wrap gap-3">
+      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
+        <section className="flex flex-wrap gap-3">
         <Link
           href={getLocalizedPath(localeKey, "/portfolio")}
           className={`rounded-md border px-4 py-2 text-sm transition-colors ${
@@ -96,9 +84,9 @@ export default async function PortfolioPage({
             {getLocalizedValue(category.name, localeKey)}
           </Link>
         ))}
-      </section>
+        </section>
 
-      <section className="grid gap-4 md:grid-cols-2">
+        <section className="grid gap-4 md:grid-cols-2">
         {projects.map((item, index) => (
           <MotionFade key={item.slug} delay={index * 0.05}>
             <AppCard interactive>
@@ -139,7 +127,8 @@ export default async function PortfolioPage({
             </CardContent>
           </AppCard>
         ) : null}
-      </section>
-    </Container>
+        </section>
+      </Container>
+    </>
   );
 }