Split marketing hero for an integrations or MCP product: outline badge, two-line headline, subtitle, blue primary action with an outline companion, an assurance row under a separator, and an isometric grid of eleven extruded brand tiles floating over a masked ground plane with a dot field backdrop.
A conversion hero for a product whose value is what it connects to. The left column runs badge, headline, subtitle, a primary and outline action pair, and three assurances under a separator. The right column is an isometric grid of extruded tiles, each carrying a real brand mark, floating over a masked ground plane.
Top of a marketing page for an integrations platform, an MCP server catalog, an automation tool, or anything whose pitch is breadth of ecosystem. The grid reads as a catalog at a glance, so it does the work a logo wall usually does while staying a product shot.
page.tsx renders the section edge to edge.components/hero.tsx composes the dark surface, the conversion column, and the scaled grid mount.components/stack-grid.tsx projects every tile with a 2D matrix, sweeps its thickness from the same matrix, draws the ground plane and its guide runs, and owns entrance, float and hover.components/hero-dot-field.tsx tiles the section-wide dot pattern.components/data.tsx holds the grid geometry, the brand marks, and the assurance labels.The surface is dark in both themes, so the ink values are literal rather than token driven. The conversion column is a @container, so the headline scales with the column rather than the viewport.
The grid is drawn on a fixed 624 by 600 canvas and scaled with calc(100cqw/624), so never convert its coordinates to percentages. ISO_MATRIX is the ground projection and TILE_EXTRUDE is the 20 unit thickness in the face's own space; extrusionShadow sweeps the rounded face along it, so a new tile needs only a left/top and a mark, never hand drawn side faces. Brand marks lie on the face under the same matrix, which is what the design does: its 24 unit square logo measures 24 * sqrt(3) wide as an instance, and that only holds under this projection.
Entrance, ambient float, the hover lift and the guide-run pulse are Motion and sit on separate elements, because the wrapper that carries the entrance already owns a transform. The pointer listener sits on a wrapper that never transforms; putting it on the element that lifts makes the tile slide out from under the cursor and flicker. MotionConfig reducedMotion="user" is what honours the OS setting. Swap STACK_TILES for the real integration set; the ground plane and caption stay put.
