Landing Page Design Prompts

Design a SaaS product landing page with these sections in order: 1) Hero with headline, subheadline, CTA button, and product screenshot. 2) Logo bar of trusted companies. 3) Three-column feature grid with icons. 4) Large product demo section with screenshot and feature callouts. 5) Pricing table with 3 tiers. 6) Testimonial carousel with photos and quotes. 7) FAQ accordion. 8) Final CTA section. Use a modern, clean design with generous whitespace.

Create a modern startup landing page with shadcn/ui. Hero section with large heading, gradient text accent, subtext, two CTA buttons (primary + secondary), and a browser mockup image. Below: animated stats counter bar, 3-column feature cards with Lucide icons, a testimonial section with avatar + quote cards, and a dark footer with newsletter signup. Use Inter font, smooth scroll, and a purple-to-blue gradient accent.

Build a Next.js landing page with Tailwind CSS and Framer Motion. Structure: sticky navbar with logo and CTA, full-viewport hero with animated gradient background and floating UI mockup, trust bar with grayscale logos, alternating left-right feature sections with images, pricing cards with popular plan highlighted, FAQ with accordion, and footer. Implement smooth scroll-triggered animations using Framer Motion's useInView.

Generate a complete landing page as a React component. Include: responsive hero with headline (48px desktop, 32px mobile), description paragraph, and primary CTA button. Feature section with 2x3 grid of cards, each with an icon, title, and description. Social proof section with company logos and a stat bar (e.g., '10K+ users'). Testimonial cards with star ratings. Final CTA with contrasting background color. All sections should have consistent max-w-6xl centering and py-24 spacing. Use Tailwind CSS.

Design a waitlist landing page for a mobile app. Single viewport-height hero: headline at 56px/1.1 in a variable-weight sans (Inter or Geist), subheadline at 18px #52525b, and an email capture form (input + button in one pill, 56px tall) as the only CTA. Right side shows a phone mockup at a slight -6 degree rotation with a soft #a78bfa glow. Palette: background #fafafa, text #18181b, accent violet #7c3aed. Below the fold: a 3-step 'How it works' row and a live counter of signups. Form needs a visible label, autocomplete=email, and a 2px focus ring at 3:1 contrast against the background.

Create a landing page for a CLI developer tool with shadcn/ui. Dark hero: background #0a0a0a, headline 60px in Geist with a #22d3ee gradient accent on one word, and an install command block (JetBrains Mono 14px, background #171717, copy button with a 'Copied' toast). Below: a tabbed code demo (npm/pnpm/yarn), a 3-column feature grid with 20px Lucide icons, a terminal-style testimonial section, and GitHub star count badge. Section spacing py-24, max-w-5xl. Keep body text #a1a1aa at minimum 4.5:1 contrast and give the copy button an aria-label.

Build a Next.js landing page for a free ebook download. Two-column hero: left has an eyebrow label (13px uppercase tracking-wide #b45309), a 48px serif headline (Fraunces or Playfair Display), 5 bullet points with check icons of what readers learn, and a form (name + email, stacked, 48px inputs); right shows a 3D book cover mockup with a #fbbf24 back-glow. Palette: cream background #fffbeb, ink text #292524, amber accent #d97706. Add a testimonial strip with 3 quotes and an author bio section with a 96px round photo. Validate email inline with error text in #b91c1c plus an icon, and keep labels visible (no placeholder-only fields).

Generate a design agency landing page as a React component. Structure: oversized hero headline at clamp(48px, 8vw, 96px) in a grotesque font with -0.03em letter-spacing, a marquee strip of client names, a services list as full-width rows (72px tall, border-t #e4e4e7) that expand on hover to reveal a description, a case study grid with 4:3 image cards and hover zoom (scale 1.03, 400ms ease-out), and a footer CTA reading 'Start a project' at 40px. Palette: white #ffffff, near-black #111111, one accent chartreuse #bef264 for hover states and selection. Respect prefers-reduced-motion by disabling the marquee and hover zoom.