AI Hero Section Generator.

Create a split-screen hero section: a left column with an eyebrow label, an H1 of six to ten words naming the outcome, a two-line subheading, a primary "Start free trial" button and a subordinate ghost "Watch demo" button, and a row of five grayscale customer logos underneath. The right column holds a product screenshot inside a browser chrome frame, rendered at an explicit width and height so it never shifts the layout, eagerly loaded and marked as the LCP image with a low-quality blur placeholder behind it. Stack to a single column below 1024px with the screenshot after the copy, and reduce the H1 by one step on mobile.

Create a centered hero section on a single column with a max width of 48rem: a small pill badge announcing a launch, an H1 of seven to nine words, a supporting paragraph of no more than two lines, then one primary button with a quiet text-link secondary beside it. Below that, a one-line trust note and a wall of six monochrome customer logos at reduced opacity that lifts to full on hover. Keep everything above 720px of viewport height on a laptop. On mobile, drop to four logos in two rows and make the primary button full width.

Create a developer-tool hero section: a left column with a GitHub star count chip, an H1 stating the problem in plain language, one line of supporting copy, and a monospace install command in a bordered box with a copy-to-clipboard button that switches to a "Copied" state for two seconds. Beside it, a secondary link to the docs. The right column shows a syntax-highlighted code block with a filename tab, pre-rendered as static markup rather than a client-side highlighter. Single column under 900px with the code block collapsing to a horizontally scrollable pane.

Create a full-bleed hero section with a background photograph covering the viewport width at a fixed 70vh height on desktop and 60vh on mobile. Serve the image at responsive widths with a srcset, load it eagerly as the LCP element, and lay a bottom-up dark gradient scrim over it so overlaid text keeps at least 4.5:1 contrast regardless of the photo. On top, left-aligned: an H1 of five to eight words in large tight-tracked type, one line of positioning copy, and a single outlined white button. No secondary action. Add a reduced-motion-safe fade-in on the copy only.

Create a typographic hero section with no imagery: an H1 spanning most of the container width at a fluid clamp between 2.5rem and 6rem with tight leading and negative letter spacing, broken deliberately across three lines. Underneath, a single supporting sentence at body size in a muted tone, then one primary button and a text link. Add a thin rule and a small row of three metrics with labels at the bottom of the section. Since the H1 is the LCP element, self-host the display font with font-display: swap and preload it. Reflow the H1 to smaller steps at 768px and 480px.

Create a hero section with an inline signup form: centered copy with an H1 of six to nine words and a one-line subheading, then a single-field form on one row — an email input with a visible label, a submit button reading "Get early access", and a helper line about no spam. Handle three states inline: idle, submitting with a disabled button and spinner, and a success message that replaces the form while keeping the container height stable. Show validation errors under the input, associated by aria-describedby. Stack input above button below 640px and keep both full width.