Logo Proof Hero
A generous wordmark wall leads the hero, with a modest headline above it.
- Category
- Heroes
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Trusted by finance teams who hate surprises.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Waitlist Capture Hero
heroesA waitlist hero that actually captures: validation, pending, success and queue position.
SaaS Landing Page
templatesA full marketing landing page: nav, hero, logo band, feature grid, and footer.
Announcement Badge Hero
heroesA large pulsing announcement pill anchors the hero above one headline.