front-hub/src/pages/Landing/Section5.tsx

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


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

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.purple.main,
            }}
            sx={{
                pt: upMd ? "100px" : "80px",
                pb: upMd ? "100px" : "80px",
            }}
        >
            <Box
                sx={{
                    display: "grid",
                    gridTemplate: upMd ? "auto auto / 1fr 1fr" : "repeat(3, auto) / auto",
                }}
            >
                <Typography variant="h4" sx={{ mb: upMd ? "62px" : "30px" }}>
                    Остались вопросы?
                </Typography>
                <Typography
                    sx={{
                        maxWidth: "79.3%",
                        gridRow: upMd ? "span 2" : "",
                        justifySelf: upMd ? "end" : "start",
                        mb: upMd ? undefined : "50px",
                    }}
                >
                    Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и
                    эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
                </Typography>
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: upMd ? "row" : "column",
                        alignItems: "start",
                        gap: upMd ? "24px" : "20px",
                    }}
                >
                    <Button variant="pena-outlined-dark">Подробнее</Button>
                    <Button variant="pena-contained-light">Подробнее</Button>
                </Box>
            </Box>
        </SectionWrapper>
    );
}