meshtastic/src/pages/credits/index.tsx

import React from "react";
import Layout from "@theme/Layout";
import Link from "@docusaurus/Link";

import { AvatarLayout } from "./_components/Avatar";

const Credits = (): JSX.Element => {
  const partnerLogos = [
    {
      name: "Vercel",
      url: "/2.0/vercel-logotype-dark.svg"
    },
    {
      name: "Cloudflare",
      url: "/2.0/CF_logo_horizontal_blktype.svg"
    },
    {
      name: "RAK Wireless",
      url: "/2.0/RAK-blue-main.svg"
    },
    {
      name: "Open Collective",
      url: "/2.0/opencollectivelogo.svg"
    },
    {
      name: "LILYGO",
      url: "/2.0/LILYGO.png"
    },
    {
      name: "Discord",
      url: "/2.0/discord.svg"
    }
  ];
  return (
    <Layout
      title="Credits"
      description="Meshtastic is made possible by the following people & organizations."
    >
      <main className="relative mt-20">
        <div className="container mx-auto p-6 leading-normal space-y-4">
          <h1>Credits</h1>
          <p>
            Meshtastic is community driven. Thousands of hours have been donated
            by volunteers who want to develop this amazing project. Whether
            you've submitted a pull request or triaged a bug in our
            Discord/Forum. You've made Meshtastic possible. Thank you for your
            contributions.
          </p>
          <p>
            We would also like to recognize those who have donated financially
            to the project. As Meshtastic has grown, we've aquired some ongoing
            costs to keep the project running. Thank you for your generous
            donations.
          </p>
        </div>
        <div className="container mx-auto p-6 leading-normal space-y-4">
          <h2>Fiscal Sponsors</h2>
          <p>
            We have partnered with both the{" "}
            <a
              className="underline"
              href="https://opencollective.com"
              target="_blank"
            >
              Open Collective
            </a>{" "}
            and the{" "}
            <a
              className="underline"
              href="https://www.oscollective.org"
              target="_blank"
            >
              Open Source Collective
            </a>{" "}
            to help us with a fiscal management framework and banking needs.
            They help support over three thousand open source projects including
            the PHP Foundation, F-Droid, Sonarr, LinuxServer and DarkReader. We
            are in good hands and good company.
          </p>
          <p>
            As with everything we do here, Open Collective provides a fully
            transparent framework for our budget and expenses. You can see what
            we’re bringing in, who is spending money and where that money is
            going{" "}
            <a
              className="underline"
              href="https://opencollective.com/meshtastic"
              target="_blank"
            >
              here
            </a>
            .
          </p>
          <p>
            In addition to our partnership with Open Collective and Open Source
            Collective, we have also been approved into the{" "}
            <a
              className="underline"
              href="https://github.com/sponsors"
              target="_blank"
            >
              GitHub Sponsors
            </a>{" "}
            program where we can set fundraising goals with GitHub.
          </p>
          <p>
            All donations made through GitHub will be deposited to our account
            with the Open Source Collective and managed by the Open Collective.
            This means we have a single place to monitor and maintain
            transparency of our finances.
          </p>
          <p>If you are able, please contribute to this amazing project.</p>
          <div className="indexCtasBody">
            <Link
              className={"button button--outline  button--lg cta--button"}
              to={"https://opencollective.com/meshtastic/donate"}
            >
              Sponsor Meshtastic
            </Link>
          </div>
          <h3>
            Open Collective Donations
            {/*Open Collective Donations*/}
            <AvatarLayout list={[]} />
          </h3>
          <h3>
            GitHub Sponsor Donations
            {/*GitHub Sponsor Donations*/}
            <AvatarLayout list={[]} />
          </h3>
        </div>
        <div className="container mx-auto p-6 leading-normal space-y-4">
          <h2>Partnerships</h2>
          <div className="mt-12 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
            {partnerLogos.map((logo) => (
              <div
                key={logo.name}
                className="col-span-1 flex justify-center bg-gray-50 py-8 px-8"
              >
                <img className="max-h-12" src={logo.url} alt={logo.name} />
              </div>
            ))}
          </div>
        </div>
        <div className="container mx-auto p-6 leading-normal space-y-4">
          <h2>Contributors</h2>
          <p>
            Literally thousands of hours have gone into creating, maintaining,
            and improving Meshtastic. Without our contributors none of this
            would be possible. Thank you for donating the time for each and
            every commit, issue, and pull request.
          </p>
          {/*GitHub Organization Contributors*/}
          <AvatarLayout list={[]} />
        </div>
        {/*Admin Bios*/}
        <div className="container mx-auto p-6 leading-normal space-y-4">
          <AvatarLayout list={[]} />
        </div>
      </main>
    </Layout>
  );
};

export default Credits;