Refactor site header, heroes, and design system

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

@@ -4,6 +4,7 @@ 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 { getLocalizedPath, resolveLocale } from "@/lib/locale";
@@ -39,8 +40,11 @@ export default async function ContactPage({ params: { locale } }: ContactPagePro
   const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
 
   return (
-    <Container className="grid gap-6 py-10 lg:grid-cols-2 lg:py-14">
-      <MotionFade>
+    <>
+      <PageHero title={t("title")} description={t("intro")} />
+
+      <Container className="grid gap-6 pb-12 lg:grid-cols-2 lg:pb-16">
+        <MotionFade>
         <AppCard level={3}>
           <CardHeader>
             <CardTitle className="text-3xl sm:text-4xl">{t("title")}</CardTitle>
@@ -63,9 +67,9 @@ export default async function ContactPage({ params: { locale } }: ContactPagePro
             </ul>
           </CardContent>
         </AppCard>
-      </MotionFade>
+        </MotionFade>
 
-      <MotionFade delay={0.05}>
+        <MotionFade delay={0.05}>
         <AppCard>
           <CardContent className="pt-6">
             <form className="grid gap-4">
@@ -93,7 +97,8 @@ export default async function ContactPage({ params: { locale } }: ContactPagePro
             </form>
           </CardContent>
         </AppCard>
-      </MotionFade>
-    </Container>
+        </MotionFade>
+      </Container>
+    </>
   );
 }