Logo 3

type ImageProps = {
  src: string;
  alt?: string;
};

type Props = {
  heading: string;
  logo1: ImageProps;
  logo2: ImageProps;
  logo3: ImageProps;
  logo4: ImageProps;
  logo5: ImageProps;
  logo6: ImageProps;
  logo7: ImageProps;
  logo8: ImageProps;
  logo9: ImageProps;
  logo10: ImageProps;
  logo11: ImageProps;
  logo12: ImageProps;
  logo13: ImageProps;
  logo14: ImageProps;
  logo15: ImageProps;
  logo16: ImageProps;
};

export type Logo3Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Logo3 = (props: Logo3Props) => {
  const {
    heading,
    logo1,
    logo2,
    logo3,
    logo4,
    logo5,
    logo6,
    logo7,
    logo8,
    logo9,
    logo10,
    logo11,
    logo12,
    logo13,
    logo14,
    logo15,
    logo16,
  } = {
    ...Logo3Defaults,
    ...props,
  };
  return (
    <section className="overflow-hidden py-12 md:py-16 lg:py-20">
      <div className="container mb-8 max-w-lg px-[5%] md:mb-10 lg:mb-12">
        <h1 className="text-center text-h6 font-bold">{heading}</h1>
      </div>
      <div className="flex items-center pt-7 md:pt-0">
        <div className="flex shrink-0 animate-loop-horizontally items-center">
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo1.src}
            alt={logo1.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo2.src}
            alt={logo2.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo3.src}
            alt={logo3.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo4.src}
            alt={logo4.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo5.src}
            alt={logo5.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo6.src}
            alt={logo6.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo7.src}
            alt={logo7.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo8.src}
            alt={logo8.alt}
          />
        </div>
        <div className="flex shrink-0 animate-loop-horizontally items-center">
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo9.src}
            alt={logo9.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo10.src}
            alt={logo10.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo11.src}
            alt={logo11.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo12.src}
            alt={logo12.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo13.src}
            alt={logo13.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo14.src}
            alt={logo14.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo15.src}
            alt={logo15.alt}
          />
          <img
            className="mx-7 max-h-12 shrink-0 md:mx-10 md:max-h-14"
            src={logo16.src}
            alt={logo16.alt}
          />
        </div>
      </div>
    </section>
  );
};

export const Logo3Defaults: Props = {
  heading: "Used by the world's leading companies",
  logo1: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 1" },
  logo2: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 1" },
  logo3: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 2" },
  logo4: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 2" },
  logo5: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 3" },
  logo6: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 3" },
  logo7: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 4" },
  logo8: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 4" },
  logo9: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 5" },
  logo10: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 5" },
  logo11: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 6" },
  logo12: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 6" },
  logo13: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 7" },
  logo14: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 7" },
  logo15: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 8" },
  logo16: { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 8" },
};