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

feat: new design

Browse Source
This commit is contained in:
IlyaDoronin 2024-04-25 17:53:43 +03:00
parent 3751614acf
commit ffba0c8d04
14 changed files with 200 additions and 763 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/Landing/Collaboration.tsx
View File

@ -6,25 +6,17 @@ import PenaLogoOnly from "./images/icons/PenaLogoOnly";
export default function Collaboration() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isTablet = useMediaQuery(theme.breakpoints.down(770));
return (
<SectionStyled
tag={"section"}
bg={"#262835"}
mwidth={"1160px"}
sxsect={{
height: isMobile ? "598px" : "369px",
}}
mwidth={"1240px"}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
padding: isMobile
? "30px 16px 0 16px"
: isTablet
? "0px 40px 0 40px"
: 0,
marginBottom: isMobile ? "55px" : 0,
padding: isMobile ? "50px 16px" : "80px 40px",
flexDirection: "column",
gap: "25px",
}}
@ -44,12 +36,12 @@ export default function Collaboration() {
>
Совместный проект
</Typography>
<Box sx={{ display: "flex", gap: isMobile ? "16px" : "25px" }}>
<SmiLogo width={isMobile ? 151 : 240} />
<Box sx={{ display: "flex", gap: isTablet ? "16px" : "25px" }}>
<SmiLogo width={isTablet ? 151 : 240} />
<Typography variant="h6" fontSize="36px" color="white">
и
</Typography>
<PenaLogoOnly width={isMobile ? 90 : 138} />
<PenaLogoOnly width={isTablet ? 90 : 138} />
</Box>
</Box>
<Box sx={{ maxWidth: "712px" }}>

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

@ -19,6 +19,7 @@ export default function Counter() {
boxSizing: "border-box",
padding: isTablet ? "0 40px" : "0 20px",
backgroundColor: "#333647",
paddingBottom: "60px",
}}
>
<Box

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

