Projects 7 block design & features
The block features a centered row of text filter buttons at the top, followed by a two-column grid of image cards below. Clicking a filter category animates the grid to show only matching items using scale and opacity transitions. The active filter receives an underline treatment to indicate selection state.
Each image card occupies a 4:3 container with rounded corners. On hover, a semi-transparent dark overlay fades in and a centered text block slides up from below showing the category label, title in light weight, and a short description. The overlay transition is fast at 200ms while the text slide uses 300ms for a layered entrance.
The component uses a minimal gallery aesthetic with no visible card borders or backgrounds. Filter labels use small uppercase tracking and transition between muted and foreground colors. Empty states display a centered message when no items match the selected filter.
On mobile the grid collapses to a single column, and the filter row wraps to accommodate narrower widths.