Merge branch 'main' into web-40/past-events-section

Code-the-Change-YYC · Feb 7, 2024 · 69d0111 · 69d0111
2 parents ea635d5 + 0038ad7
commit 69d0111
Show file tree

Hide file tree

Showing 27 changed files with 8,926 additions and 164 deletions.
diff --git a/components/AlumniCarousel.jsx b/components/AlumniCarousel.jsx
@@ -1,27 +1,33 @@
-import Image from "next/image";
-import { ALUMNI } from "../data/alumni";
-import { SwiperSlide } from "swiper/react";
-import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
-import Carousel from "./Carousel";
-import FontAwesomeLink from "./FontAwesomeLink";
-import "swiper/css";
-import "swiper/css/navigation";
-
-const CAROUSEL_CONTAINER = "text-white rounded-lg w-[20rem] h-[44rem] shadow-2xl md:w-4/5 swiper-button-white";
+import Image from 'next/image';
+import { SwiperSlide } from 'swiper/react';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import Carousel from './Carousel';
+import FontAwesomeLink from './FontAwesomeLink';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { rgbDataURL } from '../utils/blurImage';
+const CAROUSEL_CONTAINER = 'text-white rounded-lg w-[20rem] h-[44rem] shadow-2xl md:w-4/5 swiper-button-white';
 const ALUMNI_TILE =
-  "bg-[#7055FD] w-[20rem] h-[70rem] md:h-[44rem] rounded-lg items-center p-14 lg:p-10 flex flex-col shadow-2xl md:w-full md:flex-row";
-const ALUMNI_PROFILE = "flex flex-col items-center mx-auto text-center md:p-10";
+  'bg-[#7055FD] w-[20rem] h-[70rem] md:h-[44rem] rounded-lg items-center p-14 lg:p-10 flex flex-col shadow-2xl md:w-full md:flex-row';
+const ALUMNI_PROFILE = 'flex flex-col items-center mx-auto text-center md:p-10';
 
