diff --git a/apps/www/src/components/Donate/EmploymentChart.tsx b/apps/www/src/components/Donate/EmploymentChart.tsx new file mode 100644 index 0000000..46cc6d1 --- /dev/null +++ b/apps/www/src/components/Donate/EmploymentChart.tsx @@ -0,0 +1,120 @@ +import * as m from "@codeday/i18n/messages"; +import { Box, Grid, Text } from "@codeday/topo/Atom"; +import { useColorMode } from "@codeday/topo/Theme"; +import React from "react"; + +// Federal Reserve Bank of New York, "Labor Market for Recent College Graduates." +const CS_UNEMPLOYMENT_BY_YEAR = [ + { year: "2024", value: 3.9}, + { year: "2025", value: 6.1 }, + { year: "2026", value: 7.0 }, +]; +const ALL_MAJORS_REFERENCE = { year: "2026", value: 4.2, label: "All majors" }; +const MAX_VALUE = Math.max( + ...CS_UNEMPLOYMENT_BY_YEAR.map((d) => d.value), + ALL_MAJORS_REFERENCE.value, +); +const CHART_HEIGHT = 160; + +function Bar({ value, emphasize }: { value: number; emphasize?: boolean }) { + const { colorMode } = useColorMode(); + return ( + + ); +} + +export default function EmploymentChart(props: any) { + const mostRecentYear = CS_UNEMPLOYMENT_BY_YEAR[CS_UNEMPLOYMENT_BY_YEAR.length - 1].year; + const referenceTop = + CHART_HEIGHT - (ALL_MAJORS_REFERENCE.value / MAX_VALUE) * CHART_HEIGHT; + + return ( + + + {m.www_donate_chart_employment_heading()} + + + + + {CS_UNEMPLOYMENT_BY_YEAR.map((d) => ( + + {d.value}% + + ))} + + + + + {CS_UNEMPLOYMENT_BY_YEAR.map((d) => ( + + ))} + + + + + {ALL_MAJORS_REFERENCE.label}: {ALL_MAJORS_REFERENCE.value}% + + + + + + {CS_UNEMPLOYMENT_BY_YEAR.map((d) => ( + + {d.year} + + ))} + + + + + {m.www_donate_chart_employment_source()} + + + ); +} diff --git a/apps/www/src/components/Donate/PrestigeGapChart.tsx b/apps/www/src/components/Donate/PrestigeGapChart.tsx new file mode 100644 index 0000000..f9d29bd --- /dev/null +++ b/apps/www/src/components/Donate/PrestigeGapChart.tsx @@ -0,0 +1,76 @@ +import * as m from "@codeday/i18n/messages"; +import { Box, Grid, Text } from "@codeday/topo/Atom"; +import { useColorMode } from "@codeday/topo/Theme"; +import React from "react"; + +// Veris Insights employer survey (reported by Fortune) +const SHORTLIST_ONLY_BY_YEAR = [ + { year: "2022", value: 17 }, + { year: "2025", value: 26 }, +]; +const MAX_VALUE = Math.max(...SHORTLIST_ONLY_BY_YEAR.map((d) => d.value)); +const CHART_HEIGHT = 160; + +function Bar({ value, emphasize }: { value: number; emphasize?: boolean }) { + const { colorMode } = useColorMode(); + return ( + + ); +} + +export default function PrestigeGapChart(props: any) { + const mostRecentYear = SHORTLIST_ONLY_BY_YEAR[SHORTLIST_ONLY_BY_YEAR.length - 1].year; + return ( + + + {m.www_donate_chart_prestige_heading()} + + + + + {SHORTLIST_ONLY_BY_YEAR.map((d) => ( + + {d.value}% + + ))} + + + + {SHORTLIST_ONLY_BY_YEAR.map((d) => ( + + ))} + + + + {SHORTLIST_ONLY_BY_YEAR.map((d) => ( + + {d.year} + + ))} + + + + + {m.www_donate_chart_prestige_source()} + + + ); +} diff --git a/apps/www/src/components/Donate/StoryList.tsx b/apps/www/src/components/Donate/StoryList.tsx new file mode 100644 index 0000000..df734c9 --- /dev/null +++ b/apps/www/src/components/Donate/StoryList.tsx @@ -0,0 +1,79 @@ +import { Box, Grid, Image, Text, VStack } from "@codeday/topo/Atom"; +import React from "react"; + + +export interface AlumniStory { + name: string; + photoUrl: string; + thenLabel: string; + nowLabel: string; + quote: string; +} + +export const ALUMNI_STORIES: AlumniStory[] = [ + { + name: "Luiza Cartaxo", + photoUrl: + "https://f2.codeday.org/d5pti1xheuyu/4ZIbKznpY100CznvLxg0ob/83f81f937519a2243577d68872f6e771/Maria-Luiza-Cartaxo-Picture-768x1024.jpeg?h=320&fit=fill&w=320", + thenLabel: "Student at Bellevue College", + nowLabel: "Software Engineer II at Boeing", + quote: + "As an international student in a programming major, you guys totally helped me to start my wonderful career path! In a three years degree, I had you guys as my first experience, Meta as my second, and Microsoft as my third, and this last one gave me a full time return offer.", + }, + { + name: "Kelly Dong", + photoUrl: + "https://f2.codeday.org/d5pti1xheuyu/1cEMO2exWuCteESR5E0dzf/7a80d8c52958c77257f6be693223522c/Kelly_Dong.jpeg?h=320&fit=fill&w=320", + thenLabel: "Student at New York City College", + nowLabel: "Software Engineer at BNY", + quote: + "I loved being able to work as a team and gain real world experience about coding but at the same time also having the opportunity to learn something new.", + }, + { + name: "Daniel Lobaton", + photoUrl: + "https://f2.codeday.org/d5pti1xheuyu/50CgDg3alYgGekfYS3lLmd/b1be3c8a0f56fef878aa1ec5c8a21992/Daniel_Lobaton.jpg?h=320&fit=fill&w=320", + thenLabel: "Student at University of Florida", + nowLabel: "Software Engineer at Microsoft", + quote: + "Being a Venezuelan immigrant, Labs was the first time that I got true exposure to a community of tech people that I could rely on. Fast forward a couple of years and now I'm three and a half months away from graduating college and have a job as a SWE at the Microsoft HQ right after I graduate.", + }, +]; + + +export default function StoryList(props: any) { + return ( + + {ALUMNI_STORIES.map((story) => ( + + + + {story.name} + + + + {story.name} + + + {story.thenLabel} + + + Now: {story.nowLabel} + + + + + “{story.quote}” + + + ))} + + ); +} diff --git a/apps/www/src/components/Page/index.tsx b/apps/www/src/components/Page/index.tsx index 9ff5a34..0ddcfe3 100644 --- a/apps/www/src/components/Page/index.tsx +++ b/apps/www/src/components/Page/index.tsx @@ -1,12 +1,12 @@ +import * as m from "@codeday/i18n/messages"; import { Box, CodeDay } from "@codeday/topo/Atom"; import { Header, SiteLogo, Main, Menu, Footer } from "@codeday/topo/Organism"; -import * as m from "@codeday/i18n/messages"; +import { usePageData } from "@codeday/topo/Theme"; import { DefaultSeo } from "next-seo"; import Head from "next/head"; import React, { ReactNode } from "react"; import { useFundraise } from "../../providers"; -import { usePageData } from "@codeday/topo/Theme"; import DisclaimerFooter from "./DisclaimerFooter"; import NavMenu from "./NavMenu"; @@ -19,10 +19,11 @@ interface PageProps { slug?: string; seo?: any; fun?: boolean; + minimal?: boolean; [key: string]: any; } -export default function Page({ children, title, darkHeader, slug, seo }: PageProps) { +export default function Page({ children, title, darkHeader, slug, seo, minimal }: PageProps) { const { cms } = usePageData(); const { mission } = cms || {}; const { isFundraiseLoaded } = useFundraise(); @@ -63,13 +64,13 @@ export default function Page({ children, title, darkHeader, slug, seo }: PagePro - - - + {/* Header's child handling chokes on a bare `false` child, so keep + itself always present and hide its contents instead. */} + {!minimal && }
{children}
- + {!minimal && }
{""}
diff --git a/apps/www/src/pages/donate.tsx b/apps/www/src/pages/donate.tsx index 7c79803..c4aaf2e 100644 --- a/apps/www/src/pages/donate.tsx +++ b/apps/www/src/pages/donate.tsx @@ -1,30 +1,93 @@ -import { Heading, Text } from "@codeday/topo/Atom"; -import { Content } from "@codeday/topo/Molecule"; import * as m from "@codeday/i18n/messages"; +import { Box, Grid, Heading, Image, Link, Text } from "@codeday/topo/Atom"; +import { Content } from "@codeday/topo/Molecule"; +import { usePageData } from "@codeday/topo/Theme"; import { apiFetch } from "@codeday/topo/utils"; import { print } from "graphql"; import { GetStaticProps } from "next"; +import EmploymentChart from "../components/Donate/EmploymentChart"; +import PrestigeGapChart from "../components/Donate/PrestigeGapChart"; +import StoryList from "../components/Donate/StoryList"; import Page from "../components/Page"; -import { usePageData } from "@codeday/topo/Theme"; import { DonateQuery } from "./donate.gql"; +function DonateBox(props: any) { + return ( + + + + + + + + + + + + + + + + {m.www_donate_disclaimer()} + + + + ); +} + export default function Donate() { const { cms: { mission }, } = usePageData(); + return ( - - - + + + + {m.www_donate_form_heading()} + + + + + {m.www_donate_heading()} - - {m.www_donate_description({ mission: mission?.items?.[0]?.value.toLowerCase() })} + + + + + + {m.www_donate_description()}{" "} + + {m.www_donate_impact_students()} + - - - + + + {m.www_donate_impact_line()} + + + + + + {m.www_donate_stories_heading()} + + + + {m.www_donate_stories_description()} + + + + + + {m.www_donate_stories_closing()} + + + ); diff --git a/packages/i18n/messages/en-us.json b/packages/i18n/messages/en-us.json index 8f0eb19..6bbd501 100644 --- a/packages/i18n/messages/en-us.json +++ b/packages/i18n/messages/en-us.json @@ -83,8 +83,20 @@ "www_contact_last_name": "Last Name", "www_contact_email": "Email", "www_contact_linkedin": "LinkedIn", - "www_donate_heading": "Make a Donation to CodeDay", - "www_donate_description": "Your donation will advance our mission of {mission}. As a 501(c)(3) non-profit, donations from US individuals and companies are tax-deductible.", + "www_donate_heading": "The job market failed this year's grads:", + "www_donate_description": "This year, CodeDay's work is more important than ever. We've helped tens of thousands of students get their footing in tech.", + "www_donate_form_heading": "Make a Donation to CodeDay", + "www_donate_form_description": "Your donation will advance our mission of {mission}.", + "www_donate_disclaimer": "CodeDay is a 501(c)(3) non-profit, donations from US individuals and companies are tax-deductible.", + "www_donate_chart_employment_heading": "Computer Science grads: unemployment rate vs. other college majors", + "www_donate_chart_employment_source": "Source: Federal Reserve Bank of New York, Labor Market for Recent College Graduates", + "www_donate_chart_prestige_heading": "Share of employers exclusively recruiting from a short list of \"target\" colleges", + "www_donate_chart_prestige_source": "Source: Veris Insights employer survey", + "www_donate_stories_heading": "Your gift will directly transform a student's life:", + "www_donate_stories_description": "CodeDay completely changes the game for grads. Here are some examples:", + "www_donate_impact_line": "$35/month over the next year fully funds one student through our pathway: from their first line of code to their first job offer in tech.", + "www_donate_impact_students": "Can you help us support one more?", + "www_donate_stories_closing": "Their stories started because someone gave. Can we count on you to support the next student?", "www_data_heading": "CodeDay Open Data Repository", "www_eco_heading": "Ecological Footprint", "www_press_kit": "Press Kit",