Back to templates
lab pick new

Modern SaaS Hero Section

A clean hero with glassmorphism effects, gradient CTA, and social proof badges.

Preview image coming soon

Tool Outputs

Winner
v0
v0 ↑ 42
lovable
lovable ↑ 28
bolt
bolt ↑ 15
cursor
cursor ↑ 19
claude_code
claude_code ↑ 11

The Prompt

Create a modern SaaS landing page hero section with:
- Glassmorphism card as the hero container
- Gradient "Start Free Trial" CTA button
- Three social proof badges (e.g. "Trusted by 10,000+ developers")
- Subtle grid background pattern
- Responsive: stacked on mobile, side-by-side on desktop

Lab Notes

## Tips - v0 generates the most polished output with this prompt - Lovable tends to overuse gradients — reduce with "subtle gradient" keyword - Cold start: v0 output > Lovable > Bolt in terms of design quality ## Real-world Use This hero pattern works well for B2B SaaS products targeting developers. The social proof badges are essential — tools without explicit badge instructions tend to omit them. ## Failure Cases - Claude Code sometimes generates a full page instead of just the hero section. Add "Output only the hero section" to constrain.

See the full comparison

Detailed breakdown of how each tool performed with this prompt.

View Arena