# Light fintech landing with tilting card > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The landing page for **Quire**, a fictional business-banking product for small companies. Top to bottom: a light nav, a hero with a 92px Instrument Serif headline beside a debit card built entirely in CSS, a four-up trust-stat band, two alternating feature rows with miniature product UI, a centred serif testimonial, a cobalt CTA panel and a compliance footer. The page should feel like a calm, expensive stationery shop, not a crypto app. What makes it worth copying is the card. It sits in 3D on a faint 48px grid, floats gently at rest, and turns to follow the pointer with a soft-light glare that tracks the cursor. Three finish swatches recolour it. ## Reference behaviour 1. Initial state: top of the page. The nav, the "New 4.10% APY" pill, the three-line headline ("Business banking / that *keeps the* / *books* for you." with the italic words in cobalt), the lede, the email signup and the full stat band are visible within 800px. 2. At rest the card is posed at `rotateX(8deg) rotateY(-16deg) rotateZ(-4deg)` and floats 10px up and down on a 6s alternate loop. Two white notification chips bob 8px on 5s and 5.5s loops (the second is delayed 0.8s). 3. Move the pointer over the hero's right-hand stage: the float pauses and the card tilts toward the pointer. rotateY ranges ±14deg across the stage width and rotateX ±11deg across its height. It follows on an 80ms linear transition, and the glare highlight moves to the pointer position. 4. Pointer leaves the stage: the card eases back to its resting pose over 500ms (expo out) and the float resumes. 5. Click a finish swatch (Graphite, Cobalt, Bone): the card gradient and text colour cross-fade over 500ms; the pressed swatch gets a 2px ink ring and `aria-pressed="true"`. 6. Focus the email field: the pill-shaped signup gets a cobalt border plus a 4px `--accent-soft` halo. Submitting does nothing (demo). 7. Scroll: the feature rows alternate copy-left/UI-right, then UI-left/copy-right. The testimonial sits between two hairlines and the CTA panel is a 28px-radius cobalt block with concentric rings in the top-right. ## Structure ``` 1280 × 800 page height ≈ 2730px ┌────────────────────────────────────────────────────────────────────────┐ │ ◯ Quire Accounts Cards Tax vault Pricing Customers Log in [Open an account] │ 72 ├───────────────────────────────┬────────────────────────────────────────┤ │ (New) 4.10% APY… │ ┌ Invoice #1042 paid ┐ 48px grid, │ │ Business banking 92px │ └────────────────────┘ radial mask │ │ that keeps the │ ╱▔▔▔▔▔▔▔▔▔▔▔▔▔▔╲ 380×240 card │ │ books for you. │ │ Quire BUSINESS·DEBIT │ 3D │ │ lede 19px / 460 │ │ ▣ chip │ │ │ [ you@company.com (Get started) ] │ │ 4417 2290 0183 6025 │ │ │ fine print 13px │ ╲______________________╱ │ │ │ Finish ● ● ● ┌ +$1,240 to Tax vault ┐│ ├───────────┬───────────┬───────┴───┬────────────────────────────────────┤ │ 48,000 │ $2.1B │ $5M │ 4.9 stats: 52px serif │ └───────────┴───────────┴───────────┴────────────────────────────────────┘ below: feature row (copy | transactions UI) · feature row (vault UI | copy) testimonial 48px serif centred · cobalt CTA 72px · footer disclosures hero grid 1.05fr 1fr, gap 24 · stage 540px tall · gutter 72px ``` - `