perdo si m'estic carregant algo

Author: maariafarelo

public/IMG_6219.jpeg

@@ -5,9 +5,10 @@ import {
 } from "@/app/genericComponents/General";
 import { departments_data } from "@data/departments_data";
 import DepartmentInfoCard from "@/app/genericComponents/DepartmentInfoCard";
-import styled from "styled-components";
+import styled from "styled-components"; 
 import { SpacingM } from "@/app/genericComponents/tokens";
 
+
 const DepartmentsCards = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -16,6 +17,7 @@ const DepartmentsCards = styled.div`
   margin-top: ${SpacingM};
 `;
 
+
 export default function Departments() {
   return (
     <SectionContainer id={"departments"}>

src/app/components/Departments.tsx

@@ -6,27 +6,49 @@ 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`
-  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: #fff; 
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0);
 
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileTitleXL};
@@ -37,6 +59,7 @@ const ButtonContainer = styled.div`
   display: flex;
   justify-content: center;
   margin-top: ${SpacingM};
+
 `;
 
 export default function Hero() {

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

@@ -57,7 +57,7 @@ const Answer = styled.p<{ isVisible: boolean }>`
 
 const QuestionBox = styled.div`
   border-radius: ${SpacingS};
-  background-color: ${Primary200};
+  background-color: #304697;
   padding: ${SpacingS};
   cursor: pointer;
 

src/app/genericComponents/DepartmentInfoCard.tsx

@@ -36,7 +36,7 @@ export const TransparentBackground = styled.div`
 `;
 
 export const Background = styled(TransparentBackground)`
-  background: ${BackgroundAccent};
+  background: #1d1e3b;
 `;
 
 export const CardWithBorder = styled.div`

src/app/genericComponents/General.ts

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