Finish Homepage

public/data/index.ts

@@ -1,4 +1,10 @@
-import { StatProps, IconCardProps, InfoSectionProps, ProjectCardProps } from "../../src/utils/interfaces/props";
+import {
+  StatProps,
+  IconCardProps,
+  InfoSectionProps,
+  ProjectCardProps,
+  RecruitmentStepProps,
+} from "../../src/utils/interfaces/props";
 import {
   faBoxesStacked,
   faChartSimple,
@@ -8,11 +14,11 @@ import {
 import foodwatchLandscape from "../images/foodwatch-landscape.png";
 import foodwatchPortait from "../images/foodwatch-portait.png";
 import decalLandscape from "../images/decal-landscape.jpg";
-import linkHealthTargetingLandscape from "../images/link-health-targeting-landscape.png"
-import orderedLibertyLandscape from "../images/ordered-liberty-landscape.png"
-import dataScienceCircleLandscape from "../images/data-science-circle-landscape.png"
-import dataScienceCirclePortait from "../images/data-science-circle-portrait.svg"
-import linkHealthVendingMachineLandscape from "../images/link-health-vending-machine-landscape.png"
+import linkHealthTargetingLandscape from "../images/link-health-targeting-landscape.png";
+import orderedLibertyLandscape from "../images/ordered-liberty-landscape.png";
+import dataScienceCircleLandscape from "../images/data-science-circle-landscape.png";
+import dataScienceCirclePortait from "../images/data-science-circle-portrait.svg";
+import linkHealthVendingMachineLandscape from "../images/link-health-vending-machine-landscape.png";
 
 export const stats: StatProps[] = [
   {
@@ -68,96 +74,117 @@ export const aboutPageIconCards: IconCardProps[] = [
 ];
 
 export const aboutPageInfoSection: InfoSectionProps[] = [
-    {
-        title: "General Meetings",
-        children: `At GMs, we host discussions and debates about current events, often
+  {
+    title: "General Meetings",
+    children: `At GMs, we host discussions and debates about current events, often
         relating to AI and tech policy, have guest speaker presentations, and share
         project updates with the group.`,
-        img: "/images/meetings.png",
-        additionalInfo: "Thursdays, 8 - 9 PM"
-    },
-    {
-        title: "Socials",
-        children: `Socials can vary in type, like watching debates together, hiking, biking,
+    img: "/images/meetings.png",
+    additionalInfo: "Thursdays, 8 - 9 PM",
+  },
+  {
+    title: "Socials",
+    children: `Socials can vary in type, like watching debates together, hiking, biking,
         excursions, parties, and of course we have a retreat each semester. The
         best place to get to know your PCS pals!`,
-        img: "/images/retreat.jpeg",
-        additionalInfo: "Two to three per month"
-    },
-    {
-        title: "Projects",
-        children: `The time requirement, duration, locations, and agenda can vary from project
+    img: "/images/retreat.jpeg",
+    additionalInfo: "Two to three per month",
+  },
+  {
+    title: "Projects",
+    children: `The time requirement, duration, locations, and agenda can vary from project
         to project. They are a great way to gain experience in technical work,
         research, or policy analysis!`,
-        img: "/images/project.png",
-        additionalInfo: "One meeting per week (usually)"
-    },
-    {
-        title: "Workshops",
-        children: `We host a few workshops each month focusing on improving our members'
+    img: "/images/project.png",
+    additionalInfo: "One meeting per week (usually)",
+  },
+  {
+    title: "Workshops",
+    children: `We host a few workshops each month focusing on improving our members'
         skill sets, including resumé and career workshops, data science, web
         development, and much more!`,
-        img: "/images/workshop.jpg",
-        additionalInfo: "One to two per month"
-    }
-]
+    img: "/images/workshop.jpg",
+    additionalInfo: "One to two per month",
+  },
+];
 
 export const projects: ProjectCardProps[] = [
   {
     projectName: "FoodWatch",
-    projectDescription: "Pinpointing areas of food scarcity with neural networks",
-    tags: [
-      "Web Dev",
-      "Machine Learning"
-    ],
+    projectDescription:
+      "Pinpointing areas of food scarcity with neural networks",
+    tags: ["Web Dev", "Machine Learning"],
     landscapePhoto: foodwatchLandscape,
-    portraitPhoto: foodwatchPortait
+    portraitPhoto: foodwatchPortait,
   },
   {
     projectName: "DeCal",
-    projectDescription: "PS 198: Exploring how digital innovation is rehsaping governance and society",
-    tags: [
-      "Policy Analysis",
-      "Education"
-    ],
-    landscapePhoto: decalLandscape
+    projectDescription:
+      "PS 198: Exploring how digital innovation is rehsaping governance and society",
+    tags: ["Policy Analysis", "Education"],
+    landscapePhoto: decalLandscape,
   },
   {
     projectName: "Link Health Targeting",
     projectDescription: "Using data driven solutions for targeted outreach",
-    tags: [
-      "Data Science",
-      "Research"
-    ],
-    landscapePhoto: linkHealthTargetingLandscape
+    tags: ["Data Science", "Research"],
+    landscapePhoto: linkHealthTargetingLandscape,
   },
   {
     projectName: "Ordered Liberty Lineage Analysis",
     projectDescription: "Exploring the due process of interpretation",
-    tags: [
-      "Policy Analysis",
-      "Data Science",
-      "Research"
-    ],
-    landscapePhoto: orderedLibertyLandscape
+    tags: ["Policy Analysis", "Data Science", "Research"],
+    landscapePhoto: orderedLibertyLandscape,
   },
   {
     projectName: "Data Science Circle",
     projectDescription: "Empowering the next generation of data scientists",
-    tags: [
-      "Data Science",
-      "Machine Learning"
-    ],
+    tags: ["Data Science", "Machine Learning"],
     landscapePhoto: dataScienceCircleLandscape,
-    portraitPhoto: dataScienceCirclePortait
+    portraitPhoto: dataScienceCirclePortait,
   },
   {
     projectName: "Link Health Vending Machine",
-    projectDescription: "Connecting under-served individuals to welfare programs",
-    tags: [
-      "Policy Analysis",
-      "Web Dev"
-    ],
-    landscapePhoto: linkHealthVendingMachineLandscape
-  }
-]
+    projectDescription:
+      "Connecting under-served individuals to welfare programs",
+    tags: ["Policy Analysis", "Web Dev"],
+    landscapePhoto: linkHealthVendingMachineLandscape,
+  },
+];
+
+//TODO: timezone fuckery
+export const recruitmentSteps: RecruitmentStepProps[] = [
+
+  {
+    name: "Tabling",
+    start: new Date("2024-08-28"),
+    end: new Date("2024-09-11"),
+    description: "We'll be tabling on Sproul! Come say hi.",
+  },
+  {
+    name: "Coffee Chats",
+    start: new Date("2024-09-02"),
+    end: new Date("2024-09-10"),
+    description: "Chat with a board member and learn more about the club!",
+  },
+
+  {
+    name: "URM Infosession + Infosession 1",
+    start: new Date("2024-09-05"),
+    end: new Date("2024-09-05"),
+    description: "Ia Ia Cthulhu Ftaghn?",
+  },
+
+  {
+    name: "Infosession 2 (Virtual)",
+    start: new Date("2024-09-09"),
+    end: new Date("2024-09-09"),
+    description: "Ia Ia Cthulhu Ftaghn?",
+  },
+  {
+    name: "Applications Due",
+    start: new Date("2024-09-10"),
+    end: new Date("2024-09-10"),
+    description: "At the end of things, where the dry dust bleeds",
+  },
+];

