About us page (#29)

* About us page

* Feedback

* Use our own link

* Prettier

.env

@@ -8,6 +8,9 @@ VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:[email protected]
 # Links to external sites.
 VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
 VITE_LINK_OUTLOOK_HOME=https://outlook.live.com/mail/
+VITE_LINK_SKILLS_FOR_THE_FUTURE=https://www.ocadogroup.com/sustainability/sustainability/
+VITE_LINK_PORTAL_GITHUB=https://github.com/ocadotechnology/codeforlife-portal
+VITE_LINK_CFL_DOCS=https://docs.codeforlife.education/become-a-contributor
 VITE_LINK_PRIMARY_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary
 VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip
 VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club

src/components/Introduction.tsx

@@ -10,7 +10,7 @@ import type { ResponsiveStyleValue } from "@mui/system"
 
 export interface IntroductionProps {
   header: string
-  img: { alt: string; src: string }
+  img: { desc: string; src: string }
   children: ReactNode
   direction?: ResponsiveStyleValue<GridDirection>
 }
@@ -36,7 +36,7 @@ const Introduction: FC<IntroductionProps> = ({
           </Stack>
         </Grid>
         <Grid xs={12} md={6} className="flex-center">
-          <Image alt={img.alt} src={img.src} />
+          <Image alt={img.desc} title={img.desc} src={img.src} />
         </Grid>
       </Grid>
     </>

src/pages/aboutUs/AboutUs.tsx

@@ -0,0 +1,50 @@
+import * as page from "codeforlife/components/page"
+import { type FC } from "react"
+
+import AboutUsHeroImage from "../../images/about_us_hero_hexagon.png"
+import CodeForLife from "./CodeForLife"
+import Dedication from "./Dedication"
+import OcadoGroup from "./OcadoGroup"
+import Quotes from "./Quotes"
+import Statistics from "./Statistics"
+import Supporters from "./Supporters"
+
+export interface AboutUsProps {}
+
+const AboutUs: FC<AboutUsProps> = () => {
+  return (
+    <page.Page>
+      <page.Banner
+        imageProps={{
+          alt: "Girl using a tablet",
+          title: "Girl using a tablet",
+          src: AboutUsHeroImage,
+        }}
+        header="About Code for Life"
+        subheader={
+          "Code For Life gives everyone the ability to shape technology's future"
+        }
+      />
+      <page.Section>
+        <Statistics />
+      </page.Section>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
+        <CodeForLife />
+      </page.Section>
+      <page.Section>
+        <OcadoGroup />
+      </page.Section>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
+        <Quotes />
+      </page.Section>
+      <page.Section>
+        <Supporters />
+      </page.Section>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
+        <Dedication />
+      </page.Section>
+    </page.Page>
+  )
+}
+
+export default AboutUs

src/pages/aboutUs/CodeForLife.tsx

@@ -0,0 +1,39 @@
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+
+import AboutUsCFLImage from "../../images/about_us.jpg"
+import Introduction from "../../components/Introduction"
+
+export interface CodeForLifeProps {}
+
+const CodeForLife: FC<CodeForLifeProps> = () => {
+  return (
+    <Introduction
+      header="What is Code for Life?"
+      img={{
+        desc: "Girl looking at Code for Life website",
+        src: AboutUsCFLImage,
+      }}
+    >
+      <Typography>
+        Code for Life (CFL) is a free, easy-to-use resource that provides
+        teaching and lesson plans, user guides and engagement through our fun
+        coding games and resources. These games are specially designed for
+        people learning computing for the first time.
+      </Typography>
+      <Typography>
+        The aim is to teach new coders the basic principles, to help them thrive
+        in an increasingly digital world. CFL is primarily designed for and
+        tested by primary school teachers. Our games are aligned with the
+        UK&apos;s computing curriculum, so teachers can incorporate CFL into
+        their lessons.
+      </Typography>
+      <Typography mb={0}>
+        But anyone looking to get into coding can also do so using the games and
+        resources.
+      </Typography>
+    </Introduction>
+  )
+}
+
+export default CodeForLife

src/pages/aboutUs/Dedication.tsx

@@ -0,0 +1,43 @@
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+import { Image } from "codeforlife/components"
+
+import SharonHarrisonImage from "../../images/sharon_harrison.jpg"
+
+export interface DedicationProps {}
+
+const Dedication: FC<DedicationProps> = () => {
+  return (
+    <>
+      <Stack alignItems="center">
+        <Typography variant="h4" textAlign="center">
+          Dedicated to Sharon Harrison
+        </Typography>
+        <Image
+          alt={"Sharon Harrison"}
+          src={SharonHarrisonImage}
+          maxWidth="150px"
+          marginY={3}
+        />
+        <Typography variant="h5" textAlign="center">
+          1956 — 2015
+        </Typography>
+        <Stack>
+          <Typography fontWeight="bold">
+            Sharon was instrumental in helping to create Code for Life. At the
+            beginning of 2014 she was recruited to act as our Educational
+            Consultant. The project drew on her previous skills as a pioneering
+            computing teacher and education consultant.
+          </Typography>
+          <Typography mb={0}>
+            Sharon has left a lasting legacy by creating something which will
+            help teach STEM skills to the next generation of computer scientists
+            across the world.
+          </Typography>
+        </Stack>
+      </Stack>
+    </>
+  )
+}
+
+export default Dedication

src/pages/aboutUs/OcadoGroup.tsx

@@ -0,0 +1,49 @@
+import { type FC } from "react"
+import { Link } from "codeforlife/components/router"
+import { Typography } from "@mui/material"
+
+import AboutUsOcadoImage from "../../images/about_us_ocado.jpg"
+import Introduction from "../../components/Introduction"
+
+export interface OcadoGroupProps {}
+
+const OcadoGroup: FC<OcadoGroupProps> = () => {
+  return (
+    <Introduction
+      header="Who is Ocado Group?"
+      img={{
+        desc: "Man teaching two children on a laptop",
+        src: AboutUsOcadoImage,
+      }}
+      direction="row-reverse"
+    >
+      <Typography>
+        Ocado Group, the online grocery solutions provider, is powering the
+        future of online retail. Ocado&apos;s tech and solutions are supplied to
+        grocery businesses all around the world. It enables these
+        forward-thinking retailers to do grocery online profitably, sustainably,
+        and in a scalable manner.
+      </Typography>
+      <Typography>
+        Ocado Smart Platform (OSP) is the world&apos;s most advanced end-to-end
+        e-Commerce, fulfilment and logistic platform.
+      </Typography>
+      <Typography mb={0}>
+        <Link
+          to={import.meta.env.VITE_LINK_SKILLS_FOR_THE_FUTURE}
+          target="_blank"
+        >
+          Skills for the Future
+        </Link>{" "}
+        is one of Ocado Group&apos;s core Corporate Responsibility pillars,
+        which is part of the Ocado Unlimited strategy (alongside Natural
+        Resources and Responsible Sourcing). For Ocado Group, Skills for the
+        Future means championing digital literacy. We want to inspire the next
+        generation of STEM leaders, so that everyone can fully participate in
+        society.
+      </Typography>
+    </Introduction>
+  )
+}
+
+export default OcadoGroup

src/pages/aboutUs/Quotes.tsx

@@ -0,0 +1,62 @@
+import { Unstable_Grid2 as Grid, Typography } from "@mui/material"
+import { type FC } from "react"
+
+const Quote: FC<{ children: string }> = ({ children }) => {
+  return (
+    <Typography
+      sx={{
+        color: theme => theme.palette.primary.main,
+        fontSize: "1.3rem !important",
+        fontFamily: "SpaceGrotesk",
+        lineHeight: "1.8rem",
+        fontWeight: "600",
+      }}
+    >
+      “{children}”
+    </Typography>
+  )
+}
+
+export interface QuotesProps {}
+
+const Quotes: FC<QuotesProps> = () => {
+  return (
+    <>
+      <Typography variant="h4" textAlign="center">
+        Code for Life and Ocado Group
+      </Typography>
+      <Grid container spacing={4}>
+        <Grid xs={12} md={6}>
+          <Quote>
+            We were delighted computing entered the UK curriculum in 2014.
+            However, many teachers felt unprepared. And the lack of diversity in
+            people studying STEM concerned us. So, we sought to make the subject
+            appeal to a broader group of both students and teachers.
+          </Quote>
+          <Typography mb={0}>
+            Anne Marie Neatham, Commercial Director and COO Kindred, Ocado
+            Group.
+          </Typography>
+        </Grid>
+        <Grid xs={12} md={6}>
+          <Typography>
+            With that in mind, CFL was developed by volunteers and interns from
+            Ocado Technology - the technology arm of Ocado Group - and teacher
+            Sharon Harrison, who created the Rapid Router learning materials.
+            Anne Marie continues:
+          </Typography>
+          <Quote>
+            I&apos;m proud this initiative has been breaking down stereotypes.
+            Children are seeing that you don&apos;t have to fit a certain
+            gender, race or personality type to get coding.
+          </Quote>
+          <Typography mb={0}>
+            Today, CFL is operated by a small core team and volunteers.
+          </Typography>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default Quotes

src/pages/aboutUs/Statistics.tsx

@@ -0,0 +1,48 @@
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+const Statistic: FC<{
+  number: string
+  description: string
+}> = ({ number, description }) => (
+  <Stack>
+    <Typography
+      variant="h2"
+      sx={{ color: theme => theme.palette.tertiary.main }}
+    >
+      {number}
+    </Typography>
+    <Typography mb={0}>{description}</Typography>
+  </Stack>
+)
+
+export interface StatisticsProps {}
+
+const Statistics: FC<StatisticsProps> = () => {
+  return (
+    <>
+      <Stack textAlign="center">
+        <Typography variant="h4">
+          Code For Life is a non profit initiative that delivers free,
+          open-source games that help all students learn computing.
+        </Typography>
+        <Stack direction={{ xs: "column", md: "row" }} spacing={6} mt={3}>
+          <Statistic
+            number="2014"
+            description="The year that computing was added to the UK curriculum. We've been supporting teachers and students ever since."
+          />
+          <Statistic
+            number=">160"
+            description="Countries are taking part, with the UK, the USA, Brazil, Australia and Canada as top locations for schools signed up to CFL. Nearly 10,000 schools are registered globally."
+          />
+          <Statistic
+            number=">250,000"
+            description="Active users so far, with numbers growing every day. In 2020 alone, close to 100,000 new people subscribed to our resources."
+          />
+        </Stack>
+      </Stack>
+    </>
+  )
+}
+
+export default Statistics