Social Proof Bar

testimonialfrom Community Creative

Live

AI Usage Rules

Use SocialProofBar between hero and features sections. Show 4-6 company logos. Logos are grayscale by default, colored on hover. Add an optional metric for extra credibility (e.g., "10,000+ teams use our platform").

Code Template

interface SocialProofBarProps {
  label: string
  logos: Array<{ name: string; src: string }>
  metric?: { value: string; description: string }
}

export function SocialProofBar({ label, logos, metric }: SocialProofBarProps) {
  return (
    <section className="border-y border-white/10 bg-white/[0.02] py-12">
      <div className="mx-auto max-w-7xl px-6">
        <p className="text-center text-sm font-medium uppercase tracking-widest text-gray-500">{label}</p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
          {logos.map((logo) => (
            <img key={logo.name} src={logo.src} alt={logo.name} className="h-8 object-contain opacity-50 grayscale transition-all hover:opacity-100 hover:grayscale-0" />
          ))}
        </div>
        {metric && (
          <div className="mt-8 text-center">
            <span className="text-3xl font-bold text-white">{metric.value}</span>
            <span className="ml-2 text-sm text-gray-500">{metric.description}</span>
          </div>
        )}
      </div>
    </section>
  )
}

Props Schema

Property	Type	Default
label	string	—
logos	array	—
metric	object	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "label": {
      "type": "string"
    },
    "logos": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "src": {
            "type": "string"
          },
          "name": {
            "type": "string"
          }
        }
      }
    },
    "metric": {
      "type": "object",
      "properties": {
        "value": {
          "type": "string"
        },
        "description": {
          "type": "string"
        }
      }
    }
  }
}