-const AlumniTile = ({ name, file, position, prevRole, testimonial, linkedin }) => {
+const AlumniTile = ({ fullName, position, previousRole, testimonial, linkedin, profile }) => {
   return (
     <div className={ALUMNI_TILE}>
       <div className={ALUMNI_PROFILE}>
         <div className="w-40 h-40 mb-3 mt-5 md:w-60 md:h-60 mx-auto relative rounded-full overflow-hidden">
-          <Image src={file} alt="Profile Picture" layout="fill" objectFit="contain" placeholder="blur" />
+          <Image
+            src={`https:${profile.fields.file.url}`}
+            alt="Profile Picture"
+            layout="fill"
+            objectFit="contain"
+            placeholder="blur"
+            blurDataURL={rgbDataURL(112, 85, 175)}
+          />
         </div>
-        <h2 className="text-[2rem] md:text-[2rem] font-bold">{name}</h2>
+        <h2 className="text-[2rem] md:text-[2rem] font-bold">{fullName}</h2>
         <h2 className="text-[1rem] md:text-[1rem] font-semibold text-[#BAFBE4]">{position}</h2>
-        <h2 className="text-[1rem] md:text-[1rem] font-medium mb-2">Previously: {prevRole}</h2>
+        <h2 className="text-[1rem] md:text-[1rem] font-medium mb-2">Previously: {previousRole}</h2>
         <FontAwesomeLink
           username={linkedin}
           icon={faLinkedin}
@@ -37,11 +43,11 @@ const AlumniTile = ({ name, file, position, prevRole, testimonial, linkedin }) =
   );
 };
 
-const AlumniCarousel = () => {
+const AlumniCarousel = ({ alumni }) => {
   return (
     <div className={CAROUSEL_CONTAINER}>
       <Carousel>
-        {ALUMNI.map((alumni) => (
+        {alumni.map((alumni) => (
           <SwiperSlide key={alumni.name}>
             <AlumniTile {...alumni} />
           </SwiperSlide>

diff --git a/components/AlumniHighlights.jsx b/components/AlumniHighlights.jsx
@@ -1,13 +1,13 @@
-import Image from "next/image";
-import Heading from "./Heading";
-import AlumniCarousel from "./AlumniCarousel";
-import { UnderlineTypes } from "../utils/underlineType";
+import Image from 'next/image';
+import Heading from './Heading';
+import AlumniCarousel from './AlumniCarousel';
+import { UnderlineTypes } from '../utils/underlineType';
 
-const ALUMNI_CONTAINER = "flex flex-col items-center h-[95rem] md:h-[65rem] bg-[#FF6B54] pt-10 shadow-xl z-0";
-const ALUMNI_HEADER = "pb-10 w-4/5 flex items-left";
-const SPARKLE_IMG = "ml-5 mb-5 w-16";
+const ALUMNI_CONTAINER = 'flex flex-col items-center h-[95rem] md:h-[65rem] bg-[#FF6B54] pt-10 shadow-xl z-0';
+const ALUMNI_HEADER = 'pb-10 w-4/5 flex items-left';
+const SPARKLE_IMG = 'ml-5 mb-5 w-16';
 
-const AlumniHighlights = () => {
+const AlumniHighlights = ({ alumni }) => {
   const HeaderContent = (
     <span className="flex flex-row mb-5 md:items-end">
       Alumni Highlights
@@ -31,7 +31,7 @@ const AlumniHighlights = () => {
           </Heading>
         </div>
       </div>
-      <AlumniCarousel />
+      <AlumniCarousel alumni={alumni} />
     </div>
   );
 };

diff --git a/components/Button.jsx b/components/Button.jsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Button = (props) => {
   return (
-    <Link href={props.href}>
+    <Link href={props.href} legacyBehavior>
       <div
         className={`cursor-pointer rounded-full text-white border-white p-4 bg-[#7055FD] border-4 text-3xl font-bold ${props.classes}`}
       >

diff --git a/components/Events.jsx b/components/Events.jsx
@@ -1,19 +1,19 @@
-import React from "react";
-import Heading from "./Heading";
-import { UnderlineTypes } from "../utils/underlineType";
-import TextSection from "./TextSection";
-import Carousel from "./Carousel";
-import { EVENTS_IMAGES } from "../data/events";
-import { SwiperSlide } from "swiper/react";
-import Image from "next/image";
-import Link from "next/link";
+import React from 'react';
+import Heading from './Heading';
+import { UnderlineTypes } from '../utils/underlineType';
+import TextSection from './TextSection';
+import Carousel from './Carousel';
+import { EVENTS_IMAGES } from '../data/events';
+import { SwiperSlide } from 'swiper/react';
+import Image from 'next/image';
+import Link from 'next/link';
 
-const EVENTS_CONTAINER = "flex flex-col h-[95rem] bg-[#BAFBE4] pt-10 z-0";
-const CONTENT_CONTAINER = "flex flex-col pt-14 p-5 md:px-32";
-const CAROUSEL_CONTAINER = "text-white rounded-lg h-[40rem] shadow-2xl";
-const EVENTS_HEADER = "flex flex-row";
+const EVENTS_CONTAINER = 'flex flex-col h-[95rem] bg-[#BAFBE4] pt-10 z-0';
+const CONTENT_CONTAINER = 'flex flex-col pt-14 p-5 md:px-32';
+const CAROUSEL_CONTAINER = 'text-white rounded-lg h-[40rem] shadow-2xl';
+const EVENTS_HEADER = 'flex flex-row';
 
-const LONG_SQUIGGLY_LINE_SVG = "/svgs/events/long_events_squiggly_line.svg";
+const LONG_SQUIGGLY_LINE_SVG = '/svgs/events/long_events_squiggly_line.svg';
 
 const Events = () => {
   const EventsCarousel = () => (
@@ -43,9 +43,9 @@ const Events = () => {
         </TextSection>
         <EventsCarousel />
         <TextSection classes="text-black z-20 pt-10">
-          Whether you are interested in joining our team or attending one of our events,{" "}
-          <Link href="/contact">
-            <a className="text-[#7055FD]">please feel free to reach out to us!</a>
+          Whether you are interested in joining our team or attending one of our events,
+          <Link href="/contact" className="text-[#7055FD]">
+            <span> please feel free to reach out to us!</span>
           </Link>
         </TextSection>
       </div>

diff --git a/components/HackathonTimeline.jsx b/components/HackathonTimeline.jsx
@@ -0,0 +1,61 @@
+import Heading from './Heading';
+import Image from 'next/image';
+import { UnderlineTypes } from '../utils/underlineType';
+import { HACKATHONS } from '../data/hackathons';
+
+const HACKATHON_TIMELINE_CONTAINER = 'flex justify-center bg-white';
+const HACKATHON_TIMELINE_CONTENT = 'max-w-[500px] w-[80vw] md:max-w-[1100px]';
+const HACKATHON_TIMELINE_HEADER = 'md:justify-start md:my-[60px] my-[30px] flex justify-center';
+
+const HACKATHON_EVENT_INFO = 'flex text-center text-xl font-bold mb-[70px] md:items-center flex-col items-center';
+const HACKATHON_TITLE_YEAR = 'text-5xl pb-[15px] italic md:text-4xl';
+const HACKATHON_IMAGE = 'object-cover w-[80vw] md:rounded-xl md:w-[450px] md:h-[250px] md:shadow-[15px_15px_0px_0px_#00D3A9]';
+const HACKATHON_TEXT = 'flex-col md:w-[400px] md:mx-[40px] leading-[1] text-[20px]';
+const HACKATHON_TOPIC_TEXT = 'flex text-left my-[15px] text-[#FF4D6F] md:text-[#FF6B54] md:my-1 md:font-extrabold md:text-[25px]';
+
+const HackathonSection = ({ hackathon, index }) => {
+  let sectionInfoStyling = 'md:flex-row-reverse';
+  let sectionTextStyling = 'md:text-right';
+  let sectionTopicStyling = 'md:text-right md:justify-end';
+
+  if(index % 2 == 0) {
+    sectionInfoStyling = 'md:flex-row md:justify-start';
+    sectionTextStyling = 'md:text-left';
+    sectionTopicStyling = '';
+  } 
+
+  return (
+    <div className={`${HACKATHON_EVENT_INFO} ${sectionInfoStyling}`}>
+      <div>
+        <h1 className={HACKATHON_TITLE_YEAR}>
+          {hackathon.year}
+        </h1>
+        <Image className={HACKATHON_IMAGE} src={hackathon.img} alt={hackathon.title} />
+      </div>
+      <div className={`${HACKATHON_TEXT} ${sectionTextStyling}`}>
+        <div className={`${HACKATHON_TOPIC_TEXT} ${sectionTopicStyling}`}>
+          <p className='md:hidden pr-[5px]'>Topics:</p>
+          <p>{hackathon.topic}</p>
+        </div>
+        <p className='font-medium md:text-[#00D3A9]'>{hackathon.blurb}</p>
+      </div>
+    </div>
+  );
+};
+
+const HackathonTimeline = () => {
+  return (
+    <div className={HACKATHON_TIMELINE_CONTAINER}>
+      <div className={HACKATHON_TIMELINE_CONTENT}>
+        <div className={HACKATHON_TIMELINE_HEADER}>
+          <Heading underlineType={UnderlineTypes.GREEN_LONG_UNDERLINE}>Hack the Change</Heading>
+        </div>
+        {HACKATHONS.map((hackathon, index) => (
+          <HackathonSection hackathon={hackathon} key={index} index={index}/>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HackathonTimeline;
diff --git a/components/JoinUs.jsx b/components/JoinUs.jsx
@@ -1,15 +1,15 @@
-import Image from "next/image";
-import TextSection from "./TextSection";
-import { JOIN_ONE, JOIN_TWO } from "../data/join";
-const JOIN_US_CONTAINER = "bg-[#7055FD] flex flex-col";
-const CONTENT_CONTAINER = "flex flex-col pt-14 p-5 md:px-32";
-const HEADING_CONTAINER = "flex flex-row";
-const PHOTO_ROW = "flex flex-row justify-between flex-wrap lg:flex-nowrap";
+import Image from 'next/image';
+import TextSection from './TextSection';
+import { JOIN_ONE, JOIN_TWO } from '../data/join';
+const JOIN_US_CONTAINER = 'bg-[#7055FD] flex flex-col';
+const CONTENT_CONTAINER = 'flex flex-col pt-14 p-5 md:px-32';
+const HEADING_CONTAINER = 'flex flex-row';
+const PHOTO_ROW = 'flex flex-row justify-between flex-wrap lg:flex-nowrap';
 
-const HEART_SYMBOL_SVG = "/svgs/join/heart_symbol.svg";
-const DOWN_ARROW_SVG = "/svgs/join/down_arrow.svg";
-const CRYSTAL_HEART_SVG = "/svgs/join/crystal_heart.svg";
-const LONG_SQUIGGLY_LINE_SVG = "/svgs/join/long_squiggly_line.svg";
+const HEART_SYMBOL_SVG = '/svgs/join/heart_symbol.svg';
+const DOWN_ARROW_SVG = '/svgs/join/down_arrow.svg';
+const CRYSTAL_HEART_SVG = '/svgs/join/crystal_heart.svg';
+const LONG_SQUIGGLY_LINE_SVG = '/svgs/join/long_squiggly_line.svg';
 
 const JoinUs = () => {
   const TeamPhoto = ({ photo, classes }) => (
@@ -26,7 +26,7 @@ const JoinUs = () => {
         <div className={HEADING_CONTAINER}>
           <h1 className={`text-5xl font-semibold text-white`}>Join Us!</h1>
           <div className="-mt-2">
-            <Image src={HEART_SYMBOL_SVG} alt="" height="70%" width="70%" />
+            <Image src={HEART_SYMBOL_SVG} alt="" height={70} width={70} />
           </div>
         </div>
         <TextSection classes="text-white pb-10 z-20">
@@ -35,7 +35,7 @@ const JoinUs = () => {
           <strong className="text-bold text-[#FFD2DC]"> then please look to apply to our team!</strong>
         </TextSection>
         <div className="ml-auto -mt-14 -mb-10">
-          <Image src={DOWN_ARROW_SVG} alt="" height="100%" width="100%" />
+          <Image src={DOWN_ARROW_SVG} alt="" height={100} width={100} />
         </div>
         <div className={PHOTO_ROW}>
           {JOIN_ONE.map(({ key, photo, classes }) => (

diff --git a/components/MailingList.jsx b/components/MailingList.jsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { FaEnvelope } from 'react-icons/fa';
+const MAILING_LIST_CONTAINER = 'bg-[#7055FD] flex flex-col text-center';
+const CONTENT_CONTAINER = 'flex flex-col p-5 md:px-32 text-center';
+const HEADING_CONTAINER = 'flex flex-row text-center justify-center';
+const LINK_TO_MAILING_LIST =
+  'https://docs.google.com/forms/d/e/1FAIpQLSfusGF-TTs6nXfBCodQuuDWqx7DnTrm6GF4c-CeDVUt1m_plA/viewform';
+const MailingList = () => {
+  return (
+    <div className={MAILING_LIST_CONTAINER}>
+      <div className={CONTENT_CONTAINER}>
+        <div className={HEADING_CONTAINER}>
+          <h1 className="text-5xl font-semibold text-white pr-4 flex flex-col justify-center text-center items-center sm:flex-row space-x-2">
+            <button className="font-extrabold underline rounded p-2 w-fit hover:opacity-85">
+              <Link href={LINK_TO_MAILING_LIST}>Join </Link>
+            </button>
+            <div>our Mailing list!</div>
+            <FaEnvelope size={45} color="white" className="hidden sm:block align-middle" />
+          </h1>
+        </div>
+        <div className="text-lg text-white font-semibold">The link to our mailing list is also in our link tree </div>
+      </div>
+    </div>
+  );
+};
+
+export default MailingList;
diff --git a/components/Map.jsx b/components/Map.jsx
@@ -1,7 +1,7 @@
-import { ComposableMap, Geographies, Geography, Marker } from "react-simple-maps";
-import { LOCATIONS } from "../data/locations";
+import { ComposableMap, Geographies, Geography, Marker } from 'react-simple-maps';
+import { LOCATIONS } from '../data/locations';
+import { MAP } from '../data/map';
 
-const GEO_URL = "https://raw.githubusercontent.com/deldersveld/topojson/master/continents/north-america.json";
 const DEFAULT_MARKER_TEXT_OFFSET = -10;
 
 const Map = () => {
@@ -11,18 +11,18 @@ const Map = () => {
       projectionConfig={{
         rotate: [110, 0, 0],
         scale: 800,
-        center: [0, 40],
+        center: [6, 40],
       }}
     >
-      <Geographies geography={GEO_URL}>
+      <Geographies geography={MAP}>
         {({ geographies }) =>
           geographies.map((geo) => <Geography key={geo.rsmKey} geography={geo} fill="#EAEAEC" stroke="#D6D6DA" />)
         }
       </Geographies>
       {LOCATIONS.map(({ name, coordinates, offset }) => (
         <Marker key={name} coordinates={coordinates}>
           <circle r={3} fill="#FF4D6F" />
-          <text textAnchor="middle" y={offset || DEFAULT_MARKER_TEXT_OFFSET}>
+          <text textAnchor="middle" y={offset || DEFAULT_MARKER_TEXT_OFFSET} className="mapText">
             {name}
           </text>
         </Marker>

diff --git a/components/MobileNavbarDrawer.jsx b/components/MobileNavbarDrawer.jsx
@@ -1,56 +1,20 @@
-import { useState } from "react";
-import SocialMediaIcons from "./SocialMediaIcons";
+import SocialMediaIcons from './SocialMediaIcons';
 
-const TEXT_CLASSES = "text-4xl font-semibold text-white";
-const ABOUT = "about";
-const NEWS = "news";
-
-const NestedLinks = ({ options }) => {
-  return (
-    <div className="ml-5 flex flex-col font-normal text-white">
-      {options.map((option) => {
-        const link = option.toLowerCase().split(" ").join("-");
-        return (
-          <a key={option} href={`/${link}`} className="text-xl py-1">
-            / {option}
-          </a>
-        );
-      })}
-    </div>
-  );
-};
+const TEXT_CLASSES = 'text-4xl font-semibold text-white';
 
 const MobileNavbarDrawer = () => {
-  const [selectedLink, setSelectedLink] = useState(null);
-
-  const handleClick = (link) => {
-    if (selectedLink === link) {
-      setSelectedLink(null);
-    } else {
-      setSelectedLink(link);
-    }
-  };
-
   return (
     <div className="flex flex-col bg-[#FF4D6F] rounded-b-2xl -mt-5 p-10 absolute top-full w-full items-center z-10">
       <div className="flex flex-col w-full space-y-4">
-        <h1
-          className={`cursor-pointer ${TEXT_CLASSES} ${selectedLink === ABOUT ? "underline" : ""}`}
-          onClick={() => handleClick(ABOUT)}
-        >
+        <a className={TEXT_CLASSES} href="who-we-are">
           About
-        </h1>
-        {selectedLink === ABOUT && <NestedLinks options={["Who we are", "Projects"]} />}
-        {/* <h1
-          className={`cursor-pointer ${TEXT_CLASSES} ${selectedLink === NEWS ? "underline" : ""}`}
-          onClick={() => handleClick(NEWS)}
-        >
-          News
-        </h1> */}
-        {selectedLink === NEWS && <NestedLinks options={["Announcements", "Blog"]} />}
-        {/* <a className={TEXT_CLASSES} href="partnerships">
-          Partnerships
-        </a> */}
+        </a>
+        <a className={TEXT_CLASSES} href="events">
+          Events
+        </a>
+        <a className={TEXT_CLASSES} href="projects">
+          Projects
+        </a>
         <a className={TEXT_CLASSES} href="contact">
           Contact
         </a>