frontPanel/src/pages/Landing/WhatTheFeatures.tsx

import React, {useState} from 'react';
import Box from '@mui/material/Box';
import {Typography, useMediaQuery, useTheme} from "@mui/material";
import SectionStyled from './SectionStyled';
import Button from "@mui/material/Button";
// import Desktop from '../../assets/LandingPict/Desktop.png';
import Desktop1 from './images/Frame 1171274552.png';
import Desktop2 from './images/Frame 1171274552-1.png';
import Desktop3 from './images/Frame 1171274552-2.png';
import Desktop4 from './images/Frame 1171274552-3.png';
import Desktop5 from './images/Frame 1171274552-4.png';
import Desktop6 from './images/Frame 1171274552-5.png';
import Desktop7 from './images/Frame 1171274552-6.png';
import {styled} from "@mui/material/styles";
//
// const BoxCard = styled('div')(({ theme }) => ({
//     [theme.breakpoints.down('xl')]: {
//         alignItems: 'center',
//         width: '100%',
//     },
// }));
interface Props {
    children: React.ReactNode;
    image: string;
}

function BoxFich(props: Props) {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    const isTabletOnly = useMediaQuery(theme.breakpoints.between(600, 1000))
    return(
        <Box
            sx={{
                maxWidth: isTabletOnly ? '801px' : '500px',
                minHeight: '350px',
                backgroundColor: '#252734',
                borderRadius: '12px',
                overflow: 'hidden',
                display: "flex",
                flexDirection: "column",
                justifyContent: isMobile ? "space-between" : undefined,
                height: isMobile ? "450px" : undefined
            }}
        >
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    width: '100%',
                    minHeight: '50%',
                    padding: '20px',
                    flexWrap: 'wrap',
                    boxSizing: "border-box",
                    flexDirection: isTabletOnly ? "column" : "row",
                    gap: isMobile ? "16px" : undefined
                }}
            >
                {props.children}
            </Box>
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'end',
                    alignItems: 'end',
                }}
            >
                <img src={props.image} width={'96%'}/>
            </Box>
        </Box>
    )
}

