SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

планшетная адаптация для лендинга

Browse Source
This commit is contained in:
Tamara 2023-10-11 16:17:10 +03:00
parent c3d44d6546
commit e0f5f50ccc
9 changed files with 107 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/Landing/BusinessPluses.tsx
View File

@ -30,6 +30,7 @@ const BoxText = styled('div')(({ theme }) => ({
export default function Component () { export default function Component () {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'section'} bg={'#7e2aea'} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#7e2aea'} mwidth={'1160px'}
sxsect={{minHeight: '394px'}} sxsect={{minHeight: '394px'}}
@ -38,7 +39,7 @@ export default function Component () {
justifyContent: 'space-around', justifyContent: 'space-around',
height: '100%', height: '100%',
color:'#ffffff', 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> <BoxText>
@ -54,7 +55,7 @@ export default function Component () {
> >
<BoxCard <BoxCard
sx={{ sx={{
maxWidth: '290px', maxWidth: isTablet ? '285px' : '290px',
height: '151px', height: '151px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -68,7 +69,7 @@ export default function Component () {
</BoxCard> </BoxCard>
<BoxCard <BoxCard
sx={{ sx={{
maxWidth: '290px', maxWidth: isTablet ? '285px' : '290px',
height: '151px', height: '151px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -82,7 +83,7 @@ export default function Component () {
</BoxCard> </BoxCard>
<BoxCard <BoxCard
sx={{ sx={{
maxWidth: '346px', maxWidth: isTablet? '307px' : '346px',
height: '151px', height: '151px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',

32
src/pages/Landing/Counter.tsx
View File

@ -6,6 +6,7 @@ import {Typography, useMediaQuery, useTheme} from "@mui/material";
export default function Counter() { export default function Counter() {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<Box <Box
sx={{ sx={{
@ -16,49 +17,58 @@ export default function Counter() {
alignItems: 'center', alignItems: 'center',
height: 0, height: 0,
boxSizing: "border-box", boxSizing: "border-box",
padding: isMobile ? "0 40px" : undefined, padding: isTablet ? "0 40px" : undefined,
}} }}
> >
<Box <Box
sx={{ sx={{
maxWidth: '1160px', maxWidth: '1160px',
height: isMobile ? "587px": "190px", height: isMobile ? "587px" : isTablet ? "341px" : "190px",
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: isTablet ? 'start' : 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
backgroundColor: '#7E2AEA', backgroundColor: '#7E2AEA',
color: '#ffffff', color: '#ffffff',
borderRadius: '8px', borderRadius: '8px',
boxSizing: "border-box", 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%', width: '100%',
marginTop: isMobile ? "483px" : "106px" marginTop: isMobile ? "483px" : isTablet ? "258px" : "106px",
rowGap: isMobile ? undefined : (isTablet ? '51px' : undefined),
}} }}
> >
<Box <Box
sx={{ sx={{
width: '203px', width: isTablet ? '305px' : '203px',
}} }}
> >
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>14 дней</Typography> <Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>14 дней</Typography>
<Typography> бесплатно, полный функционал</Typography> <Typography> бесплатно, полный функционал</Typography>
</Box> </Box>
<Box> <Box
sx={{
width: isTablet ? '305px' : undefined
}}
>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>5 мин</Typography> <Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>5 мин</Typography>
<Box <Box
sx={{ sx={{
width: '131px', width: isTablet ? '200px' : '131px',
}} }}
> >
<Typography >для создания квиза</Typography> <Typography >для создания квиза</Typography>
</Box> </Box>
</Box> </Box>
<Box> <Box
sx={{
width: isTablet ? '305px' : undefined
}}
>
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>482 800</Typography> <Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>482 800</Typography>
<Box <Box
sx={{ sx={{
width: '200px', width: isMobile? '200px' : (isTablet ? '250px' : '200px'),
}} }}
> >
<Typography >квизов создано клиентами</Typography> <Typography >квизов создано клиентами</Typography>
@ -66,7 +76,7 @@ export default function Counter() {
</Box> </Box>
<Box <Box
sx={{ sx={{
width: '177px', width: isTablet ? '305px' : '177px',
}} }}
> >
<Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>760</Typography> <Typography variant='h3' fontSize={isMobile ? '42px' : '50px'} fontWeight={'500'}>760</Typography>

4
src/pages/Landing/FooterLanding.tsx
View File

@ -11,6 +11,7 @@ import {useMediaQuery, useTheme} from "@mui/material";
export default function Component() { export default function Component() {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'footer'} bg={'#252734'} mwidth={'1160px'} <SectionStyled tag={'footer'} bg={'#252734'} mwidth={'1160px'}
sxsect={{ sxsect={{
@ -21,7 +22,7 @@ export default function Component() {
alignItems: 'flex-start', alignItems: 'flex-start',
flexDirection: 'column', flexDirection: 'column',
minHeight: '236px', minHeight: '236px',
padding: isMobile ? '40px 16px 74px 16px' : '56px 0px', padding: isMobile ? '40px 16px 74px 16px' : isTablet ? '56px 40px' : '56px 0px',
boxSizing: 'border-box', boxSizing: 'border-box',
}}> }}>
<Box <Box
@ -39,6 +40,7 @@ export default function Component() {
width: '170px', width: '170px',
height: '48px', height: '48px',
backgroundSize: 'contain', 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"> <svg width="124" height="48" viewBox="0 0 124 48" fill="none" xmlns="http://www.w3.org/2000/svg">

15
src/pages/Landing/Hero.tsx
View File

@ -12,17 +12,18 @@ import { setIsContactFormOpen } from "../../stores/contactForm";
export default function Component() { export default function Component() {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{ sxsect={{
height: isMobile ? '702px' : '660px', height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
}} }}
sxcont={{ sxcont={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: isMobile ? "300px 16px 0 16px" : 0, padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
marginBottom: "55px", marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
}}> }}>
<Box <Box
sx={{ sx={{
@ -40,11 +41,11 @@ export default function Component() {
</Typography> </Typography>
<Box <Box
sx={{ sx={{
maxWidth: '420px', maxWidth: isTablet ? '715px' : '420px',
minHeight: '64px', minHeight: '64px',
}}> }}>
<Typography variant='body1'> <Typography variant='body1'>
Помогаем посетителю оставить заявку. Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
</Typography> </Typography>
</Box> </Box>
<Link to="/list" style={{textDecoration: "none"}}> <Link to="/list" style={{textDecoration: "none"}}>
@ -61,9 +62,9 @@ export default function Component() {
src={abstraction} src={abstraction}
sx={{ sx={{
position: "absolute", position: "absolute",
bottom: isMobile ? undefined : "-291px", bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
width: isMobile ? "430px" : "810px", width: isMobile ? "430px" : "810px",
left: isMobile ? "-44px" : "401px", left: isMobile ? "-44px" : (isTablet? "54px" : "401px"),
top: isMobile ? "-386px" : undefined top: isMobile ? "-386px" : undefined
}} }}
/> />

74
src/pages/Landing/HowItWorks.tsx
View File

@ -36,10 +36,11 @@ import Icon21 from "./images/icons/Network";
export default function HowItWorks () { export default function HowItWorks () {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'}
sxcont={{ 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' boxSizing: 'border-box'
}} }}
> >
@ -84,12 +85,12 @@ export default function HowItWorks () {
flexWrap: 'wrap', flexWrap: 'wrap',
alignItems: 'center', alignItems: 'center',
borderRadius: '8px', borderRadius: '8px',
marginBottom: isMobile ? "26px" : "107px", marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
}} }}
> >
<Box <Box
sx={{ sx={{
width: isMobile ? undefined : '50%', width: isTablet ? undefined : '50%',
padding: '20px', padding: '20px',
minHeight: '401px', minHeight: '401px',
display: 'flex', display: 'flex',
@ -113,11 +114,11 @@ export default function HowItWorks () {
</Box> </Box>
<Box <Box
sx={{ sx={{
minHeight: '162px', minHeight: isTablet ? '121px' : '162px',
justifyContent: 'flex-start', justifyContent: 'flex-start',
display: "flex", display: "flex",
flexDirection: 'column', flexDirection: 'column',
width: isMobile ? "335px" : "453px", width: isMobile ? "335px" : (isTablet ? "840px" : "453px"),
gap: isMobile ? 0 : "20px", gap: isMobile ? 0 : "20px",
marginTop: isMobile ? "10px" : 0 marginTop: isMobile ? "10px" : 0
}} }}
@ -129,14 +130,14 @@ export default function HowItWorks () {
Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог
</Typography> </Typography>
</Box> </Box>
{isMobile && {isTablet &&
<Box <Box
component={"img"} component={"img"}
src={Firstblock1} src={Firstblock1}
sx={{ sx={{
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '302px', width: isMobile ? '302px' : '880px',
height: '193px', height: isMobile ? '193px': '561px',
borderRadius: '12px', borderRadius: '12px',
}} }}
@ -147,10 +148,10 @@ export default function HowItWorks () {
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
maxWidth: '507px', maxWidth: isTablet ? '489px' : '507px',
height: '50%', height: '50%',
justifyContent: 'end', justifyContent: 'end',
marginTop: isMobile ? "20px" : undefined marginTop: isMobile ? "20px" : (isTablet ? "34px" : undefined)
}} }}
> >
<Typography variant='h6' fontSize='20px'> <Typography variant='h6' fontSize='20px'>
@ -161,7 +162,7 @@ export default function HowItWorks () {
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'space-between', justifyContent: 'space-between',
padding: '20px 20px 0 0', padding: isTablet ? '20px 0 0 0' : '20px 20px 0 0',
flexDirection: isMobile ? "column" : "row", flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "10px" : undefined gap: isMobile ? "10px" : undefined
}} }}
@ -200,7 +201,7 @@ export default function HowItWorks () {
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'space-between', 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 gap: isMobile ? "10px" : undefined
}} }}
> >
@ -239,7 +240,7 @@ export default function HowItWorks () {
component={"img"} component={"img"}
src={Firstblock1} src={Firstblock1}
sx={{ sx={{
display: isMobile ? "none" : "block", display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '564px', width: '564px',
height: '360px', height: '360px',
@ -256,14 +257,14 @@ export default function HowItWorks () {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
borderRadius: '8px', borderRadius: '8px',
marginBottom: isMobile ? "26px" : "107px", marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
flexWrap: 'wrap', flexWrap: 'wrap',
boxSizing: "border-box" boxSizing: "border-box"
}} }}
> >
<Box <Box
sx={{ sx={{
width: isMobile ? undefined : '50%', width: isTablet ? undefined : '50%',
minHeight: '401px', minHeight: '401px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -293,7 +294,7 @@ export default function HowItWorks () {
display: 'flex', display: 'flex',
justifyContent: 'space-around', justifyContent: 'space-around',
flexDirection: 'column', flexDirection: 'column',
marginBottom: isMobile ? '23px' : '90px', marginBottom: isMobile ? '23px' : isTablet ? '15px' : '90px',
gap: isMobile ? 0 : "20px", gap: isMobile ? 0 : "20px",
marginTop: isMobile ? "7px" : undefined marginTop: isMobile ? "7px" : undefined
}} }}
@ -301,18 +302,18 @@ export default function HowItWorks () {
<Typography variant='h6' fontSize='36px'> <Typography variant='h6' fontSize='36px'>
Задаем вопросы Задаем вопросы
</Typography> </Typography>
<Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px":"444px" }} > <Typography fontSize='18px' sx={{maxWidth: isMobile ? "335px" : isTablet ? "100%" : "444px" }} >
Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
</Typography> </Typography>
</Box> </Box>
{isMobile && {isTablet &&
<Box <Box
component={"img"} component={"img"}
src={Firstblock2} src={Firstblock2}
sx={{ sx={{
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '302px', width: isMobile ? '302px' : '880px',
height: '193px', height: isMobile ? '193px': '561px',
borderRadius: '12px', borderRadius: '12px',
}} }}
/> />
@ -324,7 +325,7 @@ export default function HowItWorks () {
maxWidth: isMobile ? "245px" : "500px", maxWidth: isMobile ? "245px" : "500px",
height: '50%', height: '50%',
justifyContent: 'end', justifyContent: 'end',
marginTop: isMobile ? "40px" : undefined marginTop: isMobile ? "40px" : isTablet ? "35px" : undefined
}} }}
> >
<Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography> <Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography>
@ -354,7 +355,7 @@ export default function HowItWorks () {
component={"img"} component={"img"}
src={Firstblock2} src={Firstblock2}
sx={{ sx={{
display: isMobile ? "none" : "block", display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '564px', width: '564px',
height: '360px', height: '360px',
@ -370,14 +371,14 @@ export default function HowItWorks () {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
borderRadius: '8px', borderRadius: '8px',
marginBottom: isMobile ? "26px" : "107px", marginBottom: isMobile ? "26px" : (isTablet ? "60px" : "107px"),
flexWrap: 'wrap', flexWrap: 'wrap',
boxSizing: "border-box" boxSizing: "border-box"
}} }}
> >
<Box <Box
sx={{ sx={{
width: isMobile ? undefined : '50%', width: isTablet ? undefined : '50%',
height: '100%', height: '100%',
padding: '20px', padding: '20px',
gap: "10px", gap: "10px",
@ -405,21 +406,21 @@ export default function HowItWorks () {
justifyContent: 'space-around', justifyContent: 'space-around',
display: "flex", display: "flex",
flexDirection: 'column', flexDirection: 'column',
maxWidth: '388px', maxWidth: isTablet ? "100%" : '388px',
gap: "20px" gap: "20px"
}} }}
> >
<Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography> <Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography>
<Typography fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography> <Typography fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography>
</Box> </Box>
{isMobile && {isTablet &&
<Box <Box
component={"img"} component={"img"}
src={Firstblock3} src={Firstblock3}
sx={{ sx={{
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '302px', width: isMobile ? '302px' : '880px',
height: '193px', height: isMobile ? '193px': '561px',
borderRadius: '12px', borderRadius: '12px',
}} }}
/> />
@ -431,6 +432,7 @@ export default function HowItWorks () {
maxWidth: '497px', maxWidth: '497px',
minHeight: '50%', minHeight: '50%',
justifyContent: 'end', justifyContent: 'end',
marginTop: isMobile ? undefined : isTablet ? " 34px" : undefined
}} }}
> >
<Typography variant='h6' fontSize='20px'>точный показ результатов</Typography> <Typography variant='h6' fontSize='20px'>точный показ результатов</Typography>
@ -498,7 +500,7 @@ export default function HowItWorks () {
component={"img"} component={"img"}
src={Firstblock3} src={Firstblock3}
sx={{ sx={{
display: isMobile ? "none" : "block", display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '564px', width: '564px',
height: '360px', height: '360px',
@ -515,14 +517,14 @@ export default function HowItWorks () {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
borderRadius: '8px', borderRadius: '8px',
marginBottom: isMobile ? "25px" : "126px", marginBottom: isMobile ? "25px" : (isTablet ? "60px" : "126px"),
flexWrap: 'wrap', flexWrap: 'wrap',
boxSizing: "border-box" boxSizing: "border-box"
}} }}
> >
<Box <Box
sx={{ sx={{
width: isMobile ? undefined :'50%', width: isTablet ? undefined :'50%',
height: '100%', height: '100%',
padding: '20px', padding: '20px',
boxSizing: "border-box", boxSizing: "border-box",
@ -551,21 +553,21 @@ export default function HowItWorks () {
justifyContent: 'space-around', justifyContent: 'space-around',
display: "flex", display: "flex",
flexDirection: 'column', flexDirection: 'column',
maxWidth: '457px', maxWidth: isTablet ? "100%" :'457px',
marginTop: isMobile ? "-13px" : 0 marginTop: isMobile ? "-13px" : 0
}} }}
> >
<Typography variant='h6' fontSize='36px'>Узнаем контакт</Typography> <Typography variant='h6' fontSize='36px'>Узнаем контакт</Typography>
<Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography> <Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography>
</Box> </Box>
{isMobile && {isTablet &&
<Box <Box
component={"img"} component={"img"}
src={Firstblock4} src={Firstblock4}
sx={{ sx={{
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '302px', width: isMobile ? '302px' : '880px',
height: '193px', height: isMobile ? '193px': '561px',
borderRadius: '12px', borderRadius: '12px',
}} }}
/> />
@ -660,7 +662,7 @@ export default function HowItWorks () {
component={"img"} component={"img"}
src={Firstblock4} src={Firstblock4}
sx={{ sx={{
display: isMobile ? "none" : "block", display: isTablet ? "none" : "block",
backgroundColor: '#C8DADE', backgroundColor: '#C8DADE',
width: '564px', width: '564px',
height: '360px', height: '360px',

13
src/pages/Landing/HowToUse.tsx
View File

@ -123,6 +123,7 @@ function Quiz () {
export default function Component () { export default function Component () {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return ( return (
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
sxsect={{minHeight: '809px', alignItems: 'flex-start'}} sxsect={{minHeight: '809px', alignItems: 'flex-start'}}
@ -131,7 +132,7 @@ export default function Component () {
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
height: '100%', 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*/} {/*<Box*/}
@ -331,7 +332,7 @@ export default function Component () {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
flexWrap: 'wrap', 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', borderRadius: '12px',
marginTop: isMobile ? "35px" : "60px", marginTop: isMobile ? "35px" : "60px",
boxSizing: "border-box", boxSizing: "border-box",
@ -345,6 +346,7 @@ export default function Component () {
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-around', justifyContent: 'space-around',
paddingTop: '26px', paddingTop: '26px',
paddingLeft: isMobile ? undefined : isTablet ? '30px' : undefined
}} }}
> >
@ -353,7 +355,7 @@ export default function Component () {
</Typography> </Typography>
<Box <Box
sx={{ sx={{
maxWidth: '416px', maxWidth: isTablet ? '100%' : '416px',
marginTop: '19px', marginTop: '19px',
}} }}
> >
@ -368,7 +370,8 @@ export default function Component () {
<Box <Box
sx={{ sx={{
width: '100%', width: '100%',
maxWidth: '550px', maxWidth: isTablet ? '100%' : '550px',
marginTop: isMobile ? undefined : isTablet ? '42px' : undefined
}} }}
> >
<Box <Box
@ -376,7 +379,7 @@ export default function Component () {
src={BigBlock} src={BigBlock}
sx={{ sx={{
width: '100%', width: '100%',
height: isMobile ? '228px' : '418px', height: isMobile ? '228px' : isTablet ? '671px' : '418px',
backgroundColor: '#c8dade', backgroundColor: '#c8dade',
borderRadius: '12px', borderRadius: '12px',
}} }}

25
src/pages/Landing/Questions.tsx
View File

@ -7,15 +7,15 @@ import {styled} from "@mui/material/styles";
import {useMediaQuery, useTheme} from "@mui/material"; import {useMediaQuery, useTheme} from "@mui/material";
const BoxSpan = styled('div')(({ theme }) => ({ // const BoxSpan = styled('div')(({ theme }) => ({
[theme.breakpoints.down('lg')]: { // [theme.breakpoints.down('lg')]: {
alignItems: 'center', // alignItems: 'center',
justifyContent: 'center', // justifyContent: 'center',
textAlign: 'center', // textAlign: 'center',
paddingTop: '20px', // paddingTop: '20px',
width: '100%', // width: '100%',
}, // },
})); // }));
const BoxButtons = styled('div')(({ theme }) => ({ const BoxButtons = styled('div')(({ theme }) => ({
[theme.breakpoints.down('xs')]: { [theme.breakpoints.down('xs')]: {
@ -26,6 +26,7 @@ const BoxButtons = styled('div')(({ theme }) => ({
export default function Component() { export default function Component() {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
return( return(
<SectionStyled tag={'section'} bg={'#7E2AEA'} mwidth={'1160px'} <SectionStyled tag={'section'} bg={'#7E2AEA'} mwidth={'1160px'}
sxsect={{ sxsect={{
@ -36,7 +37,7 @@ export default function Component() {
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: isMobile ? '85px 16px 50px 16px' : 0, padding: isMobile ? '85px 16px 50px 16px' : isTablet ? "0 40px" : 0,
}}> }}>
<Box <Box
sx={{ sx={{
@ -104,7 +105,7 @@ export default function Component() {
</Button> </Button>
</BoxButtons> </BoxButtons>
</Box> </Box>
<BoxSpan <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'end', justifyContent: 'end',
@ -123,7 +124,7 @@ export default function Component() {
рекламный бюджет впустую и терять клиентов на сайте. рекламный бюджет впустую и терять клиентов на сайте.
</Typography> </Typography>
</Box> </Box>
</BoxSpan> </Box>
</SectionStyled> </SectionStyled>
) )
} }

21
src/pages/Landing/WhatTheFeatures.tsx
View File

@ -19,11 +19,6 @@ import {styled} from "@mui/material/styles";
// width: '100%', // width: '100%',
// }, // },
// })); // }));
const BoxCardHead = styled('div')(({ theme }) => ({
[theme.breakpoints.down('xs')]: {
flexDirection: 'column',
},
}));
interface Props { interface Props {
children: React.ReactNode; children: React.ReactNode;
image: string; image: string;
@ -32,10 +27,11 @@ interface Props {
function BoxFich(props: Props) { function BoxFich(props: Props) {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTabletOnly = useMediaQuery(theme.breakpoints.between(600, 1000))
return( return(
<Box <Box
sx={{ sx={{
maxWidth: '500px', maxWidth: isTabletOnly ? '801px' : '500px',
minHeight: '350px', minHeight: '350px',
backgroundColor: '#252734', backgroundColor: '#252734',
borderRadius: '12px', borderRadius: '12px',
@ -46,7 +42,7 @@ function BoxFich(props: Props) {
height: isMobile ? "450px" : undefined height: isMobile ? "450px" : undefined
}} }}
> >
<BoxCardHead <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
@ -55,11 +51,12 @@ function BoxFich(props: Props) {
padding: '20px', padding: '20px',
flexWrap: 'wrap', flexWrap: 'wrap',
boxSizing: "border-box", boxSizing: "border-box",
flexDirection: isTabletOnly ? "column" : "row",
gap: isMobile ? "16px" : undefined gap: isMobile ? "16px" : undefined
}} }}
> >
{props.children} {props.children}
</BoxCardHead> </Box>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -76,6 +73,8 @@ function BoxFich(props: Props) {
export default function Component () { export default function Component () {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600)); 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); const [open, setOpen] = useState(false);
return ( return (
@ -85,7 +84,7 @@ export default function Component () {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
minHeight: '2074px', minHeight: '2074px',
padding: isMobile ? "20px 16px 40px 16px" : "30px 0", padding: isMobile ? "20px 16px 40px 16px" : isTablet ? "30px 40px" : "30px 0",
color: '#ffffff', color: '#ffffff',
flexWrap: "wrap" flexWrap: "wrap"
}} }}
@ -126,7 +125,7 @@ export default function Component () {
</Typography> </Typography>
</Box> </Box>
<BoxFich image={Desktop1}> <BoxFich image={Desktop1}>
<Box maxWidth={'174px'}> <Box sx={{maxWidth: isTabletOnly ? '244px' : '174px'}}>
<Typography <Typography
sx={{ sx={{
color: '#7e2aea', color: '#7e2aea',
@ -145,7 +144,7 @@ export default function Component () {
}} }}
>Привязка к вашему домену</Typography> >Привязка к вашему домену</Typography>
</Box> </Box>
<Box maxWidth={'230px'}> <Box sx={{maxWidth: isTabletOnly ? '300px' : '230px'}}>
<Typography <Typography
sx={{ sx={{
fontSize: '18px', fontSize: '18px',

1
src/pages/Landing/headerMobileLanding.tsx
View File

@ -87,6 +87,7 @@ export default function FullScreenDialog({
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
svg: { color: "#000000" }, svg: { color: "#000000" },
padding: isMobile ? 0 : "0 22px 0 40px"
}} }}
> >
<Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}> <Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>