perdo si m'estic carregant algo (#4)

Co-authored-by: enrique.andujar <enrique.andujar@estudiantat.upc.edu>

Author: maariafarelo

public/IMG_6219.jpeg

@@ -2,31 +2,51 @@ import styled from "styled-components";
 import {
   MobileBreakpoint,
   MobileTitleXL,
-  SpacingL,
   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`
-  margin: ${SpacingL} auto;
+  position: relative;
+  margin-top: 5%;
+  margin-right: 10%;
+  margin-left: 10%;
   padding: ${SpacingXXL};
-  background-image: url("/hackupcLogo.svg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
+  border-radius: 20px;
+  border: 0.3333rem solid ${Primary300};
+  overflow: hidden;
 
   @media (max-width: ${MobileBreakpoint}) {
     padding: ${SpacingM};
   }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: url("/IMG_6219.jpeg");
+    background-position: center 60%;
+    background-size: cover;
+    opacity: 0.3;
+    z-index: 0;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
 `;
 
 const Title = styled.h1`
   text-align: center;
   font-size: ${TitleXL};
   background: transparent;
+  color: #ffffff;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0);
 
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileTitleXL};

src/app/components/Hero.tsx

@@ -12,10 +12,17 @@ import {
   SpacingS,
   SpacingXS,
   TitleM,
+  Primary300,
 } from "@/app/genericComponents/tokens";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 
+const BorderedSection = styled(SectionContainer)`
+  border-radius: 10px;
+  border: 0.3333rem solid ${Primary300};
+  padding: ${SpacingM};
+`;
+
 const HeaderSocials = styled.a`
   font-size: ${TitleM};
   font-weight: bold;
@@ -56,9 +63,10 @@ const SocialItem = styled.div`
 
 export default function Socials() {
   return (
-    <SectionContainer>
+    <BorderedSection>
       <SectionTitle>{socials_data.title}</SectionTitle>
       <SocialsDescription>{socials_data.description}</SocialsDescription>
+
       <HeaderSocials href={"https://hackupc.com/"} target={"_blank"}>
         HackUPC
         <FontAwesomeIcon
@@ -67,6 +75,7 @@ export default function Socials() {
           style={{ marginLeft: "8px" }}
         />
       </HeaderSocials>
+
       <SocialsList>
         {socials_data.socialsHackUPC.map((social) => (
           <SocialItem key={social.label}>
@@ -81,6 +90,7 @@ export default function Socials() {
           </SocialItem>
         ))}
       </SocialsList>
+
       <HeaderSocials href={"https://hackersatupc.org/"} target={"_blank"}>
         Hackers@UPC{" "}
         <FontAwesomeIcon
@@ -89,6 +99,7 @@ export default function Socials() {
           style={{ marginLeft: "8px" }}
         />
       </HeaderSocials>
+
       <SocialsList>
         {socials_data.socialsHackersUPC.map((social) => (
           <SocialItem key={social.label}>
@@ -103,6 +114,6 @@ export default function Socials() {
           </SocialItem>
         ))}
       </SocialsList>
-    </SectionContainer>
+    </BorderedSection>
   );
 }

src/app/components/Socials.tsx

@@ -84,9 +84,9 @@ const listSocialsHackersUPC: SocialsItem[] = [
 ];
 
 export const socials_data: Socials = {
-  title: "Estigues atent i no et perdis res!",
+  title: "Estem en contacte!",
   description:
-    "Si tens qualsevol dubte o pregunta, contacta amb nosaltres a través de qualsevol xarxa social!",
+    "Si tens qualsevol dubte o pregunta, contacta amb nosaltres a través de qualsevol xarxa social.",
   socialsHackUPC: listSocialsHackUPC,
   socialsHackersUPC: listSocialsHackersUPC,
 };

src/app/data/socials_data.ts

@@ -6,7 +6,7 @@ import {
   BodyTextMedium,
   MobileBreakpoint,
   Primary100,
-  Primary200,
+  QuestionBoxBackgroundColor,
   SpacingS,
   SpacingXS,
   TitleS,
@@ -57,7 +57,7 @@ const Answer = styled.p<{ isVisible: boolean }>`
 
 const QuestionBox = styled.div`
   border-radius: ${SpacingS};
-  background-color: ${Primary200};
+  background-color: ${QuestionBoxBackgroundColor};
   padding: ${SpacingS};
   cursor: pointer;
 

src/app/genericComponents/DepartmentInfoCard.tsx

@@ -8,6 +8,7 @@ import {
 } from "./EmblaCarouselArrowButtons";
 import useEmblaCarousel from "embla-carousel-react";
 import { ImageInformation } from "@data/interfaces";
+import Image from "next/image";
 
 type PropType = {
   slides: ImageInformation[];
@@ -32,9 +33,12 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
           {slides.map((index) => (
             <div className="embla__slide" key={index.index}>
               <div>
-                <img
+                <Image
                   src={index.url}
                   alt={index.alt}
+                  width={800}
+                  height={600}
+                  priority
                   className="embla__slide__image"
                 />
               </div>

src/app/genericComponents/EmblaCarousel.tsx

@@ -36,7 +36,8 @@ export const Neutral300: string = "#88A7B7";
 export const Neutral200: string = "#EAF7FF";
 export const Neutral100: string = "#F9FDFF";
 
-export const BackgroundAccent: string = "#1f2424";
+export const BackgroundAccent: string = "#1d1e3b";
+export const QuestionBoxBackgroundColor: string = "#304697";
 
 // Responsive breakpoints
 export const MobilePixels: number = 640;

src/app/genericComponents/tokens.ts

@@ -1,3 +1,9 @@
+:root {
+  --body-color: #1c1e3b;
+  --webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
+  --embla-button-disabled-color: rgb(255, 255, 255);
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -9,7 +15,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden; /* Prevents horizontal scrollbar */
-  background-color: #181c19;
+  background-color: var(--body-color);
 }
 
 .embla {
@@ -58,7 +64,7 @@ body {
   align-items: center;
 }
 .embla__button {
-  -webkit-tap-highlight-color: rgba(49, 49, 49, 0.5);
+  -webkit-tap-highlight-color: var(--webkit-tap-highlight-color);
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
@@ -79,7 +85,7 @@ body {
   justify-content: center;
 }
 .embla__button:disabled {
-  color: rgb(192, 192, 192);
+  color: var(--embla-button-disabled-color);
 }
 .embla__button__svg {
   width: 35%;