Function Sponsors

components/sponsors.tsx:66–192

()

// ];

export default function Sponsors() {
  return (
    <div className="retro flex flex-col items-center justify-center gap-10 px-5 py-10">
      <div className="flex flex-col items-center gap-5 md:flex-row">
        <div className="flex flex-col gap-2">
          <h2 className="font-bold text-2xl">Sponsors</h2>
          <p className="max-w-xl text-muted-foreground text-xs">
            We are grateful to our sponsors who help us grow and support our
            projects.
          </p>
        </div>

        <Image
          alt="Wizard"
          className="pixelated"
          height={200}
          src="/images/8bit-treasure.png"
          width={200}
        />
      </div>

      <Separator />

      <h2 className="font-bold text-xl">MYTHIC Sponsors</h2>

      <div className="flex flex-wrap items-center justify-center gap-10">
        {mythicSponsors.map((sponsor) => (
          <Link href={sponsor.url} key={sponsor.name} target="_blank">
            <div className="flex flex-col items-center gap-4">
              {sponsor.foil ? (
                <Avatar className="size-60" variant="default">
                  <MythicSponsor
                    className="p-4"
                    height={250}
                    src={sponsor.image}
                    width={250}
                  />
                </Avatar>
              ) : (
                <Avatar className="size-60" variant="default">
                  <AvatarImage
                    alt={sponsor.name}
                    className={cn("p-5", sponsor.invert && "dark:invert")}
                    src={sponsor.image}
                  />
                </Avatar>
              )}

              <p className="font-bold text-sm">{sponsor.name}</p>
            </div>
          </Link>
        ))}
        <div className="flex flex-col items-center gap-4">
          <SponsorClaim
            className="cursor-pointer"
            labelClassName="flex size-60 items-center justify-center border-4 border-dashed border-muted-foreground/20"
            text="Be here"
            textClassName="retro text-muted-foreground/40 text-xs"