Лендинг

src/components/FeaturesGrid/FeaturesGrid.tsx

@@ -0,0 +1,97 @@
+import { IconGauge, IconLock, IconMessage2, IconServer, IconUser, IconUsersGroup } from '@tabler/icons-react';
+import { Container, Flex, SimpleGrid, Text, ThemeIcon, Title } from '@mantine/core';
+import classes from './FeaturesGrid.module.css';
+import { RosettaLogo } from '../RosettaLogo/RosettaLogo';
+
+export 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: React.FC<any>;
+    title: React.ReactNode;
+    description: React.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>
+    );
+}