Feature grid onboarding hero
Desktop hero section adapted from mobile onboarding screens. Left side: headline, body text, three social proof badges, and two CTA buttons. Right side: a 3×3 photo card grid with dark gradient overlays and feature labels. Built on the same design language as the app-style paywall.
About this vibe coding template
A desktop hero section that takes the visual logic of a mobile onboarding screen and scales it for a landing page. The right half of the layout holds a 3×3 grid of photo cards, each with a dark overlay, a bottom gradient, and a short label identifying a feature or stage. The visual weight of the photo grid anchors the composition and gives the hero immediate product depth without a single word of feature copy. On the left, a large headline sits above a one-line body, three social proof badges drawn from the mobile onboarding pattern, and two CTA buttons, a primary blue one and a neutral secondary. Paste into Bolt, Claude Code, Replit, or Lovable and ask the AI to update the headline, body text, badge stats, button labels, and photo URLs to match your product.
Common questions about this template
What makes this different from a standard hero section?
Most hero sections use a single screenshot or illustration. This template uses a 3×3 grid of photo cards, each with a feature label, which communicates multiple use cases at once without requiring the visitor to read a list. The pattern is adapted from mobile app onboarding screens where the photo grid is used to establish product value before asking for a subscription or sign-up.
How do I update the headline and body text?
Ask your vibe coding tool to update the headline and body text in the left panel. Tell the AI the exact words you want to use and it will replace the placeholder copy while keeping the typography, spacing, and layout unchanged.
How do I change the social proof numbers?
Ask Bolt, Claude Code, Replit, or Lovable to update the numbers in the three social proof badges. Tell the AI your real stats, such as your App Store ranking, star rating, and total users, and it will update each badge label and sub-label while keeping the badge layout intact.
Can I use my own product screenshots in the photo grid?
Yes. Ask your vibe coding tool to replace the background image URLs in the card elements with your own screenshot URLs. Tell the AI the URLs for your product screenshots and the feature label you want on each card. The dark overlay and gradient will be applied automatically by the existing CSS.
Use this AI coding template for
- ·Hero sections for AI tools and SaaS products that want a visual-first landing page
- ·Onboarding landing pages that need strong social proof alongside a feature preview
- ·Product launch pages where a photo grid communicates product breadth faster than a feature list