Refactor coding clubs page

src/components/Introduction.tsx

@@ -0,0 +1,40 @@
+import type { FC, ReactNode } from "react"
+import {
+  type GridDirection,
+  Stack,
+  Typography,
+  Unstable_Grid2 as Grid,
+} from "@mui/material"
+import type { ResponsiveStyleValue } from "@mui/system"
+
+import { Image } from "codeforlife/components"
+
+const Introduction: FC<{
+  header: string
+  img: { alt: string; src: string }
+  children: ReactNode
+  direction?: ResponsiveStyleValue<GridDirection>
+}> = ({ header, img, children, direction = "row" }) => {
+  return (
+    <>
+      <Grid
+        container
+        spacing={{ xs: 2, lg: 3 }}
+        display="flex"
+        direction={direction}
+      >
+        <Grid xs={12} md={6}>
+          <Stack sx={{ height: "100%" }}>
+            <Typography variant="h5">{header}</Typography>
+            {children}
+          </Stack>
+        </Grid>
+        <Grid xs={12} md={6} className="flex-center">
+          <Image alt={img.alt} src={img.src} />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default Introduction

src/pages/codingClubs/ClubAim.tsx

@@ -0,0 +1,27 @@
+import { type FC } from "react"
+import { Stack, Typography } from "@mui/material"
+
+const ClubAim: FC = () => {
+  return (
+    <>
+      <Stack>
+        <Typography variant="h4" textAlign="center">
+          Who are the club packs aimed at?
+        </Typography>
+        <Typography>
+          The FREE resource packs are aimed at two different groups, the first
+          is aimed at students ages between 7-11yrs with an interest in learning
+          Python. The second pack is aimed at students 12yrs and up, including
+          adults. This moves at a much faster pace and also introduces students
+          to setting up an environment on their own computer.
+        </Typography>
+        <Typography mb={0}>
+          Both packs are a condensed learning pathway using our game Rapid
+          Router alongside suggested session plan and slides.
+        </Typography>
+      </Stack>
+    </>
+  )
+}
+
+export default ClubAim

src/pages/codingClubs/CodingClubs.tsx

@@ -0,0 +1,101 @@
+import { type FC } from "react"
+import { Typography, useTheme } from "@mui/material"
+import { Download as DownloadIcon } from "@mui/icons-material"
+
+import * as page from "codeforlife/components/page"
+
+import CodeClubHeroImage from "../../images/coding_club_hero_hexagon.png"
+import AboutUsImage from "../../images/about_us.jpg"
+import PythonClubImage from "../../images/coding_club_python_pack.png"
+import Introduction from "../../components/Introduction"
+
+import ClubAim from "./ClubAim"
+import { Link, LinkButton } from "codeforlife/components/router"
+
+export interface CodingClubProps {}
+
+const CodingClubs: FC<CodingClubProps> = () => {
+  const theme = useTheme()
+
+  return (
+    <page.Page>
+      <page.Banner
+        imageProps={{ alt: "codeClubHero", src: CodeClubHeroImage }}
+        header="Coding clubs"
+        subheader="A FREE set of slides and guides to run your own coding clubs"
+      />
+      <page.Section>
+        <ClubAim />
+      </page.Section>
+      <page.Section boxProps={{ bgcolor: theme.palette.info.main }}>
+        <Introduction
+          header="Primary coding club"
+          img={{ alt: "aboutUs", src: AboutUsImage }}
+        >
+          <Typography>
+            Download your FREE coding club pack for students aged 7-11. This
+            pack introduces students to the first principles of Python at a
+            faster pace than the regular lesson plans. It is aimed at students
+            already interested in learning coding and can be used in clubs, at
+            home or in school, on or offline.
+          </Typography>
+          <Typography>
+            View the resources{" "}
+            <Link
+              to="https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary"
+              target="_blank"
+            >
+              online here
+            </Link>
+            .
+          </Typography>
+          {/*TODO: Link to GTM for analytics*/}
+          <LinkButton
+            sx={{ marginTop: "auto" }}
+            to="https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip"
+            target="_blank"
+            endIcon={<DownloadIcon />}
+          >
+            Download the Primary coding club pack
+          </LinkButton>
+        </Introduction>
+      </page.Section>
+      <page.Section>
+        <Introduction
+          header="Python coding club"
+          img={{ alt: "pythonCodingClub", src: PythonClubImage }}
+          direction="row-reverse"
+        >
+          <Typography>
+            Download your FREE coding club pack for students aged 12 and above.
+            This pack is a fast paced introduction to Python. It is aimed at
+            students already interested in learning coding, individuals looking
+            to learn and run their own club, or adults wanting to try coding
+            out. It is designed to be used in face-to-face or online clubs.
+          </Typography>
+          <Typography>
+            View the resources{" "}
+            <Link
+              to="https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club"
+              target="_blank"
+            >
+              online here
+            </Link>
+            .
+          </Typography>
+          {/*TODO: Link to GTM for analytics*/}
+          <LinkButton
+            sx={{ marginTop: "auto" }}
+            to="https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip"
+            target="_blank"
+            endIcon={<DownloadIcon />}
+          >
+            Download the Python coding club pack
+          </LinkButton>
+        </Introduction>
+      </page.Section>
+    </page.Page>
+  )
+}
+
+export default CodingClubs

src/router/routes/general.tsx

@@ -2,7 +2,7 @@ import { Route } from "react-router-dom"
 
 import Home from "../../pages/home/Home"
 // import AboutUs from '../../pages/aboutUs/AboutUs';
-// import CodingClubs from '../../pages/codingClubs/CodingClubs';
+import CodingClubs from "../../pages/codingClubs/CodingClubs"
 // import GetInvolved from '../../pages/getInvolved/GetInvolved';
 // import Contribute from '../../pages/contribute/Contribute';
 // import HomeLearning from '../../pages/homeLearning/HomeLearning';
@@ -18,7 +18,7 @@ const general = (
     {/* <Route path={paths.termsOfUse.tab._} element={<TermsOfUse />} /> */}
     {/* <Route path={paths.homeLearning._} element={<HomeLearning />} /> */}
     {/* <Route path={paths.getInvolved._} element={<GetInvolved />} /> */}
-    {/* <Route path={paths.codingClubs._} element={<CodingClubs />} /> */}
+    <Route path={paths.codingClubs._} element={<CodingClubs />} />
     {/* <Route path={paths.contribute._} element={<Contribute />} /> */}
   </>
 )