Build a Stylish One-Page Startup Website with TailwindCSS
Build a Stylish One-Page Startup Website with TailwindCSS
S
@sopheareachte
Bolt
Turn a modern multipage startup template into a fully responsive one-page website using TailwindCSS. This detailed prompt captures the original design—complete with animated mobile nav, feature grids, pricing tiers, and smooth scrolling navigation—perfect for crafting polished landing pages that convert. Instruction: 1) Download this image: https://drive.google.com/file/d/1v8KEY6x3bA7O0_Qmmkt0lmiHkxxbdl2F/view?usp=sharing 2) Copy the prompt below 3) Go to Bolt.new, attach the image and paste the prompt in there to get this website
View Project →“Create a single-page modern startup landing page using TailwindCSS. Recreate the layout and design exactly as in the provided multipage HTML structure, but convert it into a one-page layout with smooth scrolling navigation. Use internal anchor links (e.g., #howitworks, #features, #pricing, #faq) instead of separate pages. Key visual and functional requirements: Navigation: Sticky nav with left-aligned logo, centered menu (How it works, Features, Pricing), and right-aligned buttons for Login and Signup. On mobile, use a toggle menu with animation and overlay (similar to Alpine.js behavior). Clicking any menu item scrolls smoothly to the section instead of navigating to other pages. Fonts and Visual Style: Use Montserrat for UI text and PT Serif for headings. Backgrounds use a mix of black, white, and secondary gray tones. Include underline background effects on section titles (bg-underline1, bg-underline2, etc.). Preserve all illustrations (MacBook image, highlight SVGs, icons like Caret, Heart, Checkbox). Hero Section: Large heading with underline graphic. Short paragraph. Two call-to-action buttons: primary (black background, white text) and secondary (outlined). Right side includes MacBook mockup with decorative highlight SVGs. How It Works Section: Three-step vertical icons and labels: Eat, Sleep, Rave. Use numbered circular icons and centered text. Features Section: Four feature blocks in a two-column grid (2x2 layout). Each block includes an icon (Heart.svg), title, and descriptive paragraph. Pricing Section: Three tiered pricing cards: “The Good”, “The Bad”, and “The Ugly”. Each card includes a title, price, list of benefits with checkboxes, and a “Choose plan” button. Cards should be styled with shadows, rounded corners, and hover interaction. Respect the layout offset used for visual depth (md:top-24, md:top-12, etc.). FAQ Section: Accordions for each question. Question toggle reveals the answer below. Use Caret icon to indicate toggle state. Text white on black background. Footer: Logo and social media icons (Facebook, YouTube, Instagram, Twitter). Footer text: “© 2025 STARTUP. All rights reserved”. General instructions: Use only TailwindCSS for all styling. Ensure the site is responsive across all breakpoints. All transitions (e.g., menu open, FAQ toggle) should mimic simple Alpine.js-like behavior. Use placeholder image paths for now and include img tags as shown. Keep hover effects, rounded borders, and spacing accurate to the original design. This page should look like a premium SaaS startup site — clean, stylish, and engaging.”
5 views