The brief
BN Automotive is a London-based specialist dealer for performance and luxury cars — founded by Ben Kannan in 2024 to do the trade properly: hand-selected inventory, transparent sales, real aftercare. We built their digital presence from a blank repo: a marketing site that doubles as a working inventory showroom and editorial journal.
The design language
The visual language is editorial typography on a Swiss grid — display headlines set in Sora 800 uppercase with a single italic accent word in racing red, body copy in DM Sans, hairlines in place of card chrome, and a hard "no border-radius except pills" rule. The result reads like a Sunday-supplement magazine spread rather than a typical dealer site — exactly the calm-but-confident voice the brand wanted.
How it's built
Built on Next.js 16 with the App Router, React 19, and Tailwind v4's native @theme token system. All 9 routes are statically prerendered for instant first paint and SEO. Motion is handled by motion/react with full prefers-reduced-motion support, smooth scroll via Lenis sitewide, and it's deployed to Vercel with auto-deploy from master.
The hero uses a dual layout: full-bleed cinematic on desktop with overlaid ivory typography, and a stacked editorial treatment on mobile that shows the image at its native aspect ratio to preserve composition — switching layout rather than cropping. The inventory is a card grid with sticky filters and URL-synced state; vehicle pages pair an image gallery with a sticky info panel; and journal articles run as a narrow reading column with Sora 800 drop caps.
Signature moves
Word-by-word headline reveal
Each display word animates up out of a masked overflow:hidden window; the italic accent words land in racing red.
Hairline-fused card grid
Vehicle cards share borders (-mt-px -ml-px) so the grid reads as one engineered field, not separate tiles.
URL-synced filters
Brand, body, fuel, price, transmission, and sort all live in the URL — shareable, back-button-friendly inventory views.
Brand-marque ticker
Endless marquee of 10 marques, rendered by tiered priority: custom logos, then simple-icons paths in each brand's official hex, then wordmark fallback.
Ghost wordmark footer
Oversized stroke-outline "BN AUTOMOTIVE" bleeds into the page edge as a closing gesture.
Data strip counter-up
Stats animate from 0 to target on viewport enter; a single dark CTA band inverts the colour tokens before the footer.
The site — 9 routes
| / | Home | Dual-layout hero, brand ticker, stats strip, featured stock, heritage block, testimonials, journal teaser, Sell-Your-Car dark CTA, ghost-wordmark footer |
| /stock | Inventory | Full inventory, filter drawer with URL-synced state, hairline-fused card grid |
| /stock/[slug] | Vehicle | Gallery + sticky info panel (price, finance estimate, CTAs, trust strip), specs, description, similar cars |
| /about | About | Founder story, the principle, by-the-numbers data strip with counter-up, team hairline grid |
| /services | Services | Four service blocks with alternating image sides, FCA disclaimer, dark CTA band |
| /sell-your-car | Sell | Scroll-CTA hero, three-step process, 10-field valuation form, 6-item FAQ |
| /contact | Contact | Four-method hairline grid (WhatsApp / phone / email / visit), contact form, hours block |
| /journal | Journal | Article listing using shared hairline-row teasers |
| /journal/[slug] | Article | Centred meta strip, Sora drop cap, narrow reading column, related articles |
The stack
React 19
Tailwind v4
motion/react
Lenis
Vercel
Performance & accessibility
- All routes static — generated at build time for instant first paint.
- prefers-reduced-motion respected sitewide — every animation collapses to a static end-state when the OS asks.
- Mobile-tested at 375px — no horizontal overflow, every form operable, hero composition preserved by switching layout instead of cropping.
- Semantic landmarks — proper
nav/main/sectionstructure,aria-labelon interactive controls. - Responsive image sizing — per-breakpoint
sizeshints and AVIF/WebP delivery vianext/imageprevent over-fetching on small screens.
Want a site that doesn't look like everyone else's?
BN Automotive went from a blank repo to a distinctive, fast, fully-built storefront. If your brand deserves better than a template, let's talk.