Improvements to donate page

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 (
+    <Box
+      w="100%"
+      roundedTop="md"
+      height={`${(value / MAX_VALUE) * CHART_HEIGHT}px`}
+      bg={emphasize ? "current.primary" : colorMode === "light" ? "gray.300" : "gray.700"}
+    />
+  );
+}
+
+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 (
+    <Box {...props}>
+      <Text mb={4} fontSize="md" color="current">
+        {m.www_donate_chart_employment_heading()}
+      </Text>
+
+      <Box>
+        <Grid
+          templateColumns={`repeat(${CS_UNEMPLOYMENT_BY_YEAR.length}, 1fr)`}
+          gap={4}
+          pb={1}
+        >
+          {CS_UNEMPLOYMENT_BY_YEAR.map((d) => (
+            <Text key={d.year} mb={0} fontSize="sm" fontWeight="bold" textAlign="center">
+              {d.value}%
+            </Text>
+          ))}
+        </Grid>
+
+        <Box
+          position="relative"
+          height={`${CHART_HEIGHT}px`}
+          borderBottomWidth={2}
+          borderColor="current.border"
+        >
+          <Grid
+            templateColumns={`repeat(${CS_UNEMPLOYMENT_BY_YEAR.length}, 1fr)`}
+            gap={4}
+            h="100%"
+            alignItems="end"
+          >
+            {CS_UNEMPLOYMENT_BY_YEAR.map((d) => (
+              <Bar key={d.year} value={d.value} emphasize={d.year === mostRecentYear} />
+            ))}
+          </Grid>
+
+          <Box
+            position="absolute"
+            left={0}
+            right={0}
+            top={`${referenceTop}px`}
+            borderTopWidth={2}
+            borderStyle="dashed"
+            borderColor="current.text"
+          >
+            <Text
+              position="absolute"
+              right={0}
+              top={-5}
+              mb={0}
+              fontSize="xs"
+              fontWeight="bold"
+              color="current.text"
+              whiteSpace="nowrap"
+            >
+              {ALL_MAJORS_REFERENCE.label}: {ALL_MAJORS_REFERENCE.value}%
+            </Text>
+          </Box>
+        </Box>
+
+        <Grid
+          templateColumns={`repeat(${CS_UNEMPLOYMENT_BY_YEAR.length}, 1fr)`}
+          gap={4}
+          pt={1}
+        >
+          {CS_UNEMPLOYMENT_BY_YEAR.map((d) => (
+            <Text
+              key={d.year}
+              mb={0}
+              fontSize="sm"
+              fontWeight={d.year === mostRecentYear ? "bold" : "normal"}
+              textAlign="center"
+            >
+              {d.year}
+            </Text>
+          ))}
+        </Grid>
+      </Box>
+
+      <Text mt={4} mb={0} fontSize="xs" color="current.textLight">
+        {m.www_donate_chart_employment_source()}
+      </Text>
+    </Box>
+  );
+}

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 (
+    <Box
+      w="100%"
+      roundedTop="md"
+      height={`${(value / MAX_VALUE) * CHART_HEIGHT}px`}
+      bg={emphasize ? "current.primary" : colorMode === "light" ? "gray.300" : "gray.700"}
+    />
+  );
+}
+
+export default function PrestigeGapChart(props: any) {
+  const mostRecentYear = SHORTLIST_ONLY_BY_YEAR[SHORTLIST_ONLY_BY_YEAR.length - 1].year;
+  return (
+    <Box {...props}>
+      <Text mb={4} fontSize="md" color="current">
+        {m.www_donate_chart_prestige_heading()}
+      </Text>
+
+      <Box>
+        <Grid templateColumns={`repeat(${SHORTLIST_ONLY_BY_YEAR.length}, 1fr)`} gap={4} pb={1}>
+          {SHORTLIST_ONLY_BY_YEAR.map((d) => (
+            <Text key={d.year} mb={0} fontSize="sm" fontWeight="bold" textAlign="center">
+              {d.value}%
+            </Text>
+          ))}
+        </Grid>
+
+        <Grid
+          templateColumns={`repeat(${SHORTLIST_ONLY_BY_YEAR.length}, 1fr)`}
+          gap={4}
+          h={`${CHART_HEIGHT}px`}
+          alignItems="end"
+          borderBottomWidth={2}
+          borderColor="current.border"
+        >
+          {SHORTLIST_ONLY_BY_YEAR.map((d) => (
+            <Bar key={d.year} value={d.value} emphasize={d.year === mostRecentYear} />
+          ))}
+        </Grid>
+
+        <Grid templateColumns={`repeat(${SHORTLIST_ONLY_BY_YEAR.length}, 1fr)`} gap={4} pt={1}>
+          {SHORTLIST_ONLY_BY_YEAR.map((d) => (
+            <Text
+              key={d.year}
+              mb={0}
+              fontSize="sm"
+              fontWeight={d.year === mostRecentYear ? "bold" : "normal"}
+              textAlign="center"
+            >
+              {d.year}
+            </Text>
+          ))}
+        </Grid>
+      </Box>
+
+      <Text mt={4} mb={0} fontSize="xs" color="current.textLight">
+        {m.www_donate_chart_prestige_source()}
+      </Text>
+    </Box>
+  );
+}

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 (
+    <VStack>
+      {ALUMNI_STORIES.map((story) => (
+        <Box key={story.name} mb={8}>
+          <Grid templateColumns="auto 1fr" gap={4} alignItems="center" mb={3}>
+            <Box
+              rounded="full"
+              overflow="hidden"
+              w={16}
+              h={16}
+              backgroundColor="gray.200"
+              flexShrink={0}
+            >
+              <Image src={story.photoUrl} alt={story.name} w="100%" />
+            </Box>
+            <Box>
+              <Text mb={0} fontWeight="bold">
+                {story.name}
+              </Text>
+              <Text mb={0} fontSize="sm" color="current.textLight">
+                {story.thenLabel}
+              </Text>
+              <Text mb={0} fontSize="sm" fontWeight="bold">
+                Now: {story.nowLabel}
+              </Text>
+            </Box>
+          </Grid>
+          <Text fontSize="sm" fontStyle="italic" color="current.textLight">
+            &ldquo;{story.quote}&rdquo;
+          </Text>
+        </Box>
+      ))}
+    </VStack>
+  );
+}

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
               </Box>
             </a>
           </SiteLogo>
-          <Menu>
-            <NavMenu isFundraiseLoaded={isFundraiseLoaded} />
-          </Menu>
+          {/* Header's child handling chokes on a bare `false` child, so keep
+              <Menu> itself always present and hide its contents instead. */}
+          <Menu>{!minimal && <NavMenu isFundraiseLoaded={isFundraiseLoaded} />}</Menu>
         </Header>
         <Main>{children}</Main>
         <Box mt={16}>
-          <DisclaimerFooter disclaimerTexts={disclaimerTexts} />
+          {!minimal && <DisclaimerFooter disclaimerTexts={disclaimerTexts} />}
           <Footer repository="web" branch="master" domainName="www.codeday.org">
             {""}
           </Footer>