Aurora SaaS hero section
Copy this prompt into Claude, Cursor or Lovable.
Build a single-file HTML page: a dark SaaS landing hero for a product called "Lumen" (team workspace app).
Design:
- Background #07070d with three huge blurred circles (violet #6d4aff, teal #00d4c8, pink #ff4fa3) using mix-blend-mode: screen, blurred 70px, drifting slowly with CSS keyframes (14-18s, alternate, different delays). This is the aurora.
- Nav: gradient conic logo mark + wordmark, 4 muted links, a ghost "Sign in" pill button.
- Hero centered, max-width 880px: a small pill badge with a glowing green dot ("New: realtime team workspaces"), an H1 (clamp 42-84px, weight 800, letter-spacing -0.045em) "Ship ideas at the speed of thought" where the last word has an animated light gradient text shimmer, a 19px subtitle, and two buttons (solid white "Start free", glass "Watch the demo").
- Below: three glass cards (rgba white 6%, 1px border, backdrop blur) with a label, big number and a progress bar that animates from 0. Cards fade up in sequence and then float gently.
Rules: system font stack only, no external files, responsive (cards stack under 760px), respect prefers-reduced-motion. Entrance animation: elements fade up with staggered delays. Return only the complete HTML.Source, 13 lines
# Aurora SaaS hero section
Copy this prompt into Claude, Cursor or Lovable.
```text
Build a single-file HTML page: a dark SaaS landing hero for a product called "Lumen" (team workspace app).
Design:
- Background #07070d with three huge blurred circles (violet #6d4aff, teal #00d4c8, pink #ff4fa3) using mix-blend-mode: screen, blurred 70px, drifting slowly with CSS keyframes (14-18s, alternate, different delays). This is the aurora.
- Nav: gradient conic logo mark + wordmark, 4 muted links, a ghost "Sign in" pill button.
- Hero centered, max-width 880px: a small pill badge with a glowing green dot ("New: realtime team workspaces"), an H1 (clamp 42-84px, weight 800, letter-spacing -0.045em) "Ship ideas at the speed of thought" where the last word has an animated light gradient text shimmer, a 19px subtitle, and two buttons (solid white "Start free", glass "Watch the demo").
- Below: three glass cards (rgba white 6%, 1px border, backdrop blur) with a label, big number and a progress bar that animates from 0. Cards fade up in sequence and then float gently.
Rules: system font stack only, no external files, responsive (cards stack under 760px), respect prefers-reduced-motion. Entrance animation: elements fade up with staggered delays. Return only the complete HTML.
```