{
    "id": "bhaskar/aurora-saas-hero-section",
    "kind": "plan",
    "title": "Aurora SaaS hero section",
    "summary": "A dark SaaS landing hero with a drifting aurora background, shimmering headline and floating glass stat cards. Pure HTML and CSS.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/aurora-saas-hero-section/",
    "stack": [
        "Animation",
        "CSS",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "Paste one prompt into Claude, Cursor or Lovable and get a polished animated SaaS hero: soft aurora blobs drift behind a shimmering gradient headline, with glass stat cards that float and fill. No images, fonts or libraries, so it loads instantly.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.",
            "prompt": "Build a single-file HTML page: a dark SaaS landing hero for a product called \"Lumen\" (team workspace app).\nDesign:\n- 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.\n- Nav: gradient conic logo mark + wordmark, 4 muted links, a ghost \"Sign in\" pill button.\n- 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\").\n- 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.\nRules: 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.",
            "done": "",
            "files": []
        },
        {
            "title": "Add the nav and hero copy",
            "body": "Check: Logo, links, badge, shimmer headline, subtitle and buttons.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Add the glass stat cards",
            "body": "Check: Three cards with animated progress bars and a float loop.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Polish and check",
            "body": "Check: Stagger the entrances, check mobile and reduced motion.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/aurora-saas-hero-section/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/aurora-saas-hero-section/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}