Refactor site header, heroes, and design system

app/[locale]/(site)/products/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 
 import { Container } from "@/components/layout/container";
+import { PageHero } from "@/components/layout/page-hero";
 import { MotionFade } from "@/components/motion-fade";
 import { routing } from "@/i18n/routing";
 import { buildLocalizedMetadata } from "@/lib/metadata";
@@ -64,8 +65,14 @@ export default async function ProductPage({ params: { locale, slug } }: ProductP
   const t = await getTranslations({ locale: localeKey, namespace: "productDetail" });
 
   return (
-    <Container size="wide" className="flex flex-col gap-section py-10 lg:py-14">
-      <MotionFade>
+    <>
+      <PageHero
+        title={pickText(item.name, localeKey)}
+        description={pickText(item.summary, localeKey)}
+      />
+
+      <Container size="wide" className="flex flex-col gap-section pb-12 lg:pb-16">
+        <MotionFade>
         <AppCard level={3}>
           <CardContent className="p-6 lg:p-10">
             <Button asChild variant="ghost" className="h-auto px-0 py-0 text-sm">
@@ -111,9 +118,9 @@ export default async function ProductPage({ params: { locale, slug } }: ProductP
             </div>
           </CardContent>
         </AppCard>
-      </MotionFade>
+        </MotionFade>
 
-      <MotionFade delay={0.05}>
+        <MotionFade delay={0.05}>
         <AppCard>
           <CardContent className="p-6 lg:p-8">
             <h2 className="text-xl font-semibold text-foreground">{t("included")}</h2>
@@ -134,7 +141,8 @@ export default async function ProductPage({ params: { locale, slug } }: ProductP
             </Button>
           </CardContent>
         </AppCard>
-      </MotionFade>
-    </Container>
+        </MotionFade>
+      </Container>
+    </>
   );
 }

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

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
-import { ArrowUpRight, Boxes, CircleDollarSign } from "lucide-react";
+import { ArrowUpRight, CircleDollarSign } 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";
@@ -36,24 +37,11 @@ export default async function ProductsPage({ params: { locale } }: ProductsPageP
   const t = await getTranslations({ locale: localeKey, namespace: "productsPage" });
 
   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">
-              <Boxes 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="grid gap-4 md:grid-cols-3">
+      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
+        <section className="grid gap-4 md:grid-cols-3">
         {productItems.map((item, index) => (
           <MotionFade key={item.slug} delay={index * 0.05}>
             <AppCard interactive>
@@ -84,7 +72,8 @@ export default async function ProductsPage({ params: { locale } }: ProductsPageP
             </AppCard>
           </MotionFade>
         ))}
-      </section>
-    </Container>
+        </section>
+      </Container>
+    </>
   );
 }