feat: add keystage keypad to homepage

src/pages/beta/teachers.tsx

@@ -1,5 +1,6 @@
 import { GetStaticProps, GetStaticPropsResult, NextPage } from "next";
 
+import keyStageKeypad from "../../browser-lib/fixtures/keyStagesKeypad";
 import AppLayout from "../../components/AppLayout";
 import { DEFAULT_SEO_PROPS } from "../../browser-lib/seo/Seo";
 import { Heading } from "../../components/Typography";
@@ -14,6 +15,8 @@ import Flex from "../../components/Flex";
 import MaxWidth from "../../components/MaxWidth/MaxWidth";
 import { HomeSiteCards, SharedHomeContent } from "../../components/pages/Home";
 import useBlogList from "../../components/Blog/BlogList/useBlogList";
+import KeyStageKeypad from "../../components/KeyStageKeypad";
+import Grid, { GridArea } from "../../components/Grid";
 
 const Teachers: NextPage<HomePageProps> = (props) => {
   const posts = props.posts.map(postToBlogListItem);
@@ -26,12 +29,19 @@ const Teachers: NextPage<HomePageProps> = (props) => {
           <Heading
             $font={["heading-5", "heading-4"]}
             tag={"h1"}
-            $mb={24}
             $mt={120}
             $color={"black"}
           >
             Your foundation for great lessons
           </Heading>
+          <Heading $font={"heading-light-6"} tag={"h2"} $mt={8}>
+            Find inspiration. Get support. Go teach.
+          </Heading>
+          <Grid $mt={48}>
+            <GridArea $colSpan={[12, 6, 4]}>
+              <KeyStageKeypad keyStages={keyStageKeypad.keyStages} />
+            </GridArea>
+          </Grid>
           <HomeSiteCards />
         </MaxWidth>
       </Flex>