Add Playco to the Sponsor Section (#68)

Co-authored-by: Baz Utsahajit <[email protected]>

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

@@ -31,23 +31,42 @@
     }
 
     .sponsorGrid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-        gap: 1rem;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        width: 90vw;
         max-width: 940px;
         margin: 0 auto;
         padding: 20px 0px;
+
+        @media screen and (max-width: 481px) {
+            gap: 1rem;
+        }
     }
 
     .sponsor {
         display: flex;
         flex-direction: column;
         align-items: center;
-    }
 
-    .sponsorImage {
-        max-width: 100px;
-        border-radius: 15%;
+        .sponsorImage {
+            max-width: 100px;
+            border-radius: 15px;
+        }
+
+        &:first-child {
+            padding: 0 calc(min(100vw, 940px) - min(90vw, 300px) / 2);
+
+            .sponsorImage {
+                max-width: 350px;
+
+                @media screen and (max-width: 481px) {
+                    width: 80vw;
+                }
+            }
+        }
     }
 }
 

src/components/Homepage/OpenCollective/index.tsx

@@ -48,12 +48,21 @@ export default function OpenCollective(): JSX.Element
             const data = (await response.json()) as OpenCollectiveSchema;
             const sponsorData = data
                 .filter((member) => member.tier === 'sponsor')
+                .sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
                 .map((member) => ({
                     name: member.name,
                     image: member.image,
                     website: member.website,
                 }));
 
+            const playco = {
+                name: 'Playco',
+                image: '/images/logo-playco.png',
+                website: 'https://www.play.co/',
+            };
+
+            sponsorData.unshift(playco);
+
             setSponsors(sponsorData as SponsorData[]);
         }
         fetchSponsors();