Client Logo Grid

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 on touch. Used under the home hero and as the foot of the /services/ux-audit hero, on that hero's own ground.

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. Full-width rules run above and below the strip, drawn on a wrapper outside the max-width container so they span the viewport — the only frame lines left on the site, kept as a deliberate exception

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" />

// As the foot of a hero: render it inside the hero's SectionFrame, below the
// copy/illustration grid, with no padding — the hero sets the gap above, and
// the bottom rule is the hero's lower edge (/services/ux-audit).
<ClientLogoGrid className="pt-0 pb-0 lg:pt-0 lg:pb-0" />

Import

tsx

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