381 lines
15 KiB
TypeScript
381 lines
15 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import Box from '@mui/material/Box';
|
|||
|
|
import {Typography} from "@mui/material";
|
|||
|
|
import SectionStyled from './SectionStyled';
|
|||
|
|
import Button from "@mui/material/Button";
|
|||
|
|
// import Note from './image/note.png'
|
|||
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|||
|
|
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
|||
|
|
import Link from '@mui/material/Link';
|
|||
|
|
// import CalendarW from './image/calendar-W.svg'
|
|||
|
|
// import CalendarP from './image/calendar-P.svg'
|
|||
|
|
import {styled} from "@mui/material/styles";
|
|||
|
|
import Notebook from "../../assets/LandingPict/notebook";
|
|||
|
|
import CalendarIcon from "../../assets/LandingPict/calendarIcon";
|
|||
|
|
|
|||
|
|
const BoxUse = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('md')]: {
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const BoxButtons = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('md')]: {
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
height: '100px',
|
|||
|
|
width: '260px'
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const BoxQuiz = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('md')]: {
|
|||
|
|
maxWidth: '530px',
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
function Quiz () {
|
|||
|
|
return(
|
|||
|
|
<BoxQuiz
|
|||
|
|
sx={{
|
|||
|
|
maxWidth: '360px',
|
|||
|
|
height: '462px',
|
|||
|
|
backgroundColor: '#ffffff',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
// justifyContent: 'space-around',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
padding: '20px 20px 10px 20px',
|
|||
|
|
marginTop: '36px',
|
|||
|
|
gap: "25px",
|
|||
|
|
boxSizing: "border-box"
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box>
|
|||
|
|
<Notebook/>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
minHeight: '86px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'space-between',}}
|
|||
|
|
>
|
|||
|
|
<Typography variant='h6'>Обучение английскому</Typography>
|
|||
|
|
<Typography color={"#4D4D4D"} >Квиз в сторис для блогера преподавателя английского языка.</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
width: '100%',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography fontWeight={600}>период:</Typography>
|
|||
|
|
<Typography fontWeight={600}>трафик:</Typography>
|
|||
|
|
<Typography fontWeight={600}>результат:</Typography>
|
|||
|
|
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
alignItems: 'end',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography>24 часа</Typography>
|
|||
|
|
<Typography>Сторисы</Typography>
|
|||
|
|
<Typography>386 заявок</Typography>
|
|||
|
|
</Box>
|
|||
|
|
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '100%',
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'start',}}
|
|||
|
|
>
|
|||
|
|
<Link href="#"
|
|||
|
|
sx={{
|
|||
|
|
color: "#7E2AEA",
|
|||
|
|
textUnderlineOffset: "7px",
|
|||
|
|
fontSize: '16px',
|
|||
|
|
fontWeight: '500',
|
|||
|
|
lineHeight: '20px',
|
|||
|
|
textAlign: 'center'
|
|||
|
|
}} >
|
|||
|
|
Подробнее →
|
|||
|
|
</Link>
|
|||
|
|
</Box>
|
|||
|
|
</BoxQuiz>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Component () {
|
|||
|
|
return (
|
|||
|
|
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
|||
|
|
sxsect={{minHeight: '1620px', alignItems: 'flex-start'}}
|
|||
|
|
sxcont={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
height: '100%',
|
|||
|
|
padding: '16px 10px 50px 10px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
height: '50%',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
marginTop: '34px',
|
|||
|
|
width:'100%',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<BoxUse
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
marginTop: '20px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
gap: '20px'
|
|||
|
|
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant='h6' fontSize={'36px'}>Как используют квиз</Typography>
|
|||
|
|
<Typography marginBottom={'10px'} fontSize={'18px'}>В крупном и малом бизнесе</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<BoxButtons
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
marginBottom: '40px',
|
|||
|
|
maxWidth: '357px',
|
|||
|
|
width: '100%',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button variant='outlined'
|
|||
|
|
sx={{
|
|||
|
|
color: '#000000',
|
|||
|
|
borderColor: '#000000',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Посмотреть все кейсы
|
|||
|
|
</Button>
|
|||
|
|
<Box>
|
|||
|
|
<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>
|
|||
|
|
</Box>
|
|||
|
|
</BoxButtons>
|
|||
|
|
</BoxUse>
|
|||
|
|
<BoxUse
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
minHeight: '530px',
|
|||
|
|
marginTop: '6px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Quiz/>
|
|||
|
|
<Quiz/>
|
|||
|
|
<Quiz/>
|
|||
|
|
</BoxUse>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
height: '50%',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "16px",
|
|||
|
|
marginTop:'52px'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant='h6' fontSize={'36px'} maxWidth={'420px'} lineHeight={'42.66px'}>
|
|||
|
|
Что еще можно делать
|
|||
|
|
с Опросником
|
|||
|
|
</Typography>
|
|||
|
|
<Typography fontSize={'18px'}>
|
|||
|
|
Изящное решение исследовательских и бизнес-задач
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
width: '100%',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
marginTop: '60px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button
|
|||
|
|
sx={{
|
|||
|
|
width: '275px',
|
|||
|
|
height: '66px',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
paddingRight: '77px',
|
|||
|
|
textTransform: 'none',
|
|||
|
|
backgroundColor: '#7e2aea',
|
|||
|
|
color: '#ffffff',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CalendarIcon/>
|
|||
|
|
<Typography>Исследования</Typography>
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
sx={{
|
|||
|
|
width: '275px',
|
|||
|
|
height: '66px',
|
|||
|
|
backgroundColor: '#ffffff',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
paddingRight: '77px',
|
|||
|
|
textTransform: 'none',
|
|||
|
|
color: '#4D4D4D',
|
|||
|
|
}}
|
|||
|
|
//variant='template'
|
|||
|
|
>
|
|||
|
|
<CalendarIcon/>
|
|||
|
|
<Typography>Сегментация</Typography>
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
sx={{
|
|||
|
|
width: '275px',
|
|||
|
|
height: '66px',
|
|||
|
|
backgroundColor: '#ffffff',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
paddingRight: '77px',
|
|||
|
|
textTransform: 'none',
|
|||
|
|
color: '#4D4D4D',
|
|||
|
|
}}
|
|||
|
|
//variant='template'
|
|||
|
|
>
|
|||
|
|
<CalendarIcon/>
|
|||
|
|
<Typography>Тестирование</Typography>
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
//variant='template'
|
|||
|
|
sx={{
|
|||
|
|
width: '275px',
|
|||
|
|
height: '66px',
|
|||
|
|
backgroundColor: '#ffffff',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
paddingRight: '77px',
|
|||
|
|
textTransform: 'none',
|
|||
|
|
color: '#4D4D4D',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CalendarIcon/>
|
|||
|
|
<Typography>E-commerce</Typography>
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '100%',
|
|||
|
|
minHeight: '462px',
|
|||
|
|
backgroundColor: '#ffffff',
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
padding: '22px 22px 22px 50px',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
marginTop: '60px',
|
|||
|
|
boxSizing: "border-box"
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
height: '70%',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'space-around',
|
|||
|
|
paddingTop: '26px',
|
|||
|
|
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant='h6' fontSize={'36px'} lineHeight={'42.66px'} maxWidth={'455px'}>
|
|||
|
|
Исследуйте аудиторию и проверяйте гипотезы
|
|||
|
|
</Typography>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
maxWidth: '416px',
|
|||
|
|
marginTop: '19px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography fontSize={'18px'} lineHeight={'21px'} color={'#4D4D4D'}>Марквиз помогает проверять гипотезы
|
|||
|
|
и принимать грамотные решения основанные
|
|||
|
|
на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы
|
|||
|
|
в удобной аналитике в личном кабинете.
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '100%',
|
|||
|
|
maxWidth: '550px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '100%',
|
|||
|
|
height: '418px',
|
|||
|
|
backgroundColor: '#c8dade',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
}}
|
|||
|
|
> </Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</SectionStyled>
|
|||
|
|
)
|
|||
|
|
}
|