Add ci to the project

.github/workflows/recruiting_ci.yml

@@ -0,0 +1,36 @@
+name: HackUPC recruiting page CI
+
+defaults:
+  run:
+    working-directory: .
+
+on:
+  pull_request:
+    branches: [master]
+  workflow_dispatch:
+
+env:
+  DEBUG: 1
+  IMAGE_TAG: ${{ github.job }}-${{ github.sha }}
+
+jobs:
+  lint:
+    name: 🦄 Linter
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🏗 Setup repo
+        uses: actions/checkout@v3
+
+      - name: 🏗 Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: 📦 Install dependencies
+        run: npm install
+
+      - name: 🦄 Check format (prettier)
+        run: npm run check-format
+
+      - name: 🦄 Check lint (eslint)
+        run: npm run check-lint

README.md

@@ -12,7 +12,7 @@ This landing page have 4 sections apart from the hero and the footer. The sectio
 
 In this section you can find all the data in the `src/app/data/cards_data.ts` file, you can change the data in this file to change the information in the landing page.
 
-Also in this sections there are videos and photos, that can be found in the `public` folder. It's necessary to add the photo if it's added as a photo or video in the data file.
+Also in these sections there are videos and photos, that can be found in the `public` folder. It's necessary to add the photo if it's added as a photo or video in the data file. Photos should be added in the `public/photos` folder and in ratio 1:1, and videos in the `public/videos` folder.
 
 ### Departments section
 
