Website designFree→ v0 / Lovable
SaaS Landing Page — Bold Gradient
A high-contrast hero, feature grid, and pricing section for a product launch.
What you get: A single-page site: gradient hero with headline + CTA, 3-column feature grid, pricing table, footer.
Example output. A simplified example of what this prompt can produce, made by Claude from the prompt using the sample values below. Names, prices and reviews are invented, and your result will differ with your own values and the tool you use.
- product_name:
- Plotline
- one_line_description:
- project-planning tool for small design studios
- color_1:
- #4f46e5
- color_2:
- #db2777
- feature_1:
- shared timelines
- feature_2:
- client approvals
- feature_3:
- time tracking
- tier_names:
- Solo, Studio, Agency
Design a landing page for {{product_name}}, a {{one_line_description}}.
Style: bold gradient background (from {{color_1}} to {{color_2}}), large sans-serif headline, generous whitespace, rounded cards with soft shadows.
Sections, in order:
1. Nav bar — logo left, 3 links + a primary CTA button right
2. Hero — headline, one-sentence subheadline, primary + secondary CTA buttons, a product screenshot or mockup on the right
3. Feature grid — 3 columns, icon + title + 1-sentence description each, covering: {{feature_1}}, {{feature_2}}, {{feature_3}}
4. Pricing — 3 tiers ({{tier_names}}), monthly/annual toggle, most-popular tier highlighted
5. Footer — links, social icons, copyright
Use Tailwind CSS. Make it fully responsive down to 375px.