From 27e5f1e7c0a5895f2545e7f072486d6f90e7fe7b Mon Sep 17 00:00:00 2001
From: neus <02mayolneus@gmail.com>
Date: Tue, 1 Sep 2026 13:24:25 +0200
Subject: [PATCH 1/3] Refreshes UI

---
 src/app/components/Hero.tsx                 | 69 +++++++++++++---
 src/app/components/PresentationCards.tsx    | 24 +++---
 src/app/components/Socials.tsx              | 16 ++++
 src/app/data/hero_data.ts                   |  2 +-
 src/app/genericComponents/EmblaCarousel.tsx | 52 +++---------
 src/app/genericComponents/General.ts        | 43 ++++++----
 src/app/globals.css                         | 90 ++++++++-------------
 src/app/page.tsx                            |  2 +-
 8 files changed, 164 insertions(+), 134 deletions(-)

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index 14fb61f..c17d651 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -8,23 +8,26 @@ import {
   SpacingM,
   SpacingXXL,
   TitleXL,
-  Primary300,
 } from "@/app/genericComponents/tokens";
 import { hero_data } from "@data/hero_data";
 import { PrimaryButton } from "@/app/genericComponents/General";
 
 const Container = styled.div`
   position: relative;
-  margin-top: 5%;
-  margin-right: 10%;
-  margin-left: 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 80vh;
   padding: ${SpacingXXL};
-  border-radius: 20px;
-  border: 0.3333rem solid ${Primary300};
   overflow: hidden;
 
   @media (max-width: ${MobileBreakpoint}) {
+    min-height: 72vh;
     padding: ${SpacingS};
+    padding-top: 5rem;
+    padding-bottom: 3.5rem;
+    justify-content: center;
+    align-items: center;
   }
 
   &::before {
@@ -52,11 +55,18 @@ const Title = styled.h1`
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0);
 
   @media (max-width: ${MobileBreakpoint}) {
-    font-size: ${MobileTitleXL};
+    font-size: 3.2rem;
+    line-height: 1.08;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
   }
 
   @media (max-width: ${SmallMobileBreakpoint}) {
-    font-size: ${MobileTitleL};
+    font-size: 2.7rem;
   }
 `;
 
@@ -64,9 +74,45 @@ const ButtonContainer = styled.div`
   display: flex;
   justify-content: center;
   margin-top: ${SpacingM};
+
+  @media (max-width: ${MobileBreakpoint}) {
+    width: 100%;
+    justify-content: center;
+  }
+`;
+
+const ClosedMessage = styled.p`
+  margin: 0;
+  font-style: italic;
+  text-align: center;
+  color: #ffffff;
+  font-size: 1rem;
+`;
+
+const DiscoverMoreButton = styled.button`
+  display: none;
+  margin: auto auto 0;
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 0.5rem 0;
+
+  @media (max-width: ${MobileBreakpoint}) {
+    display: block;
+  }
 `;
 
 export default function Hero() {
+  const handleScrollToNextSection = () => {
+    const nextSection = document.getElementById("presentation-cards");
+    nextSection?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
   return (
     <Container>
       <Title>{hero_data.title}</Title>
@@ -76,11 +122,12 @@ export default function Hero() {
             {hero_data.applicationsOpenTextButton}
           </PrimaryButton>
         ) : (
-          <PrimaryButton disabled>
-            {hero_data.applicationsClosedTextButton}
-          </PrimaryButton>
+          <ClosedMessage>{hero_data.applicationsClosedTextButton}</ClosedMessage>
         )}
       </ButtonContainer>
+      <DiscoverMoreButton onClick={handleScrollToNextSection} type="button">
+        Discover more
+      </DiscoverMoreButton>
     </Container>
   );
 }
diff --git a/src/app/components/PresentationCards.tsx b/src/app/components/PresentationCards.tsx
index fb71274..afcb5df 100644
--- a/src/app/components/PresentationCards.tsx
+++ b/src/app/components/PresentationCards.tsx
@@ -18,22 +18,24 @@ const OPTIONS: EmblaOptionsType = { loop: true };
 
 export default function PresentationCards() {
   return (
-    <SectionContainer>
+    <SectionContainer id="presentation-cards">
       <CardContainer>
-        <CardWithBorder>
+        <CardWithBorder alignLeft>
           <CardTitle>{about_joining_data_card.title}</CardTitle>
-          <CardBody>{about_joining_data_card.description}</CardBody>
-          <EmblaCarousel
-            slides={about_joining_data_card.images}
-            options={OPTIONS}
-          />
+          <CardBody alignLeft>{about_joining_data_card.description}</CardBody>
+          <div style={{ marginTop: "2rem" }}>
+            <EmblaCarousel
+              slides={about_joining_data_card.images}
+              options={OPTIONS}
+            />
+          </div>
         </CardWithBorder>
       </CardContainer>
 
       <CardContainer>
-        <CardWithBorder>
+        <CardWithBorder alignLeft>
           <CardTitle>{talk_data_card.title}</CardTitle>
-          <CardBody>{talk_data_card.description}</CardBody>
+          <CardBody alignLeft>{talk_data_card.description}</CardBody>
           <VideoContainer>
             <video width="100%" controls>
               <source src={talk_data_card.video} type="video/mp4" />
@@ -43,9 +45,9 @@ export default function PresentationCards() {
       </CardContainer>
 
       <CardContainer>
-        <CardWithBorder>
+        <CardWithBorder alignLeft>
           <CardTitle>{trailer_data_card.title}</CardTitle>
-          <CardBody>{trailer_data_card.description}</CardBody>
+          <CardBody alignLeft>{trailer_data_card.description}</CardBody>
           <VideoContainer>
             <video width="100%" controls>
               <source src={trailer_data_card.video} type="video/mp4" />
diff --git a/src/app/components/Socials.tsx b/src/app/components/Socials.tsx
index 44faace..c22f935 100644
--- a/src/app/components/Socials.tsx
+++ b/src/app/components/Socials.tsx
@@ -51,11 +51,27 @@ const SocialsList = styled.div`
   gap: ${SpacingM};
   justify-content: center;
   padding: ${SpacingS};
