add open collective sponsors

src/components/Homepage/ClosingSection/index.module.scss

@@ -1,6 +1,7 @@
 .closing {
-    background: #ecedf1;
+    background: #f4f5f7;
     padding: 89px 20px 94px;
+    padding: 9px 20px 94px;
 
     & > div {
         margin: 0 auto;
@@ -39,7 +40,7 @@
 
 html[data-theme='dark'] {
     .closing {
-        background: #1f2022;
+        background: #201e1e;
 
         h3 {
             color: #fff;

src/components/Homepage/ClosingSection/index.tsx

@@ -15,15 +15,15 @@ export default function ClosingSection(): JSX.Element
     });
 
     return (
-        <div className={`${styles.closing} padding-vert--xl`}>
+        <div className={`${styles.closing}`}>
             <div ref={ref}>
                 {inView && (
                     <>
                         <h3 className="short-up-anim" style={animShortUp(0.3, 0.25)}>
                             Elevate your Traditional HTML5 Techniques
                         </h3>
                         <h5 className="short-up-anim" style={animShortUp(0.3, 0.4)}>
-                            Unbeatable performance, intuitive API, globally used and battle­tested.
+                            Unbeatable performance, intuitive API, globally used and battle tested.
                         </h5>
                         <div className="buttonRow">
                             <HomeCTA

src/components/Homepage/OpenCollective/index.module.scss

@@ -0,0 +1,59 @@
+.wrapper {
+    background: #ecedf1;
+    color: #333;
+    padding: 80px 0px 80px 0px;
+
+    .title {
+        font-family: 'Outfit', sans-serif;
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 40px;
+        word-wrap: normal;
+
+        @media screen and (min-width: 481px) {
+            font-size: 54px;
+            line-height: 64px;
+        }
+    }
+
+    h5 {
+        opacity: 0.8;
+        margin: 21px 0 29px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0;
+
+        @media screen and (min-width: 481px) {
+            font-size: 21px;
+            line-height: 30px;
+        }
+    }
+
+    .sponsorGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+        gap: 1rem;
+        max-width: 940px;
+        margin: 0 auto;
+        padding: 20px 0px;
+    }
+
+    .sponsor {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .sponsorImage {
+        max-width: 100px;
+        border-radius: 15%;
+    }
+}
+
+html[data-theme='dark'] {
+    .wrapper {
+        background: #1f2022;
+        color: #fff;
+    }
+}

src/components/Homepage/OpenCollective/index.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+import styles from './index.module.scss';
+import { useInView } from 'react-intersection-observer';
+
+interface OpenCollectiveData {
+    MemberId: number;
+    createdAt: string;
+    type: string;
+    role: string;
+    isActive: boolean;
+    totalAmountDonated: number;
+    currency?: string;
+    lastTransactionAt: string;
+    lastTransactionAmount: number;
+    profile: string;
+    name: string;
+    company?: string;
+    description?: string;
+    image?: string;
+    twitter?: string;
+    github?: string;
+    website?: string;
+    email: any;
+    tier?: string;
+}
+type OpenCollectiveSchema = OpenCollectiveData[];
+
+interface SponsorData {
+    name: string;
+    image: string;
+    website: string;
+}
+const animShortUp = (duration: number, delay: number) => ({
+    opacity: 0,
+    animationDuration: `${duration}s`,
+    animationDelay: `${delay}s`,
+});
+
+export default function OpenCollective(): JSX.Element
+{
+    const [sponsors, setSponsors] = useState<SponsorData[]>([]);
+
+    useEffect(() =>
+    {
+        async function fetchSponsors()
+        {
+            const response = await fetch('https://opencollective.com/pixijs/members/all.json');
+            const data = (await response.json()) as OpenCollectiveSchema;
+            const sponsorData = data
+                .filter((member) => member.tier === 'sponsor')
+                .map((member) => ({
+                    name: member.name,
+                    image: member.image,
+                    website: member.website,
+                }));
+
+            setSponsors(sponsorData as SponsorData[]);
+        }
+        fetchSponsors();
+    }, []);
+
+    const [ref, inView] = useInView({
+        triggerOnce: true,
+    });
+
+    return (
+        <div className={`${styles.wrapper}`}>
+            <div ref={ref}>
+                {inView && (
+                    <>
+                        <h3 className={`${styles.title} underline short-up-anim`} style={animShortUp(0.3, 0.25)}>
+                            Sponsors
+                        </h3>
+                        <h5 className={`${styles.subtitle} short-up-anim`} style={animShortUp(0.3, 0.4)}>
+                            These contributors support PixiJS financially, which allows us to spend more time working on
+                            PixiJS.
+                        </h5>
+                        <div className={`${styles.sponsorGrid} short-up-anim`} style={animShortUp(0.3, 0.55)}>
+                            {sponsors.map((sponsor) => (
+                                <div key={sponsor.name} className={styles.sponsor}>
+                                    <a href={sponsor.website}>
+                                        <img
+                                            src={sponsor.image}
+                                            alt={`${sponsor.name} logo`}
+                                            className={styles.sponsorImage}
+                                        />
+                                    </a>
+                                </div>
+                            ))}
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

src/components/Homepage/index.tsx

@@ -5,6 +5,7 @@ import TestimonialCarousel from './TestimonialCarousel';
 import KeyOfferings from './KeyOfferings';
 import FeatureList from './FeatureList';
 import ClosingSection from './ClosingSection';
+import OpenCollective from './OpenCollective';
 
 export default function Homepage(): JSX.Element
 {
@@ -13,9 +14,11 @@ export default function Homepage(): JSX.Element
     return (
         <Layout
             title={`${siteConfig.title} | The HTML5 Creation Engine`}
-            description={'PixiJS - The HTML5 Creation Engine. '
-            + 'Create beautiful digital content with the fastest, '
-            + 'most flexible 2D WebGL renderer.'}
+            description={
+                'PixiJS - The HTML5 Creation Engine. '
+                + 'Create beautiful digital content with the fastest, '
+                + 'most flexible 2D WebGL renderer.'
+            }
         >
             <main>
                 <div className="text--center">
@@ -24,6 +27,7 @@ export default function Homepage(): JSX.Element
                     <KeyOfferings />
                     <FeatureList />
                     <ClosingSection />
+                    <OpenCollective />
                 </div>
             </main>
         </Layout>