677 lines
30 KiB
TypeScript
677 lines
30 KiB
TypeScript
import React from 'react';
|
||
import Box from '@mui/material/Box';
|
||
import {Typography, useMediaQuery, useTheme} from "@mui/material";
|
||
import SectionStyled from './SectionStyled';
|
||
import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
|
||
import OneIconBorder from "@icons/OneIconBorder";
|
||
import TwoIcon from "./images/icons/IconNumber2";
|
||
import ThreeIcon from "./images/icons/IconNumber3";
|
||
import FourIcon from "./images/icons/IconNumber4";
|
||
import Firstblock1 from "./images/firstblock1.png";
|
||
import Firstblock2 from "./images/firstblock2.png";
|
||
import Firstblock3 from "./images/firstblock3.png";
|
||
import Firstblock4 from "./images/firstblock4.png";
|
||
import Icon1 from "./images/icons/vkIcon";
|
||
import Icon2 from "./images/icons/clipIcon";
|
||
import Icon3 from "./images/icons/tiktokIcon";
|
||
import Icon4 from "./images/icons/Group133";
|
||
import Icon5 from "./images/icons/Group134";
|
||
import Icon6 from "./images/icons/Group135";
|
||
import Icon7 from "./images/icons/Group136";
|
||
import Icon8 from "./images/icons/Group137";
|
||
import Icon9 from "./images/icons/Group138";
|
||
import Icon10 from "./images/icons/Group139";
|
||
import Icon11 from "./images/icons/Group140";
|
||
import Icon12 from "./images/icons/Group141";
|
||
import Icon13 from "./images/icons/Group142";
|
||
import Icon14 from "./images/icons/Group147";
|
||
import Icon15 from "./images/icons/Group148";
|
||
import Icon16 from "./images/icons/Group149";
|
||
import Icon17 from "./images/icons/Group151";
|
||
import Icon18 from "./images/icons/Group152";
|
||
import Icon19 from "./images/icons/Group153";
|
||
import Icon20 from "./images/icons/Group154";
|
||
import Icon21 from "./images/icons/Network";
|
||
|
||
export default function HowItWorks () {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||
return(
|
||
<SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'}
|
||
sxcont={{
|
||
padding: isMobile ? '603px 16px 0 16px' : (isTablet ? '383px 40px 0 40px':'232px 10px 0 10px'),
|
||
boxSizing: 'border-box'
|
||
}}
|
||
>
|
||
<Box color='#ffffff'
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
flexWrap: 'wrap',
|
||
marginBottom: isMobile ? "10px" : '65px',
|
||
gap: isMobile ? "30px" : undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='36px' >Как это работает</Typography>
|
||
<Typography fontSize='18px'>Квиз как диалог</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
gap: "17px",
|
||
flexDirection: isMobile ? "row-reverse" : undefined,
|
||
}}
|
||
>
|
||
<Box width='140px'>
|
||
<Typography fontSize='18px'>Видео о квизах 2 мин</Typography>
|
||
</Box>
|
||
<YoutobeIcon width={isMobile ? "73px" : "120px"} />
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: '400px',
|
||
backgroundColor: '#ffffff',
|
||
width: '100%',
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
alignItems: 'center',
|
||
borderRadius: '8px',
|
||
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? undefined : '50%',
|
||
padding: '20px',
|
||
minHeight: '401px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'space-between',
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
height: "36px",
|
||
width: "36px",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
display: "flex",
|
||
borderRadius: "6px",
|
||
background: "#EEE4FC"
|
||
}}
|
||
>
|
||
<OneIconBorder color={"#7E2AEA"}/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: isTablet ? '121px' : '162px',
|
||
justifyContent: 'flex-start',
|
||
display: "flex",
|
||
flexDirection: 'column',
|
||
width: isMobile ? "300px" : (isTablet ? "840px" : "453px"),
|
||
gap: isMobile ? 0 : "20px",
|
||
marginTop: isMobile ? "10px" : 0
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='36px'>
|
||
Начало диалога
|
||
</Typography>
|
||
<Typography fontSize='18px'>
|
||
Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог
|
||
</Typography>
|
||
</Box>
|
||
{isTablet &&
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock1}
|
||
sx={{
|
||
backgroundColor: '#C8DADE',
|
||
width: isMobile ? '302px' : '880px',
|
||
height: isMobile ? '193px': '561px',
|
||
borderRadius: '12px',
|
||
|
||
}}
|
||
/>
|
||
}
|
||
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
maxWidth: isTablet ? '489px' : '507px',
|
||
height: '50%',
|
||
justifyContent: 'end',
|
||
marginTop: isMobile ? "20px" : (isTablet ? "34px" : undefined)
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='20px'>
|
||
квиз можно использовать
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
justifyContent: 'space-between',
|
||
padding: isTablet ? '20px 0 0 0' : '20px 20px 0 0',
|
||
flexDirection: isMobile ? "column" : "row",
|
||
gap: isMobile ? "10px" : undefined
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
// width: '126px',
|
||
justifyContent: isMobile ? "start" : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon21/>
|
||
<Typography fontSize='18px'> на сайте</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
// width: '126px',
|
||
justifyContent: isMobile ? "start" : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon2/>
|
||
<Typography fontSize='18px'> по прямой ссылке</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
justifyContent: 'space-between',
|
||
padding: isMobile ? "10px 94px 0 0" : isTablet ? "20px 76px 0 0" : "20px 94px 0 0",
|
||
gap: isMobile ? "10px" : undefined
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
// width: '126px',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon1/>
|
||
<Typography fontSize='18px'> Вконтакте</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
// width: '126px',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon3/>
|
||
<Typography fontSize='18px'> в Тик-ток</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock1}
|
||
sx={{
|
||
display: isTablet ? "none" : "block",
|
||
backgroundColor: '#C8DADE',
|
||
width: '564px',
|
||
height: '360px',
|
||
borderRadius: '12px',
|
||
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: '400px',
|
||
backgroundColor: '#ffffff',
|
||
width: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
borderRadius: '8px',
|
||
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
|
||
flexWrap: 'wrap',
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? undefined : '50%',
|
||
minHeight: '401px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'space-between',
|
||
padding: '20px',
|
||
boxSizing: "border-box"
|
||
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
height: "36px",
|
||
width: "36px",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
display: "flex",
|
||
borderRadius: "6px",
|
||
background: "#EEE4FC"
|
||
}}
|
||
>
|
||
<TwoIcon/>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
minHeight: '40%',
|
||
display: 'flex',
|
||
justifyContent: 'space-around',
|
||
flexDirection: 'column',
|
||
marginBottom: isMobile ? '23px' : isTablet ? '15px' : '90px',
|
||
gap: isMobile ? 0 : "20px",
|
||
marginTop: isMobile ? "7px" : undefined
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='36px'>
|
||
Задаем вопросы
|
||
</Typography>
|
||
<Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px" : isTablet ? "100%" : "444px" }} >
|
||
Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
|
||
</Typography>
|
||
</Box>
|
||
{isTablet &&
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock2}
|
||
sx={{
|
||
backgroundColor: '#C8DADE',
|
||
width: isMobile ? '302px' : '880px',
|
||
height: isMobile ? '193px': '561px',
|
||
borderRadius: '12px',
|
||
}}
|
||
/>
|
||
}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
maxWidth: isMobile ? "245px" : "500px",
|
||
height: '50%',
|
||
justifyContent: 'end',
|
||
marginTop: isMobile ? "40px" : isTablet ? "35px" : undefined
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexWrap: 'wrap',
|
||
justifyContent: 'space-between',
|
||
marginTop: '15px',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon4/>
|
||
<Icon5/>
|
||
<Icon6/>
|
||
<Icon7/>
|
||
<Icon8/>
|
||
<Icon9/>
|
||
<Icon10/>
|
||
<Icon11/>
|
||
<Icon12/>
|
||
<Icon13/>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock2}
|
||
sx={{
|
||
display: isTablet ? "none" : "block",
|
||
backgroundColor: '#C8DADE',
|
||
width: '564px',
|
||
height: '360px',
|
||
borderRadius: '12px',
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: '400px',
|
||
backgroundColor: '#ffffff',
|
||
width: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
borderRadius: '8px',
|
||
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
|
||
flexWrap: 'wrap',
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? undefined : '50%',
|
||
height: '100%',
|
||
padding: '20px',
|
||
gap: "10px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
height: "36px",
|
||
width: "36px",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
display: "flex",
|
||
borderRadius: "6px",
|
||
background: "#EEE4FC"
|
||
}}
|
||
>
|
||
<ThreeIcon/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: '40%',
|
||
justifyContent: 'space-around',
|
||
display: "flex",
|
||
flexDirection: 'column',
|
||
maxWidth: isTablet ? "100%" : '388px',
|
||
gap: "20px"
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography>
|
||
<Typography fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography>
|
||
</Box>
|
||
{isTablet &&
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock3}
|
||
sx={{
|
||
backgroundColor: '#C8DADE',
|
||
width: isMobile ? '302px' : '880px',
|
||
height: isMobile ? '193px': '561px',
|
||
borderRadius: '12px',
|
||
}}
|
||
/>
|
||
}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
maxWidth: '497px',
|
||
minHeight: '50%',
|
||
justifyContent: 'end',
|
||
marginTop: isMobile ? undefined : isTablet ? " 34px" : undefined
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='20px'>точный показ результатов</Typography>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
padding: '20px 20px 0 0',
|
||
flexDirection: isMobile ? "column" : "row",
|
||
gap: isMobile ? "15px" : undefined
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon14/>
|
||
<Typography fontSize='18px'> логика ветвления</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon15/>
|
||
<Typography fontSize='18px'> калькулятор цен</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
padding: '20px 20px 0 0',
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon16/>
|
||
<Typography fontSize='18px'> скидки</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock3}
|
||
sx={{
|
||
display: isTablet ? "none" : "block",
|
||
backgroundColor: '#C8DADE',
|
||
width: '564px',
|
||
height: '360px',
|
||
boxSizing: "border-box",
|
||
borderRadius: '12px',
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: '400px',
|
||
backgroundColor: '#ffffff',
|
||
width: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
borderRadius: '8px',
|
||
marginBottom: isMobile ? "25px" : (isTablet ? "60px" : "126px"),
|
||
flexWrap: 'wrap',
|
||
boxSizing: "border-box"
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? undefined :'50%',
|
||
height: '100%',
|
||
padding: '20px',
|
||
boxSizing: "border-box",
|
||
gap: "20px",
|
||
display: "flex",
|
||
flexDirection: "column"
|
||
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
height: "36px",
|
||
width: "36px",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
display: "flex",
|
||
borderRadius: "6px",
|
||
background: "#EEE4FC",
|
||
}}
|
||
>
|
||
<FourIcon/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
minHeight: '40%',
|
||
justifyContent: 'space-around',
|
||
display: "flex",
|
||
flexDirection: 'column',
|
||
maxWidth: isTablet ? "100%" :'457px',
|
||
marginTop: isMobile ? "-13px" : 0
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='36px'>Узнаем контакт</Typography>
|
||
<Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography>
|
||
</Box>
|
||
{isTablet &&
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock4}
|
||
sx={{
|
||
backgroundColor: '#C8DADE',
|
||
width: isMobile ? '302px' : '880px',
|
||
height: isMobile ? '193px': '561px',
|
||
borderRadius: '12px',
|
||
}}
|
||
/>
|
||
}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
maxWidth: '520px',
|
||
height: '50%',
|
||
justifyContent: 'end',
|
||
marginTop: isMobile ? "20px" : 0
|
||
}}
|
||
>
|
||
<Typography variant='h6' fontSize='20px'>что можно делать на последнем шаге</Typography>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
padding: '20px 20px 0 0',
|
||
flexDirection: isMobile ? "column" : "row",
|
||
gap: isMobile ? "15px" : undefined
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon17/>
|
||
<Typography fontSize='18px'> сбор контактов</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon18/>
|
||
<Typography fontSize='18px'> воронки и чат-боты</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
padding: '20px 79px 0 0',
|
||
flexDirection: isMobile ? "column" : "row",
|
||
gap: isMobile ? "15px" : undefined
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon19/>
|
||
<Typography fontSize='18px'> интеграция с CRM</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: isMobile ? 'start' : 'space-between',
|
||
alignItems: 'center',
|
||
padding: '0',
|
||
flexWrap: 'wrap',
|
||
gap: "15px"
|
||
}}
|
||
>
|
||
<Icon20/>
|
||
<Typography fontSize='18px'> прием оплат</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
component={"img"}
|
||
src={Firstblock4}
|
||
sx={{
|
||
display: isTablet ? "none" : "block",
|
||
backgroundColor: '#C8DADE',
|
||
width: '564px',
|
||
height: '360px',
|
||
|
||
borderRadius: '12px',
|
||
}}
|
||
/>
|
||
</Box>
|
||
</SectionStyled>
|
||
)
|
||
|
||
} |