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",
                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>
    );
};