Refine site hero copy and reusable badge

components/layout/hero-badge.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type HeroBadgeProps = {
+  children: ReactNode;
+  className?: string;
+  trailing?: ReactNode;
+};
+
+export function HeroBadge({ children, className, trailing }: HeroBadgeProps) {
+  return (
+    <p
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]",
+        className,
+      )}
+    >
+      <span>{children}</span>
+      {trailing}
+    </p>
+  );
+}

components/layout/home-hero.tsx

@@ -2,6 +2,7 @@
 
 import { motion, useReducedMotion } from "framer-motion";
 
+import { HeroBadge } from "@/components/layout/hero-badge";
 import {
   HeroContentMotion,
   HeroMotionItem,
@@ -70,8 +71,8 @@ export function HomeHero({
     <HeroShell showBridges>
       <HeroContentMotion variant="home">
         <HeroMotionItem variant="home">
-          <p className="inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]">
-            <span>{kicker}</span>
+          <HeroBadge
+            trailing={
             <motion.span
               aria-hidden="true"
               className="text-[0.95rem] leading-none"
@@ -99,7 +100,10 @@ export function HomeHero({
             >
               👋
             </motion.span>
-          </p>
+            }
+          >
+            {kicker}
+          </HeroBadge>
         </HeroMotionItem>
         <HeroTitle locale={locale} lines={lines} />
         <HeroMotionItem variant="home">

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">

components/layout/site-hero.tsx

@@ -66,6 +66,8 @@ const lineAlignClasses: Record<HeroLineAlign, string> = {
   end: "self-center text-center lg:self-end lg:text-end",
 };
 
+export type HeroTitleLineValue = HeroTitleLine;
+
 export function HeroShell({
   children,
   className,
@@ -189,9 +191,9 @@ export function HeroTitle({
         "text-balance font-semibold text-[hsl(var(--hero-ink))]",
         variant === "home"
           ? isArabic
-            ? "mt-6 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[24rem] md:max-w-[30rem] lg:max-w-[32rem]"
-            : "mt-6 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] sm:max-w-[24rem] md:max-w-[30rem] lg:max-w-[32rem]"
-          : "mt-4 flex w-full max-w-[20rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] sm:max-w-[24rem] md:max-w-[28rem] lg:max-w-[32rem]",
+            ? "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.85rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
+            : "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.7rem,12vw,6.3rem)] leading-[0.94] tracking-[-0.045em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
+          : "mt-4 flex w-full max-w-[30rem] flex-col gap-y-1 px-4 text-[clamp(2.55rem,9vw,4.9rem)] leading-[0.96] tracking-[-0.05em] sm:px-0 md:max-w-[36rem] lg:max-w-[40rem]",
         className,
       )}
     >