Dark split marketing hero for an MCP usage product: status badge, highlighted headline, capability chips, dual call to action, brand row, and an animated isometric bar chart charting agent usage velocity with a flagged spike.
A conversion hero for developer tooling that has a usage or telemetry story to tell. The left column carries the pitch and the calls to action; the right column renders an isometric MCP usage chart that gives the surface its point of view.
Top of a marketing page for an API, agent platform, or usage-metered product. The chart reads as product evidence rather than decoration, so it suits pricing-adjacent and developer-audience pages.
page.tsx renders the section edge to edge.components/hero.tsx composes the dark surface, the conversion column, and the chart.components/usage-velocity-chart.tsx draws the isometric scene as one inline SVG on a fixed 624 by 600 canvas and animates it with CSS keyframes.components/data.tsx holds the bar geometry, capability chips, and brand marks.The surface is intentionally dark in both themes, so neutrals are literal while accents use the teal scale. The conversion column is a @container, so the headline scales with the column rather than the viewport. Bar extrusion is stored per bar because the source design sized the bars by eye; it is not derived from value. Swap USAGE_BARS for real readings and keep one bar flagged with accent so the callout still has a subject.
