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.
Build a Vercel-style split-grid hero section. Design philosophy — developer confidence through restraint: 1. Background: Pure black (#000000) — not dark gray, not near-black. Black means finality, infrastructure, the void from which deployments emerge. Optional dot-grid pattern (1px dots, 32px spacing, #1a1a1a) 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 #ededed (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 #888888, 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 (#ffffff) bg, black text, rounded-md, px-6 py-3. The inverted contrast (white on black page) makes it impossible to miss. Secondary — #888888 text link with chevron. No border, no bg — it earns attention through placement, not decoration. 6. Right panel: bg #111111, rounded-xl, border #333333, 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 rgba(255,255,255,0.04)). 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.