hackupc · enric4000 · Jan 24, 2026 · Jan 24, 2026 · Jan 24, 2026 · Jan 24, 2026
diff --git a/src/app/components/During.tsx b/src/app/components/During.tsx
@@ -3,7 +3,6 @@ import { Section } from "@/app/genericComponents/General";
 import { Body, SectionTitle } from "@/app/genericComponents/Typography";
 import {
   MobileBreakpoint,
-  MaxScreenSize,
   SpacingM,
   SpacingS,
 } from "@/app/genericComponents/tokens";
@@ -47,18 +46,14 @@ const TheMission = styled.div`
 
 const MapImageBase = styled.img`
   display: block;
-  margin: auto;
-  max-width: 100%;
+  width: 100%;
   height: auto;
-  position: relative;
-  width: 100vw;
-  max-width: 100vw;
-  left: 50%;
-  transform: translateX(-50%);
+  margin: ${SpacingM} auto;
 
-  @media (min-width: ${MaxScreenSize}) {
-    width: ${MaxScreenSize};
-    max-width: ${MaxScreenSize};
+  @media (min-width: ${MobileBreakpoint}) and (max-width: 1600px) {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
   }
 `;
 

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -10,6 +10,8 @@ import Image from "next/image";
 import { BodyLink } from "@/app/genericComponents/Typography";
 import { useEffect, useState } from "react";
 
+const HackUPCRed = "#C72C2C";
+
 const HeaderContainer = styled.div<{ isScrolled: boolean }>`
   position: fixed;
   top: 0;
@@ -37,6 +39,10 @@ const StyledBodyLink = styled(BodyLink)`
   text-transform: uppercase;
   cursor: pointer;
 
+  &:hover {
+    color: ${HackUPCRed};
+  }
+
   @media (max-width: ${MobileBreakpoint}) {
     margin-right: 90px;
   }
@@ -52,7 +58,6 @@ export default function Header() {
 
     window.addEventListener("scroll", handleScroll);
 
-    // Cleanup listener on unmount
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
@@ -26,15 +26,11 @@ const flyRoundTrip = keyframes`
   12% { transform: translateX(-15vw) translateY(-20px) scaleX(1); }
   25% { transform: translateX(-50vw) translateY(-40px) scaleX(1); }
   37% { transform: translateX(-85vw) translateY(-10px) scaleX(1); }
-
   49.9% { transform: translateX(-120vw) translateY(60px) scaleX(1); } 
-
   50% { transform: translateX(-120vw) translateY(60px) scaleX(-1); }
-
   62% { transform: translateX(-85vw) translateY(-10px) scaleX(-1); }
   75% { transform: translateX(-50vw) translateY(-40px) scaleX(-1); }
   87% { transform: translateX(-15vw) translateY(-20px) scaleX(-1); }
-
   100% { transform: translateX(20vw) translateY(20px) scaleX(-1); }
 `;
 
@@ -73,7 +69,6 @@ const DragonWrapper = styled.div`
   width: 250px;
   height: 180px;
   animation: ${flyRoundTrip} 40s linear infinite;
-  will-change: transform;
 
   @media (max-width: ${MobileBreakpoint}) {
     width: 100px;
@@ -104,33 +99,20 @@ const BaseCloud = styled.div`
   opacity: 0.9;
   animation: ${float} 6s ease-in-out infinite;
   pointer-events: none;
-
-  img {
-    object-fit: contain;
-  }
 `;
 
 const LeftCloud = styled(BaseCloud)`
   top: 33%;
   left: 2%;
   width: 180px;
   height: 100px;
-
-  @media (max-width: ${MobileBreakpoint}) {
-    top: 20%;
-    left: 3%;
-  }
 `;
 
 const RightCloud = styled(BaseCloud)`
   top: 38%;
   right: 4%;
   width: 200px;
   height: 110px;
-
-  @media (max-width: ${MobileBreakpoint}) {
-    right: 1%;
-  }
 `;
 
 const CenterCloudLeft = styled(BaseCloud)`
@@ -198,62 +180,87 @@ const RibbonContainer = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
-
-  @media (max-width: ${MobileBreakpoint}) {
-    top: -60px;
-  }
 `;
 
 const RibbonImageWrapper = styled.div`
   position: relative;
-  width: clamp(280px, 90vw, 480px);
+  width: clamp(320px, 95vw, 620px);
   aspect-ratio: 45 / 8;
 `;
 
 const CharacterGrid = styled.div`
   display: flex;
-  gap: 150px;
+  gap: 75px;
   margin-top: 100px;
-  width: 100%;
   justify-content: center;
-  align-items: flex-end;
 
   @media (max-width: ${MobileBreakpoint}) {
     gap: 70px;
     margin-top: 220px;
   }
 `;
 
-const CharacterCard = styled.a`
+const CharacterCard = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  text-decoration: none;
+  width: 220px;
+  cursor: not-allowed;
   transition: transform 0.2s ease;
-  width: 180px;
 
   &:hover {
     transform: translateY(-5px);
   }
 
+  &:hover div[data-coming-soon] {
+    opacity: 1;
+  }
+
   @media (max-width: ${MobileBreakpoint}) {
     width: 42%;
     max-width: 150px;
   }
 `;
 
+const ComingSoon = styled.div`
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(1px);
+  color: ${Colors.Black};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ${montserrat.style.fontFamily};
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  z-index: 5;
+
+  border-top-left-radius: 160px;
+  border-top-right-radius: 160px;
+
+  clip-path: polygon(
+    0% 100%,
+    100% 100%,
+    90% 12%,
+    75% 0%,
+    50% -4%,
+    25% 0%,
+    10% 12%
+  );
+`;
+
 const StackedImages = styled.div`
   position: relative;
   width: 100%;
-  height: 190px;
+  height: 230px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
-
-  @media (max-width: ${MobileBreakpoint}) {
-    height: 140px;
-  }
 `;
 
 const ArchBg = styled(Image)`
@@ -268,13 +275,8 @@ const CharacterImg = styled(Image)`
   position: relative;
   z-index: 2;
   width: 70%;
-  height: auto;
   margin-bottom: 30px;
   filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
-
-  @media (max-width: ${MobileBreakpoint}) {
-    margin-bottom: 20px;
-  }
 `;
 
 const CharacterLabel = styled.div`
@@ -337,7 +339,6 @@ export default function Hero() {
               width={700}
               height={260}
               alt="Hack UPC"
-              priority
             />
           </DesktopLogo>
 
@@ -347,7 +348,6 @@ export default function Hero() {
               width={374}
               height={170}
               alt="Hack UPC"
-              priority
             />
           </MobileLogo>
         </LogoContainer>
@@ -360,7 +360,7 @@ export default function Hero() {
           </RibbonContainer>
 
           <CharacterGrid>
-            <CharacterCard href="#" target="_blank">
+            <CharacterCard>
               <StackedImages>
                 <ArchBg src="/arch.svg" fill alt="Arch" />
                 <CharacterImg
@@ -371,9 +371,10 @@ export default function Hero() {
                 />
               </StackedImages>
               <CharacterLabel>HACKER</CharacterLabel>
+              <ComingSoon data-coming-soon>Coming soon</ComingSoon>
             </CharacterCard>
 
-            <CharacterCard href="#" target="_blank">
+            <CharacterCard>
               <StackedImages>
                 <ArchBg src="/arch.svg" fill alt="Arch" />
                 <CharacterImg
@@ -384,6 +385,7 @@ export default function Hero() {
                 />
               </StackedImages>
               <CharacterLabel>VOLUNTEER</CharacterLabel>
+              <ComingSoon data-coming-soon>Coming soon</ComingSoon>
             </CharacterCard>
           </CharacterGrid>
         </CharactersSection>

diff --git a/src/app/components/SponsorsAndPartners.tsx b/src/app/components/SponsorsAndPartners.tsx
@@ -12,6 +12,7 @@ import {
   KiloBox,
   MegaBox,
   MiliBox,
+  SponsorLogo,
   SponsorUnrevealed,
   TeraBox,
 } from "@/app/genericComponents/Sponsors";
@@ -114,7 +115,12 @@ export default function SponsorsAndPartners() {
             </SponsorRow>
             <SponsorRow>
               <MegaBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Sponsors/jetbrains.svg"}
+                  imageAlt={"jetbrains"}
+                  sponsorLink={"https://www.jetbrains.com/"}
+                  smallPadding
+                />
               </MegaBox>
               <MegaBox>
                 <SponsorUnrevealed />
@@ -132,11 +138,6 @@ export default function SponsorsAndPartners() {
                 <SponsorUnrevealed />
               </KiloBox>
             </SponsorRow>
-            <SponsorRow>
-              <MiliBox>
-                <SponsorUnrevealed />
-              </MiliBox>
-            </SponsorRow>
           </SponsorsBlock>
 
           <StyledSectionTitle className={lora.className}>
@@ -145,33 +146,69 @@ export default function SponsorsAndPartners() {
           <PartnersBlock>
             <SponsorRow>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/upc.svg"}
+                  imageAlt={"upc"}
+                  sponsorLink={"https://www.upc.edu/"}
+                  smallPadding
+                />
               </MiliBox>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/fib.svg"}
+                  imageAlt={"fib"}
+                  sponsorLink={"https://www.fib.upc.edu/"}
+                />
               </MiliBox>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/telecos.png"}
+                  imageAlt={"telecos"}
+                  sponsorLink={"https://telecos.upc.edu/"}
+                />
               </MiliBox>
               <MiliBox>
-                <SponsorUnrevealed />
-              </MiliBox>
-              <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/cfis.svg"}
+                  imageAlt={"CFIS"}
+                  sponsorLink={"https://cfis.upc.edu/"}
+                />
               </MiliBox>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/mlh.svg"}
+                  imageAlt={"mlh"}
+                  sponsorLink={"https://mlh.io/eu"}
+                />
               </MiliBox>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/coeinf.png"}
+                  imageAlt={"coeinf"}
+                  sponsorLink={
+                    "https://enginyeriainformatica.cat/dones-coeinf/"
+                  }
+                />
               </MiliBox>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/tallerdeso.png"}
+                  imageAlt={"Taller De So"}
+                  sponsorLink={"https://www.instagram.com/tallerdeso"}
+                  smallPadding
+                />
               </MiliBox>
             </SponsorRow>
             <SponsorRow>
               <MiliBox>
-                <SponsorUnrevealed />
+                <SponsorLogo
+                  imageSrc={"/Partners/ministerio.png"}
+                  imageAlt={"Ministerio"}
+                  sponsorLink={
+                    "https://www.www.siemens-energy.com/global/en/home.html"
+                  }
+                  smallPadding
+                />
               </MiliBox>
               <MiliBox>
                 <SponsorUnrevealed />