Bento 17 block design & features
Bento17 is a four-tile bento built with Shadcn UI on a dark section using an eight-column grid. The top row pairs a wide five-column voice preview comparison photograph with a narrow three-column brand voice library UI card showing bank balances and animated count-up totals. The bottom row splits evenly into two four-column tiles: one renders multilingual model-selector rows with Claude, Gemini, and OpenAI icons, the other lists emotion tone options with colored icon tiles for write, image, code, and user actions. Each tile follows the standard visual-above-caption structure inside bordered dark cards.
Dark surfaces with subtle borders and container-query-scaled inner layouts. The lead tile is image-driven while the remaining three are CSS-built UI scenes with list rows, caret icons, and brand marks. Count-up numbers animate when the brand library tile enters the viewport.
Professional and voice-SaaS focused with a control-panel aesthetic. The even split on the bottom row after a wide-narrow top creates a balanced but not symmetrical rhythm. Moderate complexity across one photographic tile and three interface-forward panels.
Tiles collapse to one column on smaller screens with all four cards stacking in source order.