Refresh UI for improved user experience

src/app/components/Hero.tsx

@@ -2,29 +2,30 @@ import styled from "styled-components";
 import {
   SmallMobileBreakpoint,
   MobileBreakpoint,
-  MobileTitleXL,
-  MobileTitleL,
   SpacingS,
   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,21 +53,64 @@ 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;
   }
 `;
 
 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 +120,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>
   );
 }

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" />

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);
   }

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",

src/app/genericComponents/EmblaCarousel.tsx

@@ -1,53 +1,27 @@
 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 = {
   slides: ImageInformation[];
   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>
   );