import { Container, Group, Text } from '@mantine/core';
import classes from './HeroTitle.module.css';
import { Download } from '../Download/Download';

export function HeroTitle() {
    return (
        <div className={classes.wrapper}>
            <Container className={classes.inner}>
                <h1 className={classes.title}>
                    Rosetta is{' '}
                    <Text component="span" variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} inherit>
                        secure
                    </Text>{' '}
                    messaging for everyone
                </h1>

                <Text className={classes.description} c="dimmed">
                    Rosetta is designed to ensure secure messaging. We use comprehensive encryption, which keeps the app fast and convenient, yet secure.
                </Text>

                <Group className={classes.controls}>
                    <Download href="#kernels"></Download>
                </Group>
            </Container>
        </div>
    );
}