MOHandClaude Sonnet 4.6
868eb80374
- Replace animated blob/wave/noise backdrop with clean static gradient (radial ellipse highlights + linear fade) in hero-motion-backdrop - Remove all framer-motion from background layer; delete unused CSS classes: hero-blob, hero-sheet-glow, hero-sheet-wave, hero-sheet-noise, hero-title-shift keyframe, and responsive blob media queries - Add framer-motion stagger entrance to HeroContentMotion, HeroMotionItem, and HeroTitle (slide-up + fade on mount) - Refactor coming-soon page to use HeroContentMotion/HeroMotionItem instead of MotionFade (whileInView unreliable above the fold) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
}
|