Float each screenshot over an ambient wash painted from its own colours (a tiny
blurred thumbnail), layered with the aurora, a designed green->teal gradient,
and fine film grain — the "based on our real product screenshot" treatment.
- ui/art-stage: reusable atmospheric stage (ambient LQIP + aurora + grain + a
floating shot with depth)
- hero + bento: swap the flat frames for ArtStage
- public/images/ambient: per-screenshot colour-wash thumbnails (<250B each)
- remove the now-unused media-frame
e2e green (12 passed).
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.
- footer: dark #050e11 band with an Instrument Serif display CTA, an inverted
Download button, link columns (tracked download hrefs preserved) and copyright
- structure: move icon-mark to brand/, theme provider+toggle to theme/,
site-constants to lib/; sections/layout/ui/brand/theme now fully separated
- button: add an inverted variant for dark surfaces
- metadata: point OpenGraph/Twitter at a 1200x630 og.jpg and the JSON-LD
screenshot at dashboard.webp; drop the old /screenshots references
- remove orphans: framer-motion (replaced by CSS + IntersectionObserver),
ascii-background, and the seven superseded product screenshots
- add @playwright/test for the e2e suite
Foundation for the adaline-based landing rebuild:
- globals.css: warm-cream light theme + Material-3 dark theme mapped onto the
existing CSS-var names; CSS-keyframe entrance + IntersectionObserver reveal
motion (to replace framer-motion incrementally)
- layout.tsx: self-host Instrument Sans/Serif, Newsreader and JetBrains Mono via
next/font/google; drop the external Google Fonts <link>
- _headers: tighten CSP style/font-src to 'self' now that fonts are local
- components/ui: Container, Reveal, Eyebrow, Badge, Button, SectionHeading
- lib/landing-content.ts: feature-section copy for the six product screens
- public/images: six product screenshots optimized to WebP
- add reicon-react/reicon-brands (bundled, CSP-safe SVG icons)
Business logic (D1 download counter, platform metadata, theme, SEO) unchanged.
ZacharyZhang-NY