Waiting
Customize and export code (opens in a new tab)Compare designs
Each model builds its own version. Pick your favorite and customize it.
Desktop preview
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
How to create best hero section components?
Lead with one promise. Tell the AI who your audience is, what your product helps them do, and the exact headline and primary button you want. Specify whether the hero should use a product screenshot, a photo, or typography as its main visual.
Set the hierarchy. Describe the balance between copy and imagery, your preferred background, and how much content should appear before scrolling. Ask for the headline, supporting copy, and main action to remain clear on mobile.
Compare the first impression. Review each version at narrow and wide widths. Choose the design that makes your offer and next step easiest to understand, then refine its spacing and contrast.
Examples of hero section components
Metis
Metis Hero Section with Dashboard Preview and Customer Logos
A landing page hero with a navigation bar, centered headline and subheading, two CTA buttons, and a faded dashboard illustration surrounded by pastel blobs. A row of muted company logos sits below the illustration as social proof.
Nightsable
Dark Hero Section with Credit Card Promo for Nightsable Card
A dark full-width hero section with a top navigation bar, a large left-aligned headline about credit history, short supporting text, and a lime call-to-action button. A decorative gradient credit card illustration sits on the right side as an illustrative visual.
Wrexa
Real estate hero with photo background, headline, and promo email card
A full-width hero section with a large photograph of two people behind white headline text reading "Find your editor and create your home." A purple promo card on the lower left contains an email input, an Accept button, and a discount code, while a dark header bar with logo and menu toggle sits above.
FilyTreck
Split-screen hero with app download promotion and phone mockup
A landing page hero section for the FilyTreck productivity product, with a large headline and call-to-action on the left and a light gray panel on the right promoting the mobile app with App Store and Google Play badges and a phone device mockup. The top navigation bar includes links, Login and Get started buttons.
Explore component generators
Generate any section of your website with the same multi-model workflow.
No categories match your search.