src/components/RecruitmentTimeline.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+import { useTheme } from "@mui/material/styles";
+import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
+import {
+  Stepper,
+  Step,
+  StepLabel,
+  StepButton,
+  StepConnector,
+  Box,
+  Button,
+  SxProps,
+  Typography,
+  Card,
+  StepProps,
+  Popover,
+} from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+import { recruitmentSteps } from "../../public/data";
+import { ArrowForward } from "@mui/icons-material";
+import { RecruitmentStepProps } from "../utils/interfaces/props";
+
+const PcsConnector = () => {
+  const theme = useTheme();
+  return (
+    <StepLabel sx={{ color: theme.palette.secondary.light, p:2 }} icon={<span />}>
+      <ArrowForward
+        preserveAspectRatio={"none"}
+        sx={{ color: theme.palette.secondary.light }}
+      />
+    </StepLabel>
+  );
+};
+
+const RecruitmentTimeline = () => {
+  const theme = useTheme();
+
+  const renderDate = (start: Date, end: Date) => {
+    if (start.getTime() == end.getTime()) {
+      return start.toLocaleDateString();
+    } else {
+      return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+    }
+  };
+
+  const bigscreen = useMediaQuery(theme.breakpoints.up("md"));
+
+  return (
+    <Box>
+      <Stepper
+    sx ={{p: 2}}
+        connector={<PcsConnector />}
+        nonLinear
+        activeStep={null}
+        orientation={bigscreen ? "horizontal" : "vertical"}
+      >
+        {recruitmentSteps.map(({ name, start, end, description }) => (
+          <Step key={name} completed={false} sx={{ maxWidth: "20rem"}}>
+            <StepLabel
+              StepIconProps={{
+                sx: {
+                  color: theme.palette.secondary.light,
+                },
+              }}
+            >
+            <Box sx={{color: theme.palette.primary.main}}>
+              <Typography sx={{ fontWeight: "bold" }}>{name}</Typography>
+              <Typography variant='subtitle2'>{renderDate(start, end)}</Typography>
+            {/*<Typography variant='body2'>{description}</Typography>*/}
+            </Box>
+            </StepLabel>
+          </Step>
+        ))}
+
+        {/*       <Box sx={{ display: "flex", flexDirection: "row", pt: 1 }}>
+      <Button
+             color="inherit"
+             disabled={activeStep === 0}
+             onClick={handleBack}
+             sx={{ mr: 1 }}
+      >
+      Back
+             </Button>
+      <Box sx={{ flex: "1 1 auto" }} />
+      <Button onClick={handleNext} sx={{ mr: 1 }}>
+      Next
+             </Button>
+      </Box>*/}
+      </Stepper>
+    </Box>
+  );
+};
+
+export default RecruitmentTimeline;

