Skip to content

Commit c4c932c

Browse files
polmfpolmf
committed
Merge branch '2026' of https://github.com/hackupc/hackupc-landing into 2026
2 parents 325cca0 + b9cba10 commit c4c932c

10 files changed

Lines changed: 1154 additions & 997 deletions

File tree

‎public/maons_mobile.svg‎

Lines changed: 937 additions & 937 deletions
Loading

‎src/app/components/During.tsx‎

Lines changed: 106 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ const DuringContainer = styled(Section)`
1414
z-index: 1;
1515
`;
1616

17+
const StyledSectionTitle = styled(SectionTitle)`
18+
margin-bottom: 0px;
19+
`;
20+
1721
const StyledBody = styled(Body)`
1822
display: flex;
1923
flex-direction: column;
@@ -27,7 +31,7 @@ const TextWrapper = styled.div`
2731
justify-content: center;
2832
gap: ${SpacingS};
2933
display: inline-flex;
30-
margin-top: ${SpacingM};
34+
margin-top: ${SpacingS};
3135
margin-bottom: ${SpacingS};
3236
`;
3337

@@ -42,6 +46,15 @@ const TheMission = styled.div`
4246
flex-direction: column;
4347
position: relative;
4448
text-align: center;
49+
padding: 0 150px 0 150px;
50+
51+
@media (min-width: ${MobileBreakpoint}) and (max-width: 1000px) {
52+
padding: 0 15% 0 15%;
53+
}
54+
55+
@media (max-width: ${MobileBreakpoint}) {
56+
padding: 0;
57+
}
4558
`;
4659

4760
const MapImageBase = styled.img`
@@ -61,6 +74,12 @@ const MobileMapImage = styled(MapImageBase)`
6174
@media (min-width: ${MobileBreakpoint}) {
6275
display: none;
6376
}
77+
78+
@media (max-width: ${MobileBreakpoint}) {
79+
width: 100vw;
80+
margin-left: calc(50% - 50vw);
81+
margin-right: calc(50% - 50vw);
82+
}
6483
`;
6584

