From 0317f09a2ac004ed921457f992fd02dac14a25d2 Mon Sep 17 00:00:00 2001
From: Henri Remonen <henri@remonen.fi>
Date: Fri, 12 Apr 2024 09:16:09 +0300
Subject: [PATCH] feat: add about page contents and styles

---
 src/client/pages/About/About.tsx | 85 ++++++++++++++++++++++++++++----
 src/client/theme.ts              |  6 ++-
 2 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/src/client/pages/About/About.tsx b/src/client/pages/About/About.tsx
index 9f026c8d..978edc7f 100644
--- a/src/client/pages/About/About.tsx
+++ b/src/client/pages/About/About.tsx
@@ -1,11 +1,78 @@
-const About = () => (
-  <div>
-    <h1>About</h1>
-    <p>
-      This is a simple example of a React application with server-side
-      rendering.
-    </p>
-  </div>
-)
+import { useTranslation } from 'react-i18next'
+import { Box, Typography } from '@mui/material'
+
+import SectionHeading from '../../components/Common/SectionHeading'
+
+const About = () => {
+  const { t } = useTranslation()
+
+  const styles = {
+    section: {
+      my: { xs: 8, md: 24 },
+    },
+    sectionHeading: {
+      fontFamily: 'Georgia',
+      fontSize: { xs: '1.5rem', md: '2rem', lg: '2.5rem' },
+      letterSpacing: '-0.02rem',
+      fontWeight: 400,
+      mt: 2,
+    },
+  }
+
+  return (
+    <Box
+      component='section'
+      sx={{ maxWidth: '1024px', m: { xs: 1, sm: 2, md: 8, lg: 12 } }}
+    >
+      <Box
+        component='section'
+        sx={{
+          my: 8,
+          display: { md: 'flex' },
+          alignItems: 'center',
+          gap: { md: 8, lg: 24 },
+        }}
+      >
+        <SectionHeading
+          level='h1'
+          sx={{ fontSize: { xs: '28pt', sm: '32pt', md: '38pt', lg: '48pt' } }}
+        >
+          {t('about:mainHeading')}
+        </SectionHeading>
+        <Typography variant='body1'>{t('about:mainContent')}</Typography>
+      </Box>
+
+      <Box
+        component='section'
+        sx={{ borderTop: '1px solid', ...styles.section }}
+      >
+        <SectionHeading level='h2' sx={styles.sectionHeading}>
+          {t('about:journeyHeading')}
+        </SectionHeading>
+        <Typography variant='body1' color='text.secondary'>
+          {t('about:journeyContent')}
+        </Typography>
+      </Box>
+
+      <Box component='section' sx={styles.section}>
+        <SectionHeading level='h2' sx={styles.sectionHeading}>
+          {t('about:visionHeading')}
+        </SectionHeading>
+        <Typography variant='body1' color='text.secondary'>
+          {t('about:visionContent')}
+        </Typography>
+      </Box>
+
+      <Box component='section' sx={styles.section}>
+        <SectionHeading level='h2' sx={styles.sectionHeading}>
+          {t('about:futureHeading')}
+        </SectionHeading>
+        <Typography variant='body1' color='text.secondary'>
+          {t('about:futureContent')}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
 
 export default About
diff --git a/src/client/theme.ts b/src/client/theme.ts
index b417f11d..448c7432 100644
--- a/src/client/theme.ts
+++ b/src/client/theme.ts
@@ -28,10 +28,12 @@ declare module '@mui/material/styles' {
 const themeOptions: ThemeOptions = {
   typography: {
     fontFamily: [
-      '"Open Sans"',
-      '"Helvetica"',
+      '"Inter"',
+      '"Helvetica Neue"',
+      '"Roboto"',
       '"Arial"',
       '"sans-serif"',
+      '"Georgia"',
       '"Apple Color Emoji"',
       '"Segoe UI Emoji"',
       '"Segoe UI Symbol"',