Simplify hero backgrounds and add entrance animations

- 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>
This commit is contained in:
MOH
2026-03-17 22:48:51 +01:00
co-authored by Claude Sonnet 4.6
parent f490133345
commit 868eb80374
10 changed files with 92 additions and 181 deletions
+11 -5
View File
@@ -3,7 +3,7 @@ import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle, type HeroTitle
type PageHeroProps = {
badge?: string;
title: string;
title?: string;
description?: string;
lines?: HeroTitleLineValue[];
locale?: string;
@@ -33,13 +33,19 @@ function getDefaultLines(title: string): HeroTitleLineValue[] {
}
export function PageHero({ badge, title, description, lines, locale }: PageHeroProps) {
const resolvedLines = lines ?? (title ? getDefaultLines(title) : undefined);
return (
<HeroShell compactBackdrop variant="page">
<HeroContentMotion variant="page">
<HeroMotionItem variant="page">
<HeroBadge>{badge ?? title}</HeroBadge>
</HeroMotionItem>
<HeroTitle lines={lines ?? getDefaultLines(title)} locale={locale} 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">