Refactor site header, heroes, and design system

app/[locale]/(site)/success/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";
@@ -36,8 +37,11 @@ export default async function SuccessPage({ params: { locale } }: SuccessPagePro
   const t = await getTranslations({ locale: localeKey, namespace: "successPage" });
 
   return (
-    <Container size="narrow" className="py-12 lg:py-16">
-      <MotionFade className="w-full">
+    <>
+      <PageHero title={t("title")} description={t("text")} />
+
+      <Container size="narrow" className="pb-12 lg:pb-16">
+        <MotionFade className="w-full">
         <AppCard level={3}>
           <CardContent className="p-8 text-center">
             <CheckCircle2 className="mx-auto h-12 w-12 text-status-success" />
@@ -57,7 +61,8 @@ export default async function SuccessPage({ params: { locale } }: SuccessPagePro
             </div>
           </CardContent>
         </AppCard>
-      </MotionFade>
-    </Container>
+        </MotionFade>
+      </Container>
+    </>
   );
 }