Feature 101 block design & features
Feature101 is a capabilities overview built with shadcn/ui layout conventions and hard-coded Lucide icons. A centered title and supporting line introduce the section. The body is a CSS grid of rounded muted cards: one large cell spans two columns and two rows and pairs text with a wide placeholder image that shifts upward slightly on hover; smaller single-height cells hold icon, title, and description; a wide bottom row splits text and another image across two columns on large screens.
Muted panel fills, rounded corners, and generous internal padding give a soft product-marketing feel. Icons sit at a consistent size with thin strokes. Images use shared placeholder assets and border rounding to match the cards. Motion is limited to the subtle hover translation on imagery.
The block feels polished and moderately complex due to the bento spans and mixed text-plus-image cells. It mixes CSS layout complexity with a few stock images rather than many custom assets. Compared with a uniform three-up icon row, the uneven grid is the distinctive trait.
On smaller breakpoints the grid reflows so cells stack while keeping readable gaps; large-span behavior simplifies into a vertical flow.