Client Logo Grid

Static grid of client logos banded by full-width rules. Each cell reveals a brief role summary — a popover on hover for pointer devices, a panel below the grid on touch.

Live Preview

Proven design experience with brands of all sizes

View Full Version

View on homepage

Layout

Desktop (lg+)

Single row of five cells, divided by vertical rules

Mobile / tablet

Two columns, 2–2–1, with the fifth cell spanning full width

Rules

Cells draw only their own internal dividers, so they reveal with the staggered entrance. The rules above and below the strip use .section-frame-top / -bottom from a wrapper outside the max-width container, so they span the viewport and the strip reads as a band rather than a floating rectangle

Interaction

Pointer devices

Hover opens a popover above the cell with the role, period and a one-line summary. Focus opens it too, but only when the cell matches :focus-visible — a click or tap focuses the button as well, and opening on that would race the click toggle and immediately re-close it. So the popover is keyboard-reachable without misfiring on pointer input. A 120ms close delay prevents flicker when skimming across cells; Escape closes.

Touch devices

Tapping a cell expands a full-width detail panel below the grid. Tapping the same cell closes it, another cell swaps content, and a tap outside the section dismisses it. The open cell is marked by its surface highlight and brightened logo; there is no separate affordance icon.

Detection

(hover: hover) and (pointer: fine)

Animation Details

Entrance

FadeInStagger / FadeInStaggerItem — cells rise in on scroll with the house spring (stiffness 50, damping 20), 0.08s apart

Popover

spring — stiffness 300, damping 25

Matches the hero menu and link previews — every popover on the site shares the .popover-surface glass style and this spring.

Reduced motion

Entrance opts out via FadeIn; popover and panel fall back to opacity only

Current Clients

RewardPay — Freelance Product Designer
Monaco Lawyers — Freelance Product Designer
CommBank — Specialist UI Designer, 2022–2025
Humm Group — Digital Designer, 2020–2022
UNSW — Digital Designer & eDM Developer, 2017–2019

Logos and copy live in the clients array in the component. SVGs are stored in /public/images/.

Logo Styling

full opacity — source SVGs are already #9A9A9A on the dark canvasopen / hover: brightness-150 + bg-surface cell highlightpopover: .popover-surface (translucent + backdrop blur, subtle border)per-logo heightClass normalizes optical letterform size

Usage

tsx

import { ClientLogoGrid } from '@/components/sections/ClientLogoGrid'

// Default usage — data is hardcoded in the component
<ClientLogoGrid />

// immediate: animate on mount instead of on scroll. Use directly below the
// hero, where the grid is already in view and a scroll trigger would leave it
// sitting empty.
// className: spacing overrides for the section. The homepage pulls it up
// against the hero and drops its bottom padding so the band's lower rule
// doubles as the top edge of the testimonials band.
<ClientLogoGrid immediate className="-mt-16 lg:-mt-20 pb-0 lg:pb-0" />

Import

tsx

import { ClientLogoGrid } from '@/components/sections/ClientLogoGrid'