adminFront/src/Components/Sections/index.tsx

import * as React from "react";
import { Box, Typography, Button } from "@mui/material";
import theme from "../../theme";
import Logo from "../Logo";


const Authorization: React.FC = () =>  {
  return (
    <React.Fragment>
      <Logo />

      <Box sx={{
        width: "100%",
        height: "100px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <Box>
          <Typography variant="h6">
            Все пользователи
          </Typography>
        </Box>

        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.primary.light,
            width: "100%",
            height: "62px",
            "&:hover": {
              backgroundColor: theme.palette.primary.dark
            }
          }}>
            ВОЙТИ
        </Button>
      </Box>

      <Box sx={{
        width: "100%",
        height: "100px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <Box>
          <Typography variant="h6">
            Общая статистика
          </Typography>
        </Box>

        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.primary.light,
            width: "100%",
            height: "62px",
            "&:hover": {
              backgroundColor: theme.palette.primary.dark
            }
          }}>
            ВОЙТИ
        </Button>
      </Box>

      <Box sx={{
        width: "100%",
        height: "100px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <Box>
          <Typography variant="h6">
            Шаблонизатор документов
          </Typography>
        </Box>

        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.primary.light,
            width: "100%",
            height: "62px",
            "&:hover": {
              backgroundColor: theme.palette.primary.dark
            }
          }}>
            ВОЙТИ
        </Button>
      </Box>

      <Box sx={{
        width: "100%",
        height: "100px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <Box>
          <Typography variant="h6">
            Конструктор опросов
          </Typography>
        </Box>

        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.primary.light,
            width: "100%",
            height: "62px",
            "&:hover": {
              backgroundColor: theme.palette.primary.dark
            }
          }}>
            ВОЙТИ
        </Button>
      </Box>

      <Box sx={{
        width: "100%",
        height: "100px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "center"
      }}>
        <Box>
          <Typography variant="h6">
            Сокращатель ссылок
          </Typography>
        </Box>

        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.primary.light,
            width: "100%",
            height: "62px",
            "&:hover": {
              backgroundColor: theme.palette.primary.dark
            }
          }}>
            ВОЙТИ
        </Button>
      </Box>
    </React.Fragment>
  );
}


export default Authorization;