Refactor shared hero structure

components/layout/page-hero.tsx

@@ -1,4 +1,4 @@
-import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
+import { HeroShell, HeroTitle } from "@/components/layout/site-hero";
 
 type PageHeroProps = {
   title: string;
@@ -7,23 +7,16 @@ type PageHeroProps = {
 
 export function PageHero({ title, description }: PageHeroProps) {
   return (
-    <section className="hero-surface hero-page relative isolate flex min-h-[42vh] items-end overflow-hidden">
-      <HeroMotionBackdrop compact />
-      <div className="relative z-10 mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
-        <div className="mx-auto max-w-[42rem] text-center">
-          <p className="text-sm font-medium tracking-[-0.02em] text-foreground/58">
-            {title}
-          </p>
-          <h1 className="mt-4 text-balance text-4xl font-semibold leading-[0.9] tracking-[-0.07em] text-foreground sm:text-5xl lg:text-[4.5rem]">
-            {title}
-          </h1>
-          {description ? (
-            <p className="mx-auto mt-5 max-w-[32rem] text-sm leading-6 text-foreground/64 sm:text-base">
-              {description}
-            </p>
-          ) : null}
-        </div>
-      </div>
-    </section>
+    <HeroShell compactBackdrop variant="page">
+      <p className="text-sm font-medium tracking-[0.12em] text-foreground/56">
+        {title}
+      </p>
+      <HeroTitle lines={[{ text: title }]} variant="page" />
+      {description ? (
+        <p className="mx-auto mt-5 max-w-[34rem] text-sm leading-7 text-foreground/64 sm:text-base">
+          {description}
+        </p>
+      ) : null}
+    </HeroShell>
   );
 }