Logo Proof Hero
A generous wordmark wall leads the hero, with a modest headline above it.
DOM + CSS1 dep1 file · 2 KB TSX
Props
"use client";
// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { motion } from "framer-motion";
const DEFAULT_LOGOS = "Northwind, Vantage, Coral, Fernhill, Argus, Basecamp";
function LogoWall({ logos, grayscale }: { logos: string[]; grayscale: boolean }) {
return (
<div className="grid w-full max-w-4xl grid-cols-3 gap-4 md:grid-cols-6">
{logos.map((logo, i) => (
<motion.div
key={logo}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.06, duration: 0.45 }}
className={`flex items-center justify-center rounded-xl border border-slate-200 bg-white py-8 text-lg font-bold tracking-tight ${
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
Most heroes tuck social proof into a thin strip beneath the fold; this one promotes it to the lead, giving the logo wall more vertical weight than the headline sitting above it. The bet is that for the right audience, "who else uses this" is a stronger opener than any claim the copy could make — it's the right call for enterprise and B2B tools with real, recognizable customers, and actively counterproductive for an early product with nothing to show yet, where a fabricated-looking logo grid reads as padding. Since real logo marks aren't available here, each entry renders as a bold wordmark in a bordered card rather than an image — a legitimate placeholder pattern, but note it should be swapped for actual SVG logomarks before shipping, since text logotypes read as a mockup rather than finished proof. The `grayscale` toggle mimics the common desaturate-until-hover treatment without requiring separate colored/grayscale image assets. Caveat: six logos is close to the ceiling for this grid at hero scale — more than that and it stops reading as curated proof and starts reading as a directory.
