From 0563ad1da653eb7dcb88c514f850faa3ef3d46e5 Mon Sep 17 00:00:00 2001
From: alvinkam <alvin.kam.33@gmail.com>
Date: Mon, 6 Nov 2023 23:34:56 -0800
Subject: [PATCH 1/2] separate sponsors into tiers

---
 src/sections/Sponsor.jsx | 91 ++++++++++++++++++++++++++--------------
 1 file changed, 60 insertions(+), 31 deletions(-)

diff --git a/src/sections/Sponsor.jsx b/src/sections/Sponsor.jsx
index 620ccd2b..c239d363 100644
--- a/src/sections/Sponsor.jsx
+++ b/src/sections/Sponsor.jsx
@@ -6,6 +6,15 @@ import React, { useEffect, useState } from 'react'
 import fireDb from '@utilities/firebase'
 import Button from '@components/Button'
 
+const sponsorTierOrder = {
+  platinum: 1,
+  gold: 2,
+  silver: 3,
+  bronze: 4,
+  inkind: 5,
+  startup: 6
+}
+
 const BgSectionContainer = styled(SectionContainer)`
   background: url('assets/background/sponsors/background.png'), #150C27;
   background-size: 100vw;
@@ -32,7 +41,6 @@ const StyledTitle = styled(Header2)`
   text-align: center;
   color: #fff;
   font-size: 3rem;
-  padding-top: 33rem;
   position: relative;
   z-index: 3;
 
@@ -90,20 +98,29 @@ ${(p) => p.theme.mediaQueries.mobile} {
 
 const Sponsors = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  flex-wrap: wrap;
-  width: 45vw;
-  padding-top: 2.5vw;
+  width: 40vw;
+  height: 30vw;
+  padding-top: 72.5vw;
   position: relative;
   z-index: 3;
   margin: auto;
   gap: 2.5vw;
 `
 
+const SponsorTier = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  max-height: 8vw;
+  gap: 2.5vw;
+`
+
 const SponsorLogo = styled.img`
-  width: calc(50% - 2.5vw);
-  flex: calc(50% - 2.5vw);
+  height: 100%;
 `
 
 const PushinP = styled.p`
@@ -127,6 +144,7 @@ const ButtonContainer = styled.p`
   justify-content: center;
   position: relative;
   z-index: 3;
+  margin: 0;
 `
 
 const Skip = styled.div`
@@ -139,45 +157,56 @@ const Skip = styled.div`
 `
 
 export default function Sponsor () {
-  const [sponsors, setSponsors] = useState(null)
+  const [sponsors, setSponsors] = useState({})
 
   useEffect(async () => {
     const data = await fireDb.getCollection('HackCamp2023', 'Sponsors')
     if (data) {
-      setSponsors(data)
+      const organizedSponsors = {}
+      data.forEach((sponsor) => {
+        if (!organizedSponsors[sponsor.tier]) {
+          organizedSponsors[sponsor.tier] = []
+        }
+        organizedSponsors[sponsor.tier].push(sponsor)
+      })
+      setSponsors(organizedSponsors)
     }
   }, [])
 
-  return sponsors?.length > 0
+  return Object.keys(sponsors).length > 0
     ? (
     <BgSectionContainer id="sponsors">
       <UFO></UFO>
       <UFOLight/>
-      <StyledTitle>
-        Sponsors
-      </StyledTitle>
       <Sponsors>
-        {sponsors.map((sponsor) => (
-          <SponsorLogo src={sponsor.imgURL}/>
+        <StyledTitle>
+          Sponsors
+        </StyledTitle>
+        {Object.keys(sponsors).sort((a, b) => sponsorTierOrder[a] - sponsorTierOrder[b]).map((key) => (
+          <SponsorTier>
+            {sponsors[key].map((sponsor) => (
+              <SponsorLogo src={sponsor.imgURL}/>
+            ))}
+          </SponsorTier>
         ))}
+        <PushinP>
+        Sponsors make this event happen. If you are interested in working with us, joining us or speaking at one of our events, please reach out to us!
+        </PushinP>
+        <ButtonContainer>
+          <Button
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:sponsorship@nwplus.io?Subject=Sponsorship"
+            width='205px'
+            height='50px'
+            borderRadius='6px'
+            textColor='#FFFFFF'
+            backgroundColor='linear-gradient(to left, #959AFB, #9AD4DE)'
+            isHover>
+            Sponsor HackCamp!
+          </Button>
+        </ButtonContainer>
       </Sponsors>
-      <PushinP>
-      Sponsors make this event happen. If you are interested in working with us, joining us or speaking at one of our events, please reach out to us!
-      </PushinP>
-      <ButtonContainer>
-      <Button
-              target="_blank"
-              rel="noopener noreferrer"
-              href="mailto:sponsorship@nwplus.io?Subject=Sponsorship"
-              width='205px'
-              height='50px'
-              borderRadius='6px'
-              textColor='#FFFFFF'
-              backgroundColor='linear-gradient(to left, #959AFB, #9AD4DE)'
-              isHover>
-              Sponsor HackCamp!
-            </Button>
-            </ButtonContainer>
     </BgSectionContainer>
       )
     : <Skip />

From c43c274cee75749f304c037c885e58ee66f96417 Mon Sep 17 00:00:00 2001
From: alvinkam <alvin.kam.33@gmail.com>
Date: Tue, 7 Nov 2023 21:47:24 -0800
Subject: [PATCH 2/2] add click to link on logos

---
 src/sections/Sponsor.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/sections/Sponsor.jsx b/src/sections/Sponsor.jsx
index c239d363..c1a24c15 100644
--- a/src/sections/Sponsor.jsx
+++ b/src/sections/Sponsor.jsx
@@ -185,7 +185,9 @@ export default function Sponsor () {
         {Object.keys(sponsors).sort((a, b) => sponsorTierOrder[a] - sponsorTierOrder[b]).map((key) => (
           <SponsorTier>
             {sponsors[key].map((sponsor) => (
-              <SponsorLogo src={sponsor.imgURL}/>
+              <a href={sponsor.link} target="_blank" rel='noreferrer'>
+                <SponsorLogo src={sponsor.imgURL}/>
+              </a>
             ))}
           </SponsorTier>
         ))}