Project 7 block design & features
The block opens with a 700 px tall hero section using a CSS background image behind a 40% black overlay, with centered white text including a small tracking-wide label, a large semibold title, and a description paragraph. Four prose sections follow, each constrained to a narrow container with light-weight headings and muted-foreground body paragraphs covering design philosophy, architectural innovation, construction, and project impact. A Shadcn UI Carousel with previous and next arrows sits between the first and second prose sections, displaying three images at a 5:3 aspect ratio. A panoramic image in a wide aspect container and a two-by-two square image grid appear between later sections.
The hero uses a background-image CSS approach rather than an img element, with the dark overlay as an absolute-positioned div. Prose sections use consistent heading and paragraph styling throughout. The carousel shows one slide at a time with absolute-positioned navigation arrows. The image grid uses square aspect ratios for uniform sizing.
The block reads as a comprehensive architectural case study, combining narrative depth with varied visual presentations. No entrance animations are present beyond the carousel interaction. Built with shadcn/ui Carousel and layout tokens.
On smaller screens the image grid maintains its two-column structure and the carousel occupies the full container width.