类型：Site模板 · 收录：2026-10-26 23:38:14 · 源码：会员可见
# Prompt: Smarter Growth — pastel card hero
Build a single-file, one-screen **landing hero for a self-improvement hub** ("Smarter growth for your life and wealth"). Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a near-black page with an elegant serif headline and three playful pastel cards, each with a hand-drawn black ink doodle and a pair of cartoon googly eyes.
## Scale
- **Units:** everything is measured on a 1024×768 reference and multiplied by one unit `--px`, so the composition scales as one block.
- **Spacers:** the gaps above the hero, between the hero and the cards, and below the cards are elastic. On taller screens they share the spare height instead of leaving an empty band.
## Type and colour
- **Page:** `#080A0B`. Header rule `#151719`.
- **Serif:** **Instrument Serif** (regular and italic) for the headline and the card titles.
- **Sans:** **Inter Tight** 400/500 for everything else.
- **Text:** white headline; grey subline `#A5A7AA`; nav links `#A0A2A5`, active link white.
- **Card colours:** lilac `#D9C1F9`, mint `#ABF1CE` and butter `#F9E484`, with black ink text.
## Layout
- **Header** (64px tall, with a hairline rule below):
- **Logo:** a small white isometric cube with a dark right face, at left.
- **Nav:** centred: Home (active pill, `#121416` fill with a `#1F2123` edge), Benefits, About, Pricing, Blogs.
- **Contact:** a white pill "Contact Us" at right.
- **Hero** (centred):
- **Headline:** "Smarter growth for your / life and wealth", Instrument Serif 44.5px on 51.5px.
- **Subline:** "Stop guessing. Get the exact tools you need to sharpen your / mind, grow your wealth, and see the world." 12.4px.
- **CTA:** a white pill "Start Exploring Now" with a black arrow capsule on its left.
- **Cards:** three equal columns 12.5px apart, radius 14.5px. Each card has:
- **Art:** the doodle at the top left (about 125px wide) and the googly eyes at the top right (about 40px), both on the card's flat colour so they blend in.
- **Tag:** an outlined pill.
- **Title:** in italic serif.
- **Copy:** two lines.
- **Button:** a black pill with a white arrow capsule.
- **Card content:**
1. **Lilac:** books with a glowing lightbulb. Tag "Educational", title "Learn Without Limits", copy "Engaging lessons designed to build real-world expertise fast.", button "Explore Skills".
2. **Mint:** a happy piggy bank with coins and leaves. Tag "Financial", title "Own Your Future", copy "Simple, actionable advice to grow your money and cut out financial stress.", button "Start Saving".
3. **Butter:** a striped hot-air balloon over small mountains. Tag "Travelling", title "Next Stop: Everywhere", copy "Your destination inspiration and practical travel planning starts here.", button "Find Journeys".
## Motion
- **Entrance:** a one-time Web Animations sequence.
- The logo, nav and contact button fade up.
- The headline wipes up out of a clip, then the subline and the CTA.
- The cards rise in one after another (translateY 10px, scale .985 → 1).
- **Hover:** the arrows nudge right; the buttons lighten.
- **Reduced motion:** no entrance.
## Tablet and phone
- **Fit:** every mode fits one screen without a page scrollbar.
- **Phone:** the nav collapses into a round menu button. The cards become a horizontal swipe rail with dots underneath.
## Acceptance check (1440×960)
- The serif headline and white CTA sit centred above three pastel cards (lilac, mint, butter).
- Each card shows its ink doodle at the top left and googly eyes at the top right.
- No real brands.