frontPanel/src/pages/Landing/WhatTheySay.tsx

import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import Button from "@mui/material/Button";
import SectionStyled from './SectionStyled';
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
// import Quotes from './image/quotes.svg';
import {styled} from "@mui/material/styles";
import TitleIcon from "../../assets/LandingPict/titleIcon";

const BoxCard = styled('div')(({ theme }) => ({
    [theme.breakpoints.down('md')]: {
        justifyContent: 'center',
        width: '100%',
    },
}));

const BoxText = styled('div')(({ theme }) => ({
    [theme.breakpoints.down('md')]: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '100%',
    },
}));

const BoxButtons = styled('div')(({ theme }) => ({
    [theme.breakpoints.down('md')]: {
        justifyContent: 'space-evenly',
        width: '100%',
        marginTop: '20px',
    },
}));

export default function Component () {
    return(
        <SectionStyled tag={'section'} bg={'#ffffff'} mwidth={'1160px'}
                       sxsect={{minHeight: '708px'}}
                       sxcont={{
                           display: 'flex',
                           flexDirection: 'column',
                           justifyContent: 'space-around',
                           height: '100%',
                           padding: '77px 10px 50px 10px',
                       }}
        >
            <Box
                sx={{
                    display:  'flex',
                    flexWrap: 'wrap',
                    width: '100%',
                }}
            >
                <BoxText
                    sx={{
                        width: '50%',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: "10px"
                    }}
                >
                    <Typography variant='h6' fontSize={'36px'}>Что говорят</Typography>
                    <Typography maxWidth={'310px'} fontSize={'18px'}>Более 80 000 предпринимателей, маркетологов и команд с нами</Typography>
                </BoxText>
                <BoxButtons
                    sx={{
                        width: '50%',
                        display: 'flex',
                        justifyContent: 'end',
                    }}
                >
                    <Button variant='contained'
                            sx={{
                                height: '44px',
                                width: '44px',
                                borderRadius: '50%',
                                minWidth: '44px',
                                marginRight: '10px',
                            }}
                    ><ArrowBackIcon/></Button>
                    <Button variant='contained'
                            sx={{
                                height: '44px',
                                width: '44px',
                                borderRadius: '50%',
                                minWidth: '44px',
                            }}
                    ><ArrowForwardIcon/></Button>
                </BoxButtons>
            </Box>
            <BoxCard
                sx={{
                    minHeight: '400px',
                    display: 'flex',
                    flexWrap: 'wrap',
                    justifyContent: 'space-between',
                    padding: '0 37px 0 18px',
                    marginTop: '80px',
                }}
            >
                <Box width={'305px'} height={"383px"}>
                    <TitleIcon/>
                    <Typography marginTop={'20px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Пожалуй самый комфортный и удобный.</Typography>
                    <Typography fontSize={'14px'} lineHeight={'16.59px'}
                    >
                        Пользуюсь марквизом более 2 лет в разных направлениях.
                        Тестировал моклиентс и енвибокс.
                        Но на этапе тестирования примуществом овладел марквиз.
                        Удобное расположение кнопок, класный редактор, интуитивно понятный интерфейс.
                        Море удобных функций, до которых схожим сервисам еще расти и расти! А главное, это супер тех.
                        поддержка!!! Отвечают в течении минуты, решают любой вопрос очень быстро и как никто лояльны.
                        Всем рекомендую!!!
                    </Typography>
                    <Typography marginTop={'30px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Полина К.</Typography>
                    <Typography marginTop={'8px'} color={'#4d4d4d'} fontSize={'14px'}>03.06.2022</Typography>
                </Box>
                <Box width={'321px'} height={"383px"}>
                    <TitleIcon/>
                    <Typography marginTop={'20px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Marquiz – отличный инструмент для привлечения реальных клиентов</Typography>
                    <Typography fontSize={'14px'} lineHeight={'16.59px'}>
                        До Marquiz использовал другой онлайн-конструктор,
                        в сравнении с которым Marquiz набирает 100 баллов из 100!
                        Нравится тут расположение кнопок, простой интерфейс, широкие возможности кастомизации,
                        отзывчивость техподдержки. И самое главное, что работает все четко и без сбоев!
                        С задачей своей сервис справляется на ура - позволяет найти потенциального клиента и превратить
                        его в покупателя!</Typography>
                    <Typography marginTop={'48px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Полина К.</Typography>
                    <Typography marginTop={'8px'} color={'#4d4d4d'} fontSize={'14px'}>03.06.2022</Typography>
                </Box>
                <Box width={'305px'} height={"383px"}>
                    <TitleIcon/>
                    <Typography marginTop={'20px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Пожалуй самый комфортный и удобный.</Typography>
                    <Typography fontSize={'14px'} lineHeight={'16.59px'}>
                        Пользуюсь марквизом более 2 лет в разных направлениях.
                        Тестировал моклиентс и енвибокс.
                        Но на этапе тестирования примуществом овладел марквиз.
                        Удобное расположение кнопок, класный редактор, интуитивно понятный интерфейс.
                        Море удобных функций, до которых схожим сервисам еще расти и расти! А главное, это супер тех.
                        поддержка!!! Отвечают в течении минуты, решают любой вопрос очень быстро и как никто лояльны.
                        Всем рекомендую!!!
                    </Typography>
                    <Typography marginTop={'30px'} fontSize={'14px'} lineHeight={'16.59px'} fontWeight={'600'}>Полина К.</Typography>
                    <Typography marginTop={'8px'} color={'#4d4d4d'} fontSize={'14px'}>03.06.2022</Typography>
                </Box>
            </BoxCard>
        </SectionStyled>
    )
}