Logos Dark Inset Bento Case Study

Frame your single best customer story inside a dramatic dark panel with this dark inset bento featured case study logo block for React and Next.js. Features a rounded-2xl bg-foreground inverted outer panel, an inverted headline cluster using text-background opacity tiers, a three-column two-row bento grid where one tall featured cell holds an inverted size-14 flagship logo inside a bg-background mark container with a text-2xl bold wordmark, an industry pill, a text-base leading-relaxed quote with specific numeric tension, a highlighted metric with tabular-nums alignment, and an attribution row with avatar initials, while four content-rich supporting cells in a two-by-two layout each carry a size-11 icon container on top with an industry pill, plus a wordmark and retention metric on the bottom, all using border-background slash fifteen and bg-background slash zero-point-zero-five for the inverted cell treatment. Built with TypeScript, motion/react parent entrance with staggered per-cell fade using useReducedMotion, Lucide React icon marks paired with five invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for hero case study sections on dark-panel page breaks, high-contrast credibility moments, and hybrid logos-plus-testimonial layouts where hierarchy matters against a dramatic background.

Related Components

FAQ