@ -36,7 +36,7 @@ export default function Component() {
sx={{
display: "flex",
height: "50%",
alignItems: "center",
alignItems: "flex-start",
width: "100%",
flexWrap: "wrap",
gap: isMobile ? "65px" : "120px",
@ -132,19 +132,6 @@ export default function Component() {
>
Пользовательское соглашение
</Button>
<Button
variant="text"
sx={{
fontSize: "16px",
fontWeight: 500,
color: "white",
justifyContent: "start",
}}
href={"https://hub.pena.digital/docs/privacy"}
target="_blank"
>
Политика конфиденциальности
</Button>
</Box>
</Box>
</Box>

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

@ -1,7 +1,8 @@
import React from "react";
import Box from "@mui/material/Box";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import { Typography, Box, useMediaQuery, useTheme } from "@mui/material";
import { Link } from "react-router-dom";
import SectionStyled from "./SectionStyled";
import OneIconBorder from "@icons/OneIconBorder";
import TwoIcon from "./images/icons/IconNumber2";
import ThreeIcon from "./images/icons/IconNumber3";
@ -28,6 +29,7 @@ import Icon16 from "./images/icons/Group149";
import Icon17 from "./images/icons/Group151";
import Icon19 from "./images/icons/Group153";
import Icon21 from "./images/icons/Network";
import YoutubeButton from "./images/icons/YoutubeButton";
export default function HowItWorks() {
const theme = useTheme();
@ -62,7 +64,22 @@ export default function HowItWorks() {
<Typography variant="h6" fontSize="36px">
Как это работает
</Typography>
<Typography fontSize="18px">Квиз как диалог</Typography>
<Typography sx={{ marginTop: "10px" }}>Квиз как диалог</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
flexDirection: isMobile ? "row-reverse" : "row",
}}
>
<Typography sx={{ maxWidth: "140px" }}>
Видео о квизах 2 мин
</Typography>
<Link to="https://www.youtube.com/" target="_blank">
<YoutubeButton width={isMobile ? 75 : 120} />
</Link>
</Box>
</Box>
<Box
@ -576,6 +593,7 @@ export default function HowItWorks() {
sx={{
display: "flex",
flexDirection: "column",
flexWrap: "wrap",
maxWidth: "520px",
height: "50%",
justifyContent: "end",
@ -583,7 +601,7 @@ export default function HowItWorks() {
}}
>
<Typography variant="h6" fontSize="20px">
Максимальная конверсия
что можно делать на последнем шаге
</Typography>
<Box
sx={{
@ -591,48 +609,59 @@ export default function HowItWorks() {
justifyContent: "space-between",
padding: "20px 20px 0 0",
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined,
gap: "15px",
flexWrap: "wrap",
}}
>
<Box
sx={{
display: "flex",
justifyContent: isMobile ? "start" : "space-between",
alignItems: "center",
flexBasis: isMobile ? 0 : "235px",
padding: "0",
flexWrap: "wrap",
gap: "15px",
}}
>
<Icon17 />
<Typography fontSize="18px"> сбор контактов</Typography>
<Typography fontSize="18px">сбор контактов</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: isMobile ? "start" : "space-between",
alignItems: "center",
flexBasis: isMobile ? 0 : "235px",
padding: "0",
flexWrap: "wrap",
gap: "15px",
}}
>
<Icon19 />
<Typography fontSize="18px">
{" "}
интеграция с CRM<br></br>(в разработке)
</Typography>
</Box>
<Typography fontSize="18px">воронки и чат-боты</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
padding: "20px 79px 0 0",
flexDirection: isMobile ? "column" : "row",
gap: isMobile ? "15px" : undefined,
alignItems: "center",
flexBasis: isMobile ? 0 : "235px",
padding: "0",
gap: "15px",
}}
></Box>
>
<Icon17 />
<Typography fontSize="18px">интеграция с CRM</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
flexBasis: isMobile ? 0 : "235px",
padding: "0",
gap: "15px",
}}
>
<Icon19 />
<Typography fontSize="18px">прием оплат</Typography>
</Box>
</Box>
</Box>
</Box>
<Box

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

@ -6,10 +6,6 @@ import Link from "@mui/material/Link";
import { styled } from "@mui/material/styles";
import Notebook from "../../assets/LandingPict/notebook";
import BigBlock from "./images/bigblock.png";
import businessTasks2 from "./images/businessTasks2.png";
import businessTasks3 from "./images/businessTasks3.png";
import businessTasks4 from "./images/businessTasks4.png";
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";
@ -20,8 +16,7 @@ import { PieСhartIcon } from "@icons/PieСhartIcon";
import { SegmentationIcon } from "@icons/SegmentationIcon";
import { TestingIcon } from "@icons/TestingIcon";
import { EcommerceIcon } from "@icons/EcommerceIcon";
import { DesktopQuizCard } from "./DesktopQuizCard";
import { MobileQuizCard } from "./MobileQuizCard";
import { QuizCard } from "./QuizCard";
// const BoxUse = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('md')]: {
@ -50,24 +45,6 @@ const businessTasks = {
text: "Опросник помогает проверять гипотезы и принимать грамотные решения основанные на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы в удобной аналитике в личном кабинете. ",
image: BigBlock,
},
segmentation: {
header:
"Лучше узнайте свою аудиторию, сегментируйте и собирайте заявки с помощью квиза",
text: "Квиз легко создать самому за 10 минут: настроить логику вопросов, результаты и получить готовую ссылку.",
image: businessTasks2,
},
testing: {
header:
"Создавайте интерактивные тесты, показывайте правильные и неправильные ответы",
text: "Тест в игровой форме увеличит вовлеченность пользователей. Создать его легко: задайте вопрос и отметьте правильные варианты ответов.",
image: businessTasks3,
},
eсommerce: {
header:
"Консультируйте клиентов по ассортименту и помогите определиться с выбором",
text: "Тест в игровой форме увеличит вовлеченность пользователей. Создать его легко: задайте вопрос и отметьте правильные варианты ответов.",
image: businessTasks4,
},
};
function Quiz() {
@ -162,15 +139,12 @@ export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const [task, setTask] = useState<
"research" | "segmentation" | "testing" | "eсommerce"
>("research");
const [open, setOpen] = useState<boolean>(false);
return (
<SectionStyled
tag={"section"}
bg={"#f2f3f7"}
mwidth={"1160px"}
mwidth={"1200px"}
sxsect={{
minHeight: isMobile ? "auto" : "809px",
alignItems: "flex-start",
@ -183,93 +157,10 @@ export default function Component() {
padding: isMobile
? "70px 16px 70px 16px"
: isTablet
? "16px 40px 50px 40px"
: "81px 0 50px 0",
? "16px 20px 50px"
: "81px 20px 50px",
}}
>
{/*<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%",
@ -278,14 +169,7 @@ export default function Component() {
justifyContent: "space-around",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "16px",
maxWidth: isMobile ? "273px" : undefined,
}}
>
<Box sx={{ display: "flex", flexDirection: "column", gap: "16px" }}>
<Typography
variant="h6"
fontSize={"36px"}
@ -298,276 +182,12 @@ export default function Component() {
Изящное решение исследовательских и бизнес-задач
</Typography>
</Box>
{!isTablet && (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
gap: "20px",
marginTop: "60px",
}}
>
<Button
onClick={() => setTask("research")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
alignItems: "center",
gap: "15px",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "research" ? "white" : "#7e2aea",
color: task !== "research" ? "black" : "#ffffff",
"&:hover": {
backgroundColor: task === "research" ? "#581CA7" : "#e9eaed",
},
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "research" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<PieСhartIcon
style={{
color: task !== "research" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>Исследования</Typography>
</Button>
<Button
onClick={() => setTask("segmentation")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "segmentation" ? "white" : "#7e2aea",
color: task !== "segmentation" ? "black" : "#ffffff",
"&:hover": {
backgroundColor:
task === "segmentation" ? "#581CA7" : "#e9eaed",
},
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "segmentation" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<SegmentationIcon
style={{
color: task !== "segmentation" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>Сегментация</Typography>
</Button>
<Button
onClick={() => setTask("testing")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "testing" ? "white" : "#7e2aea",
color: task !== "testing" ? "black" : "#ffffff",
"&:hover": {
backgroundColor: task === "testing" ? "#581CA7" : "#e9eaed",
},
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "testing" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<TestingIcon
style={{
color: task !== "testing" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>Тестирование</Typography>
</Button>
<Button
onClick={() => setTask("eсommerce")}
sx={{
width: "275px",
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea",
color: task !== "eсommerce" ? "black" : "#ffffff",
"&:hover": {
backgroundColor: task === "eсommerce" ? "#581CA7" : "#e9eaed",
},
}}
>
<Box
sx={{
borderRadius: "8px",
minWidth: "36px",
height: "36px",
background: task !== "eсommerce" ? "#7E2AEA" : "white",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
<EcommerceIcon
style={{
color: task !== "eсommerce" ? "white" : "#7E2AEA",
fontSize: "24px",
}}
/>
</Box>
<Typography>E-commerce</Typography>
</Button>
</Box>
)}
{isTablet ? (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "30px",
mt: isMobile ? "40px" : "50px",
}}
>
<MobileQuizCard
header={businessTasks.research.header}
image={businessTasks.research.image}
text={businessTasks.research.text}
textIcon="Исследования"
icon={
<PieСhartIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
<MobileQuizCard
header={businessTasks.segmentation.header}
image={businessTasks.segmentation.image}
text={businessTasks.segmentation.text}
textIcon="Сегментация"
icon={
<SegmentationIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
<MobileQuizCard
header={businessTasks.testing.header}
image={businessTasks.testing.image}
text={businessTasks.testing.text}
textIcon="Тестирование"
icon={
<TestingIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
<MobileQuizCard
header={businessTasks.eсommerce.header}
image={businessTasks.eсommerce.image}
text={businessTasks.eсommerce.text}
textIcon="E-commerce"
icon={
<EcommerceIcon
style={{
color: "white",
fontSize: "24px",
}}
/>
}
/>
</Box>
) : (
<>
<DesktopQuizCard
isOpen={task === "research"}
<QuizCard
header={businessTasks.research.header}
image={businessTasks.research.image}
text={businessTasks.research.text}
/>
<DesktopQuizCard
isOpen={task === "segmentation"}
header={businessTasks.segmentation.header}
image={businessTasks.segmentation.image}
text={businessTasks.segmentation.text}
/>
<DesktopQuizCard
isOpen={task === "testing"}
header={businessTasks.testing.header}
image={businessTasks.testing.image}
text={businessTasks.testing.text}
/>
<DesktopQuizCard
isOpen={task === "eсommerce"}
header={businessTasks.eсommerce.header}
image={businessTasks.eсommerce.image}
text={businessTasks.eсommerce.text}
/>
</>
)}
</Box>
</SectionStyled>
);

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

@ -47,7 +47,7 @@ export default function Landing() {
<Header />
<Hero />
<Counter />
{/* <Collaboration/> */}
<Collaboration />
<HowItWorks />
<BusinessPluses />
<HowToUse />
@ -55,7 +55,7 @@ export default function Landing() {
{/*<StartWithTemplates/>*/}
<WhatTheFeatures />
{/*<Blog/>*/}
{/*<Questions/>*/}
<Questions />
<Footer />
</>
);

131
src/pages/Landing/MobileQuizCard.tsx
View File

@ -1,131 +0,0 @@
import {
Box,
Slide,
Typography,
useMediaQuery,
useTheme,
Zoom,
} from "@mui/material";
import { FC, ReactNode, useRef, useState } from "react";
interface Iprops {
header: string;
image: string;
text: string;
textIcon: string;
icon: ReactNode;
}
export const MobileQuizCard: FC<Iprops> = ({
header,
image,
text,
icon,
textIcon,
}) => {
const [isOpen, setIsOpen] = useState(false);
const containerRef = useRef<HTMLElement>(null);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const handleChange = () => {
setIsOpen((prev) => !prev);
};
return (
<Box
ref={containerRef}
onClick={handleChange}
sx={{
width: "100%",
minHeight: isOpen ? "462px" : "auto",
backgroundColor: "#ffffff",
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: isMobile ? "15px" : "20px",
borderRadius: "12px",
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
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
}}
>
<Box
sx={{
borderRadius: "8px",
width: "36px",
height: "36px",
background: "#7E2AEA",
display: " flex",
justifyContent: "center",
alignItems: "center",
}}
>
{icon}
</Box>
<Typography>{textIcon}</Typography>
</Box>
{isOpen && (
<Box
sx={{
height: "70%",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
mt: "14px",
}}
>
<Box>
<Typography
variant="h6"
fontSize={isMobile ? "24px" : "36px"}
lineHeight={isMobile ? "normal" : "42.66px"}
maxWidth={"491px"}
>
{header}
</Typography>
<Box
sx={{
maxWidth: "100%",
marginTop: "20px",
}}
>
<Typography
fontSize={"18px"}
lineHeight={"21px"}
color={"#4D4D4D"}
>
{text}
</Typography>
</Box>
</Box>
<Box
sx={{
width: "100%",
maxWidth: "100%",
marginTop: "30px",
}}
>
<Box
component={"img"}
src={image}
sx={{
width: "100%",
height: isMobile ? "228px" : "671px",
backgroundColor: "#c8dade",
borderRadius: "12px",
}}
/>
</Box>
</Box>
)}
</Box>
);
};

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

@ -30,24 +30,18 @@ export default function Component() {
<SectionStyled
tag={"section"}
bg={"#7E2AEA"}
mwidth={"1160px"}
sxsect={{
minHeight: "350px",
}}
mwidth={"1200px"}
sxsect={{ minHeight: "350px" }}
sxcont={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
justifyContent: isTablet ? "center" : "space-between",
alignItems: "center",
padding: isMobile ? "85px 16px 50px 16px" : isTablet ? "0 40px" : 0,
gap: "20px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
}}
>
<Box sx={{ display: "flex", flexDirection: "column", padding: "0 20px" }}>
<Typography
variant="h1"
color={"#FFFFFF"}
@ -71,13 +65,14 @@ export default function Component() {
display: "flex",
flexWrap: "wrap",
paddingTop: "25px",
gap: "20px",
marginTop: isMobile ? "25px" : "40px",
}}
>
<Button
variant="outlined"
sx={{
width: "180px",
marginTop: isMobile ? "25px" : "40px",
border: "1px solid #ffffff",
color: "#ffffff",
backgroundColor: "transparent",
@ -95,8 +90,6 @@ export default function Component() {
variant="contained"
sx={{
width: "180px",
marginTop: isMobile ? "20px" : "40px",
marginLeft: isMobile ? 0 : "22px",
backgroundColor: "#FFFFFF",
color: "#252734",
textTransform: "none",

40
src/pages/Landing/DesktopQuizCard.tsx → src/pages/Landing/QuizCard.tsx
View File

@ -1,26 +1,20 @@
import { Box, Fade, Typography } from "@mui/material";
import { FC } from "react";
import { Box, Fade, Typography, useTheme, useMediaQuery } from "@mui/material";
import type { FC } from "react";
interface Iprops {
isOpen: boolean;
header: string;
image: string;
text: string;
}
export const DesktopQuizCard: FC<Iprops> = ({
isOpen,
header,
image,
text,
}) => {
export const QuizCard: FC<Iprops> = ({ header, image, text }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1113));
return (
<Fade
style={{ display: isOpen ? "flex" : "none" }}
timeout={1000}
in={isOpen}
unmountOnExit
>
<Fade style={{ display: "flex" }} timeout={1000} in unmountOnExit>
<Box
sx={{
width: "100%",
@ -29,11 +23,10 @@ export const DesktopQuizCard: FC<Iprops> = ({
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
padding: "22px 22px 22px 50px",
padding: isTablet ? "20px" : "22px 22px 22px 50px",
borderRadius: "12px",
marginTop: "60px",
marginTop: isMobile ? "50px" : "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)",
}}
@ -44,7 +37,7 @@ export const DesktopQuizCard: FC<Iprops> = ({
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
paddingTop: "26px",
paddingTop: isTablet ? 0 : "26px",
}}
>
<Typography
@ -55,12 +48,7 @@ export const DesktopQuizCard: FC<Iprops> = ({
>
{header}
</Typography>
<Box
sx={{
maxWidth: "416px",
marginTop: "19px",
}}
>
<Box sx={{ maxWidth: "416px", marginTop: "19px" }}>
<Typography fontSize={"18px"} lineHeight={"21px"} color={"#4D4D4D"}>
{text}
</Typography>
@ -70,6 +58,7 @@ export const DesktopQuizCard: FC<Iprops> = ({
sx={{
width: "100%",
maxWidth: "550px",
marginTop: isTablet ? "25px" : 0,
}}
>
<Box
@ -77,7 +66,6 @@ export const DesktopQuizCard: FC<Iprops> = ({
src={image}
sx={{
width: "100%",
height: "418px",
backgroundColor: "#c8dade",
borderRadius: "12px",
}}

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

@ -72,15 +72,15 @@ 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));
return (
<SectionStyled
tag={"section"}
bg={"#333647"}
mwidth={"1160px"}
mwidth={"1200px"}
sxcont={{
display: "flex",
justifyContent: "space-between",
padding: isMobile ? "70px 16px" : isTablet ? "80px 40px" : "80px 0",
color: "#ffffff",
flexWrap: "wrap",
@ -90,14 +90,16 @@ export default function Component() {
sx={{
display: "flex",
flexDirection: "column",
gap: isMobile ? "25px" : "120px",
gap: isTablet ? 0 : "25px",
padding: "0 20px",
width: "100%",
}}
>
<Box
sx={{
maxWidth: "400px",
minHeight: "84px",
marginBottom: isMobile ? 0 : "-55px",
marginBottom: isTablet ? 0 : "-55px",
}}
>
<Typography
@ -122,78 +124,6 @@ export default function Component() {
</Typography>
</Box>
<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={{
fontSize: "36px",
fontWeight: "500",
lineHeight: "normal",
}}
>
Удобный конструктор ветвления
</Typography>
<Typography
sx={{
fontSize: "18px",
fontWeight: "400",
lineHeight: "21px",
m: isTablet ? "20px 0 40px" : "20px 0 98px",
color: "#ffffffb3",
}}
>
Внутренняя аналитика считает конверсию квиза на каждом шаге,
показывает развернутую статистику по ответам и пользователям
</Typography>
{/*<Button*/}
{/* variant={"contained"}*/}
{/* sx={{*/}
{/* width: "124px",*/}
{/* height: "30px",*/}
{/* padding: "4px 8px",*/}
{/* fontSize: "12px",*/}
{/* }}*/}
{/*>*/}
{/* Как использовать*/}
{/*</Button>*/}
{/*<Box sx={{ mt: "28px" }}>*/}
{/* <Typography*/}
{/* sx={{ color: "#9A9AAF", fontSize: "18px", mb: "5px" }}*/}
{/* >*/}
{/* 1. Перетащите вопрос из списка в карту ветвления*/}
{/* </Typography>*/}
{/* <Typography sx={{ color: "#9A9AAF", fontSize: "18px" }}>*/}
{/* 2. Добавьте условия{" "}*/}
{/* </Typography>*/}
{/*</Box>*/}
</Box>
</Box>
<Box
sx={{
display: "flex",
@ -205,15 +135,10 @@ export default function Component() {
sx={{
display: "flex",
flexDirection: isTablet ? "column" : "-moz-initial",
gap: isMobile ? "25px" : isTablet ? "40px" : "45px",
justifyContent: "space-between",
alignItems: "flex-start",
gap: "20px",
}}
>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "18px" }}>
Другие преимущества:
</Typography>
<BoxFich sx={{ mt: isTablet ? "40px" : "75px" }} image={Desktop1}>
<Box sx={{ maxWidth: isTabletOnly ? "244px" : "174px" }}>
<Typography
@ -250,8 +175,13 @@ export default function Component() {
</Typography>
</Box>
</BoxFich>
</Box>
<BoxFich sx={{ ml: isTablet ? "auto" : "0" }} image={Desktop5}>
<BoxFich
sx={{
ml: isTablet ? "auto" : "0",
maxHeight: isTablet ? "none" : "350px",
}}
image={Desktop5}
>
<Box maxWidth={"174px"}>
<Typography
sx={{
@ -294,9 +224,9 @@ export default function Component() {
sx={{
display: "flex",
flexDirection: isTablet ? "column" : "-moz-initial",
gap: isMobile ? "25px" : isTablet ? "40px" : "45px",
justifyContent: "space-between",
alignItems: "flex-start",
gap: "20px",
}}
>
<BoxFich sx={{ mt: isTablet ? "0" : "75px" }} image={Desktop2}>
@ -378,9 +308,9 @@ export default function Component() {
sx={{
display: "flex",
flexDirection: isTablet ? "column" : "-moz-initial",
gap: isMobile ? "25px" : isTablet ? "40px" : "0",
justifyContent: "space-between",
alignItems: "flex-start",
gap: "20px",
}}
>
<BoxFich sx={{ mt: isTablet ? "0" : "75px" }} image={Desktop3}>
@ -463,10 +393,10 @@ export default function Component() {
sx={{
display: "flex",
flexDirection: isTablet ? "column" : "-moz-initial",
gap: isMobile ? "25px" : isTablet ? "40px" : "45px",
justifyContent: "space-between",
alignItems: "flex-start",
mt: isTablet ? "0" : "75px",
gap: "20px",
}}
>
<BoxFich image={Desktop4}>
@ -555,30 +485,29 @@ export default function Component() {
p: "20px 0 20px",
}}
>
{/*{!isMobile && (*/}
{/* <Button*/}
{/* sx={{*/}
{/* width: "278px",*/}
{/* height: "44px",*/}
{/* borderRadius: "8px",*/}
{/* border: "1px solid #FFF",*/}
{/* color: "white",*/}
{/* background: "transparent",*/}
{/* }}*/}
{/* >*/}
{/* Все возможности сервиса*/}
{/* </Button>*/}
{/*)}*/}
{/*<Button*/}
{/* variant={"contained"}*/}
{/* sx={{*/}
{/* width: "180px",*/}
{/* height: "44px",*/}
{/* }}*/}
{/*>*/}
{/* Создать квиз*/}
{/*</Button>*/}
{!isMobile && (
<Button
sx={{
width: "278px",
height: "44px",
borderRadius: "8px",
border: "1px solid #FFF",
color: "white",
background: "transparent",
}}
>
Все возможности сервиса
</Button>
)}
<Button
variant={"contained"}
sx={{
width: "180px",
height: "44px",
}}
>
Создать квиз
</Button>
</Box>
</Box>
</Box>

BIN
src/pages/Landing/images/businessTasks2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 456 KiB

BIN
src/pages/Landing/images/businessTasks3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 MiB

BIN
src/pages/Landing/images/businessTasks4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 352 KiB

29
src/pages/Landing/images/icons/YoutubeButton.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
type Props = {
width?: number;
};
export default function ({ width = 120 }: Props) {
return (
<Box sx={{ width }}>
<svg
version="1.1"
id="Слой_1"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 120 75"
width="100%"
>
<g>
<path
fill="#FB5607"
d="M12,0h96c6.6,0,12,5.4,12,12v51c0,6.6-5.4,12-12,12H12C5.4,75,0,69.6,0,63V12C0,5.4,5.4,0,12,0z"
/>
</g>
<path fill="#FFFFFF" d="M84,37L48,16.2v41.6L84,37z" />
</svg>
</Box>
);
}