Project 8 E block design & features
The block uses a CSS background image that fills the hero section, with a 40% black overlay for text contrast. Centered white text includes a bold uppercase title and a semi-transparent subtitle, both animated with staggered fade-in-up transitions. A separate white-background content section follows, containing a two-column grid with a "Creative" heading on the left and narrative text, year, location, and credits on the right.
The hero text is rendered in white against the dark overlay, while the content section switches to standard foreground and muted-foreground tokens on a white background. This creates a strong tonal shift between the immersive hero and the readable content area. Entry animations are distributed across both sections with increasing delays.
The full-screen background hero gives the block a landing-page quality. The abrupt transition to a white content section creates a clear two-act structure. No interactive elements are present beyond the entrance animations. Built with Shadcn UI tokens and standard color conventions.
The hero section fills the available width and adjusts its height with padding, while the two-column content section stacks on smaller screens.