Add 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,26 @@
+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,79 @@
+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.jpg"
+import AboutUsCFLImage 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"
+
+const CodingClubs: FC = () => {
+  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: 'aboutUsCFL', src: AboutUsCFLImage }}
+        >
+          <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 />} /> */}
   </>
 )