Refactor site header, heroes, and design system

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

@@ -3,6 +3,7 @@ import { Compass, Layers3, Users } from "lucide-react";
 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 { resolveLocale } from "@/lib/locale";
@@ -34,21 +35,11 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
   const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" });
 
   return (
-    <Container className="flex flex-col gap-section py-10 lg:py-14">
-      <MotionFade>
-        <AppCard level={3}>
-          <CardContent className="p-6 lg:p-10">
-            <h1 className="text-3xl font-semibold text-foreground sm:text-4xl">
-              {t("title")}
-            </h1>
-            <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")} />
 
-      <MotionFade delay={0.05}>
+      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
+        <MotionFade delay={0.05}>
         <AppCard>
           <CardContent className="p-6 lg:p-8">
             <h2 className="text-2xl font-semibold text-foreground">
@@ -89,9 +80,9 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
             </div>
           </CardContent>
         </AppCard>
-      </MotionFade>
+        </MotionFade>
 
-      <MotionFade delay={0.1}>
+        <MotionFade delay={0.1}>
         <AppCard>
           <CardContent className="p-6 lg:p-8">
             <h2 className="text-2xl font-semibold text-foreground">
@@ -111,7 +102,8 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
             </ol>
           </CardContent>
         </AppCard>
-      </MotionFade>
-    </Container>
+        </MotionFade>
+      </Container>
+    </>
   );
 }