+
+  @media (max-width: 640px) {
+    gap: ${SpacingS};
+  }
 `;
 
 const SocialItem = styled.div`
   text-align: center;
 
+  svg {
+    width: 2.8rem;
+    height: 2.8rem;
+  }
+
+  @media (max-width: 640px) {
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
   &:hover {
     transform: scale(1.5);
   }
diff --git a/src/app/data/hero_data.ts b/src/app/data/hero_data.ts
index 2745f0e..14c0a17 100644
--- a/src/app/data/hero_data.ts
+++ b/src/app/data/hero_data.ts
@@ -1,7 +1,7 @@
 import { HeroInformation } from "@data/interfaces";
 
 export const hero_data: HeroInformation = {
-  title: "Uneix-te a l'equip de HackUPC",
+  title: "UNEIX-TE A L'EQUIP DE HACKUPC",
   applicationsOpenTextButton: "Apunta’t ara!",
   applicationsLink: "https://hackersatupc.typeform.com/to/ZBm8aTTg",
   applicationsClosedTextButton: "Les inscripcions estan tancades",
diff --git a/src/app/genericComponents/EmblaCarousel.tsx b/src/app/genericComponents/EmblaCarousel.tsx
index fcb9df3..7707cc1 100644
--- a/src/app/genericComponents/EmblaCarousel.tsx
+++ b/src/app/genericComponents/EmblaCarousel.tsx
@@ -1,12 +1,5 @@
 import React from "react";
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { EmblaOptionsType } from "embla-carousel";
-import {
-  NextButton,
-  PrevButton,
-  usePrevNextButtons,
-} from "./EmblaCarouselArrowButtons";
-import useEmblaCarousel from "embla-carousel-react";
 import { ImageInformation } from "@data/interfaces";
 
 type PropType = {
@@ -14,40 +7,21 @@ type PropType = {
   options?: EmblaOptionsType;
 };
 
-const EmblaCarousel: React.FC<PropType> = (props) => {
-  const { slides, options } = props;
-  const [emblaRef, emblaApi] = useEmblaCarousel(options);
-
-  const {
-    prevBtnDisabled,
-    nextBtnDisabled,
-    onPrevButtonClick,
-    onNextButtonClick,
-  } = usePrevNextButtons(emblaApi);
+const EmblaCarousel: React.FC<PropType> = ({ slides }) => {
+  const duplicatedSlides = [...slides, ...slides];
 
   return (
-    <section className="embla">
-      <div className="embla__viewport" ref={emblaRef}>
-        <div className="embla__container">
-          {slides.map((index) => (
-            <div className="embla__slide" key={index.index}>
-              <div>
-                <img
-                  src={index.url}
-                  alt={index.alt}
-                  className="embla__slide__image"
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="embla__controls">
-        <div className="embla__buttons">
-          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
-          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
-        </div>
+    <section className="embla marquee" aria-label="Autoplaying image gallery">
+      <div className="marquee__track">
+        {duplicatedSlides.map((slide, index) => (
+          <div className="marquee__slide" key={`${slide.index}-${index}`}>
+            <img
+              src={slide.url}
+              alt={slide.alt}
+              className="marquee__image"
+            />
+          </div>
+        ))}
       </div>
     </section>
   );
diff --git a/src/app/genericComponents/General.ts b/src/app/genericComponents/General.ts
index ba8c12e..3ae4da8 100644
--- a/src/app/genericComponents/General.ts
+++ b/src/app/genericComponents/General.ts
@@ -26,12 +26,12 @@ import {
 
 export const TransparentBackground = styled.div`
   margin: 0;
-  padding: ${SpacingXL} ${SpacingM};
+  padding: ${SpacingL} ${SpacingM};
   width: 100%;
   height: 100%;
 
   @media (max-width: ${MobileBreakpoint}) {
-    padding: ${SpacingM};
+    padding: ${SpacingM} ${SpacingS};
   }
 `;
 
@@ -39,36 +39,46 @@ export const Background = styled(TransparentBackground)`
   background: ${BackgroundAccent};
 `;
 
-export const CardWithBorder = styled.div`
-  margin: 0 auto;
-  padding: ${SpacingL};
-  text-align: center;
-  border: 0.3333rem solid ${Primary300};
+interface CardWithBorderProps {
+  alignLeft?: boolean;
+}
+
+export const CardWithBorder = styled.div<CardWithBorderProps>`
+  padding: ${SpacingM};
+  text-align: ${({ alignLeft }) => (alignLeft ? "left" : "center")};
   border-radius: ${SpacingS};
   display: grid;
   max-width: ${MaxElement};
 
   @media (max-width: ${MobileBreakpoint}) {
-    padding: ${SpacingM};
+    padding: ${SpacingS};
+    text-align: center;
   }
 `;
 
 export const CardTitle = styled.h2`
   font-size: ${TitleL};
-  margin-bottom: ${SpacingS};
+  margin-bottom: ${SpacingXS};
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileTitleM};
+    text-align: center;
   }
 `;
 
-export const CardBody = styled.p`
+interface CardBodyProps {
+  alignLeft?: boolean;
+}
+
+export const CardBody = styled.p<CardBodyProps>`
   font-size: ${BodyTextMedium};
-  text-align: justify;
+  text-align: ${({ alignLeft }) => (alignLeft ? "left" : "justify")};
   line-height: 1.6667;
-  margin-bottom: ${SpacingM};
+  margin: 0 0 ${SpacingM};
 
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileBodyTextMedium};
+    text-align: justify;
+    margin-bottom: ${SpacingS};
   }
 `;
 
@@ -87,6 +97,7 @@ export const SectionTitle = styled.h2`
 
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileTitleL};
+    text-align: center;
   }
 `;
 
@@ -98,10 +109,12 @@ export const SectionContainer = styled.div`
 export const SectionDescription = styled.p`
   font-size: ${BodyText};
   text-align: justify;
-  margin-top: ${SpacingS};
+  margin-top: ${SpacingXS};
 
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileBodyText};
+    text-align: justify;
+    margin-top: ${SpacingXS};
   }
 `;
 
@@ -121,14 +134,14 @@ interface ButtonProps {
 }
 
 const ButtonBasic = styled.a<ButtonProps>`
-  padding: ${SpacingS} ${SpacingL};
+  padding: ${SpacingS} ${SpacingM};
   border-radius: ${SpacingXS};
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   font-size: ${BodyText};
   width: ${(props) => props.width || "fit-content"};
-  margin-top: ${SpacingS};
+  margin-top: ${SpacingXS};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 
   @media (max-width: ${MobileBreakpoint}) {
diff --git a/src/app/globals.css b/src/app/globals.css
index e5797a0..db5e853 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -19,75 +19,53 @@ body {
 }
 
 .embla {
-  max-width: 70rem;
-  margin: auto;
-  --slide-spacing: 0.5rem;
-  --slide-size: 100%;
+  width: 100vw;
+  max-width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  overflow: hidden;
 }
 
-.embla__viewport {
+.marquee {
+  position: relative;
   overflow: hidden;
 }
 
-.embla__container {
+.marquee__track {
   display: flex;
-  touch-action: pan-y pinch-zoom;
-  margin-left: calc(var(--slide-spacing) * -1);
+  width: max-content;
+  animation: marquee-slide 26s linear infinite;
 }
 
-.embla__slide {
-  transform: translate3d(0, 0, 0);
-  flex: 0 0 var(--slide-size);
-  min-width: 0;
-  padding-left: var(--slide-spacing);
+.marquee__slide {
+  flex: 0 0 auto;
+  width: min(26vw, 20rem);
+  padding-right: 0;
 }
 
-.embla__slide__image {
-  width: 80%;
+.marquee__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
+  border-radius: 0;
+}
 
-  @media (max-width: 640px) {
-    width: 100%;
+@keyframes marquee-slide {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
   }
 }
-.embla__controls {
-  display: flex;
-  grid-template-columns: auto 1fr;
-  justify-content: center;
-  gap: 1.2rem;
-  margin-top: 1.8rem;
-}
-.embla__buttons {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.6rem;
-  align-items: center;
-}
-.embla__button {
-  -webkit-tap-highlight-color: var(--webkit-tap-highlight-color);
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  touch-action: manipulation;
-  text-decoration: none;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  box-shadow: inset 0 0 0 0.2rem rgb(234, 234, 234);
-  width: 2.6rem;
-  height: 2.6rem;
-  z-index: 1;
-  border-radius: 50%;
-  color: rgb(54, 49, 61);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.embla__button:disabled {
-  color: var(--embla-button-disabled-color);
+
+.marquee__track {
+  animation-duration: 40s;
 }
-.embla__button__svg {
-  width: 35%;
-  height: 35%;
+
+@media (max-width: 640px) {
+  .marquee__slide {
+    width: min(72vw, 20rem);
+  }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 36c598d..4d9d62a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -21,7 +21,7 @@ const FirstBackground = styled(TransparentBackground)`
 
   @media (max-width: ${MobileBreakpoint}) {
     padding-top: ${SpacingS};
-    padding: ${SpacingM};
+    padding: ${SpacingM} ${SpacingS};
   }
 `;
 

From 931ec1b18eec57178e88b644e3dd7893c3513267 Mon Sep 17 00:00:00 2001
From: neus <02mayolneus@gmail.com>
Date: Tue, 1 Sep 2026 13:27:42 +0200
Subject: [PATCH 2/3] fix pipeline

---
 src/app/components/Hero.tsx          | 2 --
 src/app/genericComponents/General.ts | 3 +--
 src/app/genericComponents/tokens.ts  | 2 --
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index c17d651..5dc72c4 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -2,8 +2,6 @@ import styled from "styled-components";
 import {
   SmallMobileBreakpoint,
   MobileBreakpoint,
-  MobileTitleXL,
-  MobileTitleL,
   SpacingS,
   SpacingM,
   SpacingXXL,
diff --git a/src/app/genericComponents/General.ts b/src/app/genericComponents/General.ts
index 3ae4da8..bdee49b 100644
--- a/src/app/genericComponents/General.ts
+++ b/src/app/genericComponents/General.ts
@@ -7,7 +7,6 @@ import {
   MobileBodyText,
   MobileBodyTextMedium,
   MobileBreakpoint,
-  MobileTitleL,
   MobileTitleM,
   Primary100,
   Primary300,
@@ -96,7 +95,7 @@ export const SectionTitle = styled.h2`
   text-align: center;
 
   @media (max-width: ${MobileBreakpoint}) {
-    font-size: ${MobileTitleL};
+    font-size: ${MobileTitleM};
     text-align: center;
   }
 `;
diff --git a/src/app/genericComponents/tokens.ts b/src/app/genericComponents/tokens.ts
index 41e0939..e84f317 100644
--- a/src/app/genericComponents/tokens.ts
+++ b/src/app/genericComponents/tokens.ts
@@ -9,8 +9,6 @@ export const BodyTextMedium: string = "16px";
 export const BodyTextSmall: string = "14px";
 
 // Mobile font sizes
-export const MobileTitleXL: string = "48px";
-export const MobileTitleL: string = "32px";
 export const MobileTitleM: string = "26px";
 export const MobileTitleS: string = "20px";
 export const MobileBodyText: string = "17px";

From 02cfabdd069121ee49ca7d8b1a8403cad198c674 Mon Sep 17 00:00:00 2001
From: neus <02mayolneus@gmail.com>
Date: Tue, 1 Sep 2026 13:31:13 +0200
Subject: [PATCH 3/3] fix pipeline

---
 src/app/genericComponents/General.ts | 1 -
 src/app/genericComponents/tokens.ts  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/app/genericComponents/General.ts b/src/app/genericComponents/General.ts
index bdee49b..03223e7 100644
--- a/src/app/genericComponents/General.ts
+++ b/src/app/genericComponents/General.ts
@@ -17,7 +17,6 @@ import {
   SpacingL,
   SpacingM,
   SpacingS,
-  SpacingXL,
   SpacingXS,
   TitleL,
   TitleXL,
diff --git a/src/app/genericComponents/tokens.ts b/src/app/genericComponents/tokens.ts
index e84f317..e4f7008 100644
--- a/src/app/genericComponents/tokens.ts
+++ b/src/app/genericComponents/tokens.ts
@@ -50,7 +50,6 @@ export const SpacingXS: string = "8px";
 export const SpacingS: string = "16px";
 export const SpacingM: string = "32px";
 export const SpacingL: string = "64px";
-export const SpacingXL: string = "96px";
 export const SpacingXXL: string = "160px";
 
 export const MaxElement: string = "1000px";