v0
v0 prompt for a waitlist landing page
This v0 prompt builds a waitlist page as five small React components, so the form or hero can be regenerated without redoing the page. One email capture does all the work: validation, a success state with a position in line, and a referral nudge. The customizer swaps your style, palette, type, and motion picks into the tokens before you paste.
Last updated
Prompt
Build a pre-launch waitlist page for {{product}}, aimed at {{audience}}, as a Next.js screen split into small components — Hero, ProofRow, WaitlistForm, Faq, Footer — one file each so any section can be regenerated later without touching the rest. Use Tailwind plus shadcn/ui primitives (Input, Button, Accordion, Badge).
Sections, top to bottom:
1. Hero — a "Coming soon" Badge, a headline stating the single outcome {{product}} unlocks (nine words max), a one-sentence subhead naming who it serves and what changes for them, and the email capture directly beneath.
2. ProofRow — three cards: a product-still placeholder, a momentum line ("2,300+ already in line" style), and a short tester quote with name and role.
3. WaitlistForm — restate the promise in one line above the form; Input and Button inline on desktop; validate email format on blur, disable the button while submitting, and on success swap the form for a card showing the signup's position in line plus a "share to move up" referral link.
4. Faq — an Accordion with four items: launch timing, launch pricing, email policy, who gets access first.
5. Footer — one centered line: product name, contact email, one social link.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Spacing: an 8px scale — sections py-24 on desktop and py-16 below md, gap-6 inside the card row; give the hero py-32 so the form clears the fold at 1440x900.
Responsive: at md and below, ProofRow stacks vertically and the inline form becomes a stacked Input over a full-width Button.
The primary call to action is "{{cta}}" — the submit label in both the hero and WaitlistForm, and nowhere else. Render the capture once as a shared component in both spots.
After building, check that: an invalid email shows an inline error with no browser alert; the success state renders a position number; both capture points use the same WaitlistForm component; the Accordion works by keyboard; and no section except the hero exceeds one viewport height on mobile.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Build a pre-launch waitlist page for a project management SaaS, aimed at engineering managers at startups, as a Next.js screen split into small components — Hero, ProofRow, WaitlistForm, Faq, Footer — one file each so any section can be regenerated later without touching the rest. Use Tailwind plus shadcn/ui primitives (Input, Button, Accordion, Badge).
Sections, top to bottom:
1. Hero — a "Coming soon" Badge, a headline stating the single outcome a project management SaaS unlocks (nine words max), a one-sentence subhead naming who it serves and what changes for them, and the email capture directly beneath.
2. ProofRow — three cards: a product-still placeholder, a momentum line ("2,300+ already in line" style), and a short tester quote with name and role.
3. WaitlistForm — restate the promise in one line above the form; Input and Button inline on desktop; validate email format on blur, disable the button while submitting, and on success swap the form for a card showing the signup's position in line plus a "share to move up" referral link.
4. Faq — an Accordion with four items: launch timing, launch pricing, email policy, who gets access first.
5. Footer — one centered line: product name, contact email, one social link.
Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.
Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.
Spacing: an 8px scale — sections py-24 on desktop and py-16 below md, gap-6 inside the card row; give the hero py-32 so the form clears the fold at 1440x900.
Responsive: at md and below, ProofRow stacks vertically and the inline form becomes a stacked Input over a full-width Button.
The primary call to action is "start a free trial" — the submit label in both the hero and WaitlistForm, and nowhere else. Render the capture once as a shared component in both spots.
After building, check that: an invalid email shows an inline error with no browser alert; the success state renders a position number; both capture points use the same WaitlistForm component; the Accordion works by keyboard; and no section except the hero exceeds one viewport height on mobile.Same task in other tools
Questions about this prompt
v0 gave me two separate form implementations instead of one reused component — how do I fix that?
Reply in the same chat: "extract the email capture into a single WaitlistForm component and render it in both the hero and section 3." v0 handles component-level revisions well when you name the component and both call sites. The acceptance list in the prompt exists to catch exactly this.
The form doesn't actually submit anywhere — how do I wire a real backend?
v0 outputs client components, so ask it to add a Next.js server action or route handler that inserts the email into your database, or point the form at a provider like Formspree. Because the capture lives in one component, the wiring is a single-file change.
How much does the style dropdown really change on a page this small?
The Visual style dropdown replaces the whole visual-direction paragraph, and palette, type, and motion swap with it — the same five-section anatomy can render stark and minimal or loud and editorial. Your structure, copy skeleton, and acceptance checks stay fixed; only the look moves.
Part of the v0 landing-page cluster — start from the main v0 landing page prompt.