Bolt prompt to build a landing page
This prompt gets you a landing page that survives contact with Netlify's deploy button in Bolt: no external fonts, no third-party calls, no animation library to break. Each section lives in its own component under src/sections, so rewriting the hero copy or swapping the logo strip never risks the rest of the page.
Last updated
Build a landing page for a developer tool as a Vite + React + Tailwind project, ready to deploy to Netlify straight from Bolt. Sections, top to bottom, each its own component in src/sections/: 1. Hero.tsx: one-line value proposition, a subline, primary CTA Start free, secondary Read docs, and a terminal-style block showing an install command with a copy button. 2. Features.tsx: three cards, each an icon, a bold claim, two sentences. No carousel. 3. HowItWorks.tsx: a numbered three-step row that stacks vertically under 768px. 4. SocialProof.tsx: a grayscale logo strip using placeholder SVGs I can swap, and no invented testimonial quotes. 5. FAQ.tsx: five items using native details and summary elements, no JavaScript accordion. 6. Footer.tsx: links, a license note, a mailto. Behaviors: a fixed header fades in past 400px of scroll, anchor links smooth-scroll to sections, the copy button flashes Copied for two seconds, and the CTA scrolls to a signup form that validates email format inline rather than with a browser alert. Wire the form to a console.log stub marked TODO for the real endpoint. Constraints: system font stack only, no external font or image requests, every asset inline SVG or local so the deployed page makes zero third-party calls. One h1 on the page, alt text on every image, real button elements for every action. No animation library, CSS transitions only. Acceptance: list the files created, then confirm in Bolt's preview that the page holds together at 1280px, 768px, and 360px without horizontal scrolling.
Same task in other tools
Questions about this prompt
Why does the prompt ban external fonts and remote images?
Every third-party request is something that can fail after you deploy from Bolt to Netlify, and a marketing page has no excuse for a render-blocking font. The system stack plus inline SVG keeps the page self-contained, so what renders in the preview is exactly what ships.
How do I adapt this for a product that is not a developer tool?
Replace the terminal-style install block in Hero.tsx with a product screenshot or a short demo figure, and repoint the copy button behavior at a signup CTA. The section structure holds for most products. Only the hero proof element is developer-specific, so that is the one piece to rewrite.
The sticky header jumps or flickers when it appears. What is the fix?
That usually means Bolt implemented it by toggling the position property on scroll, which reflows the page. Ask for a header that is always position fixed, with only opacity and background transitioning past the 400px threshold, then recheck the preview at phone width where the flicker shows most.