6685
const DesktopMapImage = styled(MapImageBase)`
@@ -69,10 +88,82 @@ const DesktopMapImage = styled(MapImageBase)`
6988
}
7089
`;
7190

91+
export const RibbonTitle = styled(SectionTitle)`
92+
position: relative;
93+
color: #000000;
94+
width: fit-content;
95+
margin: 0 auto 45px auto;
96+
padding: 8px 32px 24px 32px;
97+
font-size: 32px;
98+
background-color: rgba(238, 228, 194, 1);
99+
text-align: center;
100+
justify-content: center;
101+
align-items: center;
102+
103+
/* Left */
104+
&::before {
105+
content: "";
106+
position: absolute;
107+
bottom: -20px;
108+
left: -100px;
109+
width: 40%;
110+
height: 80%;
111+
background-color: #a19673ff;
112+
z-index: -1;
113+
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 20% 50%);
114+
}
115+
116+
/* Right */
117+
&::after {
118+
content: "";
119+
position: absolute;
120+
bottom: -20px;
121+
right: -100px;
122+
width: 40%;
123+
height: 80%;
124+
background-color: #a19673ff;
125+
z-index: -1;
126+
clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%);
127+
}
128+
129+
@media (max-width: 1000px and min-width: ${MobileBreakpoint}) {
130+
&::before {
131+
left: -100px;
132+
width: 50%;
133+
height: 50%;
134+
}
135+
136+
/* Right */
137+
&::after {
138+
right: -100px;
139+
width: 50%;
140+
height: 50%;
141+
}
142+
}
143+
@media (max-width: ${MobileBreakpoint}) {
144+
&::before {
145+
display: none;
146+
left: -75px;
147+
width: 50%;
148+
height: 60%;
149+
}
150+
151+
/* Right */
152+
&::after {
153+
display: none;
154+
right: -75px;
155+
width: 50%;
156+
height: 60%;
157+
}
158+
}
159+
`;
160+
72161
export default function During() {
73162
return (
74163
<DuringContainer id="during">
75-
<SectionTitle className={lora.className}>DURING THE EVENT</SectionTitle>
164+
<StyledSectionTitle className={lora.className}>
165+
DURING THE EVENT
166+
</StyledSectionTitle>
76167
<StyledBody>
77168
Coding is the main part of HackUPC, but we have many more activities!
78169
</StyledBody>
@@ -81,17 +172,19 @@ export default function During() {
81172
<DesktopMapImage src="/map_desktop.svg" alt="Map Desktop" />
82173

83174
<TheMission>
84-
<TextWrapper>
85-
<StyledTitle className={lora.className}>
86-
THE MISSION: HACKUPC
87-
</StyledTitle>
88-
</TextWrapper>
89-
<Body>
90-
Your weekend quest awaits! This year, HackUPC becomes a medieval
91-
adventure filled with challenges to conquer. Forge your own path by
92-
overcoming mighty trials, and see if you can rise as a true hero. Will
93-
your legend be told in generations?
94-
</Body>
175+
<RibbonTitle className={lora.className}>
176+
<TextWrapper>
177+
<StyledTitle className={lora.className}>
178+
THE MISSION: HACKUPC
179+
</StyledTitle>
180+
</TextWrapper>
181+
<Body>
182+
Your weekend quest awaits! This year, HackUPC becomes a medieval
183+
adventure filled with challenges to conquer. Forge your own path by
184+
overcoming mighty trials, and see if you can rise as a true hero.
185+
Will your legend be told in generations?
186+
</Body>
187+
</RibbonTitle>
95188
</TheMission>
96189
</DuringContainer>
97190
);

‎src/app/components/FAQs.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const ColumnsQuestions = styled.div`
7676
7777
@media (max-width: ${MobileBreakpoint}) {
7878
width: 100%;
79+
gap: 0px;
7980
}
8081
`;
8182

@@ -86,6 +87,12 @@ const QuestionsBlock = styled.div`
8687
gap: ${SpacingS};
8788
`;
8889

90+
const ApplicationQuestionsBlock = styled(QuestionsBlock)`
91+
@media (max-width: ${MobileBreakpoint}) {
92+
padding-top: 0px;
93+
}
94+
`;
95+
8996
const Question = styled.div`
9097
display: flex;
9198
flex-direction: column;
@@ -404,10 +411,10 @@ export default function FAQs() {
404411
</ColumnsQuestions>
405412

406413
<ColumnsQuestions>
407-
<QuestionsBlock>
414+
<ApplicationQuestionsBlock>
408415
<BlockTitleStyled>Applications</BlockTitleStyled>
409416
{applications_faqs.map(renderFaq)}
410-
</QuestionsBlock>
417+
</ApplicationQuestionsBlock>
411418

412419
<QuestionsBlock>
413420
<BlockTitleStyled>Teams</BlockTitleStyled>

‎src/app/components/Footer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ import {
2222
} from "@fortawesome/free-brands-svg-icons";
2323

2424
const FooterWrapper = styled.div`
25-
width: 100vw;
25+
width: 100%;
2626
background-color: #65936d;
27+
margin-top: -1px;
2728
`;
2829

2930
const SocialsAndOthers = styled.div`

‎src/app/components/Hero.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,18 +174,27 @@ const CharactersSection = styled.div`
174174

175175
const RibbonContainer = styled.div`
176176
position: absolute;
177-
top: -120px;
177+
top: -130px;
178178
left: 50%;
179179
transform: translateX(-50%);
180180
width: 100%;
181181
display: flex;
182182
justify-content: center;
183+
184+
@media (max-width: ${MobileBreakpoint}) {
185+
top: -70px;
186+
}
183187
`;
184188

185189
const RibbonImageWrapper = styled.div`
186190
position: relative;
187191
width: clamp(320px, 95vw, 620px);
188192
aspect-ratio: 45 / 8;
193+
194+
@media (max-width: ${MobileBreakpoint}) {
195+
width: clamp(360px, 100vw, 620px);
196+
aspect-ratio: 45 / 6;
197+
}
189198
`;
190199

191200
const CharacterGrid = styled.div`
@@ -195,7 +204,7 @@ const CharacterGrid = styled.div`
195204
justify-content: center;
196205
197206
@media (max-width: ${MobileBreakpoint}) {
198-
gap: 70px;
207+
gap: 40px;
199208
margin-top: 220px;
200209
}
201210
`;
@@ -218,8 +227,8 @@ const CharacterCard = styled.div`
218227
}
219228
220229
@media (max-width: ${MobileBreakpoint}) {
221-
width: 42%;
222-
max-width: 150px;
230+
width: 150px;
231+
flex: 0 0 150px;
223232
}
224233
`;
225234

@@ -252,12 +261,22 @@ const ComingSoon = styled.div`
252261
25% 0%,
253262
10% 12%
254263
);
264+
265+
@media (max-width: ${MobileBreakpoint}) {
266+
inset: auto 0 0 0;
267+
height: 85%;
268+
border-top-left-radius: 60px;
269+
border-top-right-radius: 60px;
270+
letter-spacing: 1px;
271+
font-size: 14px;
272+
}
255273
`;
256274

257275
const StackedImages = styled.div`
258276
position: relative;
259277
width: 100%;
260278
height: 230px;
279+
flex-shrink: 0;
261280
display: flex;
262281
justify-content: center;
263282
align-items: flex-end;
@@ -275,6 +294,7 @@ const CharacterImg = styled(Image)`
275294
position: relative;
276295
z-index: 2;
277296
width: 70%;
297+
height: auto;
278298
margin-bottom: 30px;
279299
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
280300
`;

0 commit comments

Comments
 (0)