Skip to content

Commit 6db5a10

Browse files
FawazBinSaleemFawazBinSaleem
committed
hackathon prep
1 parent 6939404 commit 6db5a10

File tree

3 files changed

+122
-50
lines changed

3 files changed

+122
-50
lines changed

‎src/resources/data/devHacksArchive/HackathonYearSponsors.tsx‎

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import "@/styles/devHacksSponsors.scss";
22
import React from "react";
33

4+
//2026 logos
5+
import Ubisoft2026 from "@/resources/images/devhacks/2025/devHacksSponsors/Ubisoft.jpg";
6+
import Niche2026 from "@/resources/images/devhacks/2025/devHacksSponsors/niche.png";
7+
import G3_2026 from "@/resources/images/devhacks/2025/devHacksSponsors/G3.png";
8+
import Pollard2026 from "@/resources/images/devhacks/2025/devHacksSponsors/pollard.jpg";
9+
410
// 2025 logos
511
import Ubisoft from "@/resources/images/devhacks/2025/devHacksSponsors/Ubisoft.jpg";
612
import Niche2025 from "@/resources/images/devhacks/2025/devHacksSponsors/niche.png";
@@ -28,22 +34,46 @@ import Ubisoft2023 from "@/resources/images/devhacks/2023/devHacksSponsors/Ubiso
2834
import GreenUmbrella from "@/resources/images/devhacks/2023/devHacksSponsors/greenUmbrella.webp";
2935
import PayWorks from "@/resources/images/devhacks/2023/devHacksSponsors/payWorks.jpg";
3036

