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 ? ( - - Sponsors - - {sponsors.map((sponsor) => ( - + + Sponsors + + {Object.keys(sponsors).sort((a, b) => sponsorTierOrder[a] - sponsorTierOrder[b]).map((key) => ( + + {sponsors[key].map((sponsor) => ( + + ))} + ))} + + 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! + + + + - - 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! - - - - ) :