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>
+    </>
   );
 }