Rebased and updated layout and router

Author: SongmingFan123

app/src/Router.tsx

@@ -8,6 +8,7 @@ import { ReportCreationFlow } from './flows/reportCreationFlow';
 import { SimulationCreationFlow } from './flows/simulationCreationFlow';
 import DashboardPage from './pages/Dashboard.page';
 import DonatePage from './pages/Donate.page';
+import EducationPage from './pages/Education.page';
 import HomePage from './pages/Home.page';
 import PoliciesPage from './pages/Policies.page';
 import PopulationsPage from './pages/Populations.page';
@@ -142,6 +143,10 @@ const router = createBrowserRouter(
               path: 'terms',
               element: <TermsPage />,
             },
+            {
+              path: 'education',
+              element: <EducationPage />,
+            },
             {
               path: 'methodology',
               element: <div>Methodology page</div>,

app/src/pages/Education.page.tsx

@@ -1,84 +1,37 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { Container, Title, Text, List, Anchor, Box, Stack } from "@mantine/core";
-import { colors, spacing, typography } from "@/designTokens";
+import ContentSection from '@/components/shared/static/ContentSection';
+import HeroSection from '@/components/shared/static/HeroSection';
+import RichTextBlock from '@/components/shared/static/RichTextBlock';
+import StaticPageLayout from '@/components/shared/static/StaticPageLayout';
 
-const EducationPage = () => {
-  const location = useLocation();
+export default function EducationPage() {
+  return (
+    <StaticPageLayout title="Educational use">
+      <HeroSection
+        title="Coming soon"
+        description="We're currently developing comprehensive content about how PolicyEngine can be used in educational settings. This page will include:"
+      />
 
-  useEffect(() => {
-    document.title = "Educational use | PolicyEngine";
-    window.scrollTo(0, 0);
-  }, [location]);
+      <ContentSection variant="secondary">
+        <RichTextBlock>
+          <ul>
+            <li>Classroom guides for teaching tax and benefit policies</li>
+            <li>University case studies of PolicyEngine in research and teaching</li>
+            <li>Educational resources for various learning levels</li>
+            <li>Integration with educational curricula</li>
+            <li>Workshop materials and lesson plans</li>
+          </ul>
+        </RichTextBlock>
+      </ContentSection>
 
-  return (
-    <>
-      <Container size="md" py="xl">
-        <Box
-          style={{
-            maxWidth: "800px",
-            margin: "0 auto",
-            textAlign: "center",
-            padding: "3rem 1rem",
-          }}
-        >
-          <Title
-            order={2}
-            ta="center"
-            mb="lg"
-            style={{
-              color: colors.blue[700], 
-              marginBottom: "1.5rem",
-            }}
-          >
-            Coming soon
-          </Title>
-          
-          <Text ta="center" size="lg" mb="lg">
-            We&apos;re currently developing comprehensive content about how
-            PolicyEngine can be used in educational settings. This page will
-            include:
-          </Text>
-          
-          <Box
-            style={{
-              textAlign: "left",
-              display: "inline-block",
-              margin: "1.5rem auto",
-            }}
-          >
-            <List spacing="sm" size="lg">
-              <List.Item style={{ marginBottom: "0.5rem" }}>
-                Classroom guides for teaching tax and benefit policies
-              </List.Item>
-              <List.Item style={{ marginBottom: "0.5rem" }}>
-                University case studies of PolicyEngine in research and teaching
-              </List.Item>
-              <List.Item style={{ marginBottom: "0.5rem" }}>
-                Educational resources for various learning levels
-              </List.Item>
-              <List.Item style={{ marginBottom: "0.5rem" }}>
-                Integration with educational curricula
-              </List.Item>
-              <List.Item style={{ marginBottom: "0.5rem" }}>
-                Workshop materials and lesson plans
-              </List.Item>
-            </List>
-          </Box>
-          
-          <Text ta="center" size="lg">
-            If you&apos;re using PolicyEngine in an educational setting and
-            would like to contribute your story or resources, please contact us
-            at{" "}
-            <Anchor href="mailto:hello@policyengine.org">
-              hello@policyengine.org
-            </Anchor>
-            .
-          </Text>
-        </Box>
-      </Container>
-    </>
+      <ContentSection>
+        <RichTextBlock>
+          <p>
+            If you're using PolicyEngine in an educational setting and would like to contribute your
+            story or resources, please contact us at{' '}
+            <a href="mailto:hello@policyengine.org">hello@policyengine.org</a>.
+          </p>
+        </RichTextBlock>
+      </ContentSection>
+    </StaticPageLayout>
   );
-};
-
-export default EducationPage;
+}