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