правки в адаптации главной, новый блок в фичах, кнопка пополнить в шапке
This commit is contained in:
Tamara
parent
a4e9788f9d
commit
28789fe5f2
@ -10,9 +10,8 @@ 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 Icon1 from "./images/icons/ABicon";
|
||||
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";
|
||||
@ -27,9 +26,7 @@ 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() {
|
||||
@ -61,7 +58,7 @@ export default function HowItWorks() {
|
||||
gap: isMobile ? "30px" : undefined,
|
||||
}}
|
||||
>
|
||||
<Box sx={{}}>
|
||||
<Box>
|
||||
<Typography variant="h6" fontSize="36px">
|
||||
Как это работает
|
||||
</Typography>
|
||||
@ -130,8 +127,7 @@ export default function HowItWorks() {
|
||||
src={Firstblock1}
|
||||
sx={{
|
||||
backgroundColor: "#C8DADE",
|
||||
width: isMobile ? undefined : "880px",
|
||||
height: isMobile ? undefined : "561px",
|
||||
width: isMobile ? undefined : "100%",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
/>
|
||||
@ -195,10 +191,10 @@ export default function HowItWorks() {
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "space-between",
|
||||
padding: isMobile
|
||||
? "10px 94px 0 0"
|
||||
? "10px 80px 0 0"
|
||||
: isTablet
|
||||
? "20px 76px 0 0"
|
||||
: "20px 94px 0 0",
|
||||
: "20px 80px 0 0",
|
||||
gap: isMobile ? "10px" : undefined,
|
||||
}}
|
||||
>
|
||||
@ -214,21 +210,7 @@ export default function HowItWorks() {
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<Typography fontSize="18px">А/Б тестирование</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -254,7 +236,6 @@ export default function HowItWorks() {
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
marginBottom: isMobile ? "26px" : isTablet ? "60px" : "107px",
|
||||
flexWrap: "wrap",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
@ -314,8 +295,7 @@ export default function HowItWorks() {
|
||||
src={Firstblock2}
|
||||
sx={{
|
||||
backgroundColor: "#C8DADE",
|
||||
width: isMobile ? undefined : "880px",
|
||||
height: isMobile ? undefined : "561px",
|
||||
width: isMobile ? undefined : "100%",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
/>
|
||||
@ -376,7 +356,6 @@ export default function HowItWorks() {
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
marginBottom: isMobile ? "26px" : isTablet ? "60px" : "107px",
|
||||
flexWrap: "wrap",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
@ -428,8 +407,7 @@ export default function HowItWorks() {
|
||||
src={Firstblock3}
|
||||
sx={{
|
||||
backgroundColor: "#C8DADE",
|
||||
width: isMobile ? undefined : "880px",
|
||||
height: isMobile ? undefined : "561px",
|
||||
width: isMobile ? undefined : "100%",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
/>
|
||||
@ -581,8 +559,7 @@ export default function HowItWorks() {
|
||||
src={Firstblock4}
|
||||
sx={{
|
||||
backgroundColor: "#C8DADE",
|
||||
width: isMobile ? undefined : "880px",
|
||||
height: isMobile ? undefined : "561px",
|
||||
width: isMobile ? undefined : "100%",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
/>
|
||||
@ -632,8 +609,8 @@ export default function HowItWorks() {
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Icon18 />
|
||||
<Typography fontSize="18px"> воронки и чат-боты</Typography>
|
||||
<Icon19 />
|
||||
<Typography fontSize="18px"> интеграция с CRM</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
@ -644,34 +621,7 @@ export default function HowItWorks() {
|
||||
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>
|
||||
<Box
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import { Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { SxProps, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import SectionStyled from "./SectionStyled";
|
||||
import Button from "@mui/material/Button";
|
||||
// import Desktop from '../../assets/LandingPict/Desktop.png';
|
||||
@ -27,12 +27,12 @@ function BoxFich(props: Props) {
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: isTabletOnly ? "801px" : "500px",
|
||||
minHeight: "350px",
|
||||
minHeight: isTabletOnly ? "252px" : "350px",
|
||||
backgroundColor: "#252734",
|
||||
borderRadius: "12px",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexDirection: isTabletOnly ? "row" : "column",
|
||||
justifyContent: isMobile ? "space-between" : undefined,
|
||||
height: isMobile ? "450px" : undefined,
|
||||
...props.sx,
|
||||
@ -47,8 +47,8 @@ function BoxFich(props: Props) {
|
||||
padding: "20px",
|
||||
flexWrap: "wrap",
|
||||
boxSizing: "border-box",
|
||||
flexDirection: isTabletOnly ? "column" : "row",
|
||||
gap: isMobile ? "16px" : undefined,
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
@ -72,34 +72,25 @@ export default function Component() {
|
||||
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(true);
|
||||
|
||||
return (
|
||||
<SectionStyled
|
||||
tag={"section"}
|
||||
bg={"#333647"}
|
||||
mwidth={"1160px"}
|
||||
sxsect={{ minHeight: "2074px" }}
|
||||
sxcont={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
minHeight: "2074px",
|
||||
padding: isMobile
|
||||
? "20px 16px 40px 16px"
|
||||
: isTablet
|
||||
? "30px 40px"
|
||||
: "30px 20px",
|
||||
|
||||
padding: isMobile ? "70px 16px" : isTablet ? "80px 40px" : "80px 0",
|
||||
color: "#ffffff",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{/*левая колонка*/}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: isMobile ? "25px" : "120px",
|
||||
paddingTop: "46px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -130,298 +121,96 @@ export default function Component() {
|
||||
Самый функциональный конструктор квизов
|
||||
</Typography>
|
||||
</Box>
|
||||
<BoxFich image={Desktop1}>
|
||||
<Box sx={{ maxWidth: isTabletOnly ? "244px" : "174px" }}>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: isTablet ? "column-reverse" : "row",
|
||||
justifyContent: "space-between",
|
||||
gap: "50px",
|
||||
maxWidth: "1160px",
|
||||
minHeight: "500px",
|
||||
p: isTablet ? "40px 20px 40px" : "40px",
|
||||
background: "#262835",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
maxWidth: isTablet ? "880px" : "554px",
|
||||
width: "100%",
|
||||
maxHeight: isTablet ? "666px" : "420px",
|
||||
height: "100%",
|
||||
}}
|
||||
src={LandingImg}
|
||||
alt="img"
|
||||
/>
|
||||
<Box sx={{ maxWidth: "461px", width: "100%" }}>
|
||||
<Typography
|
||||
variant={"h3"}
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontSize: "36px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
lineHeight: "normal",
|
||||
}}
|
||||
>
|
||||
01
|
||||
Удобный конструктор ветвления
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
Привязка к вашему домену
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ maxWidth: isTabletOnly ? "300px" : "230px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
}}
|
||||
>
|
||||
Привяжите квиз к своему брендовому домену и получайте максимальную
|
||||
отдачу от каждой заявки
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich image={Desktop2}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
03
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
Аналитика
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={"230px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
m: isTablet ? "20px 0 40px" : "20px 0 98px",
|
||||
color: "#ffffffb3",
|
||||
}}
|
||||
>
|
||||
Внутренняя аналитика считает конверсию квиза на каждом шаге,
|
||||
показывает развернутую статистику по ответам и пользователям
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich image={Desktop3}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
05
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
Режим анкетирования
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={"230px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
}}
|
||||
>
|
||||
Самый удобный инструмент для проведения исследований аудитории,
|
||||
больше вас не сдерживают никакие ограничения.
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich image={Desktop4}>
|
||||
<Box maxWidth={"226px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
07
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
Интерактивные тесты
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={"234px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
}}
|
||||
>
|
||||
Тест увеличит вовлеченность аудитории, покажет правильные или
|
||||
неправильные ответы и все это в игровой форме
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
</Box>
|
||||
{/*правая колонка*/}
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
paddingTop: isMobile ? "25px" : "106px",
|
||||
gap: isMobile ? "25px" : "113px",
|
||||
alignItems: "end",
|
||||
}}
|
||||
>
|
||||
<BoxFich image={Desktop5}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Button
|
||||
variant={"contained"}
|
||||
sx={{
|
||||
width: "124px",
|
||||
height: "30px",
|
||||
padding: "4px 8px",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
Как использовать
|
||||
</Button>
|
||||
|
||||
<Box sx={{ mt: "28px" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
sx={{ color: "#9A9AAF", fontSize: "18px", mb: "5px" }}
|
||||
>
|
||||
02
|
||||
1. Перетащите вопрос из списка в карту ветвления
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
Повышение конверсии
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "18px" }}>
|
||||
2. Добавьте условия{" "}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={"233px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
}}
|
||||
>
|
||||
Конверсию можно увеличить, добавив тающую скидку, консультанта с
|
||||
подсказками или бонус, который пользователь получит в конце
|
||||
квиза
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich image={Desktop6}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
04
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
Расширенеие настройки дизайна
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={"230px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
}}
|
||||
>
|
||||
Настройте цвета, шрифт и выберите формат стартовой страницы,
|
||||
чтобы сделать свой квиз уникальным
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich image={Desktop7}>
|
||||
<Box maxWidth={"220px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
06
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28.44px",
|
||||
}}
|
||||
>
|
||||
А/Б тестирование
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box maxWidth={"230px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21px",
|
||||
}}
|
||||
>
|
||||
Без программистов и сложных настроек - создавайте разные версии
|
||||
квизов и сравнивайте их эффективность прямо внутри Опросника
|
||||
</Typography>
|
||||
</Box>
|
||||
</BoxFich>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: "500px",
|
||||
minHeight: "390px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
padding: isMobile
|
||||
? "40px 0 0 0"
|
||||
: isTablet
|
||||
? "70px 22px 0 20px"
|
||||
: "217px 22px 0 20px",
|
||||
gap: isMobile ? "25px" : isTablet ? "40px" : "45px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: isMobile ? "column-reverse" : "column",
|
||||
gap: "47px",
|
||||
flexDirection: isTablet ? "column" : "-moz-initial",
|
||||
gap: isMobile ? "25px" : isTablet ? "40px" : "45px",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
==== BASE ====
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "18px" }}>
|
||||
Другие преимущества:
|
||||
</Typography>
|
||||
@ -463,7 +252,7 @@ export default function Component() {
|
||||
</BoxFich>
|
||||
</Box>
|
||||
<BoxFich sx={{ ml: isTablet ? "auto" : "0" }} image={Desktop5}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Box maxWidth={"174px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
@ -511,7 +300,7 @@ export default function Component() {
|
||||
}}
|
||||
>
|
||||
<BoxFich sx={{ mt: isTablet ? "0" : "75px" }} image={Desktop2}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Box maxWidth={"174px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
@ -547,7 +336,7 @@ export default function Component() {
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich sx={{ ml: isTablet ? "auto" : "0" }} image={Desktop6}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Box maxWidth={"174px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
@ -594,7 +383,7 @@ export default function Component() {
|
||||
}}
|
||||
>
|
||||
<BoxFich sx={{ mt: isTablet ? "0" : "75px" }} image={Desktop3}>
|
||||
<Box maxWidth={"227px"}>
|
||||
<Box maxWidth={"174px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
@ -630,7 +419,7 @@ export default function Component() {
|
||||
</Box>
|
||||
</BoxFich>
|
||||
<BoxFich sx={{ ml: isTablet ? "auto" : "0" }} image={Desktop7}>
|
||||
<Box maxWidth={"220px"}>
|
||||
<Box maxWidth={"174px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
@ -679,7 +468,7 @@ export default function Component() {
|
||||
}}
|
||||
>
|
||||
<BoxFich image={Desktop4}>
|
||||
<Box maxWidth={"226px"}>
|
||||
<Box maxWidth={"174px"}>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#7e2aea",
|
||||
@ -716,29 +505,28 @@ export default function Component() {
|
||||
</BoxFich>
|
||||
|
||||
<Box sx={{ maxWidth: "500px", minHeight: "350px" }}>
|
||||
{isMobile && (
|
||||
<Button
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "44px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #FFF",
|
||||
color: "white",
|
||||
mb: "40px",
|
||||
background: "transparent",
|
||||
}}
|
||||
>
|
||||
Все возможности сервиса
|
||||
</Button>
|
||||
)}
|
||||
==== BASE ====
|
||||
{/*{isMobile && (*/}
|
||||
{/* <Button*/}
|
||||
{/* sx={{*/}
|
||||
{/* width: "100%",*/}
|
||||
{/* height: "44px",*/}
|
||||
{/* borderRadius: "8px",*/}
|
||||
{/* border: "1px solid #FFF",*/}
|
||||
{/* color: "white",*/}
|
||||
{/* mb: "40px",*/}
|
||||
{/* background: "transparent",*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* Все возможности сервиса*/}
|
||||
{/* </Button>*/}
|
||||
{/*)}*/}
|
||||
<Typography
|
||||
variant={"h6"}
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontWeight: "500",
|
||||
lineHeight: "28px",
|
||||
width: "60%",
|
||||
lineHeight: "normal",
|
||||
maxWidth: "293px",
|
||||
}}
|
||||
>
|
||||
Первые 14 дней бесплатно
|
||||
@ -747,37 +535,50 @@ export default function Component() {
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "21.33px",
|
||||
marginTop: "32px",
|
||||
lineHeight: "21px",
|
||||
m: "20px 0 30px",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Пробуйте, экспериментируйте, а наша отзывчивая техническая
|
||||
поддержка поможет и проконсультирует в любой момент, больше вы
|
||||
не останетесь 1 на 1 со своими проблемами.
|
||||
</Typography>
|
||||
</Box>
|
||||
{/*<Button variant="outlined"*/}
|
||||
{/* onClick={() => setOpen((isOpened) => !isOpened)}*/}
|
||||
{/* sx={{*/}
|
||||
{/* textTransform: 'none',*/}
|
||||
{/* color: '#ffffff',*/}
|
||||
{/* backgroundColor: 'transparent',*/}
|
||||
{/* fontSize: '18px',*/}
|
||||
{/* borderRadius: '8px',*/}
|
||||
{/* borderColor: '#ffffff',*/}
|
||||
{/* }}*/}
|
||||
{/*>Все возможности сервиса</Button>*/}
|
||||
</Box>
|
||||
{/*<Button variant="contained"*/}
|
||||
{/* sx={{*/}
|
||||
{/* textTransform: 'none',*/}
|
||||
{/* fontSize: '18px',*/}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "30px",
|
||||
p: "20px 0 20px",
|
||||
}}
|
||||
>
|
||||
{/*{!isMobile && (*/}
|
||||
{/* <Button*/}
|
||||
{/* sx={{*/}
|
||||
{/* width: "278px",*/}
|
||||
{/* height: "44px",*/}
|
||||
{/* borderRadius: "8px",*/}
|
||||
{/* border: "1px solid #FFF",*/}
|
||||
{/* color: "white",*/}
|
||||
{/* background: "transparent",*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* Все возможности сервиса*/}
|
||||
{/* </Button>*/}
|
||||
{/*)}*/}
|
||||
|
||||
{/* borderRadius: '8px',*/}
|
||||
{/* padding: '10px 32px',*/}
|
||||
{/* marginTop: '27px',*/}
|
||||
{/* }}>*/}
|
||||
{/* Создать квиз</Button>*/}
|
||||
<Button
|
||||
variant={"contained"}
|
||||
sx={{
|
||||
width: "180px",
|
||||
height: "44px",
|
||||
}}
|
||||
>
|
||||
Создать квиз
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</SectionStyled>
|
||||
|
||||
36
src/pages/Landing/images/icons/ABicon.tsx
Normal file
36
src/pages/Landing/images/icons/ABicon.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export default function ({ color }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "36px",
|
||||
width: "36px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 36 36"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="36" height="36" rx="6" fill="#7E2AEA" />
|
||||
<path
|
||||
d="M9 23.1154V16.5385C9 15.7632 9.31607 15.0197 9.87868 14.4715C10.4413 13.9234 11.2044 13.6154 12 13.6154C12.7956 13.6154 13.5587 13.9234 14.1213 14.4715C14.6839 15.0197 15 15.7632 15 16.5385V23.1154M9 19.4615H15M24.75 18H21M24.75 18C25.3467 18 25.919 17.769 26.341 17.3579C26.7629 16.9468 27 16.3891 27 15.8077C27 15.2263 26.7629 14.6686 26.341 14.2575C25.919 13.8464 25.3467 13.6154 24.75 13.6154H21V18M24.75 18C25.3467 18 25.919 18.231 26.341 18.6421C26.7629 19.0532 27 19.6109 27 20.1923C27 20.7737 26.7629 21.3314 26.341 21.7425C25.919 22.1536 25.3467 22.3846 24.75 22.3846H21V18M18 8.5V27.5"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -252,7 +252,7 @@ export const Footer = ({
|
||||
if (nextQuestion && nextQuestion.type !== "result") {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
} else {
|
||||
showResult(questions.find(q => q.content.rule.parentId === "line"));
|
||||
showResult(questions.find((q) => q.content.rule.parentId === "line"));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@ -122,25 +122,22 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
|
||||
sx={{
|
||||
display: "flex",
|
||||
ml: "auto",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{isMobile ? (
|
||||
<Burger
|
||||
onClick={() => setMobileSidebar((visible: boolean) => !visible)}
|
||||
style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
|
||||
/>
|
||||
<>
|
||||
<ToTariffsButton color={"#F2F3F7"} />
|
||||
<Burger
|
||||
onClick={() => setMobileSidebar((visible: boolean) => !visible)}
|
||||
style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
ml: "auto",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<ToTariffsButton color={"#7e2aea"} />
|
||||
<LogoutButton onClick={handleLogoutClick} />
|
||||
</Box>
|
||||
<ToTariffsButton color={"#7e2aea"} />
|
||||
<LogoutButton onClick={handleLogoutClick} />
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@ -206,7 +206,6 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<ToTariffsButton color={"#F2F3F7"} />
|
||||
</Box>
|
||||
<Box
|
||||
aria-describedby={id}
|
||||
|
||||
@ -86,7 +86,7 @@ export default function QuizPreviewLayout() {
|
||||
/>
|
||||
)}
|
||||
<Typography
|
||||
data-cy="company"
|
||||
data-cy="company"
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color:
|
||||
@ -116,7 +116,7 @@ export default function QuizPreviewLayout() {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
data-cy="heading"
|
||||
data-cy="heading"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
color:
|
||||
@ -128,7 +128,7 @@ export default function QuizPreviewLayout() {
|
||||
{quiz.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
data-cy="text"
|
||||
data-cy="text"
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color:
|
||||
@ -182,7 +182,7 @@ export default function QuizPreviewLayout() {
|
||||
)
|
||||
) : (
|
||||
<Typography
|
||||
data-cy="phonenumber"
|
||||
data-cy="phonenumber"
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color:
|
||||
@ -195,7 +195,7 @@ export default function QuizPreviewLayout() {
|
||||
</Typography>
|
||||
)}
|
||||
<Typography
|
||||
data-cy="legalInformation"
|
||||
data-cy="legalInformation"
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user