планшетная адаптация для лендинга
This commit is contained in:
Tamara
parent
c3d44d6546
commit
e0f5f50ccc
@ -30,6 +30,7 @@ const BoxText = styled('div')(({ theme }) => ({
|
||||
export default function Component () {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return(
|
||||
<SectionStyled tag={'section'} bg={'#7e2aea'} mwidth={'1160px'}
|
||||
sxsect={{minHeight: '394px'}}
|
||||
@ -38,7 +39,7 @@ export default function Component () {
|
||||
justifyContent: 'space-around',
|
||||
height: '100%',
|
||||
color:'#ffffff',
|
||||
padding: isMobile ? '60px 16px 32px 16px' : '55px 14px 63px 10px'
|
||||
padding: isMobile ? '60px 16px 32px 16px' : (isTablet ? "55px 40px 63px 40px" : '55px 14px 63px 10px'),
|
||||
}}
|
||||
>
|
||||
<BoxText>
|
||||
@ -54,7 +55,7 @@ export default function Component () {
|
||||
>
|
||||
<BoxCard
|
||||
sx={{
|
||||
maxWidth: '290px',
|
||||
maxWidth: isTablet ? '285px' : '290px',
|
||||
height: '151px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -68,7 +69,7 @@ export default function Component () {
|
||||
</BoxCard>
|
||||
<BoxCard
|
||||
sx={{
|
||||
maxWidth: '290px',
|
||||
maxWidth: isTablet ? '285px' : '290px',
|
||||
height: '151px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -82,7 +83,7 @@ export default function Component () {
|
||||
</BoxCard>
|
||||
<BoxCard
|
||||
sx={{
|
||||
maxWidth: '346px',
|
||||
maxWidth: isTablet? '307px' : '346px',
|
||||
height: '151px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@ -6,6 +6,7 @@ import {Typography, useMediaQuery, useTheme} from "@mui/material";
|
||||
export default function Counter() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return(
|
||||
<Box
|
||||
sx={{
|
||||
@ -16,49 +17,58 @@ export default function Counter() {
|
||||
alignItems: 'center',
|
||||
height: 0,
|
||||
boxSizing: "border-box",
|
||||
padding: isMobile ? "0 40px" : undefined,
|
||||
padding: isTablet ? "0 40px" : undefined,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '1160px',
|
||||
height: isMobile ? "587px": "190px",
|
||||
height: isMobile ? "587px" : isTablet ? "341px" : "190px",
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
alignItems: isTablet ? 'start' : 'center',
|
||||
flexWrap: 'wrap',
|
||||
backgroundColor: '#7E2AEA',
|
||||
color: '#ffffff',
|
||||
borderRadius: '8px',
|
||||
boxSizing: "border-box",
|
||||
padding: isMobile ? '10px 60px 30px 35px' : '30px 60px 30px 20px',
|
||||
padding: isMobile ? '42px 60px 30px 35px' : isTablet ? '37px 99px 0px 100px' : '30px 60px 30px 20px',
|
||||
width: '100%',
|
||||
marginTop: isMobile ? "483px" : "106px"
|
||||
marginTop: isMobile ? "483px" : isTablet ? "258px" : "106px",
|
||||
rowGap: isMobile ? undefined : (isTablet ? '51px' : undefined),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '203px',
|
||||
width: isTablet ? '305px' : '203px',
|
||||
}}
|
||||
>
|
||||
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>14 дней</Typography>
|
||||
<Typography> бесплатно, полный функционал</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: isTablet ? '305px' : undefined
|
||||
}}
|
||||
>
|
||||
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>5 мин</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '131px',
|
||||
width: isTablet ? '200px' : '131px',
|
||||
}}
|
||||
>
|
||||
<Typography >для создания квиза</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: isTablet ? '305px' : undefined
|
||||
}}
|
||||
>
|
||||
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>482 800</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '200px',
|
||||
width: isMobile? '200px' : (isTablet ? '250px' : '200px'),
|
||||
}}
|
||||
>
|
||||
<Typography >квизов создано клиентами</Typography>
|
||||
@ -66,7 +76,7 @@ export default function Counter() {
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: '177px',
|
||||
width: isTablet ? '305px' : '177px',
|
||||
}}
|
||||
>
|
||||
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>760</Typography>
|
||||
|
||||
@ -11,6 +11,7 @@ import {useMediaQuery, useTheme} from "@mui/material";
|
||||
export default function Component() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return(
|
||||
<SectionStyled tag={'footer'} bg={'#252734'} mwidth={'1160px'}
|
||||
sxsect={{
|
||||
@ -21,7 +22,7 @@ export default function Component() {
|
||||
alignItems: 'flex-start',
|
||||
flexDirection: 'column',
|
||||
minHeight: '236px',
|
||||
padding: isMobile ? '40px 16px 74px 16px' : '56px 0px',
|
||||
padding: isMobile ? '40px 16px 74px 16px' : isTablet ? '56px 40px' : '56px 0px',
|
||||
boxSizing: 'border-box',
|
||||
}}>
|
||||
<Box
|
||||
@ -39,6 +40,7 @@ export default function Component() {
|
||||
width: '170px',
|
||||
height: '48px',
|
||||
backgroundSize: 'contain',
|
||||
marginTop: isMobile ? undefined : isTablet ? '15px' : 0
|
||||
}}
|
||||
>
|
||||
<svg width="124" height="48" viewBox="0 0 124 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -12,17 +12,18 @@ import { setIsContactFormOpen } from "../../stores/contactForm";
|
||||
export default function Component() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return(
|
||||
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
||||
sxsect={{
|
||||
height: isMobile ? '702px' : '660px',
|
||||
height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
|
||||
}}
|
||||
sxcont={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: isMobile ? "300px 16px 0 16px" : 0,
|
||||
marginBottom: "55px",
|
||||
padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
|
||||
marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
@ -40,11 +41,11 @@ export default function Component() {
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '420px',
|
||||
maxWidth: isTablet ? '715px' : '420px',
|
||||
minHeight: '64px',
|
||||
}}>
|
||||
<Typography variant='body1'>
|
||||
Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
|
||||
Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
|
||||
</Typography>
|
||||
</Box>
|
||||
<Link to="/list" style={{textDecoration: "none"}}>
|
||||
@ -61,9 +62,9 @@ export default function Component() {
|
||||
src={abstraction}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: isMobile ? undefined : "-291px",
|
||||
bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
|
||||
width: isMobile ? "430px" : "810px",
|
||||
left: isMobile ? "-44px" : "401px",
|
||||
left: isMobile ? "-44px" : (isTablet? "54px" : "401px"),
|
||||
top: isMobile ? "-386px" : undefined
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -36,10 +36,11 @@ 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' : '232px 10px 0 10px',
|
||||
padding: isMobile ? '603px 16px 0 16px' : (isTablet ? '383px 40px 0 40px':'232px 10px 0 10px'),
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
>
|
||||
@ -84,12 +85,12 @@ export default function HowItWorks () {
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
marginBottom: isMobile ? "26px" : "107px",
|
||||
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? undefined : '50%',
|
||||
width: isTablet ? undefined : '50%',
|
||||
padding: '20px',
|
||||
minHeight: '401px',
|
||||
display: 'flex',
|
||||
@ -113,11 +114,11 @@ export default function HowItWorks () {
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '162px',
|
||||
minHeight: isTablet ? '121px' : '162px',
|
||||
justifyContent: 'flex-start',
|
||||
display: "flex",
|
||||
flexDirection: 'column',
|
||||
width: isMobile ? "335px" : "453px",
|
||||
width: isMobile ? "335px" : (isTablet ? "840px" : "453px"),
|
||||
gap: isMobile ? 0 : "20px",
|
||||
marginTop: isMobile ? "10px" : 0
|
||||
}}
|
||||
@ -129,14 +130,14 @@ export default function HowItWorks () {
|
||||
Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог
|
||||
</Typography>
|
||||
</Box>
|
||||
{isMobile &&
|
||||
{isTablet &&
|
||||
<Box
|
||||
component={"img"}
|
||||
src={Firstblock1}
|
||||
sx={{
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '302px',
|
||||
height: '193px',
|
||||
width: isMobile ? '302px' : '880px',
|
||||
height: isMobile ? '193px': '561px',
|
||||
borderRadius: '12px',
|
||||
|
||||
}}
|
||||
@ -147,10 +148,10 @@ export default function HowItWorks () {
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
maxWidth: '507px',
|
||||
maxWidth: isTablet ? '489px' : '507px',
|
||||
height: '50%',
|
||||
justifyContent: 'end',
|
||||
marginTop: isMobile ? "20px" : undefined
|
||||
marginTop: isMobile ? "20px" : (isTablet ? "34px" : undefined)
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' fontSize='20px'>
|
||||
@ -161,7 +162,7 @@ export default function HowItWorks () {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
padding: '20px 20px 0 0',
|
||||
padding: isTablet ? '20px 0 0 0' : '20px 20px 0 0',
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
gap: isMobile ? "10px" : undefined
|
||||
}}
|
||||
@ -200,7 +201,7 @@ export default function HowItWorks () {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
padding: isMobile ? "10px 94px 0 0" : "20px 94px 0 0",
|
||||
padding: isMobile ? "10px 94px 0 0" : isTablet ? "20px 76px 0 0" : "20px 94px 0 0",
|
||||
gap: isMobile ? "10px" : undefined
|
||||
}}
|
||||
>
|
||||
@ -239,7 +240,7 @@ export default function HowItWorks () {
|
||||
component={"img"}
|
||||
src={Firstblock1}
|
||||
sx={{
|
||||
display: isMobile ? "none" : "block",
|
||||
display: isTablet ? "none" : "block",
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '564px',
|
||||
height: '360px',
|
||||
@ -256,14 +257,14 @@ export default function HowItWorks () {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
marginBottom: isMobile ? "26px" : "107px",
|
||||
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
|
||||
flexWrap: 'wrap',
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? undefined : '50%',
|
||||
width: isTablet ? undefined : '50%',
|
||||
minHeight: '401px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -293,7 +294,7 @@ export default function HowItWorks () {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
flexDirection: 'column',
|
||||
marginBottom: isMobile ? '23px' : '90px',
|
||||
marginBottom: isMobile ? '23px' : isTablet ? '15px' : '90px',
|
||||
gap: isMobile ? 0 : "20px",
|
||||
marginTop: isMobile ? "7px" : undefined
|
||||
}}
|
||||
@ -301,18 +302,18 @@ export default function HowItWorks () {
|
||||
<Typography variant='h6' fontSize='36px'>
|
||||
Задаем вопросы
|
||||
</Typography>
|
||||
<Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px":"444px" }} >
|
||||
<Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px" : isTablet ? "100%" : "444px" }} >
|
||||
Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
|
||||
</Typography>
|
||||
</Box>
|
||||
{isMobile &&
|
||||
{isTablet &&
|
||||
<Box
|
||||
component={"img"}
|
||||
src={Firstblock2}
|
||||
sx={{
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '302px',
|
||||
height: '193px',
|
||||
width: isMobile ? '302px' : '880px',
|
||||
height: isMobile ? '193px': '561px',
|
||||
borderRadius: '12px',
|
||||
}}
|
||||
/>
|
||||
@ -324,7 +325,7 @@ export default function HowItWorks () {
|
||||
maxWidth: isMobile ? "245px" : "500px",
|
||||
height: '50%',
|
||||
justifyContent: 'end',
|
||||
marginTop: isMobile ? "40px" : undefined
|
||||
marginTop: isMobile ? "40px" : isTablet ? "35px" : undefined
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography>
|
||||
@ -354,7 +355,7 @@ export default function HowItWorks () {
|
||||
component={"img"}
|
||||
src={Firstblock2}
|
||||
sx={{
|
||||
display: isMobile ? "none" : "block",
|
||||
display: isTablet ? "none" : "block",
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '564px',
|
||||
height: '360px',
|
||||
@ -370,14 +371,14 @@ export default function HowItWorks () {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
marginBottom: isMobile ? "26px" : "107px",
|
||||
marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
|
||||
flexWrap: 'wrap',
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? undefined : '50%',
|
||||
width: isTablet ? undefined : '50%',
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
gap: "10px",
|
||||
@ -405,21 +406,21 @@ export default function HowItWorks () {
|
||||
justifyContent: 'space-around',
|
||||
display: "flex",
|
||||
flexDirection: 'column',
|
||||
maxWidth: '388px',
|
||||
maxWidth: isTablet ? "100%" : '388px',
|
||||
gap: "20px"
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography>
|
||||
<Typography fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography>
|
||||
</Box>
|
||||
{isMobile &&
|
||||
{isTablet &&
|
||||
<Box
|
||||
component={"img"}
|
||||
src={Firstblock3}
|
||||
sx={{
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '302px',
|
||||
height: '193px',
|
||||
width: isMobile ? '302px' : '880px',
|
||||
height: isMobile ? '193px': '561px',
|
||||
borderRadius: '12px',
|
||||
}}
|
||||
/>
|
||||
@ -431,6 +432,7 @@ export default function HowItWorks () {
|
||||
maxWidth: '497px',
|
||||
minHeight: '50%',
|
||||
justifyContent: 'end',
|
||||
marginTop: isMobile ? undefined : isTablet ? " 34px" : undefined
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' fontSize='20px'>точный показ результатов</Typography>
|
||||
@ -498,7 +500,7 @@ export default function HowItWorks () {
|
||||
component={"img"}
|
||||
src={Firstblock3}
|
||||
sx={{
|
||||
display: isMobile ? "none" : "block",
|
||||
display: isTablet ? "none" : "block",
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '564px',
|
||||
height: '360px',
|
||||
@ -515,14 +517,14 @@ export default function HowItWorks () {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
marginBottom: isMobile ? "25px" : "126px",
|
||||
marginBottom: isMobile ? "25px" : (isTablet ? "60px" : "126px"),
|
||||
flexWrap: 'wrap',
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? undefined :'50%',
|
||||
width: isTablet ? undefined :'50%',
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
boxSizing: "border-box",
|
||||
@ -551,21 +553,21 @@ export default function HowItWorks () {
|
||||
justifyContent: 'space-around',
|
||||
display: "flex",
|
||||
flexDirection: 'column',
|
||||
maxWidth: '457px',
|
||||
maxWidth: isTablet ? "100%" :'457px',
|
||||
marginTop: isMobile ? "-13px" : 0
|
||||
}}
|
||||
>
|
||||
<Typography variant='h6' fontSize='36px'>Узнаем контакт</Typography>
|
||||
<Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography>
|
||||
</Box>
|
||||
{isMobile &&
|
||||
{isTablet &&
|
||||
<Box
|
||||
component={"img"}
|
||||
src={Firstblock4}
|
||||
sx={{
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '302px',
|
||||
height: '193px',
|
||||
width: isMobile ? '302px' : '880px',
|
||||
height: isMobile ? '193px': '561px',
|
||||
borderRadius: '12px',
|
||||
}}
|
||||
/>
|
||||
@ -660,7 +662,7 @@ export default function HowItWorks () {
|
||||
component={"img"}
|
||||
src={Firstblock4}
|
||||
sx={{
|
||||
display: isMobile ? "none" : "block",
|
||||
display: isTablet ? "none" : "block",
|
||||
backgroundColor: '#C8DADE',
|
||||
width: '564px',
|
||||
height: '360px',
|
||||
|
||||
@ -123,6 +123,7 @@ function Quiz () {
|
||||
export default function Component () {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return (
|
||||
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
||||
sxsect={{minHeight: '809px', alignItems: 'flex-start'}}
|
||||
@ -131,7 +132,7 @@ export default function Component () {
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
height: '100%',
|
||||
padding: isMobile ? "16px 16px 70px 16px" : '16px 10px 50px 10px',
|
||||
padding: isMobile ? "16px 16px 70px 16px" : isTablet ? '16px 40px 50px 40px' : '16px 10px 50px 10px',
|
||||
}}
|
||||
>
|
||||
{/*<Box*/}
|
||||
@ -331,7 +332,7 @@ export default function Component () {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
padding: isMobile ? "0 27px 22px 20px" : "22px 22px 22px 50px",
|
||||
padding: isMobile ? "0 27px 22px 20px" : isTablet ? "20px" : "22px 22px 22px 50px",
|
||||
borderRadius: '12px',
|
||||
marginTop: isMobile ? "35px" : "60px",
|
||||
boxSizing: "border-box",
|
||||
@ -345,6 +346,7 @@ export default function Component () {
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-around',
|
||||
paddingTop: '26px',
|
||||
paddingLeft: isMobile ? undefined : isTablet ? '30px' : undefined
|
||||
|
||||
}}
|
||||
>
|
||||
@ -353,7 +355,7 @@ export default function Component () {
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '416px',
|
||||
maxWidth: isTablet ? '100%' : '416px',
|
||||
marginTop: '19px',
|
||||
}}
|
||||
>
|
||||
@ -368,7 +370,8 @@ export default function Component () {
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: '550px',
|
||||
maxWidth: isTablet ? '100%' : '550px',
|
||||
marginTop: isMobile ? undefined : isTablet ? '42px' : undefined
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -376,7 +379,7 @@ export default function Component () {
|
||||
src={BigBlock}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: isMobile ? '228px' : '418px',
|
||||
height: isMobile ? '228px' : isTablet ? '671px' : '418px',
|
||||
backgroundColor: '#c8dade',
|
||||
borderRadius: '12px',
|
||||
}}
|
||||
|
||||
@ -7,15 +7,15 @@ import {styled} from "@mui/material/styles";
|
||||
import {useMediaQuery, useTheme} from "@mui/material";
|
||||
|
||||
|
||||
const BoxSpan = styled('div')(({ theme }) => ({
|
||||
[theme.breakpoints.down('lg')]: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
paddingTop: '20px',
|
||||
width: '100%',
|
||||
},
|
||||
}));
|
||||
// const BoxSpan = styled('div')(({ theme }) => ({
|
||||
// [theme.breakpoints.down('lg')]: {
|
||||
// alignItems: 'center',
|
||||
// justifyContent: 'center',
|
||||
// textAlign: 'center',
|
||||
// paddingTop: '20px',
|
||||
// width: '100%',
|
||||
// },
|
||||
// }));
|
||||
|
||||
const BoxButtons = styled('div')(({ theme }) => ({
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
@ -26,6 +26,7 @@ const BoxButtons = styled('div')(({ theme }) => ({
|
||||
export default function Component() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
return(
|
||||
<SectionStyled tag={'section'} bg={'#7E2AEA'} mwidth={'1160px'}
|
||||
sxsect={{
|
||||
@ -36,7 +37,7 @@ export default function Component() {
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: isMobile ? '85px 16px 50px 16px' : 0,
|
||||
padding: isMobile ? '85px 16px 50px 16px' : isTablet ? "0 40px" : 0,
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
@ -104,7 +105,7 @@ export default function Component() {
|
||||
</Button>
|
||||
</BoxButtons>
|
||||
</Box>
|
||||
<BoxSpan
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
@ -123,7 +124,7 @@ export default function Component() {
|
||||
рекламный бюджет впустую и терять клиентов на сайте.
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxSpan>
|
||||
</Box>
|
||||
</SectionStyled>
|
||||
)
|
||||
}
|
||||
@ -19,11 +19,6 @@ import {styled} from "@mui/material/styles";
|
||||
// width: '100%',
|
||||
// },
|
||||
// }));
|
||||
const BoxCardHead = styled('div')(({ theme }) => ({
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
}));
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
image: string;
|
||||
@ -32,10 +27,11 @@ interface Props {
|
||||
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: '500px',
|
||||
maxWidth: isTabletOnly ? '801px' : '500px',
|
||||
minHeight: '350px',
|
||||
backgroundColor: '#252734',
|
||||
borderRadius: '12px',
|
||||
@ -46,7 +42,7 @@ function BoxFich(props: Props) {
|
||||
height: isMobile ? "450px" : undefined
|
||||
}}
|
||||
>
|
||||
<BoxCardHead
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
@ -55,11 +51,12 @@ function BoxFich(props: Props) {
|
||||
padding: '20px',
|
||||
flexWrap: 'wrap',
|
||||
boxSizing: "border-box",
|
||||
flexDirection: isTabletOnly ? "column" : "row",
|
||||
gap: isMobile ? "16px" : undefined
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</BoxCardHead>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -76,6 +73,8 @@ function BoxFich(props: Props) {
|
||||
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(false);
|
||||
|
||||
return (
|
||||
@ -85,7 +84,7 @@ export default function Component () {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
minHeight: '2074px',
|
||||
padding: isMobile ? "20px 16px 40px 16px" : "30px 0",
|
||||
padding: isMobile ? "20px 16px 40px 16px" : isTablet ? "30px 40px" : "30px 0",
|
||||
color: '#ffffff',
|
||||
flexWrap: "wrap"
|
||||
}}
|
||||
@ -126,7 +125,7 @@ export default function Component () {
|
||||
</Typography>
|
||||
</Box>
|
||||
<BoxFich image={Desktop1}>
|
||||
<Box maxWidth={'174px'}>
|
||||
<Box sx={{maxWidth: isTabletOnly ? '244px' : '174px'}}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: '#7e2aea',
|
||||
@ -145,7 +144,7 @@ export default function Component () {
|
||||
}}
|
||||
>Привязка к вашему домену</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={'230px'}>
|
||||
<Box sx={{maxWidth: isTabletOnly ? '300px' : '230px'}}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '18px',
|
||||
|
||||
@ -87,6 +87,7 @@ export default function FullScreenDialog({
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
svg: { color: "#000000" },
|
||||
padding: isMobile ? 0 : "0 22px 0 40px"
|
||||
}}
|
||||
>
|
||||
<Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user