Enrich the landing page with a bento grid and aurora atmosphere
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.
This commit is contained in:
1 parent
4f0d03ad72
commit
8f1a5f1f4e
9 files changed
+199
-42
No files matched your search
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user