"use client";
import { motion } from "motion/react";
const ease = [0.22, 1, 0.36, 1] as const;
export type PageHeroProps = {
title: string;
subtitle: string;
backgroundSrc?: string;
};
function AnimatedTitle({ text }: { text: string }) {
const words = text.split(" ");
return (
{words.map((word, i) => (
{word}
))}
);
}
export function PageHero({ title, subtitle, backgroundSrc }: PageHeroProps) {
const wordCount = title.split(" ").length;
return (
{/* Optional background image — Ken Burns */}
{backgroundSrc && (
)}
{/* Overlay */}
{/* Ambient orb — top end */}
{/* Ambient orb — bottom start */}
{/* Brand stripes — start corner · desktop only (fixed px positions from Figma 1440px canvas) */}
{([
{ left: -38, top: 47, delay: 0.50 },
{ left: -134, top: 20, delay: 0.62 },
{ left: -52, top: 185, delay: 0.74 },
] as const).map((p, i) => (
))}
{/* Brand stripes — end corner · desktop only */}
{([
{ right: 23, top: 43, delay: 0.56 },
{ right: -73, top: 16, delay: 0.68 },
{ right: 9, top: 181, delay: 0.80 },
] as const).map((p, i) => (
))}
{/* Decorative rings — desktop only (too large for mobile viewports) */}
{/* Content */}
);
}