feat: new design

src/pages/Landing/Collaboration.tsx

@@ -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"}
+      mwidth={"1240px"}
-      sxsect={{
-        height: isMobile ? "598px" : "369px",
-      }}
       sxcont={{
         display: "flex",
         justifyContent: "space-between",
         alignItems: "flex-start",
-        padding: isMobile
+        padding: isMobile ? "50px 16px" : "80px 40px",
-          ? "30px 16px 0 16px"
-          : isTablet
-            ? "0px 40px 0 40px"
-            : 0,
-        marginBottom: isMobile ? "55px" : 0,
         flexDirection: "column",
         gap: "25px",
       }}
@@ -44,12 +36,12 @@ export default function Collaboration() {
         >
           Совместный проект
         </Typography>
-        <Box sx={{ display: "flex", gap: isMobile ? "16px" : "25px" }}>
+        <Box sx={{ display: "flex", gap: isTablet ? "16px" : "25px" }}>
-          <SmiLogo width={isMobile ? 151 : 240} />
+          <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" }}>

src/pages/Landing/Counter.tsx

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

src/pages/Landing/FooterLanding.tsx

@@ -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>

src/pages/Landing/HowItWorks.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import { Typography, Box, useMediaQuery, useTheme } from "@mui/material";
-import Box from "@mui/material/Box";
+import { Link } from "react-router-dom";
-import { Typography, useMediaQuery, useTheme } from "@mui/material";
+
 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">
+                <Typography fontSize="18px">воронки и чат-боты</Typography>
-                  {" "}
+              </Box>
-                  интеграция с CRM<br></br>(в разработке)
+              <Box
-                </Typography>
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  flexBasis: isMobile ? 0 : "235px",
+                  padding: "0",
+                  gap: "15px",
+                }}
+              >
+                <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
-              sx={{
-                display: "flex",
-                justifyContent: "space-between",
-                padding: "20px 79px 0 0",
-                flexDirection: isMobile ? "column" : "row",
-                gap: isMobile ? "15px" : undefined,
-              }}
-            ></Box>
           </Box>
         </Box>
         <Box

src/pages/Landing/HowToUse.tsx

@@ -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 { QuizCard } from "./QuizCard";
-import { MobileQuizCard } from "./MobileQuizCard";
 
 // 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"
+            ? "16px 20px 50px"
-            : "81px 0 50px 0",
+            : "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
+        <Box sx={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "16px",
-            maxWidth: isMobile ? "273px" : undefined,
-          }}
-        >
           <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",
+        <QuizCard
-                backgroundColor: task !== "research" ? "white" : "#7e2aea",
+          header={businessTasks.research.header}
-                color: task !== "research" ? "black" : "#ffffff",
+          image={businessTasks.research.image}
-                "&:hover": {
+          text={businessTasks.research.text}
-                  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"}
-              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>
   );

src/pages/Landing/Landing.tsx

@@ -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 />
     </>
   );

src/pages/Landing/MobileQuizCard.tsx

@@ -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>
-  );
-};

src/pages/Landing/Questions.tsx

