From 0fa5414f6326d1a4715ac98affc4e7b12b2ade18 Mon Sep 17 00:00:00 2001
From: SKairinos <stefan.kairinos@ocado.com>
Date: Tue, 9 Jul 2024 14:51:12 +0000
Subject: [PATCH] coding clubs section

---
 src/pages/home/CodingClubs.tsx | 31 ++++++++++++++++
 src/pages/home/Quotes.tsx      | 66 +++++++++++++++++-----------------
 2 files changed, 63 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/home/CodingClubs.tsx

diff --git a/src/pages/home/CodingClubs.tsx b/src/pages/home/CodingClubs.tsx
new file mode 100644
index 0000000..5d9dd0b
--- /dev/null
+++ b/src/pages/home/CodingClubs.tsx
@@ -0,0 +1,31 @@
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+import { LinkButton } from "codeforlife/components/router"
+
+import { paths } from "../../router"
+
+export interface CodingClubsProps {}
+
+const CodingClubs: FC<CodingClubsProps> = () => (
+  <Stack>
+    <Typography variant="h3" textAlign="center">
+      Want to run a Code for Life coding club?
+    </Typography>
+    <Typography>
+      Take a look at our two club packs that we have put together using our
+      Rapid Router resources. These are fast-paced, session based clubs that can
+      be run by anyone keen to help people learn to code. There are guides and
+      resource links with printable cerificates for those that complete the
+      course.
+    </Typography>
+    <Stack direction="row" justifyContent="end">
+      <LinkButton to={paths.codingClubs._} endIcon={<ChevronRightIcon />}>
+        Find out more
+      </LinkButton>
+    </Stack>
+  </Stack>
+)
+
+export default CodingClubs
diff --git a/src/pages/home/Quotes.tsx b/src/pages/home/Quotes.tsx
index bc1df78..16728a2 100644
--- a/src/pages/home/Quotes.tsx
+++ b/src/pages/home/Quotes.tsx
@@ -40,40 +40,38 @@ const Column: FC<{
 
 export interface QuotesProps {}
 
-const Quotes: FC<QuotesProps> = () => {
-  return (
-    <Grid container columnSpacing={4}>
-      <Grid xs={12}>
-        <Typography variant="h3" textAlign="center">
-          Why you&apos;ll love Code for Life
-        </Typography>
-      </Grid>
-      <Grid xs={12}>
-        <Typography textAlign="center">
-          Don&apos;t just take our word for it, here are some lovely quotes from
-          our fabulous teacher friends.
-          <br />
-          Interested in getting involved?&nbsp;
-          <Link to={paths.getInvolved._}>Get in touch</Link>.
-        </Typography>
-      </Grid>
-      <Column
-        img={{ alt: "Reuben", src: ReubenPhoto }}
-        quote="My year 10's have been using Rapid Router to develop their Python skills and it has been a great transition into the Python IDE."
-        person={{ name: "Reuben", title: "Computer Science teacher" }}
-      />
-      <Column
-        img={{ alt: "Sian", src: SianPhoto }}
-        quote="I like the slow build of layers of block coding that allows students to work at their own pace and fully embed their understanding of the different blocks."
-        person={{ name: "Sian", title: "Head of ICT" }}
-      />
-      <Column
-        img={{ alt: "Rob", src: RobPhoto }}
-        quote="You can hit all of the computing curriculum, in a structured way. It is perfect for teachers who are struggling."
-        person={{ name: "Rob", title: "ICT teacher" }}
-      />
+const Quotes: FC<QuotesProps> = () => (
+  <Grid container columnSpacing={4}>
+    <Grid xs={12}>
+      <Typography variant="h3" textAlign="center">
+        Why you&apos;ll love Code for Life
+      </Typography>
+    </Grid>
+    <Grid xs={12}>
+      <Typography textAlign="center">
+        Don&apos;t just take our word for it, here are some lovely quotes from
+        our fabulous teacher friends.
+        <br />
+        Interested in getting involved?&nbsp;
+        <Link to={paths.getInvolved._}>Get in touch</Link>.
+      </Typography>
     </Grid>
-  )
-}
+    <Column
+      img={{ alt: "Reuben", src: ReubenPhoto }}
+      quote="My year 10's have been using Rapid Router to develop their Python skills and it has been a great transition into the Python IDE."
+      person={{ name: "Reuben", title: "Computer Science teacher" }}
+    />
+    <Column
+      img={{ alt: "Sian", src: SianPhoto }}
+      quote="I like the slow build of layers of block coding that allows students to work at their own pace and fully embed their understanding of the different blocks."
+      person={{ name: "Sian", title: "Head of ICT" }}
+    />
+    <Column
+      img={{ alt: "Rob", src: RobPhoto }}
+      quote="You can hit all of the computing curriculum, in a structured way. It is perfect for teachers who are struggling."
+      person={{ name: "Rob", title: "ICT teacher" }}
+    />
+  </Grid>
+)
 
 export default Quotes