forked from Rosetta/landing
99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
import { IconGauge, IconLock, IconMessage2, IconServer, IconUser, IconUsersGroup, type TablerIcon } from '@tabler/icons-react';
|
||
import { Container, Flex, SimpleGrid, Text, ThemeIcon, Title } from '@mantine/core';
|
||
import type { ReactNode } from 'react';
|
||
import classes from './FeaturesGrid.module.css';
|
||
import { RosettaLogo } from '../RosettaLogo/RosettaLogo';
|
||
|
||
const MOCKDATA = [
|
||
{
|
||
icon: IconGauge,
|
||
title: 'Performance',
|
||
description:
|
||
'Despite encryption, the messenger remains fast and convenient.',
|
||
},
|
||
{
|
||
icon: IconUser,
|
||
title: 'Privacy focused',
|
||
description:
|
||
'We encrypt everything, even media files, so that no one can access your files.',
|
||
},
|
||
{
|
||
icon: IconServer,
|
||
title: 'Server does not save messages',
|
||
description:
|
||
'The server does not store messages. All messages are stored only on your devices.',
|
||
},
|
||
{
|
||
icon: IconLock,
|
||
title: 'Secure by default',
|
||
description:
|
||
'The messenger uses asymmetric encryption to hide message keys. ChaCha20 is used for message encryption, and AES-256 is used for encrypting your media files.',
|
||
},
|
||
{
|
||
icon: IconMessage2,
|
||
title: 'Regular Updates',
|
||
description:
|
||
'We strive to update the messenger as often as possible to fix bugs and add new features. This is not an abandoned project.',
|
||
},
|
||
{
|
||
icon: IconUsersGroup,
|
||
title: 'No trackers or ads',
|
||
description:
|
||
'Registration without phone number, email, or other personal data. Only public or private keys. We do not use trackers and do not show ads.',
|
||
}
|
||
];
|
||
|
||
interface FeatureProps {
|
||
icon: TablerIcon;
|
||
title: ReactNode;
|
||
description: ReactNode;
|
||
}
|
||
|
||
export function Feature({ icon: Icon, title, description }: FeatureProps) {
|
||
return (
|
||
<div>
|
||
<ThemeIcon variant="light" size={40} radius={40}>
|
||
<Icon size={18} stroke={1.5} />
|
||
</ThemeIcon>
|
||
<Text mt="sm" mb={7}>
|
||
{title}
|
||
</Text>
|
||
<Text size="sm" c="dimmed" lh={1.6}>
|
||
{description}
|
||
</Text>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function FeaturesGrid() {
|
||
const features = MOCKDATA.map((feature, index) => <Feature {...feature} key={index} />);
|
||
|
||
return (
|
||
<div className={classes.wrapper}>
|
||
<Container>
|
||
<Flex justify={'center'} mb={'lg'} align={'center'}>
|
||
<RosettaLogo size={50}></RosettaLogo>
|
||
</Flex>
|
||
<Title ta="center" className={classes.title}>
|
||
Here’s what we offer
|
||
</Title>
|
||
|
||
<Container size={560} p={0}>
|
||
<Text size="sm" className={classes.description}>
|
||
Rosetta offers a wide range of features that ensure security, privacy, and ease of use. Explore the key features that make Rosetta an excellent choice for messaging.
|
||
</Text>
|
||
</Container>
|
||
|
||
<SimpleGrid
|
||
mt={60}
|
||
cols={{ base: 1, sm: 2, md: 3 }}
|
||
spacing={{ base: 'xl', md: 50 }}
|
||
verticalSpacing={{ base: 'xl', md: 50 }}
|
||
>
|
||
{features}
|
||
</SimpleGrid>
|
||
</Container>
|
||
</div>
|
||
);
|
||
}
|