chore: heygermany customer project

apps/website/views/[lang]/(main)/about/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { Container, Stack, Title, Text, Grid, ThemeIcon, List, Box } from '@pikku/mantine/core'
+import { useI18n } from "@/context/i18n-provider"
+
+const AboutPage: React.FunctionComponent = () => {
+  const t = useI18n()
+
+  return (
+    <Container size="md" py="xl">
+      <Title order={1} size="h1" mb="xl" ta="center">{t('website.about.title')}</Title>
+
+      <Stack gap="xl">
+        <Text size="lg" c="dimmed">
+          {t('website.about.description')}
+        </Text>
+
+        <Stack gap="md">
+          <Title order={2} size="h2" mt="xl" mb="md">{t('website.about.mission.title')}</Title>
+          <Text c="dimmed">
+            {t('website.about.mission.description')}
+          </Text>
+        </Stack>
+
+        <Stack gap="md">
+          <Title order={2} size="h2" mt="xl" mb="md">{t('website.about.howitworks.title')}</Title>
+          <Grid mt="md">
+            <Grid.Col span={{ base: 12, md: 4 }}>
+              <Stack align="center" ta="center" gap="md">
+                <ThemeIcon size="xl" radius="xl" variant="light" color="blue">
+                  <Text size="xl" fw={700}>{1}</Text>
+                </ThemeIcon>
+                <Title order={3} size="lg" mb="xs">{t('website.about.howitworks.step1.title')}</Title>
+                <Text size="sm" c="dimmed">
+                  {t('website.about.howitworks.step1.description')}
+                </Text>
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={{ base: 12, md: 4 }}>
+              <Stack align="center" ta="center" gap="md">
+                <ThemeIcon size="xl" radius="xl" variant="light" color="blue">
+                  <Text size="xl" fw={700}>{2}</Text>
+                </ThemeIcon>
+                <Title order={3} size="lg" mb="xs">{t('website.about.howitworks.step2.title')}</Title>
+                <Text size="sm" c="dimmed">
+                  {t('website.about.howitworks.step2.description')}
+                </Text>
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={{ base: 12, md: 4 }}>
+              <Stack align="center" ta="center" gap="md">
+                <ThemeIcon size="xl" radius="xl" variant="light" color="blue">
+                  <Text size="xl" fw={700}>{3}</Text>
+                </ThemeIcon>
+                <Title order={3} size="lg" mb="xs">{t('website.about.howitworks.step3.title')}</Title>
+                <Text size="sm" c="dimmed">
+                  {t('website.about.howitworks.step3.description')}
+                </Text>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+
+        <Stack gap="md">
+          <Title order={2} size="h2" mt="xl" mb="md">{t('website.about.whychoose.title')}</Title>
+          <List spacing="xs" c="dimmed">
+            <List.Item>
+              {t('website.about.whychoose.fast.summary')}
+            </List.Item>
+            <List.Item>
+              {t('website.about.whychoose.free.summary')}
+            </List.Item>
+            <List.Item>
+              {t('website.about.whychoose.secure.summary')}
+            </List.Item>
+            <List.Item>
+              {t('website.about.whychoose.support.summary')}
+            </List.Item>
+          </List>
+        </Stack>
+
+        <Box bg="blue.0" p="xl" style={{ borderRadius: 'var(--mantine-radius-lg)' }} mt="xl">
+          <Title order={3} size="xl" mb="md">{t('website.about.cta.title')}</Title>
+          <Text c="dimmed" mb="md">
+            {t('website.about.cta.description')}
+          </Text>
+        </Box>
+      </Stack>
+    </Container>
+  )
+}
+
+export default AboutPage