Skip to main content
The Social Proof section is designed to build trust by displaying the logos of companies or partners you work with. It features a scrolling marquee to showcase a wide range of logos in a compact space.

​
File Location

The component is located at src/components/marketing/social-proof.tsx.

​
How to Customize

Customizing the Social Proof section involves editing the heading text and the list of company logos.
1

Editing the Heading Text

The text displayed above the logos can be changed by editing the <p> tag within the component.
src/components/marketing/social-proof.tsx
// ...
<div className="text-center">
  <p className="text-sm md:text-base text-muted-foreground font-medium">
    Trusted by the world's leading innovators
  </p>
</div>
// ...
2

Managing Company Logos

The logos displayed in the marquee are managed by the companies array at the top of the file.

​
Adding, Removing, or Changing Logos

To change the logos, simply edit the objects in the companies array. Each object requires a name (for the alt text) and a logo path.
src/components/marketing/social-proof.tsx
const companies = [
  {
    name: "Your-Company",
    logo: "/logos/your-company-logo.svg",
  },
  {
    name: "Another-Partner",
    logo: "/logos/another-partner-logo.png",
  },
  // ... add or remove other companies
];
New logo image files should be placed in the public/logos/ directory. Both SVG and PNG formats are supported.
3

Customizing the Marquee Animation

You can customize the marquee’s scrolling animation by adjusting two CSS custom properties in the <Marquee> component’s className.
  • --duration: The time it takes for one full loop of the animation. A lower value is faster.
  • --gap: The amount of space between each logo in the marquee.
You can change these values using Tailwind CSS’s “arbitrary values” syntax.
src/components/marketing/social-proof.tsx
// ...
<div className="relative flex w-full items-center justify-center overflow-hidden">
  <Marquee pauseOnHover className="[--duration:30s] [--gap:4rem]">
    {companies.map((company, index) => (
      <div
        key={`${company.name}-${index}`}
        className="flex items-center justify-center opacity-60 grayscale transition-all duration-300"
      >
        {/* ... Image component */}
      </div>
    ))}
  </Marquee>

  {/* Gradient Overlays */}
  <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-linear-to-r from-background"></div>
  <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-linear-to-l from-background"></div>
</div>
// ...
Both [--duration:30s] and [--gap:4rem] are features of Tailwind CSS called “arbitrary values”. They directly set CSS custom properties (--duration and --gap) on the element. The <Marquee> component is designed to read these variables to configure its animation.