feat(navigation): enable Diversity menu item and update Diversity page styling and sponsor details

Author: anyulled

src/components/Navigation/NavigationData.ts

@@ -2,6 +2,7 @@ import {
   ROUTE_ABOUT_US,
   ROUTE_CFP,
   ROUTE_CODE_OF_CONDUCT,
+  ROUTE_DIVERSITY,
   ROUTE_HOME,
   ROUTE_JOB_OFFERS,
   ROUTE_SCHEDULE,
@@ -33,7 +34,7 @@ export const navigationItems2025: NavigationItem[] = [
 ];
 
 export const subMenuItems2025: NavigationItem[] = [
-  //{ id: "DIVERSITY", link: ROUTE_DIVERSITY },
+  { id: "DIVERSITY", link: ROUTE_DIVERSITY },
   { id: "Cfp Committee", link: ROUTE_CFP },
   //{ id: "Accommodation", link: ROUTE_ACCOMMODATION },
   //{ id: "Attendee information", link: ROUTE_ATTENDEE },

src/views/Diversity/Diversity.test.tsx

@@ -41,7 +41,7 @@ describe("Diversity component", () => {
       </React.Suspense>,
       { wrapper: BrowserRouter },
     );
-    const ocadoLogo = screen.getByAltText("Ocado");
+    const ocadoLogo = screen.getByAltText("NUBANK");
 
     expect(ocadoLogo).toBeInTheDocument();
   });

src/views/Diversity/Diversity.tsx

@@ -1,19 +1,14 @@
 import React, { FC } from "react";
-import { Color } from "../../styles/colors";
-import data from "../../data/2024.json";
+import { Color } from "@styles/colors";
+import data from "@data/2024.json";
 import { styled } from "styled-components";
-import { BIG_BREAKPOINT } from "../../constants/BreakPoints";
+import { BIG_BREAKPOINT } from "@constants/BreakPoints";
 import { Link } from "react-router";
-import {
-  ROUTE_CODE_OF_CONDUCT,
-  ROUTE_CONDITIONS,
-} from "../../constants/routes";
-import { useDocumentTitleUpdater } from "../../hooks/useDocumentTitleUpdate";
+import { ROUTE_CODE_OF_CONDUCT, ROUTE_CONDITIONS } from "@constants/routes";
+import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
 
 const StyledSection = styled.section`
-{
   padding-top: 48px;
-}
 
   .top {
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
@@ -37,26 +32,28 @@ const StyledWave = styled.section`
 `;
 
 const StyledLogo = styled.img`
-{
   max-width: 30vw;
   flex: 2 1 auto;
   padding-bottom: 50px;
-}
+
   @media only screen and (max-width: ${BIG_BREAKPOINT}px) {
     padding-bottom: 20px;
     max-width: 65vw;
   }
 `;
 
 const Heading = styled.h1`
+  margin-top: 2rem;
+  font-family: "Square 721 Regular", sans-serif;
   color: ${Color.WHITE};
   font-size: 2.5em;
 `;
 
 const StyledP = styled.p`
   text-align: justify;
   color: ${Color.DARK_BLUE};
-  margin: 15px 3%;
+  margin: 2rem auto;
+  max-width: 70vw;
 
   @media (max-width: ${BIG_BREAKPOINT}px) {
     margin: 15px 10%;
@@ -82,7 +79,8 @@ const FlexDiv = styled.div`
 const StyledParagraph = styled.section`
   text-align: left;
   color: ${Color.DARK_BLUE};
-  margin: 15px 3%;
+  margin: 1rem auto;
+  max-width: 70vw;
 
   h2 {
     padding-bottom: 15px;
@@ -125,18 +123,18 @@ const Diversity: FC<React.PropsWithChildren<unknown>> = () => {
 
       <StyledP>
         We must thank{" "}
-        <a href="https://careers.ocadogroup.com/where-we-are/europe/development-centre-barcelona?utm_source=event&utm_medium=other&utm_campaign=ot_event_bcn_devbcn_website">
-          Ocado
-        </a>{" "}
+        <strong>
+          <a href="https://nubank.com.br/">NUBANK</a>
+        </strong>{" "}
         for making this possible!
       </StyledP>
       <FlexDiv>
         <a
-          href="https://careers.ocadogroup.com/where-we-are/europe/development-centre-barcelona?utm_source=event&utm_medium=other&utm_campaign=ot_event_bcn_devbcn_website"
+          href="https://nubank.com.br/"
           target="_blank"
           rel="noreferrer noopener"
         >
-          <StyledLogo alt="Ocado" src="images/sponsors/ocado.png" />
+          <StyledLogo alt="NUBANK" src="/images/sponsors/datomic.svg" />
         </a>
       </FlexDiv>
       <>
@@ -170,7 +168,7 @@ const Diversity: FC<React.PropsWithChildren<unknown>> = () => {
                   <a
                     rel="noreferrer"
                     target="_blank"
-                    href="https://docs.google.com/forms/d/e/1FAIpQLSdyRqQkh2iRD_QxzAwodIM1cXmO_Q4hNGojXnFli-crob2QUQ/viewform"
+                    href="https://docs.google.com/forms/d/e/1FAIpQLSdvMulz0x6epQUZl7rQr0JsrOp0eRtY1IYwp2sXPCqlAH9WzA/viewform?usp=sharing&ouid=111571095373139083277"
                   >
                     application form
                   </a>{" "}