about us page section

.env

@@ -1,2 +1,33 @@
 VITE_API_BASE_URL=http://localhost:8000/api/
 VITE_SERVICE_NAME=portal
+
+# Links external sites.
+VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
+
+
+# TODO: determine which of these we need.
+# REACT_APP_CONTAINER_MAX_WIDTH=lg
+# REACT_APP_FACEBOOK_HREF=https://www.facebook.com/codeforlifeuk
+# REACT_APP_TWITTER_HREF=https://twitter.com/codeforlifeuk
+# REACT_APP_INSTAGRAM_HREF=https://www.instagram.com/codeforlife_uk/
+# REACT_APP_OCADO_GROUP_HREF=https://www.ocadogroup.com/our-responsible-business/corporate-responsibility/skills-for-the-future
+# REACT_APP_PORTAL_GITHUB_HREF=https://github.com/ocadotechnology/codeforlife-portal
+# REACT_APP_CFL_DOCS_HREF=https://docs.codeforlife.education/
+# REACT_APP_PRIMARY_RESOURCE_HREF=https://code-for-life.gitbook.io/code-club-resources/
+# REACT_APP_PYTHON_RESOURCE_HREF=https://code-for-life.gitbook.io/code-club-resources-intermediate/
+# REACT_APP_IDEAS_BOX_HREF=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
+# REACT_APP_INDEPENDENT_BEGINNER_HREF=https://code-for-life.gitbook.io/independent-student-resources/beginner/
+# REACT_APP_INDEPENDENT_INTERMEDIATE_HREF=https://code-for-life.gitbook.io/independent-student-resources/intermediate/
+# REACT_APP_INDEPENDENT_ADVANCED_HREF=https://code-for-life.gitbook.io/independent-student-resources/advanced/
+# REACT_APP_API_BASE_URL=http://localhost:8000/api/
+# REACT_APP_RAPID_ROUTER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/w0Pw_XikQSs
+# REACT_APP_KURONO_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/m-JYukDZlL8
+# REACT_APP_BLOCKLY_GUIDE_SRC=https://docs.codeforlife.education/rapid-router/blockly-guide
+# REACT_APP_TEACHER_RESOURCES_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/tM5nKPYlz74
+# REACT_APP_RR_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/hv0fM0twrOE
+# REACT_APP_KURONO_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/6iiksCtIIGA
+# REACT_APP_INTRO_TO_CODING_ENGLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-england
+# REACT_APP_INTRO_TO_CODING_SCOTLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland
+# REACT_APP_KURONO_AND_CURRICULUM=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/teacher-guides/kurono-and-the-national-curriculum-for-computing
+# REACT_APP_RR_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/welcome-to-rapid-router
+# REACT_APP_KURONO_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/

src/pages/home/AboutUs.tsx

@@ -0,0 +1,72 @@
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
+import { Unstable_Grid2 as Grid, Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+import { Image } from "codeforlife/components"
+import { Link, LinkButton } from "codeforlife/components/router"
+
+import ControllerIcon from "../../images/icon_controller.png"
+import TicketIcon from "../../images/icon_free.png"
+import GlobeIcon from "../../images/icon_globe.png"
+import PieChartIcon from "../../images/icon_piechart.png"
+import { paths } from "../../router"
+
+const Column: FC<{
+  img: { alt: string; src: string }
+  children: React.ReactNode
+}> = ({ img, children }) => (
+  <Grid xs={12} sm={6} md={3}>
+    <Stack alignItems="center">
+      <Image alt={img.alt} src={img.src} maxWidth="200px" />
+      {children}
+    </Stack>
+  </Grid>
+)
+
+export interface AboutUsProps {}
+
+const AboutUs: FC<AboutUsProps> = () => (
+  <Grid container columnSpacing={2}>
+    <Grid xs={12}>
+      <Typography variant="h4" textAlign="center">
+        Giving everyone the ability to shape technology&apos;s future
+      </Typography>
+    </Grid>
+    <Column img={{ alt: "pie chart", src: PieChartIcon }}>
+      <Typography textAlign="center">
+        Just 16% of university computer science graduates (2018/19) in the UK
+        were women
+        <Link
+          to={import.meta.env.VITE_LINK_FEMALE_GRADUATES_IN_CS}
+          target="_blank"
+        >
+          *
+        </Link>
+        , we want to change that.
+      </Typography>
+    </Column>
+    <Column img={{ alt: "game controller", src: ControllerIcon }}>
+      <Typography textAlign="center">
+        Gamification helps children learn whilst having fun!
+      </Typography>
+    </Column>
+    <Column img={{ alt: "free ticket", src: TicketIcon }}>
+      <Typography textAlign="center">
+        That&apos;s right, free forever: our gift to you! We&apos;re also Open
+        Source.
+      </Typography>
+    </Column>
+    <Column img={{ alt: "earth", src: GlobeIcon }}>
+      <Typography textAlign="center">
+        Code for Life has over 350,000 registered users across the world.
+      </Typography>
+    </Column>
+    <Grid xs={12} display="flex" justifyContent="end">
+      <LinkButton to={paths.aboutUs._} endIcon={<ChevronRightIcon />}>
+        About us
+      </LinkButton>
+    </Grid>
+  </Grid>
+)
+
+export default AboutUs