
Preview image. Unlock full-res
Dark gradient-backed feature section introducing Copilot Agent mode with a large product UI capture, benefit copy, and bullet highlights.
Summary
A centered Copilot feature block that uses a gradient-framed product screenshot to demonstrate multi-file agent edits, with headline, narrative copy, and paired benefit bullets below.
Visual description
Full-width dark charcoal background. Small centered pill badge reads "Features." Large white display headline states "Agent mode: Because two brains are better than one." Center stage is a product UI screenshot inside a soft rounded rectangle with a purple-to-teal gradient glow behind it. The capture shows a Copilot chat panel summarizing completed search functionality tasks, a "3 files changed" diff list (race-service.ts, +page.server.ts, +page.svelte), Keep and Undo controls, and an input bar noting agent mode with a Claude 3.5 Sonnet model selector. Below the screenshot, a two-column footer: left has subhead "From broken to brilliant, fast," body copy about sweeping multi-file changes, and a blue "Try agent mode" text link; right lists two bullet points connected by a thin vertical rule, describing autonomous planning and tedious-task handling.
Key takeaway
The gradient halo turning a utilitarian IDE panel into a hero visual. Pair one large product proof with a short narrative plus two scannable bullets instead of a long feature list.
Reuse notes
Strong template for AI or dev-tool features where the UI itself is the proof. Needs a compelling in-product screenshot; the gradient frame carries the marketing polish. Works on dark pages only; headline scale demands width.




