src/components/layout/Footer.tsx

@@ -59,7 +59,10 @@ const socials = [
 const PCS_GMAIL = "pcs.berkeley@gmail.com";
 const PCS_ADDRESS = "University of California, Berkeley";
 
-const bold_no_underline: SxProps = { fontWeight: 600, textDecoration: "none" };
+const bold_no_underline: SxProps = {
+    fontWeight: "bold",
+    textDecoration: "none",
+};
 
 const getSvgIcon = (Icon: string) => {
     return (
@@ -110,7 +113,7 @@ const Footer = () => {
     );
 
     const contactUs = (
-        <Stack spacing={2} alignItems="right" sx={{ pr: PADDING, pl:2 }}>
+        <Stack spacing={2} alignItems="right" sx={{ pr: PADDING, pl: 2 }}>
             <Typography sx={bold_no_underline}>Contact</Typography>
             <Typography
                 component={Link}

src/components/layout/index.ts

@@ -1,5 +1,5 @@
 import Navbar from "./Navbar";
 import { Line } from "./Line";
 import TextualHeroImage from "./TextualHeroImage";
-
-export { Navbar, Line, TextualHeroImage }
+import Footer from "./Footer"
+export { Navbar, Line, TextualHeroImage, Footer }

src/components/miscellaneous/Stat.tsx

@@ -43,7 +43,7 @@ const Stat = ({ stat, statName, subtitle }: StatProps) => {
   };
 
   return (
-    <Box sx={statContainerStyles}>
+    <Card sx={statContainerStyles}>
       {hasSuffix(stat) ? (
         <Typography variant="h2">
           {customCountup(parseInt(stat.slice(0, -1)))}