feat: update sponsors and add partners to main page

What changed:
- Microsoft was removed from the sponsors
- 42Lisboa and 42 Porto were added to the community partners
- Women in tech logo was updated (previous one had low resolution)
- Removed the grayscale for Tiers >=2
- Added a separate list for the community partners
- Removed the ids from the partner lists as they were not being used and will be hard to maintain once we have many

The grayscale css definitions were kept in case we want to use them again, but they are not being used now.

src/components/SponsorSection/index.js

@@ -1,42 +1,44 @@
 import React from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import './sponsorSection.scss';
-import { amountOfTiers, sponsors } from 'data/sponsors';
+import { sponsors } from 'data/sponsors';
+import { communityPartners } from 'data/communityPartners';
 
+const amountOfTiers = 3;
 const SponsorSection = () => {
-  const renderSponsorLogosTier = (tier) => {
-    const hasGrayscale = [2, 3].includes(tier);
-    const sponsorsToDisplay = sponsors.filter((sponsor) => sponsor.tier === tier);
+  const renderSponsorLogosTier = (tier, partnerList) => {
+    const sponsorsToDisplay = partnerList.filter((sponsor) => sponsor.tier === tier);
 
     return (
       <Row className="justify-content-center" key={tier}>
         {sponsorsToDisplay.map((sponsor) => (
-          <Col key={sponsor.id} className="col-auto py-3 my-md-2 mx-2">
+          <Col key={sponsor.id} className="col-auto my-md-2 mx-2">
             <a href={sponsor.link}>
-              <img
-                className={`${hasGrayscale ? 'sponsor-grayscale' : null} sponsor-${tier}`}
-                src={sponsor.image}
-                alt={sponsor.alt}
-              />
+              <img className={`sponsor-${tier}`} src={sponsor.image} alt={sponsor.alt} />
             </a>
           </Col>
         ))}
       </Row>
     );
   };
 
-  const renderAllSponsorTiersInOrder = () => {
+  const renderAllSponsorTiersInOrder = (partnerList) => {
     const tiers = [];
     for (let i = 1; i <= amountOfTiers; i++) {
-      tiers.push(renderSponsorLogosTier(i));
+      tiers.push(renderSponsorLogosTier(i, partnerList));
     }
     return tiers;
   };
 
   return (
     <Container className="mt-5 pt-md-5 py-5">
+      <h6 className="sponsor-title text-uppercase text-center mb-4">Os nossos patrocinadores</h6>
+      {renderAllSponsorTiersInOrder(sponsors)}
+      <br></br>
+      <br></br>
+      <br></br>
       <h6 className="sponsor-title text-uppercase text-center mb-4">Os nossos parceiros</h6>
-      {renderAllSponsorTiersInOrder()}
+      {renderAllSponsorTiersInOrder(communityPartners)}
     </Container>
   );
 };

src/components/SponsorSection/sponsorSection.scss

@@ -21,9 +21,9 @@ h6.sponsor-title {
 }
 
 .sponsor-2 {
-  height: 7vh;
+  height: 9vh;
 }
 
 .sponsor-3 {
-  height: 4vh;
+  height: 8vh;
 }

src/data/communityPartners.js

@@ -0,0 +1,25 @@
+import { importAll } from '../utils';
+
+const logos = importAll(require.context('../assets/partnerlogos/', false, /\.(png|jpe?g|svg)$/));
+
+const communityPartners = [
+  {
+    image: logos['wit.png'],
+    alt: 'Logo das Women In Tech',
+    tier: 1,
+    link: 'https://women-in-tech.org/'
+  },
+  {
+    image: logos['42lisboa.png'],
+    alt: 'Logo da 42 Lisboa',
+    tier: 1,
+    link: 'https://42lisboa.com/'
+  },
+  {
+    image: logos['42porto.png'],
+    alt: 'Logo da 42 Porto',
+    tier: 1,
+    link: 'https://42porto.com/'
+  }
+];
+export { communityPartners };

src/data/sponsors.js

@@ -1,35 +1,32 @@
-import wit from '../assets/sponsorlogos/wit.png';
-import microsoft from '../assets/sponsorlogos/microsoft.png';
-import outsystems from '../assets/sponsorlogos/outsystems.png';
-import nunocubalreis from '../assets/sponsorlogos/nunocubalreis.png';
+import { importAll } from '../utils';
+const logos = importAll(require.context('../assets/sponsorlogos/', false, /\.(png|jpe?g|svg)$/));
 
 const amountOfTiers = 3;
 
 const sponsors = [
   {
     id: 1,
-    image: outsystems,
+    image: logos['outsystems.png'],
     alt: 'Logo da Outsystems',
     tier: 1,
     link: 'https://www.outsystems.com/'
   },
   {
     id: 2,
-    image: microsoft,
-    alt: 'Logo da Microsoft',
+    image: logos['icapital.png'],
+    alt: 'Logo da iCapital',
     tier: 2,
-    link: 'https://www.microsoft.com/pt-pt/'
+    link: 'https://www.icapital.com/'
   },
   {
     id: 3,
-    image: wit,
-    alt: 'Logo das Women In Tech',
+    image: logos['unit4.png'],
+    alt: 'Logo da Unit4',
     tier: 2,
-    link: 'https://women-in-tech.org/'
+    link: 'https://www.unit4.com/'
   },
   {
-    id: 4,
-    image: nunocubalreis,
+    image: logos['nunocubalreis.png'],
     alt: 'Logo da Nuno Cubal Reis',
     tier: 2,
     link: 'https://www.nunoreis.pt/'

src/utils.js

@@ -44,3 +44,11 @@ export const sortByAsc = (a, b, param) => {
 export const sortByDesc = (a, b, param) => {
   return b[param] - a[param];
 };
+
+export function importAll(r) {
+  let images = {};
+  r.keys().map((item) => {
+    images[item.replace('./', '')] = r(item);
+  });
+  return images;
+}