front-hub/src/components/Footer.tsx

import { Box, Button, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
import PenaLogo from "./PenaLogo";
import SectionWrapper from "./SectionWrapper";

export default function Footer() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  return (
    <SectionWrapper
      component="footer"
      maxWidth="lg"
      outerContainerSx={{
        backgroundColor: theme.palette.bg.dark,
      }}
      sx={{
        pt: upMd ? "100px" : "80px",
        pb: upMd ? "75px" : "24px",
        px: upMd ? "40px" : "20px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: upMd ? "90px" : undefined,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: upMd ? "row" : "column",
        }}
      >
        <Box
          sx={{
            flexBasis: upMd ? "98px" : "98px",
          }}
        >
          <PenaLogo width={124} color="white" />
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: upMd ? "row" : "column",
            flexWrap: "wrap",
            flexGrow: 1,
            flexShrink: 1,
            flexBasis: upMd ? "600px" : undefined,
            alignItems: upMd ? undefined : "start",
            mb: upMd ? undefined : "30px",
            mx: upMd ? "70px" : undefined,
            gap: upMd ? undefined : "18px",
            "& > *": {
              width: upMd ? "33%" : undefined,
            },
          }}
        >
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
          <Button variant="pena-navitem-dark">Меню 1</Button>
        </Box>
        <Typography
          variant="body2"
          sx={{
            flexBasis: upMd ? "300px" : undefined,
            pr: "5%",
            mb: upMd ? undefined : "36px",
          }}
        >
          Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрач
        </Typography>
      </Box>
      {!upMd && <Divider sx={{ width: "100%", bgcolor: "white", borderColor: "#00000000" }} />}
      <Typography
        variant="body2"
        sx={{
          mt: "25px",
        }}
      >
        Конструктор маркетинговых решений. © 2022
      </Typography>
    </SectionWrapper>
  );
}