94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
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
|