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
? (
)
: