import { Title, Button, Group } from "@mantine/core";
import Background from "Components/StripedBg/Background";
import "./MainPage.css";
import { Helmet } from "react-helmet";
import ButtonWithText from "Components/CardWithButton/CardWithButton";
import { Link } from "react-router";
import { routes } from "Routes/Routes";
function MainPage() {
  return (
    <div>
      <Helmet>
        <title>Landing Page | QMolSim</title>
        <meta
          name="description"
          content="Description of the main functionaity of the QMolSim service"
        />
      </Helmet>

      <div className="background_holder">
        <Background />
      </div>

      <div className="slogan">
        <Title size={50} textWrap="balance">
          Quantum Chemistry Made easy
        </Title>
      </div>

      <Group className="tiles" justify="space-evenly">
        <ButtonWithText
          title="Работа с молекулами"
          text="Вводите информацию о молекулах любым удобным способом. Визуализируйте и
        редактируйте молекулы в простом интерфейсе."
          buttonText="Начать Эксперимент"
          link={routes.ExperimentsPage.path}
        />
        <ButtonWithText
          title="Параллельные вычисления"
          text="Запускайте квантовые вычисления сразу на нескольких машинах.
            Упарвляйте и следите за машинами в одном месте."
          buttonText="Подключить Машину"
          link={routes.MachinesPage.path}
        />
        <ButtonWithText
          title="Работа в команде"
          text="Создавайте команы с другими людьми и настраивайте доступ ко всем
            аспектам работы"
          buttonText="Создать Команду"
          link={routes.TeamsPage.path}
        />
      </Group>
      <Link className="invisible_link" to={routes.DocumentationPage.path}>
        <div id="documentationButton">
          <Button variant="subtle" color="secondaryContrast">
            &nbsp;Документация&nbsp;
          </Button>
        </div>
      </Link>
    </div>
  );
}

export default MainPage;