Infrastructure demands symmetry. A hard vertical split — code on the left, deploy preview on the right — with a headline that reads like a terminal command. The dark background and dot-grid pattern whisper 'developer tool' before a single word is read. What makes this hero section work isn't what it shows, but what it omits: no gradients, no illustrations, no marketing theatre. The empty right panel IS the product demo.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Vercel-style split-grid hero section.
Design philosophy — developer confidence through restraint:
1. Background: Pure black (#08080D) — not dark gray, not near-black. Black means finality, infrastructure, the void from which deployments emerge. Optional dot-grid pattern (1px dots, 32px spacing, #12121E) to subtly reference the underlying grid system without being decorative.
2. Layout: Two-column grid (50/50) on desktop, stacked on mobile. Left column holds text content, right holds an interactive preview window. The preview IS the product — showing a real deploy interface, code snippet, or terminal output is worth more than any illustration.
3. Headline: 48-64px (clamp(3rem, 4.5vw, 4rem)), font-weight 700, tracking -0.04em, color #EEEEF2 (not pure white — pure white on black creates too much contrast and feels harsh). One line if possible. Developer tools earn trust through brevity.
4. Subtitle: 16-18px, font-weight 400, color #6E6E84, line-height 1.6. Maximum two lines. Write like documentation, not marketing — developers can smell inauthenticity from the first sentence.
5. CTA group: Primary — white (#EEEEF2) bg, black text, rounded-md, px-6 py-3. The inverted contrast (white on black page) makes it impossible to miss. Secondary — #6E6E84 text link with chevron. No border, no bg — it earns attention through placement, not decoration.
6. Right panel: bg #12121E, rounded-xl, border #23233A, generous padding. Fill it with a real product screenshot or interactive demo — never placeholder content. The panel should have a subtle inner glow (box-shadow: inset 0 1px 0 #EEEEF20A).
7. Animation: Left content slides from translateX(-20px) with opacity, right panel from translateX(20px), 600ms ease-out, 150ms stagger. The symmetrical entrance reinforces the split-grid concept.
The hero should feel like opening a terminal — purposeful, fast, and ready.Infrastructure demands symmetry. A hard vertical split — code on the left, deploy preview on the right — with a headline that reads like a terminal command. The dark background and dot-grid pattern whisper 'developer tool' before a single word is read. What makes this hero section work isn't what it shows, but what it omits: no gradients, no illustrations, no marketing theatre. The empty right panel IS the product demo.