ZacharyZhang-NY
8f1a5f1f4e
Close the flat-vs-adaline gap by adding depth and motion to our product shots: - bento: replace the flat stacked features with a varied 12-column grid (org chart, cost, office, messages, connectors, plus a local-first highlight card), each with a corner glow and hover - showcase: a dark aurora "Set the goal" statement band (Newsreader serif over a drifting northern-lights glow) for a light -> dark -> light rhythm - hero + footer: aurora glow staging behind the dashboard and under the CTA - ui/aurora + globals: mint/teal/lime drift-animated glow tokens - remove the superseded flat feature components e2e green (12 passed); build verified.
21 lines
788 B
TypeScript
21 lines
788 B
TypeScript
/**
|
|
* Northern-lights glow for dark showcase surfaces: three soft, slowly drifting
|
|
* radial blooms in mint / teal / lime. Purely decorative.
|
|
*/
|
|
export function Aurora({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div aria-hidden="true" className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}>
|
|
<div
|
|
className="aurora-layer absolute -inset-[25%]"
|
|
style={{
|
|
filter: "blur(56px)",
|
|
background:
|
|
"radial-gradient(42% 55% at 22% 62%, var(--aurora-mint) 0%, transparent 62%)," +
|
|
"radial-gradient(38% 50% at 72% 38%, var(--aurora-teal) 0%, transparent 60%)," +
|
|
"radial-gradient(34% 44% at 52% 84%, var(--aurora-lime) 0%, transparent 58%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|