Refine site hero copy and reusable badge

components/layout/page-hero.tsx

@@ -1,20 +1,30 @@
-import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
+import { HeroBadge } from "@/components/layout/hero-badge";
+import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle, type HeroTitleLineValue } from "@/components/layout/site-hero";
 
 type PageHeroProps = {
+  badge?: string;
   title: string;
   description?: string;
+  lines?: HeroTitleLineValue[];
+  locale?: string;
 };
 
-export function PageHero({ title, description }: PageHeroProps) {
+function getDefaultLines(title: string): HeroTitleLineValue[] {
+  return title.split("\n").filter(Boolean).map((line, index) => ({
+    text: line,
+    tone: index === 0 ? "soft" : "accent",
+    align: "center",
+  }));
+}
+
+export function PageHero({ badge, title, description, lines, locale }: PageHeroProps) {
   return (
     <HeroShell compactBackdrop variant="page">
       <HeroContentMotion variant="page">
         <HeroMotionItem variant="page">
-          <p className="inline-flex items-center rounded-pill border border-border/70 bg-background/75 px-4 py-2 text-sm font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome">
-            {title}
-          </p>
+          <HeroBadge>{badge ?? title}</HeroBadge>
         </HeroMotionItem>
-        <HeroTitle lines={[{ text: title }]} variant="page" />
+        <HeroTitle lines={lines ?? getDefaultLines(title)} locale={locale} variant="page" />
         {description ? (
           <HeroMotionItem variant="page">
             <p className="mx-auto mt-6 max-w-[34rem] text-base leading-7 text-foreground/72">