@@ -30,24 +30,18 @@ export default function Component() {
     <SectionStyled
       tag={"section"}
       bg={"#7E2AEA"}
-      mwidth={"1160px"}
+      mwidth={"1200px"}
-      sxsect={{
+      sxsect={{ minHeight: "350px" }}
-        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
+      <Box sx={{ display: "flex", flexDirection: "column", padding: "0 20px" }}>
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
         <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",

src/pages/Landing/QuizCard.tsx

@@ -1,26 +1,20 @@
-import { Box, Fade, Typography } from "@mui/material";
+import { Box, Fade, Typography, useTheme, useMediaQuery } from "@mui/material";
-import { FC } from "react";
+
+import type { FC } from "react";
 
 interface Iprops {
-  isOpen: boolean;
   header: string;
   image: string;
   text: string;
 }
 
-export const DesktopQuizCard: FC<Iprops> = ({
+export const QuizCard: FC<Iprops> = ({ header, image, text }) => {
-  isOpen,
+  const theme = useTheme();
-  header,
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
-  image,
+  const isTablet = useMediaQuery(theme.breakpoints.down(1113));
-  text,
+
-}) => {
   return (
-    <Fade
+    <Fade style={{ display: "flex" }} timeout={1000} in unmountOnExit>
-      style={{ display: isOpen ? "flex" : "none" }}
-      timeout={1000}
-      in={isOpen}
-      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
+          <Box sx={{ maxWidth: "416px", marginTop: "19px" }}>
-            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",
             }}

src/pages/Landing/WhatTheFeatures.tsx

@@ -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,53 +135,53 @@ 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>
+            <BoxFich sx={{ mt: isTablet ? "40px" : "75px" }} image={Desktop1}>
-              <Typography sx={{ color: "#9A9AAF", fontSize: "18px" }}>
+              <Box sx={{ maxWidth: isTabletOnly ? "244px" : "174px" }}>
-                Другие преимущества:
+                <Typography
-              </Typography>
+                  sx={{
-              <BoxFich sx={{ mt: isTablet ? "40px" : "75px" }} image={Desktop1}>
+                    color: "#7e2aea",
-                <Box sx={{ maxWidth: isTabletOnly ? "244px" : "174px" }}>
+                    fontSize: "24px",
-                  <Typography
+                    fontWeight: "500",
-                    sx={{
+                    lineHeight: "28.44px",
-                      color: "#7e2aea",
+                  }}
-                      fontSize: "24px",
+                >
-                      fontWeight: "500",
+                  01
-                      lineHeight: "28.44px",
+                </Typography>
-                    }}
+                <Typography
-                  >
+                  variant={"h6"}
-                    01
+                  sx={{
-                  </Typography>
+                    fontSize: "24px",
-                  <Typography
+                    fontWeight: "500",
-                    variant={"h6"}
+                    lineHeight: "28.44px",
-                    sx={{
+                  }}
-                      fontSize: "24px",
+                >
-                      fontWeight: "500",
+                  Привязка к вашему домену
-                      lineHeight: "28.44px",
+                </Typography>
-                    }}
+              </Box>
-                  >
+              <Box sx={{ maxWidth: isTabletOnly ? "300px" : "230px" }}>
-                    Привязка к вашему домену
+                <Typography
-                  </Typography>
+                  sx={{
-                </Box>
+                    fontSize: "18px",
-                <Box sx={{ maxWidth: isTabletOnly ? "300px" : "230px" }}>
+                    fontWeight: "400",
-                  <Typography
+                    lineHeight: "21px",
-                    sx={{
+                  }}
-                      fontSize: "18px",
+                >
-                      fontWeight: "400",
+                  Привяжите квиз к своему брендовому домену и получайте
-                      lineHeight: "21px",
+                  максимальную отдачу от каждой заявки
-                    }}
+                </Typography>
-                  >
+              </Box>
-                    Привяжите квиз к своему брендовому домену и получайте
+            </BoxFich>
-                    максимальную отдачу от каждой заявки
+            <BoxFich
-                  </Typography>
+              sx={{
-                </Box>
+                ml: isTablet ? "auto" : "0",
-              </BoxFich>
+                maxHeight: isTablet ? "none" : "350px",
-            </Box>
+              }}
-            <BoxFich sx={{ ml: isTablet ? "auto" : "0" }} image={Desktop5}>
+              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 && (*/}
+                {!isMobile && (
-                {/*    <Button*/}
+                  <Button
-                {/*        sx={{*/}
+                    sx={{
-                {/*            width: "278px",*/}
+                      width: "278px",
-                {/*            height: "44px",*/}
+                      height: "44px",
-                {/*            borderRadius: "8px",*/}
+                      borderRadius: "8px",
-                {/*            border: "1px solid #FFF",*/}
+                      border: "1px solid #FFF",
-                {/*            color: "white",*/}
+                      color: "white",
-                {/*            background: "transparent",*/}
+                      background: "transparent",
-                {/*        }}*/}
+                    }}
-                {/*    >*/}
+                  >
-                {/*        Все возможности сервиса*/}
+                    Все возможности сервиса
-                {/*    </Button>*/}
+                  </Button>
-                {/*)}*/}
+                )}
-
+                <Button
-                {/*<Button*/}
+                  variant={"contained"}
-                {/*  variant={"contained"}*/}
+                  sx={{
-                {/*  sx={{*/}
+                    width: "180px",
-                {/*    width: "180px",*/}
+                    height: "44px",
-                {/*    height: "44px",*/}
+                  }}
-                {/*  }}*/}
+                >
-                {/*>*/}
+                  Создать квиз
-                {/*  Создать квиз*/}
+                </Button>
-                {/*</Button>*/}
               </Box>
             </Box>
           </Box>

src/pages/Landing/images/icons/YoutubeButton.tsx

@@ -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>
+  );
+}