> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Social Proof

> How to customize the social proof section with company logos.

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.

<Steps>
  <Step title="Editing the Heading Text">
    The text displayed above the logos can be changed by editing the `<p>` tag within the component.

    ```tsx src/components/marketing/social-proof.tsx theme={null}
    // ...
    <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>
    // ...
    ```
  </Step>

  <Step title="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.

    ```tsx src/components/marketing/social-proof.tsx theme={null}
    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
    ];
    ```

    <Tip>
      New logo image files should be placed in the `public/logos/` directory. Both SVG and PNG formats are supported.
    </Tip>
  </Step>

  <Step title="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.

    ```tsx src/components/marketing/social-proof.tsx theme={null}
    // ...
    <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>
    // ...
    ```

    <Accordion title="What do these values mean?">
      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.
    </Accordion>
  </Step>
</Steps>