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:
ZacharyZhang-NY committed 2026-07-07 22:57:54 -04:00
1 parent 4f0d03ad72
commit 8f1a5f1f4e
9 files changed
+199 -42

No files matched your search

+4 -2
View File
@@ -1,6 +1,7 @@
import { Container } from "../ui/container";
import { Reveal } from "../ui/reveal";
import { Button } from "../ui/button";
import { Aurora } from "../ui/aurora";
import { IconMark } from "../brand/icon-mark";
import { getTrackedDownloadHref } from "../../lib/downloads";
import { CONTACT_EMAIL, WEBSITE_URL } from "../../lib/site-constants";
@@ -40,8 +41,9 @@ export function Footer() {
const year = new Date().getFullYear();
return (
<footer className="bg-[var(--footer-bg)] text-[var(--footer-text)]">
<Container>
<footer className="relative overflow-hidden bg-[var(--footer-bg)] text-[var(--footer-text)]">
<Aurora className="opacity-90" />
<Container className="relative">
<div className="border-b border-white/10 py-24 text-center md:py-32">
<Reveal>
<h2 className="font-display text-[clamp(2.75rem,1.8rem+4vw,5.5rem)] leading-[1] tracking-[-0.02em]">