sass-mohfarawati/components/layout/page-hero.tsx

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;
};

function getDefaultLines(title: string): HeroTitleLineValue[] {
  return title.split("\n").filter(Boolean).map((line) => {
    const words = line.trim().split(/\s+/).filter(Boolean);

    if (words.length <= 1) {
      return {
        text: line,
        tone: "soft",
        align: "center",
      };
    }

    return {
      text: line,
      align: "center",
      segments: words.map((word, index) => ({
        text: index === words.length - 1 ? word : `${word} `,
        tone: index % 2 === 0 ? "soft" : "accent",
      })),
    };
  });
}

export function PageHero({ badge, title, description, lines, locale }: PageHeroProps) {
  const resolvedLines = lines ?? (title ? getDefaultLines(title) : undefined);

  return (
    <HeroShell compactBackdrop variant="page">
      <HeroContentMotion variant="page">
        {(badge ?? title) ? (
          <HeroMotionItem variant="page">
            <HeroBadge>{badge ?? title}</HeroBadge>
          </HeroMotionItem>
        ) : null}
        {resolvedLines ? (
          <HeroTitle lines={resolvedLines} locale={locale} variant="page" />
        ) : null}
        {description ? (
          <HeroMotionItem variant="page">
            <p className="mx-auto mt-6 max-w-[34rem] text-base leading-7 text-foreground/72">
              {description}
            </p>
          </HeroMotionItem>
        ) : null}
      </HeroContentMotion>
    </HeroShell>
  );
}