v0 prompt to build a landing page
One prompt, one deploy-ready landing page split into per-section components so you can regenerate the hero without touching the footer. v0 turns this spec into a dark-themed App Router page with a tabbed code demo, scroll-aware nav, and a layout that holds at phone and desktop widths.
Last updated
Build a marketing landing page for a developer tool as one App Router page composed of clearly separated section components: Nav, Hero, LogoRow, Features, CodeDemo, PricingTeaser, FAQ, and Footer, each in its own file under components/landing/ so individual sections can be regenerated in later v0 iterations without touching the rest. Hero: a headline of eight words or fewer, one subline, a primary CTA plus a secondary docs link, no background video. CodeDemo: a tabbed shadcn/ui block with an Install tab holding the shell install command and a Quickstart tab holding a short {{language}} snippet that exercises the tool, each tab with a copy button, monospace font, and real syntax highlighting, not a screenshot. Features: a three-column grid on desktop collapsing to one column below the md breakpoint, each card with a lucide-react icon, a bolded claim, and two supporting lines, no filler adjectives. FAQ: an Accordion with five questions where only one item opens at a time. Behaviors: the nav gains a border and background blur after scrolling past the hero, anchor links scroll smoothly to their sections, and the primary CTA repeats once above the footer. Every image gets explicit width, height, and alt so nothing shifts during load, and every clickable element is a real button or link. Styling: dark theme, one accent color reserved for CTAs and links, content capped near 72rem, system font stack acceptable. Acceptance: the page holds at 375px and 1440px in the v0 preview with no horizontal scroll, the nav changes state on scroll, and the copy button copies the visible tab's snippet.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a marketing landing page for a developer tool as one App Router page composed of clearly separated section components: Nav, Hero, LogoRow, Features, CodeDemo, PricingTeaser, FAQ, and Footer, each in its own file under components/landing/ so individual sections can be regenerated in later v0 iterations without touching the rest. Hero: a headline of eight words or fewer, one subline, a primary CTA plus a secondary docs link, no background video. CodeDemo: a tabbed shadcn/ui block with an Install tab holding the shell install command and a Quickstart tab holding a short TypeScript snippet that exercises the tool, each tab with a copy button, monospace font, and real syntax highlighting, not a screenshot. Features: a three-column grid on desktop collapsing to one column below the md breakpoint, each card with a lucide-react icon, a bolded claim, and two supporting lines, no filler adjectives. FAQ: an Accordion with five questions where only one item opens at a time. Behaviors: the nav gains a border and background blur after scrolling past the hero, anchor links scroll smoothly to their sections, and the primary CTA repeats once above the footer. Every image gets explicit width, height, and alt so nothing shifts during load, and every clickable element is a real button or link. Styling: dark theme, one accent color reserved for CTAs and links, content capped near 72rem, system font stack acceptable. Acceptance: the page holds at 375px and 1440px in the v0 preview with no horizontal scroll, the nav changes state on scroll, and the copy button copies the visible tab's snippet.
Same task in other tools
Questions about this prompt
Why insist on one file per section?
Iteration in v0 is conversational, and scoped files make scoped requests work: rewrite Hero only, try two Features variants. With everything in one page component, a small copy tweak risks regenerating sections you already liked.
How do I adapt this when the product is not a developer tool?
Swap CodeDemo for a product screenshot section with fixed image dimensions and cut the {{language}} quickstart, code snippets mean little to a non-technical buyer. Keep the section list, the scroll-aware nav, and the repeated CTA, those carry over to any audience.
It looks right on desktop but breaks on my phone. What is the usual cause?
Almost always the code demo or a wide hero graphic overflowing the viewport. Ask v0 to wrap wide blocks in an overflow-x auto container, then recheck at the narrow width in the preview's viewport switcher before deploying.