Refactor site header, heroes, and design system

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