Image & Gallery

Classic three-column CSS masonry gallery for shadcn/ui built from plain image tiles with break-inside-avoid, a centred eyebrow and heading, and a gradient overlay that reveals the project name and year on hover or focus. No JavaScript, just CSS columns and group-hover utilities. Good for portfolio and case-study index pages.

Four-column grid of square thumbnail buttons that open a shadcn/ui Dialog lightbox showing the large photo, title, caption and a position counter, with previous and next icon Buttons and arrow-key navigation handled by useState. The DialogContent keeps its close button and a dark letterbox behind the image. Ideal for project photo archives.

Single-project carousel for shadcn/ui: a large 16:9 image with cross-fade, outline previous and next Buttons beside a heading and a "3 / 8" counter, and a horizontally scrolling thumbnail strip where the active thumb gets a primary ring. State is a single useState index. Suited to project detail pages and case studies.

Centred eyebrow, heading, lead and a shadcn/ui Button above a full-bleed CSS-keyframe marquee of slightly rotated photo cards. The item list is duplicated for a seamless loop, the edges are masked, the track pauses on hover and the animation is disabled under prefers-reduced-motion. Works as a studio intro or a portfolio teaser.

Renovation comparison built with shadcn/ui Badges and a native range input: a greyscale "before" photo is clipped with clip-path over the finished "after" photo and a white divider with a round handle follows the slider value. A left-aligned heading and a small definition list of project facts sit above. Great for interiors, renovations and product retouching.

Sector gallery using shadcn/ui Tabs: Residential, Workplace, Hospitality and Public triggers sit opposite a left-aligned heading, and each TabsContent shows a three-column grid of 4:3 photos with project name and location captions. No custom state, just Tabs. Useful for studios and agencies that organise work by category.

Two-column about section for shadcn/ui with heading, two paragraphs and two Buttons on the left, and a two-by-two photo collage on the right where the first image spans both rows. Good for studio introductions and company story pages where text and imagery should carry equal weight.

Landing hero for shadcn/ui with a centred eyebrow, large heading, lead and two Buttons above two offset rows of photos that drift in opposite directions on a CSS keyframe loop. Edges are masked, hovering pauses both rows, and the motion is removed for users who prefer reduced motion. Designed as a page opener for visual brands.

Timeline section for shadcn/ui that hangs four tilted polaroid-style cards (photo plus italic handwritten-style caption) under a dashed line of years with primary dot markers. Each card straightens and lifts on hover. A centred heading sits above. Good for company history, anniversaries and founder stories.

Video feature for shadcn/ui: heading, lead and a short fact list on the left of a five-column grid, and a wide poster photo with a centred round Play Button and duration Badge on the right. The Button opens a Dialog with the same still at 16:9, a dark overlay, a Play icon and a caption, with no real embed. Ideal for project films and walkthroughs.

Editorial single-image section for shadcn/ui with an eyebrow and heading above a 21:9 photo, and a Card caption overlapping the bottom-left corner with project name, description and a MapPin location line. Quiet and spacious, suited to a featured project or award announcement.

Three alternating rows for shadcn/ui, each pairing a 4:3 photo with a project title, summary, a Year, Location and Size definition list and a "View project" link, swapping sides on every row. Uses only semantic markup and theme tokens. Well suited to case-study overviews and service pages.

Scroll story for shadcn/ui: a sticky left rail with heading, lead and an outline Button, and four photo Cards on the right that pin at increasing top offsets and pile up as the page scrolls. Pure CSS position sticky, no scroll-jacking. Good for process explanations and step-by-step project narratives.

Three-column portfolio grid for shadcn/ui with six linked photos that zoom on hover inside rounded, clipped tiles, each finished with a bottom gradient, title and location. A left-aligned heading and a "View all projects" link sit above. Compact and reliable for portfolio sections.

Hero for shadcn/ui made of two tall 3:4 photos side by side with a Card containing eyebrow, heading, lead and two Buttons positioned over the seam at the centre on desktop; on small screens the second image hides and the Card tucks under the first photo. A strong, image-led page opener.

Filterable portfolio for shadcn/ui using pill-shaped Buttons (All, Residential, Workplace, Hospitality) with aria-pressed, a live "Showing X of Y projects" count and a three-column grid of captioned photos that fade in on each useState re-render. Reduced-motion safe. Ideal for archives that need light-weight filtering without a library.

Single-image feature for shadcn/ui with a left-aligned heading and lead over a 16:9 photo whose bottom edge is overlapped by three translucent, backdrop-blurred stat tiles in a definition list. Good for case studies that need one hero image and a few headline numbers.

Horizontal scroll-snap strip for shadcn/ui with eight tall 4:5 captioned photos, a left-aligned heading with an ArrowRight scroll hint and two small outline icon Buttons that move the strip with scrollBy via useRef. The strip bleeds to the viewport edge while the controls stay inside the container. Good for photo essays and site-visit diaries.

Four-column mosaic for shadcn/ui with seven photo tiles of varying spans, one inverted bg-primary tile with a headline number and one muted quote tile with a QuoteIcon. A left-aligned heading and short lead sit above. Works as a studio overview that mixes imagery with proof points.

Team section for shadcn/ui with an oversized heading spanning two columns beside an introductory paragraph, then a three-column row that places a team photo in the middle flanked by two stacks of muted fact cards with lucide icons (founded, studios, projects, awards). Suited to about pages and recruitment sections.