Project 10 block design & features
The block begins with a header that splits a large bold title and a short description on the left from a shadcn/ui Button and a pair of category and medium labels on the right. A full-width hero image in a rounded muted container follows. Three numbered content sections (01, 02, 03) are arranged in a two-column grid, each pairing a large number and heading on the left with body paragraphs on the right, separated by bottom borders.
Below the numbered sections, two images sit in a responsive two-column grid with rounded containers and a hover scale effect. A continuous horizontal marquee of three additional images loops infinitely using a linear CSS translate animation, with duplicated elements to keep the strip seamless. All entry animations are staggered through Framer Motion container and item variants.
The aesthetic is gallery-like and monochrome, reinforced by the black-and-white photography and generous spacing between sections. The numbered headings use a very large, light-weight typeface that contrasts with the bold section titles. Hover interactions on the grid images provide a subtle zoom.
On mobile the header stacks vertically, numbered sections collapse to a single column, and the two-column image grid becomes full width.