Sponsors page

components/SponsorLogoGroup.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link"
+import Image from "next/image"
+import classnames from "classnames"
+
+const SponsorLogoGroup = ({ sponsors }) => {
+  return (
+    <div className="grid grid-cols-2 items-center justify-center gap-5 gap-x-5 bg-white sm:flex sm:flex-wrap">
+      {sponsors.map((sponsor, i) => {
+        let isLastItem = sponsors[i + 1] == undefined
+        let isUnevenItems = sponsors.length % 2 != 0
+
+        return (
+          <Link href={sponsor.url} key={i}>
+            <a
+              className={classnames(
+                "relative inline-flex max-h-[90px] max-w-[200px] justify-self-center",
+                isLastItem && isUnevenItems && "col-span-2"
+              )}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                aspectRatio: String(
+                  sponsor.logo.default.width / sponsor.logo.default.height || 0
+                ),
+              }}
+            >
+              <Image
+                className={classnames(
+                  "object-contain mix-blend-luminosity",
+                  sponsor.light && "invert"
+                )}
+                src={sponsor.logo}
+              />
+            </a>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+export default SponsorLogoGroup

data/sponsors.js

@@ -164,8 +164,8 @@ const sponsors = {
       url: "https://www.ivisa.com/photos",
       logo: require("../public/sponsors/ivisa.png"),
       name: "iVisa",
+      light: true,
     },
-    ,
     {
       url: "https://www.mysextoyguide.com/",
       logo: require("../public/sponsors/mysextoyguide.jpg"),
@@ -175,6 +175,7 @@ const sponsors = {
       url: "https://www.kevani.com/",
       logo: require("../public/sponsors/KEVANI_LOGO.png"),
       name: "Kevani",
+      light: true,
     },
     {
       url: "https://www.doggietoys.deals/",
@@ -230,6 +231,7 @@ const sponsors = {
       url: "https://farbridge.com/",
       logo: require("../public/sponsors/farbridge.png"),
       name: "Farbridge",
+      light: true,
     },
   ],
   silver: [

locales/en.json

@@ -1,4 +1,5 @@
 {
+  "browse_apps.get_started": "Get started today",
   "contact_us": "Contact us",
   "credits.press_kit": "Press kit",
   "credits.view_sponsors": "View sponsors",
@@ -16,7 +17,6 @@
   "home.hero.headline": "Social networking that's not for sale.",
   "home.how_it_works": "How it works",
   "home.sponsors.body": "Mastodon is free and open-source software developed by a non-profit organization. Public support directly affects development and evolution.",
-  "home.sponsors.supported_by": "Supported by",
   "home.sponsors.title": "Independent and self made",
   "home.testimonials.title": "What our users are saying",
   "home.why.decentralized.copy": "Not controlled by a single website or company, Mastodon is a network of completely independent service providers forming a global, cohesive social media platform.",
@@ -57,6 +57,21 @@
   "servers.browse_all": "Browse all",
   "servers.get_on_waitlist": "Get on waitlist",
   "servers.join_server": "Join server",
-  "sponsorship.become_a_sponsor": "Become a sponsor",
+  "silver_sponsor": "Silver sponsor",
+  "sorting.alphabetical": "A–Z",
+  "sorting.free": "Free",
+  "sorting.recently_added": "Recently added",
+  "sorting.sort_by": "Sort",
+  "sponsor": "Sponsor",
+  "sponsors": "Sponsors",
+  "sponsors.additional_thanks_to": "Additional thanks to",
+  "sponsors.become_a_sponsor": "Become a sponsor",
+  "sponsors.hero.body": "You can back us on a monthly basis through Patreon or pledge to become a sponsor through our link below. We are grateful for the companies and people who make mastodon possible.",
+  "sponsors.patreon.body": "Making a contribution through our Patreon will reward you with access to our development Discord and your name listed on this page.",
+  "sponsors.patreon.cta": "Go to Patreon",
+  "sponsors.patreon.title": "Support us on Patreon",
+  "sponsors.sponsorship.body": "If you would like to see your company's logo with a go follow link on this site, you can become a sponsor directly through our own platform!",
+  "sponsors.sponsorship.title": "Sponsorship",
+  "sponsors.supported_by": "Supported by",
   "view_profile": "View profile"
 }

pages/index.tsx

@@ -7,6 +7,7 @@ import classnames from "classnames"
 import loadIntlMessages from "../utils/loadIntlMessages"
 import LinkButton from "../components/LinkButton"
 import TestimonialCard from "../components/TestimonialCard"
+import SponsorGroup from "../components/SponsorLogoGroup"
 
 import testimonials from "../data/testimonials.json"
 import { platinum, additionalFunding } from "../data/sponsors.js"
@@ -306,7 +307,7 @@ const Sponsors = ({ sponsors }) => {
           <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
             <LinkButton href="https://sponsor.joinmastodon.org/" size="large">
               <FormattedMessage
-                id="sponsorship.become_a_sponsor"
+                id="sponsors.become_a_sponsor"
                 defaultMessage="Become a sponsor"
               />
             </LinkButton>
@@ -323,7 +324,7 @@ const Sponsors = ({ sponsors }) => {
 
       <h3 className="h4 pb-4">
         <FormattedMessage
-          id="home.sponsors.supported_by"
+          id="sponsors.supported_by"
           defaultMessage="Supported by"
         />
       </h3>
@@ -342,43 +343,6 @@ const Sponsors = ({ sponsors }) => {
   )
 }
 
-const SponsorGroup = ({ sponsors }) => {
-  return (
-    <div className="grid grid-cols-2 items-center justify-center gap-5 gap-x-5 bg-white sm:flex sm:flex-wrap">
-      {sponsors.map((sponsor, i) => {
-        let isLastItem = sponsors[i + 1] == undefined
-        let isUnevenItems = sponsors.length % 2 != 0
-
-        return (
-          <Link href={sponsor.url} key={i}>
-            <a
-              className={classnames(
-                "relative inline-flex max-h-[90px] max-w-[200px] justify-self-center",
-                isLastItem && isUnevenItems && "col-span-2"
-              )}
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{
-                aspectRatio: String(
-                  sponsor.logo.default.width / sponsor.logo.default.height || 0
-                ),
-              }}
-            >
-              <Image
-                className={classnames(
-                  "object-contain mix-blend-luminosity",
-                  sponsor.light && "invert"
-                )}
-                src={sponsor.logo}
-              />
-            </a>
-          </Link>
-        )
-      })}
-    </div>
-  )
-}
-
 export async function getStaticProps(ctx) {
   return {
     props: { intlMessages: await loadIntlMessages(ctx) },

pages/sponsors.tsx

@@ -0,0 +1,171 @@
+import classnames from "classnames"
+import Image from "next/image"
+import Link from "next/link"
+import { FormattedMessage } from "react-intl"
+import SVG from "react-inlinesvg"
+import SponsorLogoGroup from "../components/SponsorLogoGroup"
+import LinkButton from "../components/LinkButton"
+import sponsors from "../data/sponsors"
+import sponsorData from "../data/sponsors"
+
+function Sponsors() {
+  return (
+    <>
+      <section className="full-width-bg hero h-[80vh] bg-main-blurple pt-[var(--header-area)] text-white">
+        <div className="full-width-bg__inner grid lg:grid-cols-12">
+          <h1 className="h1 mb-2 lg:col-start-2">
+            <FormattedMessage id="sponsors" defaultMessage="Sponsors" />
+          </h1>
+          <p className="sh1 lg:col-start-2 lg:col-end-6">
+            <FormattedMessage
+              id="sponsors.hero.body"
+              defaultMessage="You can back us on a monthly basis through Patreon or pledge to become a sponsor through our link below. We are grateful for the companies and people who make mastodon possible."
+            />
+          </p>
+        </div>
+      </section>
+
+      <section className="my-24 my-32 grid gap-gutter md:grid-cols-2 lg:grid-cols-12">
+        <div className="lg:col-span-4 lg:col-start-2">
+          <SVG className="mb-2 text-accent-blurple" src={`/icons/donate.svg`} />
+          <h3 className="h4 mb-6">
+            <FormattedMessage
+              id="sponsors.sponsorship.title"
+              defaultMessage="Sponsorship"
+            />
+          </h3>
+          <p className="mb-8">
+            <FormattedMessage
+              id="sponsors.sponsorship.body"
+              defaultMessage="If you would like to see your company's logo with a go follow link on this site, you can become a sponsor directly through our own platform!"
+            />
+          </p>
+          <LinkButton href="https://sponsor.joinmastodon.org/" size="medium">
+            <FormattedMessage
+              id="sponsors.become_a_sponsor"
+              defaultMessage="Become a sponsor"
+            />
+          </LinkButton>
+        </div>
+
+        <div className="lg:col-span-4 lg:col-start-8">
+          <SVG
+            className="mb-2 text-accent-blurple"
+            src="/icons/donate-box.svg"
+          />
+          <h3 className="h4 mb-6">
+            <FormattedMessage
+              id="sponsors.patreon.title"
+              defaultMessage="Support us on Patreon"
+            />
+          </h3>
+          <p className="mb-8">
+            <FormattedMessage
+              id="sponsors.patreon.body"
+              defaultMessage="Making a contribution through our Patreon will reward you with access to our development Discord and your name listed on this page."
+            />
+          </p>
+          <LinkButton href="https://patreon.com/mastodon" size="medium">
+            <FormattedMessage
+              id="sponsors.patreon.cta"
+              defaultMessage="Go to Patreon"
+            />
+          </LinkButton>
+        </div>
+      </section>
+
+      <section className="platinum-gold-sponsors">
+        <h2 className="h4 mb-10 text-center">
+          <FormattedMessage
+            id="sponsors.supported_by"
+            defaultMessage="Supported by"
+          />
+        </h2>
+        <SponsorLogoGroup
+          sponsors={[...sponsorData.platinum, ...sponsorData.gold]}
+        />
+      </section>
+
+      <section className="silver-sponsors mb-32">
+        <h2 className="h5 mb-8">
+          <FormattedMessage id="sponsors" defaultMessage="Sponsors" />
+        </h2>
+        <div className="grid gap-y-8 lg:grid-cols-4 lg:gap-x-5">
+          {sponsorData.silver.map((sponsor) => {
+            if (sponsor.url) {
+              return (
+                <Link href={sponsor.url}>
+                  <a>
+                    <SponsorCard sponsor={sponsor} tier="silver" />
+                  </a>
+                </Link>
+              )
+            } else {
+              return <SponsorCard sponsor={sponsor} tier="silver" />
+            }
+          })}
+        </div>
+      </section>
+
+      <section className="general-sponsors mb-96">
+        <h2 className="h5 mb-8">
+          <FormattedMessage
+            id="sponsors.additional_thanks_to"
+            defaultMessage="Additional thanks to"
+          />
+        </h2>
+        <div className="grid gap-y-8 md:grid-cols-4 lg:grid-cols-6 lg:gap-x-6">
+          {sponsors.generalHighlighted.map((sponsor) => {
+            return (
+              <SponsorCard
+                key={sponsor}
+                sponsor={sponsor}
+                tier="generalHighlighted"
+              />
+            )
+          })}
+          {sponsors.general.map((sponsor) => {
+            return (
+              <SponsorCard key={sponsor} sponsor={sponsor} tier="general" />
+            )
+          })}
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Sponsors
+
+const SponsorCard = ({ sponsor, tier }) => {
+  return (
+    <div
+      className={classnames(
+        "grid grid-cols-[auto_1fr] gap-4 rounded p-4 shadow",
+        tier === "generalHighlighted" && "bg-gray-3"
+      )}
+    >
+      {tier === "silver" &&
+        (sponsor.logo ? (
+          <Image src={sponsor.logo} width="56" height="56" />
+        ) : (
+          <div className="h-[56px] w-[56px] bg-blurple-gradient" />
+        ))}
+
+      <div className="flex flex-col justify-center">
+        <span className="c2 !leading-[1.5] text-gray-1">
+          {tier === "silver" ? (
+            <FormattedMessage
+              id="silver_sponsor"
+              defaultMessage="Silver sponsor"
+            />
+          ) : (
+            <FormattedMessage id="sponsor" defaultMessage="Sponsor" />
+          )}
+        </span>
+
+        <p className="b3">{sponsor.name || sponsor}</p>
+      </div>
+    </div>
+  )
+}