Preview image. Unlock full-res
Dark gradient hero for GitHub Copilot with oversized headline, dual CTAs, and a large VS Code editor mockup showing agent mode chat.
Summary
A centered GitHub Copilot hero that leads with "AI that builds with you" over a glowing code-editor demo, framed by full site navigation and a product sub-nav.
Visual description
Deep blue-black gradient background with horizontal blue-purple light streaks behind the product frame. Top: standard GitHub global nav (logo, Product, Solutions, Resources, Open Source, Enterprise, Pricing, search, Sign in, Sign up) plus a Copilot sub-header row (For business, Extensions, Tutorials, What's new, Plans & pricing). Center stack: small pill badge "Now supercharged with agent mode", oversized white headline, two CTAs side by side (filled white "Get started for free" and outlined "See plans & pricing"), and a secondary line with VS Code icon linking "Open now". Below, a large rounded editor window shows TypeScript in the left pane and a Copilot Chat sidebar on the right with "Edit with Copilot", agent-mode instructions, a chat input tagged to service.md, and a model dropdown reading "Agent v Claude 3.5 Sonnet". A purple 3D Copilot robot head floats at the top-right of the editor frame.
Key takeaway
The badge-to-headline-to-dual-CTA rhythm keeps conversion paths obvious while the editor mockup does the product explaining. Glow streaks behind one UI frame create depth without extra imagery.
Reuse notes
Strong template for AI dev-tool landings that need to show in-editor chat. Requires a credible product screenshot and dark palette. Navbar included means this is a full above-the-fold capture, not an isolated hero block.