31-
type HackathonYearSponsorsProps = {
32-
year: string | number;
37+
type HackathonYearSponsorsProps = { year: string | number };
38+
39+
type Tier = "platinum" | "gold" | "silver" | "bronze" | "inkind";
40+
type Sponsor = { name: string; logo: string };
41+
type YearSponsors = Partial<Record<Tier, Sponsor[]>>;
42+
43+
/** Optional: nicer titles per tier */
44+
const TIER_LABEL: Record<Tier, string> = {
45+
platinum: "Platinum Sponsor",
46+
gold: "Gold Sponsor",
47+
silver: "Silver Sponsors",
48+
bronze: "Bronze Sponsors",
49+
inkind: "In-Kind Sponsors",
3350
};
3451

52+
/** Render order */
53+
const TIER_ORDER: Tier[] = ["platinum", "gold", "silver", "bronze", "inkind"];
54+
3555
const HackathonYearSponsors: React.FC<HackathonYearSponsorsProps> = ({
3656
year,
3757
}) => {
38-
const sponsors: Record<
39-
string,
40-
{
41-
gold: { name: string; logo: string };
42-
silver: { name: string; logo: string }[];
43-
}
44-
> = {
58+
const sponsorsByYear: Record<string, YearSponsors> = {
59+
/* -------------------- 2026 -------------------- */
60+
"2026": {
61+
// platinum: [{ name: "Ubisoft", logo: Ubisoft2026 }],
62+
gold: [{ name: "G3", logo: G3_2026 }],
63+
silver: [
64+
{ name: "Niche", logo: Niche2026 },
65+
{ name: "Pollard", logo: Pollard2026 },
66+
],
67+
// inkind: [
68+
// {
69+
// name:"UMSU CARES", logo:umsuCares,
70+
// }
71+
// ],
72+
},
73+
74+
/* -------------------- 2025 -------------------- */
4575
"2025": {
46-
gold: { name: "Glitch Secure", logo: GlitchSecure },
76+
gold: [{ name: "Glitch Secure", logo: GlitchSecure }],
4777
silver: [
4878
{ name: "Varian", logo: Varian },
4979
{ name: "Ubisoft", logo: Ubisoft },
@@ -56,8 +86,10 @@ const HackathonYearSponsors: React.FC<HackathonYearSponsorsProps> = ({
5686
{ name: "FOS", logo: FOS },
5787
],
5888
},
89+
90+
/* -------------------- 2024 -------------------- */
5991
"2024": {
60-
gold: { name: "Priceline", logo: Priceline2024 },
92+
gold: [{ name: "Priceline", logo: Priceline2024 }],
6193
silver: [
6294
{ name: "Niche", logo: Niche2024 },
6395
{ name: "G3", logo: G3_2024 },
@@ -67,8 +99,10 @@ const HackathonYearSponsors: React.FC<HackathonYearSponsorsProps> = ({
6799
{ name: "KarveIT", logo: KarveIT },
68100
],
69101
},
102+
103+
/* -------------------- 2023 -------------------- */
70104
"2023": {
71-
gold: { name: "Neo", logo: Neo },
105+
gold: [{ name: "Neo", logo: Neo }],
72106
silver: [
73107
{ name: "Payworks", logo: PayWorks },
74108
{ name: "Ubisoft", logo: Ubisoft2023 },
@@ -77,30 +111,30 @@ const HackathonYearSponsors: React.FC<HackathonYearSponsorsProps> = ({
77111
},
78112
};
79113

80-
const sponsorData = sponsors[String(year)];
81-
if (!sponsorData) return null;
114+
const data = sponsorsByYear[String(year)];
115+
if (!data) return null;
82116

83117
return (
84118
<div className="sponsors-container">
85-
{/* Gold sponsor */}
86-
<div className="gold-sponsor">
87-
<img src={sponsorData.gold.logo} alt={sponsorData.gold.name} />
88-
</div>
89-
90-
{/* Silver sponsors in rows of 3 */}
91-
{Array.from({ length: Math.ceil(sponsorData.silver.length / 3) }).map(
92-
(_, rowIndex) => (
93-
<div key={rowIndex} className="sponsors-row">
94-
{sponsorData.silver
95-
.slice(rowIndex * 3, rowIndex * 3 + 3)
96-
.map((sponsor, index) => (
97-
<div key={index} className="sponsor">
98-
<img src={sponsor.logo} alt={sponsor.name} />
119+
{TIER_ORDER.map((tier) => {
120+
const list = data[tier];
121+
if (!list || list.length === 0) return null;
122+
123+
return (
124+
<div className={`tier tier--${tier}`} key={tier}>
125+
<h2 className="tier-title">
126+
{TIER_LABEL[tier] ?? tier[0].toUpperCase() + tier.slice(1)}
127+
</h2>
128+
<div className="tier-logos">
129+
{list.map((s, i) => (
130+
<div key={i} className="sponsor">
131+
<img src={s.logo} alt={s.name} loading="lazy" />
99132
</div>
100133
))}
134+
</div>
101135
</div>
102-
)
103-
)}
136+
);
137+
})}
104138
</div>
105139
);
106140
};

‎src/routes/hackathon/Hackathon.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import HorizontalScroller from "@/components/HorizontalScroller";
1414
import GalleryScroller from "@/components/GalleryScroller";
1515
import { picturesGeneralImages } from "@/resources/data/devHacksArchive/PicturesGeneral";
1616
import { HackathonArchiveCards } from "@/routes/hackathon/HackathonArchiveCards";
17+
import HackathonYearSponsors from "@/resources/data/devHacksArchive/HackathonYearSponsors";
1718

1819
function Hackathon() {
1920
// const btnStyles = {
@@ -158,8 +159,8 @@ function Hackathon() {
158159
</div>
159160
</div>
160161

161-
{/* <hi className="hackathon-sponsors heading">Our Sponsors:</hi>
162-
<Sponsors /> */}
162+
{/* <h1 className="hackathon-sponsors heading">Our Sponsors</h1>
163+
<HackathonYearSponsors year={2026} /> */}
163164

164165
<h1 className="hackathon-sponsors heading">Event Pictures</h1>
165166
<GalleryScroller images={picturesGeneralImages} />

‎src/styles/devHacksSponsors.scss‎

Lines changed: 55 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,91 @@
11
.sponsors-container {
22
display: flex;
3+
font-family: "IBM Plex Mono", monospace;
34
flex-direction: column;
45
align-items: center;
56
text-align: center;
6-
gap: 20px;
7+
gap: 28px;
78
max-width: 100vh;
89
}
910

10-
.sponsors-row {
11+
.tier {
12+
width: 100%;
1113
display: flex;
12-
justify-content: center;
13-
gap: 15px;
14+
flex-direction: column;
1415
align-items: center;
16+
gap: 18px;
17+
}
18+
19+
.tier-title {
20+
font-family: "IBM Plex Mono", monospace;
21+
font-size: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
22+
letter-spacing: 0.06em;
23+
// text-transform: uppercase;
24+
opacity: 0.9;
1525
}
1626

17-
.gold-sponsor {
27+
.tier-logos {
1828
display: flex;
1929
justify-content: center;
2030
align-items: center;
31+
gap: 16px;
32+
flex-wrap: wrap;
2133
}
2234

2335
.sponsor img {
24-
max-width: 150px;
2536
height: auto;
2637
object-fit: contain;
2738
}
2839

29-
.gold-sponsor img {
30-
max-width: 500px;
40+
/* tier-specific sizing */
41+
.tier--platinum .sponsor img {
42+
max-width: 450px;
43+
}
44+
.tier--gold .sponsor img {
45+
max-width: 320px;
46+
}
47+
.tier--silver .sponsor img {
48+
max-width: 250px;
49+
}
50+
.tier--bronze .sponsor img {
51+
max-width: 160px;
52+
}
53+
.tier--inkind .sponsor img {
54+
max-width: 130px;
3155
}
3256

3357
@media (max-width: 1024px) {
34-
.sponsors-row {
35-
flex-wrap: wrap;
58+
.tier--platinum .sponsor img {
59+
max-width: 420px;
3660
}
37-
.sponsor img {
61+
.tier--gold .sponsor img {
62+
max-width: 360px;
63+
}
64+
.tier--silver .sponsor img {
65+
max-width: 150px;
66+
}
67+
.tier--bronze .sponsor img {
3868
max-width: 120px;
3969
}
40-
.gold-sponsor img {
41-
max-width: 450px;
70+
.tier--inkind .sponsor img {
71+
max-width: 120px;
4272
}
4373
}
74+
4475
@media (max-width: 768px) {
45-
.sponsors-row {
46-
flex-wrap: wrap;
76+
.tier--platinum .sponsor img {
77+
max-width: 320px;
4778
}
48-
.sponsor img {
79+
.tier--gold .sponsor img {
80+
max-width: 260px;
81+
}
82+
.tier--silver .sponsor img {
83+
max-width: 120px;
84+
}
85+
.tier--bronze .sponsor img {
4986
max-width: 100px;
5087
}
51-
.gold-sponsor img {
52-
max-width: 300px;
88+
.tier--inkind .sponsor img {
89+
max-width: 100px;
5390
}
5491
}

0 commit comments

Comments
 (0)