Preview image. Unlock full-res
Centered dark hero with oversized headline, email signup, dual CTAs, 3D mascot icons, and an embedded product UI preview below.
Summary
A centered hero on a deep blue-violet gradient leads with a large platform headline and email capture, then transitions into a glowing product UI frame with Copilot chat and code editor tabs.
Visual description
Dark radial gradient background fading from navy to near-black. Centered white oversized headline reads across two lines, followed by a muted subline about an AI-powered developer platform. Below, a rounded email field sits beside a filled green Sign up button and an outlined Try GitHub Copilot button. Three floating 3D mascot icons (purple robot, pink cat, yellow duck) scatter above small sparkle dots. Beneath the CTAs, a large rounded rectangle with a soft purple glow frames a product mockup: left panel shows GitHub Copilot chat with explanation text and a command input; right panel shows a code editor with TypeScript tabs open. A pill-shaped tab bar below the mockup lists Code, Plan, Collaborate, Automate, and Secure with Code selected. A one-line caption sits under the tabs.
Key takeaway
The hero-to-product handoff in one continuous scroll: headline and signup stay minimal while the UI preview carries proof immediately below. The dual CTA pairing (primary signup vs secondary Copilot trial) keeps acquisition and product trial equally visible without a third option.
Reuse notes
Best for developer tools that can show a real IDE or dashboard capture. Requires strong product imagery and a dark gradient system; the 3D mascots add personality but are optional. The embedded tab bar implies more sections follow, so this hero pairs well with tabbed feature blocks downstream.
