Testimonial Logos

import {
  logoFive,
  logoFour,
  logoOne,
  logoSix,
  logoThree,
  logoTwo,
} from "@/mynaui/SampleLogos";

export default function Basic() {
  const logos = [logoOne, logoTwo, logoThree, logoFour, logoFive, logoSix];

  return (
    <section className="mx-auto flex max-w-7xl flex-col items-center gap-12 px-4 py-12 text-center lg:py-20">
      <h3 className="font-medium text-muted-foreground">Trusted by the best</h3>
      <ul className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
        {logos.map((logo, index) => (
          <li key={index} className="flex items-center justify-center px-2">
            {logo}
          </li>
        ))}
      </ul>
    </section>
  );
}

import {
  logoFive,
  logoFour,
  logoOne,
  logoSix,
  logoThree,
  logoTwo,
} from "@/mynaui/SampleLogos";
import { buttonVariants } from "@/components/ui/button";
import { ArrowRight } from "@mynaui/icons-react";

export default function WithButton() {
  const logos = [logoOne, logoTwo, logoThree, logoFour, logoFive, logoSix];

  return (
    <section className="mx-auto flex max-w-7xl flex-col items-center gap-12 px-4 py-12 text-center lg:py-20">
      <p className="text-balance text-lg font-semibold tracking-tight">
        See why over 40,000 people trust MynaUI for their business
      </p>

      <ul className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
        {logos.map((logo, index) => (
          <li key={index} className="flex items-center justify-center px-2">
            {logo}
          </li>
        ))}
      </ul>

      <a href="#" className={buttonVariants({ variant: "outline" })}>
        <span>See our Testimonials</span>
        <ArrowRight className="size-4 stroke-2 text-muted-foreground" />
      </a>
    </section>
  );
}

import {
  logoFive,
  logoFour,
  logoOne,
  logoSix,
  logoThree,
  logoTwo,
} from "@/mynaui/SampleLogos";

export default function SplitColored() {
  const logos = [logoOne, logoTwo, logoThree, logoFour, logoFive, logoSix];

  return (
    <section className="relative bg-background py-14">
      <div
        className="absolute inset-x-0 top-0 h-1/2 w-full bg-blue-700"
        aria-hidden="true"
      ></div>

      <div className="relative mx-4 max-w-7xl rounded-md bg-background p-6 ring-1 ring-border lg:mx-auto">
        <ul className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
          {logos.map((logo, index) => (
            <li key={index} className="flex items-center justify-center px-2">
              {logo}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

import {
  logoFive,
  logoFour,
  logoOne,
  logoSix,
  logoThree,
  logoTwo,
} from "@/mynaui/SampleLogos";

export default function MultiLineLogos() {
  const logos = [
    logoOne,
    logoTwo,
    logoThree,
    logoFour,
    logoFive,
    logoFour,
    logoSix,
    logoFive,
    logoOne,
    logoThree,
    logoTwo,
    logoSix,
  ];
  return (
    <section className="mx-auto flex max-w-7xl flex-col items-center gap-14 px-4 py-24 text-center">
      <ul className="grid grid-cols-2 gap-10 md:grid-cols-3 lg:grid-cols-6">
        {logos.map((logo, index) => (
          <li key={index} className="flex items-center justify-center px-2">
            {logo}
          </li>
        ))}
      </ul>
    </section>
  );
}

import {
  logoFive,
  logoFour,
  logoOne,
  logoSix,
  logoThree,
  logoTwo,
} from "@/mynaui/SampleLogos";

export default function SmallGrid() {
  const logos = [logoOne, logoTwo, logoThree, logoFour, logoFive, logoSix];

  return (
    <section className="mx-auto flex max-w-7xl flex-col items-center gap-12 px-4 py-12 text-center lg:py-20">
      <p className="text-base font-medium text-muted-foreground">
        Trusted by the best
      </p>
      <ul className="grid grid-cols-2 gap-8 grayscale md:grid-cols-3">
        {logos.map((logo, index) => (
          <li key={index} className="flex items-center justify-center px-2">
            {logo}
          </li>
        ))}
      </ul>
    </section>
  );
}