export default function Component () {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    const isTablet = useMediaQuery(theme.breakpoints.down(1000))
    const isTabletOnly = useMediaQuery(theme.breakpoints.between(600, 1000))
    const [open, setOpen] = useState(true);

    return (
        <SectionStyled tag={'section'} bg={'#333647'} mwidth={'1160px'}
                       sxsect={{minHeight: '2074px',}}
                       sxcont={{
                           display: 'flex',
                           justifyContent: 'space-between',
                           minHeight: '2074px',
                           padding: isMobile ? "20px 16px 40px 16px" : isTablet ? "30px 40px" : "30px 0",
                           color: '#ffffff',
                           flexWrap: "wrap"
                       }}
        >
            {/*левая колонка*/}
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: isMobile ? "25px" : "120px",
                    paddingTop: "46px"
                }}
            >
                <Box
                    sx={{
                        maxWidth: '400px',
                        minHeight: '84px',
                        marginBottom: isMobile ? 0 : "-55px"
                    }}>
                    <Typography variant='h1'
                                sx={{
                                    fontSize:'36px',
                                    fontWeight:'500',
                                    lineHeight:'43px',
                                }}
                    >
                        Что по фичам?
                    </Typography>
                    <Typography
                        sx={{
                            fontSize:'18px',
                            fontWeight: '400',
                            lineHeight: '21px',
                            margin: '20px 0 10px 0',
                        }}
                    >
                        Самый функциональный конструктор квизов
                    </Typography>
                </Box>
                <BoxFich image={Desktop1}>
                    <Box sx={{maxWidth: isTabletOnly ? '244px' : '174px'}}>
                        <Typography
                            sx={{
                                color: '#7e2aea',
                                fontSize: '24px',
                                fontWeight: '500',
                                lineHeight: '28.44px'
                            }}
                        >
                            01
                        </Typography>
                        <Typography variant={'h6'}
                                    sx={{
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}
                        >Привязка к вашему домену</Typography>
                    </Box>
                    <Box sx={{maxWidth: isTabletOnly ? '300px' : '230px'}}>
                        <Typography
                            sx={{
                                fontSize: '18px',
                                fontWeight: '400',
                                lineHeight: '21px',
                            }}
                        >
                            Привяжите квиз к своему брендовому домену и получайте
                            максимальную отдачу от каждой заявки
                        </Typography>
                    </Box>
                </BoxFich>
                <BoxFich image={Desktop2}>
                    <Box maxWidth={'227px'}>
                        <Typography
                            sx={{
                                color: '#7e2aea',
                                fontSize: '24px',
                                fontWeight: '500',
                                lineHeight: '28.44px'
                            }}
                        >03</Typography>
                        <Typography variant={'h6'}
                                    sx={{
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}
                        >Аналитика</Typography>
                    </Box>
                    <Box maxWidth={'230px'}>
                        <Typography
                            sx={{
                                fontSize: '18px',
                                fontWeight: '400',
                                lineHeight: '21px',
                            }}
                        >
                            Внутренняя аналитика считает конверсию квиза на каждом шаге,
                            показывает развернутую статистику по ответам и пользователям
                        </Typography>
                    </Box>
                </BoxFich>
                <BoxFich image={Desktop3}>
                    <Box maxWidth={'227px'}>
                        <Typography
                            sx={{
                                color: '#7e2aea',
                                fontSize: '24px',
                                fontWeight: '500',
                                lineHeight: '28.44px'
                            }}
                        >05</Typography>
                        <Typography variant={'h6'}
                                    sx={{
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}
                        >Режим анкетирования</Typography>
                    </Box>
                    <Box maxWidth={'230px'}>
                        <Typography
                            sx={{
                                fontSize: '18px',
                                fontWeight: '400',
                                lineHeight: '21px',
                            }}
                        >
                            Самый удобный инструмент для проведения исследований аудитории ,
                            больше вас не сдерживают никакие ограничения.
                        </Typography>
                    </Box>
                </BoxFich>
                <BoxFich image={Desktop4}>
                    <Box maxWidth={'226px'}>
                        <Typography
                            sx={{
                                color: '#7e2aea',
                                fontSize: '24px',
                                fontWeight: '500',
                                lineHeight: '28.44px'
                            }}
                        >07</Typography>
                        <Typography variant={'h6'}
                                    sx={{
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}
                        >Интерактивные тесты</Typography>
                    </Box>
                    <Box maxWidth={'234px'}>
                        <Typography
                            sx={{
                                fontSize: '18px',
                                fontWeight: '400',
                                lineHeight: '21px',
                            }}
                        >
                            Тест увеличит вовлеченность аудитории, покажет правильные
                            или неправильные ответы и все это в игровой форме
                        </Typography>
                    </Box>
                </BoxFich>
            </Box>
            {/*правая колонка*/}

                <Box>
                    <Box
                        sx={{
                            display: open ? 'flex' : "none",
                            flexDirection: 'column',
                            paddingTop: isMobile ? "25px" : "106px",
                            gap: isMobile ? "25px" : "113px",
                            alignItems: "end"
                        }}
                    >
                        <BoxFich image={Desktop5}>
                            <Box maxWidth={'227px'}>
                                <Typography
                                    sx={{
                                        color: '#7e2aea',
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}
                                >02</Typography>
                                <Typography variant={'h6'}
                                            sx={{
                                                fontSize: '24px',
                                                fontWeight: '500',
                                                lineHeight: '28.44px'
                                            }}
                                >Повышение конверсии</Typography>
                            </Box>
                            <Box maxWidth={'233px'}>
                                <Typography
                                    sx={{
                                        fontSize: '18px',
                                        fontWeight: '400',
                                        lineHeight: '21px',
                                    }}
                                >
                                    Конверсию можно увеличить, добавив тающую скидку,
                                    консультанта с подсказками или бонус, который пользователь получит в конце квиза
                                </Typography>
                            </Box>
                        </BoxFich>
                        <BoxFich image={Desktop6}>
                            <Box maxWidth={'227px'}>
                                <Typography
                                    sx={{
                                        color: '#7e2aea',
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}>04</Typography>
                                <Typography variant={'h6'}
                                            sx={{
                                                fontSize: '24px',
                                                fontWeight: '500',
                                                lineHeight: '28.44px'
                                            }}
                                >Расширенеие настройки дизайна</Typography>
                            </Box>
                            <Box maxWidth={'230px'}>
                                <Typography
                                    sx={{
                                        fontSize: '18px',
                                        fontWeight: '400',
                                        lineHeight: '21px',
                                    }}
                                >
                                    Настройте цвета, шрифт и выберите формат стартовой страницы,
                                    чтобы сделать свой квиз уникальным
                                </Typography>
                            </Box>
                        </BoxFich>
                        <BoxFich image={Desktop7}>
                            <Box maxWidth={'220px'}>
                                <Typography
                                    sx={{
                                        color: '#7e2aea',
                                        fontSize: '24px',
                                        fontWeight: '500',
                                        lineHeight: '28.44px'
                                    }}
                                >06</Typography>
                                <Typography variant={'h6'}
                                            sx={{
                                                fontSize: '24px',
                                                fontWeight: '500',
                                                lineHeight: '28.44px'
                                            }}
                                >А/Б тестирование</Typography>
                            </Box>
                            <Box maxWidth={'230px'}>
                                <Typography
                                    sx={{
                                        fontSize: '18px',
                                        fontWeight: '400',
                                        lineHeight: '21px',
                                    }}
                                >
                                    Без программистов и сложных настроек - создавайте разные версии квизов
                                    и сравнивайте их эффективность прямо внутри Опросника
                                </Typography>
                            </Box>
                        </BoxFich>
                </Box>
                <Box
                    sx={{
                        maxWidth: '500px',
                        minHeight: '390px',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'flex-start',
                        padding: isMobile ? "40px 0 0 0" : '217px 22px 0 20px',
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: isMobile ? "column-reverse" : "column",
                            gap: "47px",
                            alignItems: "flex-start",
                        }}
                    >
                        <Box>
                            <Typography variant={'h6'}
                                        sx={{
                                            fontSize: '24px',
                                            fontWeight: '500',
                                            lineHeight: '28px',
                                            width: '60%',
                                        }}
                            >Первые 14 дней бесплатно</Typography>
                            <Typography
                                sx={{
                                    fontSize: '18px',
                                    fontWeight: '400',
                                    lineHeight: '21.33px',
                                    marginTop: '32px',
                                }}
                            >
                                Пробуйте, экспериментируйте, а наша отзывчивая техническая поддержка
                                поможет и проконсультирует в любой момент,
                                больше вы не останетесь 1 на 1 со своими проблемами.
                            </Typography>
                        </Box>
                        <Button variant="outlined"
                                onClick={() => setOpen((isOpened) => !isOpened)}
                                sx={{
                                    textTransform: 'none',
                                    color: '#ffffff',
                                    backgroundColor: 'transparent',
                                    fontSize: '18px',
                                    borderRadius: '8px',
                                    borderColor: '#ffffff',
                                }}
                        >Все возможности сервиса</Button>
                    </Box>
                    <Button variant="contained"
                            sx={{
                                textTransform: 'none',
                                fontSize: '18px',

                                borderRadius: '8px',
                                padding: '10px 32px',
                                marginTop: '27px',
                            }}>
                        Создать квиз</Button>
                </Box>
            </Box>
        </SectionStyled>
    )
}