Skip to content

Commit 290d6b7

Browse files
polmfpolmf
authored
Coming soon (#207)
1 parent 9a4ed93 commit 290d6b7

5 files changed

Lines changed: 115 additions & 73 deletions

File tree

‎src/app/components/During.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Section } from "@/app/genericComponents/General";
33
import { Body, SectionTitle } from "@/app/genericComponents/Typography";
44
import {
55
MobileBreakpoint,
6-
MaxScreenSize,
76
SpacingM,
87
SpacingS,
98
} from "@/app/genericComponents/tokens";
@@ -47,18 +46,14 @@ const TheMission = styled.div`
4746

4847
const MapImageBase = styled.img`
4948
display: block;
50-
margin: auto;
51-
max-width: 100%;
49+
width: 100%;
5250
height: auto;
53-
position: relative;
54-
width: 100vw;
55-
max-width: 100vw;
56-
left: 50%;
57-
transform: translateX(-50%);
51+
margin: ${SpacingM} auto;
5852
59-
@media (min-width: ${MaxScreenSize}) {
60-
width: ${MaxScreenSize};
61-
max-width: ${MaxScreenSize};
53+
@media (min-width: ${MobileBreakpoint}) and (max-width: 1600px) {
54+
width: 100vw;
55+
margin-left: calc(50% - 50vw);
56+
margin-right: calc(50% - 50vw);
6257
}
6358
`;
6459

‎src/app/components/Header.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Image from "next/image";
1010
import { BodyLink } from "@/app/genericComponents/Typography";
1111
import { useEffect, useState } from "react";
1212

13+
const HackUPCRed = "#C72C2C";
14+
1315
const HeaderContainer = styled.div<{ isScrolled: boolean }>`
1416
position: fixed;
1517
top: 0;
@@ -37,6 +39,10 @@ const StyledBodyLink = styled(BodyLink)`
3739
text-transform: uppercase;
3840
cursor: pointer;
3941
42+
&:hover {
43+
color: ${HackUPCRed};
44+
}
45+
4046
@media (max-width: ${MobileBreakpoint}) {
4147
margin-right: 90px;
4248
}
@@ -52,7 +58,6 @@ export default function Header() {
5258

5359
window.addEventListener("scroll", handleScroll);
5460

55-
// Cleanup listener on unmount
5661
return () => {
5762
window.removeEventListener("scroll", handleScroll);
5863
};

‎src/app/components/Hero.tsx‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,11 @@ const flyRoundTrip = keyframes`
2626
12% { transform: translateX(-15vw) translateY(-20px) scaleX(1); }
2727
25% { transform: translateX(-50vw) translateY(-40px) scaleX(1); }
2828
37% { transform: translateX(-85vw) translateY(-10px) scaleX(1); }
29-
3029
49.9% { transform: translateX(-120vw) translateY(60px) scaleX(1); }
31-
3230
50% { transform: translateX(-120vw) translateY(60px) scaleX(-1); }
33-
3431
62% { transform: translateX(-85vw) translateY(-10px) scaleX(-1); }
3532
75% { transform: translateX(-50vw) translateY(-40px) scaleX(-1); }
3633
87% { transform: translateX(-15vw) translateY(-20px) scaleX(-1); }
37-
3834
100% { transform: translateX(20vw) translateY(20px) scaleX(-1); }
3935
`;
4036

@@ -73,7 +69,6 @@ const DragonWrapper = styled.div`
7369
width: 250px;
7470
height: 180px;
7571
animation: ${flyRoundTrip} 40s linear infinite;
76-
will-change: transform;
7772
7873
@media (max-width: ${MobileBreakpoint}) {
7974
width: 100px;
@@ -104,33 +99,20 @@ const BaseCloud = styled.div`
10499
opacity: 0.9;
105100
animation: ${float} 6s ease-in-out infinite;
106101
pointer-events: none;
107-
108-
img {
109-
object-fit: contain;
110-
}
111102
`;
112103

113104
const LeftCloud = styled(BaseCloud)`
114105
top: 33%;
115106
left: 2%;
116107
width: 180px;
117108
height: 100px;
118-
119-
@media (max-width: ${MobileBreakpoint}) {
120-
top: 20%;
121-
left: 3%;
122-
}
123109
`;
124110

125111
const RightCloud = styled(BaseCloud)`
126112
top: 38%;
127113
right: 4%;
128114
width: 200px;
129115
height: 110px;
130-
131-
@media (max-width: ${MobileBreakpoint}) {
132-
right: 1%;
133-
}
134116
`;
135117

136118
const CenterCloudLeft = styled(BaseCloud)`
@@ -198,62 +180,87 @@ const RibbonContainer = styled.div`
198180
width: 100%;
199181
display: flex;
200182
justify-content: center;
201-
202-
@media (max-width: ${MobileBreakpoint}) {
203-
top: -60px;
204-
}
205183
`;
206184

207185
const RibbonImageWrapper = styled.div`
208186
position: relative;
209-
width: clamp(280px, 90vw, 480px);
187+
width: clamp(320px, 95vw, 620px);
210188
aspect-ratio: 45 / 8;
211189
`;
212190

213191
const CharacterGrid = styled.div`
214192
display: flex;
215-
gap: 150px;
193+
gap: 75px;
216194
margin-top: 100px;
217-
width: 100%;
218195
justify-content: center;
219-
align-items: flex-end;
220196
221197
@media (max-width: ${MobileBreakpoint}) {
222198
gap: 70px;
223199
margin-top: 220px;
224200
}
225201
`;
226202

227-
const CharacterCard = styled.a`
203+
const CharacterCard = styled.div`
228204
position: relative;
229205
display: flex;
230206
flex-direction: column;
231207
align-items: center;
232-
text-decoration: none;
208+
width: 220px;
209+
cursor: not-allowed;
233210
transition: transform 0.2s ease;
234-
width: 180px;
235211
236212
&:hover {
237213
transform: translateY(-5px);
238214
}
239215
216+
&:hover div[data-coming-soon] {
217+
opacity: 1;
218+
}
219+
240220
@media (max-width: ${MobileBreakpoint}) {
241221
width: 42%;
242222
max-width: 150px;
243223
}
244224
`;
245225

226+
const ComingSoon = styled.div`
227+
position: absolute;
228+
inset: 0;
229+
background: rgba(255, 255, 255, 0.7);
230+
backdrop-filter: blur(1px);
231+
color: ${Colors.Black};
232+
display: flex;
233+
align-items: center;
234+
justify-content: center;
235+
font-family: ${montserrat.style.fontFamily};
236+
font-weight: 700;
237+
letter-spacing: 2px;
238+
text-transform: uppercase;
239+
opacity: 0;
240+
transition: opacity 0.25s ease;
241+
z-index: 5;
242+
243+
border-top-left-radius: 160px;
244+
border-top-right-radius: 160px;
245+
246+
clip-path: polygon(
247+
0% 100%,
248+
100% 100%,
249+
90% 12%,
250+
75% 0%,
251+
50% -4%,
252+
25% 0%,
253+
10% 12%
254+
);
255+
`;
256+
246257
const StackedImages = styled.div`
247258
position: relative;
248259
width: 100%;
249-
height: 190px;
260+
height: 230px;
250261
display: flex;
251262
justify-content: center;
252263
align-items: flex-end;
253-
254-
@media (max-width: ${MobileBreakpoint}) {
255-
height: 140px;
256-
}
257264
`;
258265

259266
const ArchBg = styled(Image)`
@@ -268,13 +275,8 @@ const CharacterImg = styled(Image)`
268275
position: relative;
269276
z-index: 2;
270277
width: 70%;
271-
height: auto;
272278
margin-bottom: 30px;
273279
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
274-
275-
@media (max-width: ${MobileBreakpoint}) {
276-
margin-bottom: 20px;
277-
}
278280
`;
279281

280282
const CharacterLabel = styled.div`
@@ -337,7 +339,6 @@ export default function Hero() {
337339
width={700}
338340
height={260}
339341
alt="Hack UPC"
340-
priority
341342
/>
342343
</DesktopLogo>
343344

@@ -347,7 +348,6 @@ export default function Hero() {
347348
width={374}
348349
height={170}
349350
alt="Hack UPC"
350-
priority
351351
/>
352352
</MobileLogo>
353353
</LogoContainer>
@@ -360,7 +360,7 @@ export default function Hero() {
360360
</RibbonContainer>
361361

362362
<CharacterGrid>
363-
<CharacterCard href="#" target="_blank">
363+
<CharacterCard>
364364
<StackedImages>
365365
<ArchBg src="/arch.svg" fill alt="Arch" />
366366
<CharacterImg
@@ -371,9 +371,10 @@ export default function Hero() {
371371
/>
372372
</StackedImages>
373373
<CharacterLabel>HACKER</CharacterLabel>
374+
<ComingSoon data-coming-soon>Coming soon</ComingSoon>
374375
</CharacterCard>
375376

376-
<CharacterCard href="#" target="_blank">
377+
<CharacterCard>
377378
<StackedImages>
378379
<ArchBg src="/arch.svg" fill alt="Arch" />
379380
<CharacterImg
@@ -384,6 +385,7 @@ export default function Hero() {
384385
/>
385386
</StackedImages>
386387
<CharacterLabel>VOLUNTEER</CharacterLabel>
388+
<ComingSoon data-coming-soon>Coming soon</ComingSoon>
387389
</CharacterCard>
388390
</CharacterGrid>
389391
</CharactersSection>

‎src/app/components/SponsorsAndPartners.tsx‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
KiloBox,
1313
MegaBox,
1414
MiliBox,
15+
SponsorLogo,
1516
SponsorUnrevealed,
1617
TeraBox,
1718
} from "@/app/genericComponents/Sponsors";
@@ -114,7 +115,12 @@ export default function SponsorsAndPartners() {
114115
</SponsorRow>
115116
<SponsorRow>
116117
<MegaBox>
117-
<SponsorUnrevealed />
118+
<SponsorLogo
119+
imageSrc={"/Sponsors/jetbrains.svg"}
120+
imageAlt={"jetbrains"}
121+
sponsorLink={"https://www.jetbrains.com/"}
122+
smallPadding
123+
/>
118124
</MegaBox>
119125
<MegaBox>
120126
<SponsorUnrevealed />
@@ -132,11 +138,6 @@ export default function SponsorsAndPartners() {
132138
<SponsorUnrevealed />
133139
</KiloBox>
134140
</SponsorRow>
135-
<SponsorRow>
136-
<MiliBox>
137-
<SponsorUnrevealed />
138-
</MiliBox>
139-
</SponsorRow>
140141
</SponsorsBlock>
141142

142143
<StyledSectionTitle className={lora.className}>
@@ -145,33 +146,69 @@ export default function SponsorsAndPartners() {
145146
<PartnersBlock>
146147
<SponsorRow>
147148
<MiliBox>
148-
<SponsorUnrevealed />
149+
<SponsorLogo
150+
imageSrc={"/Partners/upc.svg"}
151+
imageAlt={"upc"}
152+
sponsorLink={"https://www.upc.edu/"}
153+
smallPadding
154+
/>
149155
</MiliBox>
150156
<MiliBox>
151-
<SponsorUnrevealed />
157+
<SponsorLogo
158+
imageSrc={"/Partners/fib.svg"}
159+
imageAlt={"fib"}
160+
sponsorLink={"https://www.fib.upc.edu/"}
161+
/>
152162
</MiliBox>
153163
<MiliBox>
154-
<SponsorUnrevealed />
164+
<SponsorLogo
165+
imageSrc={"/Partners/telecos.png"}
166+
imageAlt={"telecos"}
167+
sponsorLink={"https://telecos.upc.edu/"}
168+
/>
155169
</MiliBox>
156170
<MiliBox>
157-
<SponsorUnrevealed />
158-
</MiliBox>
159-
<MiliBox>
160-
<SponsorUnrevealed />
171+
<SponsorLogo
172+
imageSrc={"/Partners/cfis.svg"}
173+
imageAlt={"CFIS"}
174+
sponsorLink={"https://cfis.upc.edu/"}
175+
/>
161176
</MiliBox>
162177
<MiliBox>
163-
<SponsorUnrevealed />
178+
<SponsorLogo
179+
imageSrc={"/Partners/mlh.svg"}
180+
imageAlt={"mlh"}
181+
sponsorLink={"https://mlh.io/eu"}
182+
/>
164183
</MiliBox>
165184
<MiliBox>
166-
<SponsorUnrevealed />
185+
<SponsorLogo
186+
imageSrc={"/Partners/coeinf.png"}
187+
imageAlt={"coeinf"}
188+
sponsorLink={
189+
"https://enginyeriainformatica.cat/dones-coeinf/"
190+
}
191+
/>
167192
</MiliBox>
168193
<MiliBox>
169-
<SponsorUnrevealed />
194+
<SponsorLogo
195+
imageSrc={"/Partners/tallerdeso.png"}
196+
imageAlt={"Taller De So"}
197+
sponsorLink={"https://www.instagram.com/tallerdeso"}
198+
smallPadding
199+
/>
170200
</MiliBox>
171201
</SponsorRow>
172202
<SponsorRow>
173203
<MiliBox>
174-
<SponsorUnrevealed />
204+
<SponsorLogo
205+
imageSrc={"/Partners/ministerio.png"}
206+
imageAlt={"Ministerio"}
207+
sponsorLink={
208+
"https://www.www.siemens-energy.com/global/en/home.html"
209+
}
210+
smallPadding
211+
/>
175212
</MiliBox>
176213
<MiliBox>
177214
<SponsorUnrevealed />

0 commit comments

Comments
 (0)