@@ -28,7 +28,7 @@ In this section you can find all the data in the `src/app/data/socials_data.ts`
 
 In this section you will see we are using the `font-awesome` icons, you can find all the icons in the [font-awesome](https://fontawesome.com/v5.15/icons?d=gallery&p=2) website.
 
-----
+---
 
 ## How to set up the project
 
@@ -37,7 +37,6 @@ In this section you will see we are using the `font-awesome` icons, you can find
 - Install [Node.js](https://nodejs.org/en/download/) (v20.9.0 or newer) in your computer.
 - Have a text editor or IDE installed, like [Visual Studio Code](https://code.visualstudio.com/) or [WebStorm](https://www.jetbrains.com/webstorm/).
 
-
 ### Installation
 
 1. Clone the repository
@@ -64,7 +63,6 @@ In this section you will see we are using the `font-awesome` icons, you can find
 
 > The page auto-updates as you edit the file. If it's not working maybe you need to check your configurations, it's for sure working in Chrome (mac and windows) and mozilla (linux)
 
-
 ## Linting and formatting
 
 We are using `eslint` and `prettier` to lint and format the code, you can run the following commands to check if the code is correctly formatted and linted:

src/app/components/Footer.tsx

@@ -2,8 +2,8 @@ import { SectionContainer } from "@/app/genericComponents/General";
 import styled from "styled-components";
 import {
   BodyTextMedium,
-  Primary100,
-  Primary500,
+  Secondary100,
+  Secondary500,
   SpacingM,
   SpacingS,
   SpacingXS,
@@ -16,13 +16,13 @@ const FooterContainer = styled(SectionContainer)`
 `;
 
 const LinkText = styled.a`
-  color: ${Primary100};
+  color: ${Secondary100};
   text-decoration: none;
   font-size: ${BodyTextMedium};
   margin: 0 ${SpacingXS};
 
   &:hover {
-    color: ${Primary500};
+    color: ${Secondary500};
     cursor: pointer;
   }
 `;

src/app/components/Hackers.tsx

@@ -59,7 +59,7 @@ export default function Hackers() {
       <SectionTitle>{hackers_data.title}</SectionTitle>
       <SectionDescription>{hackers_data.subtitle}</SectionDescription>
       <LogoAndDescription>
-        <LogoHackers src={"/hackersatupcLogo.svg"} />
+        <LogoHackers src={"/hackersatupcLogo.svg"} alt={"logoHackers"} />
         <CardsForHackers>
           <Description>{hackers_data.description}</Description>
           <ButtonContainer>

src/app/components/PresentationCards.tsx

@@ -0,0 +1,58 @@
+import {
+  CardBody,
+  CardContainer,
+  CardTitle,
+  CardWithBorder,
+  SectionContainer,
+  VideoContainer,
+} from "@/app/genericComponents/General";
+import {
+  about_joining_data_card,
+  talk_data_card,
+  trailer_data_card,
+} from "@data/cards_data";
+import EmblaCarousel from "@/app/genericComponents/EmblaCarousel";
+import { EmblaOptionsType } from "embla-carousel";
+
+const OPTIONS: EmblaOptionsType = { loop: true };
+
+export default function PresentationCards() {
+  return (
+    <SectionContainer>
+      <CardContainer>
+        <CardWithBorder>
+          <CardTitle>{about_joining_data_card.title}</CardTitle>
+          <CardBody>{about_joining_data_card.description}</CardBody>
+          <EmblaCarousel
+            slides={about_joining_data_card.images}
+            options={OPTIONS}
+          />
+        </CardWithBorder>
+      </CardContainer>
+
+      <CardContainer>
+        <CardWithBorder>
+          <CardTitle>{talk_data_card.title}</CardTitle>
+          <CardBody>{talk_data_card.description}</CardBody>
+          <VideoContainer>
+            <video width="100%" controls>
+              <source src={talk_data_card.video} type="video/mp4" />
+            </video>
+          </VideoContainer>
+        </CardWithBorder>
+      </CardContainer>
+
+      <CardContainer>
+        <CardWithBorder>
+          <CardTitle>{trailer_data_card.title}</CardTitle>
+          <CardBody>{trailer_data_card.description}</CardBody>
+          <VideoContainer>
+            <video width="100%" controls>
+              <source src={trailer_data_card.video} type="video/mp4" />
+            </video>
+          </VideoContainer>
+        </CardWithBorder>
+      </CardContainer>
+    </SectionContainer>
+  );
+}

src/app/components/Socials.tsx

@@ -6,20 +6,30 @@ import {
 import { socials_data } from "@data/socials_data";
 import styled from "styled-components";
 import {
-  Secondary300,
+  Secondary100,
+  Secondary500,
   SpacingM,
   SpacingS,
+  SpacingXS,
   TitleM,
 } from "@/app/genericComponents/tokens";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 
-const HeaderSocials = styled.p`
+const HeaderSocials = styled.a`
   font-size: ${TitleM};
   font-weight: bold;
-  text-align: center;
-  text-transform: uppercase;
-  color: ${Secondary300};
+  text-decoration: none;
+  color: ${Secondary100};
   margin-top: ${SpacingM};
+  margin-bottom: ${SpacingXS};
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    color: ${Secondary500};
+  }
 `;
 
 const SocialsDescription = styled(SectionDescription)`
@@ -49,7 +59,14 @@ export default function Socials() {
     <SectionContainer>
       <SectionTitle>{socials_data.title}</SectionTitle>
       <SocialsDescription>{socials_data.description}</SocialsDescription>
-      <HeaderSocials>HackUPC</HeaderSocials>
+      <HeaderSocials href={"https://hackupc.com/"} target={"_blank"}>
+        HackUPC
+        <FontAwesomeIcon
+          icon={faUpRightFromSquare}
+          size={"2xs"}
+          style={{ marginLeft: "8px" }}
+        />
+      </HeaderSocials>
       <SocialsList>
         {socials_data.socialsHackUPC.map((social) => (
           <SocialItem key={social.label}>
@@ -64,7 +81,14 @@ export default function Socials() {
           </SocialItem>
         ))}
       </SocialsList>
-      <HeaderSocials>HackersatUPC</HeaderSocials>
+      <HeaderSocials href={"https://hackersatupc.org/"} target={"_blank"}>
+        Hackers@UPC{" "}
+        <FontAwesomeIcon
+          icon={faUpRightFromSquare}
+          size={"2xs"}
+          style={{ marginLeft: "8px" }}
+        />
+      </HeaderSocials>
       <SocialsList>
         {socials_data.socialsHackersUPC.map((social) => (
           <SocialItem key={social.label}>