SQuiz/frontPanel
2
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity
720afdd045
frontPanel/src/pages/Landing/HowToUse.tsx

419 lines
14 KiB
TypeScript
Raw Normal View History

формат кода
2023-12-31 02:53:25 +00:00
import React from "react";
import Box from "@mui/material/Box";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionStyled from "./SectionStyled";
import Link from "@mui/material/Link";
import { styled } from "@mui/material/styles";
правки картинок по новому макету
2023-10-07 07:09:00 +00:00
import Notebook from "../../assets/LandingPict/notebook";
import BigBlock from "./images/bigblock.png";
главная
2023-10-04 22:21:17 +00:00
import Button from "@mui/material/Button";
// import Note from './image/note.png'
формат кода
2023-12-31 02:53:25 +00:00
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
главная
2023-10-04 22:21:17 +00:00
// import CalendarW from './image/calendar-W.svg'
// import CalendarP from './image/calendar-P.svg'
import CalendarIcon from "../../assets/LandingPict/calendarIcon";
новые текста + мобильная адаптация лендинга
2023-10-10 22:22:03 +00:00
// 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'
// },
// }));
главная
2023-10-04 22:21:17 +00:00
формат кода
2023-12-31 02:53:25 +00:00
const BoxQuiz = styled("div")(({ theme }) => ({
[theme.breakpoints.down("md")]: {
maxWidth: "530px",
},
главная
2023-10-04 22:21:17 +00:00
}));
формат кода
2023-12-31 02:53:25 +00:00
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() {
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" }}
sxcont={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "100%",
padding: isMobile
? "70px 16px 70px 16px"
: isTablet
? "16px 40px 50px 40px"
: "81px 0 50px 0",
}}
>
{/*<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",
maxWidth: isMobile ? "273px" : undefined,
}}
>
<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: isMobile
? "0 27px 22px 20px"
: isTablet
? "20px"
: "22px 22px 22px 50px",
borderRadius: "12px",
marginTop: isMobile ? "35px" : "60px",
boxSizing: "border-box",
boxShadow:
"0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
}}
>
<Box
главная
2023-10-04 22:21:17 +00:00
sx={{
формат кода
2023-12-31 02:53:25 +00:00
height: "70%",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
paddingTop: "26px",
paddingLeft: isMobile ? undefined : isTablet ? "30px" : undefined,
главная
2023-10-04 22:21:17 +00:00
}}
формат кода
2023-12-31 02:53:25 +00:00
>
<Typography
variant="h6"
fontSize={"36px"}
lineHeight={"42.66px"}
maxWidth={"455px"}
главная
2023-10-04 22:21:17 +00:00
>
формат кода
2023-12-31 02:53:25 +00:00
Исследуйте аудиторию и проверяйте гипотезы
</Typography>
главная
2023-10-04 22:21:17 +00:00
<Box
формат кода
2023-12-31 02:53:25 +00:00
sx={{
maxWidth: isTablet ? "100%" : "416px",
marginTop: "19px",
}}
главная
2023-10-04 22:21:17 +00:00
>
формат кода
2023-12-31 02:53:25 +00:00
<Typography
fontSize={"18px"}
lineHeight={"21px"}
color={"#4D4D4D"}
>
Опросник помогает проверять гипотезы и принимать грамотные
решения основанные на данных. Создавайте опросы, собирайте
обратную связь и анализируйте ответы в удобной аналитике в
личном кабинете.
</Typography>
главная
2023-10-04 22:21:17 +00:00
</Box>
формат кода
2023-12-31 02:53:25 +00:00
</Box>
<Box
sx={{
width: "100%",
maxWidth: isTablet ? "100%" : "550px",
marginTop: isMobile ? undefined : isTablet ? "42px" : undefined,
}}
>
главная
2023-10-04 22:21:17 +00:00
<Box
формат кода
2023-12-31 02:53:25 +00:00
component={"img"}
src={BigBlock}
sx={{
width: "100%",
height: isMobile ? "228px" : isTablet ? "671px" : "418px",
backgroundColor: "#c8dade",
borderRadius: "12px",
}}
/>
</Box>
</Box>
</Box>
</SectionStyled>
);
главная
2023-10-04 22:21:17 +00:00
}
Reference in New Issue Copy Permalink