Bento 50 block design & features
Bento50 is an asymmetric bento built with shadcn/ui on a white section, arranged across an eight-column grid with alternating three- and five-column spans. A narrow left tile carries a Professional tone headline with a full-bleed product PNG screenshot. Beside it, a wide Focused content blocks card renders a multi-panel AI onboarding flow with step cards, form fields, chat input, search dropdown, and mobile or web toggles. The second row mirrors the widths with a wide scannable layout screenshot on the left and a narrower Smooth spacing tile on the right showing an arc-masked lifestyle photo, gradient background, and a floating payment notification with avatar and spinner.
Light neutral card backgrounds, white bordered inner panels, and a green-yellow gradient accent on the payment tile keep the palette soft and marketing-friendly. Screenshots scale in on scroll, onboarding panels slide in sequentially, and the notification spinner rotates periodically. Copy blocks sit below or beside visuals depending on the tile, giving each span a distinct content rhythm.
The block feels like a general-purpose light marketing mosaic for AI or productivity products. The onboarding flow tile is the most UI-heavy element, while two tiles lean on PNG screenshots for speed. Complexity is moderate to elaborate across four spans with uneven column weights.
The eight-column mosaic collapses to a single column on smaller screens, preserving tile order from top to bottom.