{
);
+ const recruitmentTimeline = (
+
+ {recruitmentTimelineTitle}
+
+
+ );
+
+ const ourCommunity = (
+
+
+
+
+ Our{" "}
+ {
+
+ Community
+
+ }
+ :
+
+ retreat, socials, speaker events and more!
+
+
+
+
+ );
+
+ const clubImage = (src) => (
+
+ );
+
+ const bigscreen = useMediaQuery(theme.breakpoints.up("sm"));
+
+ const bragging = (
+
+
+
+ {" "}
+ our past{" "}
+ {
+
+ clients
+
+ }{" "}
+
+
+ {clubImage(citrisPhoto)}
+ {clubImage(linkhealthPhoto)}
+
+
+
+
+
+ where do our members go?
+
+ {clubImage(visaPhoto)}
+ {clubImage(applePhoto)}
+
+
+ {clubImage(googlePhoto)}
+ {clubImage(microsoftPhoto)}
+
+
+
+ );
+
return (
{heroImage}
{clubStats}
{whoWeAre}
+ {recruitmentTimeline}
+ {ourCommunity}
+ {bragging}
);
diff --git a/src/pages/JoinUs.tsx b/src/pages/JoinUs.tsx
index 2e7b8eb..b3f82c7 100644
--- a/src/pages/JoinUs.tsx
+++ b/src/pages/JoinUs.tsx
@@ -1,11 +1,234 @@
-import { Navbar } from "../components/layout"
+import { Link, Stack, Typography, Card, Box } from "@mui/material";
+import { Navbar, Footer } from "../components/layout";
+
+import {
+ defaultFlexStyles,
+ defaultFlexRowStyles,
+ defaultFlexColStyles,
+ getDefaultOverlayStyles,
+ purpleMeshStyles,
+ purpleInlineText
+} from "../utils/constants/styles";
+import { useTheme } from "@mui/material/styles";
+import generalMemberIcon from "/images/join_us_page/generalMember.png";
+import partnerClubIcon from "/images/join_us_page/partnerClub.png";
+import externalSponsorIcon from "/images/join_us_page/externalSponsor.png";
+import citrisImage from "/images/icons/Citris.png";
+import linkHealthImage from "/images/icons/LinkHealth.png";
+import berIcon from "/images/icons/BER.png";
+import saasIcon from "/images/icons/Saas.png";
+import berkeleyProjectIcon from "/images/icons/BerkeleyProject.png";
+import bprIcon from "/images/icons/BPR.png";
+import bridgeIcon from "/images/icons/Bridge.png";
+import dpeIcon from "/images/icons/DPE.png";
+
+const waysToJoin = ["General Member", "Partner Club", "External Sponsor"];
const JoinUs = () => {
+ const PCS_GMAIL = "pcs.berkeley@gmail.com";
+ const PCS_INSTAGRAM = "https://www.instagram.com/pcs_berkeley/";
+ const theme = useTheme();
+
+ const purpleCardStyle = {
+ // bgcolor: theme.palette.secondary.light,
+ backgroundImage: purpleMeshStyles,
+ py: 1,
+ px: 4,
+ };
+ const greyBox = { borderRadius: "6px", bgcolor: "#D9D9D9", width: "50%" };
+ const bold = { fontWeight: 'bold' };
+
+ const inlineLink = {
+ ...bold,
+ ...purpleInlineText(theme),
+ textDecoration: "none",
+ };
+ const leftIcon = (src) => (
+
+ );
+ const clubImage = (src) => (
+
+ );
+ const purpleCard = (text: string) => (
+
+
+ {text.split(" ")[0]}
+
+
+ {text.split(" ")[1]}
+
+
+ );
+ const overview = (
+ <>
+
+
+ {" "}
+ {
+
+ {" "}
+ Join Us{" "}
+
+ }{" "}
+ as a ...
+ {" "}
+
+
+ {waysToJoin.map(purpleCard)}
+
+
+ );
+
+ const generalMember = (
+
+ {leftIcon(generalMemberIcon)}
+
+ General Member
+
+ {" "}
+ New members are accepted twice a year during Fall and Spring
+ recruitment cycles. More details on the current process can be found
+ [here].{" "}
+
+
+
+
+ Who Can Join?
+
+ Current UC Berkeley undergraduate & graduate students.
+
+
+ Note: While we are a majority undergrad club, our community and
+ conversations are enriched by our non-traditional, transfer, and
+ graduate level members.
+
+
+
+
+
+
+ How Do I Join?
+
+ The recruitment process may change slightly between cycles but
+ generally consists of two stages:
+
+ - Brief application
+ - Short, in-person interview.
+
+ Applicants who advance past both steps are invited to join the
+ club.
+
+
+
+
+ {" "}
+
+ );
+
+ const partnerClub = (
+
+ {leftIcon(partnerClubIcon)}
+
+ Partner Club
+
+ {" "}
+ PCS collaborates with other student orgs on projects, socials, and
+ other events. Reach out via{" "}
+ {
+
+ email
+
+ }{" "}
+ or{" "}
+ {
+
+ Instagram
+
+ }{" "}
+ and let’s create something together!
+
+ {/* */}
+
+
+
+
+
+ {clubImage(berkeleyProjectIcon)}
+ {clubImage(berIcon)}
+ {clubImage(bridgeIcon)}
+ {clubImage(dpeIcon)}
+
+
+
+ );
+
+ const externalSponsor = (
+
+ {leftIcon(externalSponsorIcon)}
+
+ External Sponsor
+
+ {" "}
+ Whether you’re looking for support on an {existing project} or want to
+ explore a new research area, PCS members bring interdisciplinary
+ skillsets, creative solutions, and meaningful results to our
+ partnerships with external organizations.{" "}
+
+
+ {clubImage(citrisImage)}
+ {clubImage(linkHealthImage)}
+
+ {" "}
+
+ );
+
+ const emailForm = ""; /*TODO*/
+
return (
-
-
-
- )
-}
+ <>
+
+ {overview}
+ {generalMember}
+ {partnerClub}
+ {externalSponsor}
+ {emailForm}
+
+
+ );
+};
-export default JoinUs
\ No newline at end of file
+export default JoinUs;
diff --git a/src/utils/constants/styles.tsx b/src/utils/constants/styles.tsx
index 18390c8..07186c0 100644
--- a/src/utils/constants/styles.tsx
+++ b/src/utils/constants/styles.tsx
@@ -82,15 +82,22 @@ const displayOnDesktopStyles: SxProps = {
};
const purpleMeshStyles = `radial-gradient(at 82% 26%, hsla(281,100%,90%,1) 0px, transparent 50%), radial-gradient(at 16% 66%, hsla(263,83%,84%,1) 0px, transparent 50%), radial-gradient(at 80% 100%, hsla(266,100%,80%,1) 0px, transparent 50%), radial-gradient(at 0% 0%, hsla(256,100%,85%,1) 0px, transparent 50%);`;
-const purpleGradientStylesToBottomRight = `linear-gradient(135deg, rgba(245,234,255,1) 0%, rgba(199,131,255,1) 150%);`
-const defaultPaddingY = "6rem"
+const purpleGradientStylesToBottomRight = `linear-gradient(135deg, rgba(245,234,255,1) 0%, rgba(199,131,255,1) 150%);`;
+const defaultPaddingY = "6rem";
const defaultBorderRadius = {
md: 5,
- xs: 4
-}
+ xs: 4,
+};
const defaultBoxShadow = "#E9E9E9 0px 0px 20px 10px";
const biggerBoxShadow = "#C9C9C9 0px 0px 30px 15px";
+
+/* For purple text displayed inline with other non-purple text */
+const purpleInlineText = (theme) => ({
+ color: theme.palette.secondary.dark,
+ display: "inline",
+});
+
export {
defaultFlexStyles,
defaultFlexRowStyles,
@@ -104,5 +111,7 @@ export {
defaultPaddingY,
defaultBorderRadius,
defaultBoxShadow,
- biggerBoxShadow
+ biggerBoxShadow,
+ purpleInlineText
};
+
diff --git a/src/utils/interfaces/props.ts b/src/utils/interfaces/props.ts
index e9f2d19..a31444a 100644
--- a/src/utils/interfaces/props.ts
+++ b/src/utils/interfaces/props.ts
@@ -1,4 +1,4 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
/**
* Props for the `Stat` component which renders a numeric stat about the club.
@@ -8,9 +8,9 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
* @param subtitle a subtitle under statName.
*/
export interface StatProps {
- stat: string,
- statName: string
- subtitle?: string
+ stat: string;
+ statName: string;
+ subtitle?: string;
}
/**
@@ -20,9 +20,9 @@ export interface StatProps {
* @param icon the icon to go in the top right corner of the card.
*/
export interface IconCardProps {
- title: string,
- children: string,
- icon: IconDefinition
+ title: string;
+ children: string;
+ icon: IconDefinition;
}
/**
@@ -33,10 +33,10 @@ export interface IconCardProps {
* @param additionalInfo additional information (usually short) to add below the paragraph body.
*/
export interface InfoSectionProps {
- title: string,
- children: string,
- img: string,
- additionalInfo?: string
+ title: string;
+ children: string;
+ img: string;
+ additionalInfo?: string;
}
/**
@@ -48,11 +48,11 @@ export interface InfoSectionProps {
* @param portraitPhoto OPTIONAL a 2:1 dimension photo which will render paritally over the landscape photo if provided.
*/
export interface ProjectCardProps {
- projectName: string,
- projectDescription: string,
- tags: string[],
- landscapePhoto: string,
- portraitPhoto?: string
+ projectName: string;
+ projectDescription: string;
+ tags: string[];
+ landscapePhoto: string;
+ portraitPhoto?: string;
}
/**
@@ -63,8 +63,17 @@ export interface ProjectCardProps {
* @param selectedItem the item which is currently selected by the `useState`.
*/
export interface DropdownProps {
- dropdownName: string,
- dropdownItems: string[],
- selectSetter: (item: string) => void,
- selectedItem: string
+ dropdownName: string;
+ dropdownItems: string[];
+ selectSetter: (item: string) => void;
+ selectedItem: string;
+}
+
+/**
+ * Props for a recruitment 'step', a single element of the recruitment timeline widget */
+export interface RecruitmentStepProps {
+ name: string;
+ start: Date;
+ end: Date;
+ description?: string;
}