Gallery 1 block design & features
The section renders three case study cards in a horizontal row inside a container. Each card is an anchor link containing a background image, a company logo, two shadcn/ui Badge components, and a title with an arrow-up-right icon. On hover, the active card expands to 60% width while the remaining cards shrink to 20%, controlled by a React state toggle.
Cards use a dark primary background with a gradient fade at the bottom. The images and logos are absolutely positioned within an oversized inner wrapper that blurs when the card is collapsed. Rounded-xl corners and smooth GPU-accelerated width transitions give the layout its interactive feel.
The overall tone is polished and editorial, pairing large photographic surfaces with typographic overlays in a compact horizontal arrangement. The expand-collapse interaction adds a sense of depth without requiring a separate detail view.
On smaller screens the cards stack vertically and each fills the available width, removing the expand-shrink behavior and instead showing the content in a single-column flow.