From 5b364eda977963cff43ba2b6b29cb20a33d1d52f Mon Sep 17 00:00:00 2001
From: ArtChaos189 <tvolkiska967@gmail.com>
Date: Tue, 9 Jan 2024 14:34:09 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20=D0=BE=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=81=D0=BD=D0=B8=D0=BA=D0=B0=20,=20=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Landing/DesktopQuizCard.tsx |  89 +++++
 src/pages/Landing/HowToUse.tsx        | 478 ++++++++++++++------------
 src/pages/Landing/MobileQuizCard.tsx  | 131 +++++++
 3 files changed, 477 insertions(+), 221 deletions(-)
 create mode 100644 src/pages/Landing/DesktopQuizCard.tsx
 create mode 100644 src/pages/Landing/MobileQuizCard.tsx

diff --git a/src/pages/Landing/DesktopQuizCard.tsx b/src/pages/Landing/DesktopQuizCard.tsx
new file mode 100644
index 00000000..1cee68bc
--- /dev/null
+++ b/src/pages/Landing/DesktopQuizCard.tsx
@@ -0,0 +1,89 @@
+import { Box, Fade, Typography } from "@mui/material";
+import { FC } from "react";
+
+interface Iprops {
+  isOpen: boolean;
+  header: string;
+  image: string;
+  text: string;
+}
+
+export const DesktopQuizCard: FC<Iprops> = ({
+  isOpen,
+  header,
+  image,
+  text,
+}) => {
+  return (
+    <Fade
+      style={{ display: isOpen ? "flex" : "none" }}
+      timeout={1000}
+      in={isOpen}
+      unmountOnExit
+    >
+      <Box
+        sx={{
+          width: "100%",
+          minHeight: "462px",
+          backgroundColor: "#ffffff",
+          display: "flex",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          padding: "22px 22px 22px 50px",
+          borderRadius: "12px",
+          marginTop: "60px",
+          boxSizing: "border-box",
+
+          boxShadow:
+            "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
+        }}
+      >
+        <Box
+          sx={{
+            height: "70%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-around",
+            paddingTop: "26px",
+          }}
+        >
+          <Typography
+            variant="h6"
+            fontSize={"36px"}
+            lineHeight={"42.66px"}
+            maxWidth={"491px"}
+          >
+            {header}
+          </Typography>
+          <Box
+            sx={{
+              maxWidth: "416px",
+              marginTop: "19px",
+            }}
+          >
+            <Typography fontSize={"18px"} lineHeight={"21px"} color={"#4D4D4D"}>
+              {text}
+            </Typography>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            maxWidth: "550px",
+          }}
+        >
+          <Box
+            component={"img"}
+            src={image}
+            sx={{
+              width: "100%",
+              height: "418px",
+              backgroundColor: "#c8dade",
+              borderRadius: "12px",
+            }}
+          />
+        </Box>
+      </Box>
+    </Fade>
+  );
+};
diff --git a/src/pages/Landing/HowToUse.tsx b/src/pages/Landing/HowToUse.tsx
index 627d31b5..4fd99ec1 100644
--- a/src/pages/Landing/HowToUse.tsx
+++ b/src/pages/Landing/HowToUse.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Box from "@mui/material/Box";
-import { Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Fade, Typography, Zoom, useMediaQuery, useTheme } from "@mui/material";
 import SectionStyled from "./SectionStyled";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
@@ -20,6 +20,8 @@ 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";
 
 // const BoxUse = styled('div')(({ theme }) => ({
 //     [theme.breakpoints.down('md')]: {
@@ -163,12 +165,16 @@ export default function Component() {
   const [task, setTask] = useState<
     "research" | "segmentation" | "testing" | "eсommerce"
   >("research");
+  const [open, setOpen] = useState<boolean>(false);
   return (
     <SectionStyled
       tag={"section"}
       bg={"#f2f3f7"}
       mwidth={"1160px"}
-      sxsect={{ minHeight: "809px", alignItems: "flex-start" }}
+      sxsect={{
+        minHeight: isMobile ? "auto" : "809px",
+        alignItems: "flex-start",
+      }}
       sxcont={{
         display: "flex",
         flexDirection: "column",
@@ -292,233 +298,263 @@ export default function Component() {
             Изящное решение исследовательских и бизнес-задач
           </Typography>
         </Box>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            width: "100%",
-            flexWrap: "wrap",
-            marginTop: "60px",
-          }}
-        >
-          <Button
-            onClick={() => setTask("research")}
-            sx={{
-              width: "275px",
-              height: "66px",
-              borderRadius: "12px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-around",
-              paddingRight: "77px",
-              textTransform: "none",
-              backgroundColor: task !== "research" ? "white" : "#7e2aea",
-              color: task !== "research" ? "black" : "#ffffff",
-            }}
-          >
-            <Box
-              sx={{
-                borderRadius: "8px",
-                width: "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",
-              alignItems: "center",
-              justifyContent: "space-around",
-              paddingRight: "77px",
-              textTransform: "none",
-              backgroundColor: task !== "segmentation" ? "white" : "#7e2aea",
-              color: task !== "segmentation" ? "black" : "#ffffff",
-            }}
-          >
-            <Box
-              sx={{
-                borderRadius: "8px",
-                width: "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",
-              alignItems: "center",
-              justifyContent: "space-around",
-              paddingRight: "77px",
-              textTransform: "none",
-              backgroundColor: task !== "testing" ? "white" : "#7e2aea",
-              color: task !== "testing" ? "black" : "#ffffff",
-            }}
-          >
-            <Box
-              sx={{
-                borderRadius: "8px",
-                width: "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",
-              alignItems: "center",
-              justifyContent: "space-around",
-              paddingRight: "77px",
-              textTransform: "none",
-              backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea",
-              color: task !== "eсommerce" ? "black" : "#ffffff",
-            }}
-          >
-            <Box
-              sx={{
-                borderRadius: "8px",
-                width: "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>
-
-        <Box
-          sx={{
-            width: "100%",
-            minHeight: "462px",
-            backgroundColor: "#ffffff",
-            display: "flex",
-            justifyContent: "space-between",
-            flexWrap: "wrap",
-            padding: isMobile
-              ? "0 27px 22px 20px"
-              : isTablet
-                ? "20px"
-                : "22px 22px 22px 50px",
-            borderRadius: "12px",
-            marginTop: isMobile ? "35px" : "60px",
-            boxSizing: "border-box",
-
-            boxShadow:
-              "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
-          }}
-        >
+        {!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",
+              }}
+            >
+              <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",
+              }}
+            >
+              <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",
+              }}
+            >
+              <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",
+              }}
+            >
+              <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={{
-              height: "70%",
               display: "flex",
               flexDirection: "column",
-              justifyContent: "space-around",
-              paddingTop: "26px",
-              paddingLeft: isMobile ? undefined : isTablet ? "30px" : undefined,
+              gap: "30px",
+              mt: isMobile ? "40px" : "50px",
             }}
           >
-            <Typography
-              variant="h6"
-              fontSize={"36px"}
-              lineHeight={"42.66px"}
-              maxWidth={"491px"}
-            >
-              {businessTasks[task].header}
-            </Typography>
-            <Box
-              sx={{
-                maxWidth: isTablet ? "100%" : "416px",
-                marginTop: "19px",
-              }}
-            >
-              <Typography
-                fontSize={"18px"}
-                lineHeight={"21px"}
-                color={"#4D4D4D"}
-              >
-                {businessTasks[task].text}
-              </Typography>
-            </Box>
-          </Box>
-          <Box
-            sx={{
-              width: "100%",
-              maxWidth: isTablet ? "100%" : "550px",
-              marginTop: isMobile ? undefined : isTablet ? "42px" : undefined,
-            }}
-          >
-            <Box
-              component={"img"}
-              src={businessTasks[task].image}
-              sx={{
-                width: "100%",
-                height: isMobile ? "228px" : isTablet ? "671px" : "418px",
-                backgroundColor: "#c8dade",
-                borderRadius: "12px",
-              }}
+            <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>
-        </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>
   );
diff --git a/src/pages/Landing/MobileQuizCard.tsx b/src/pages/Landing/MobileQuizCard.tsx
new file mode 100644
index 00000000..d72f0cfe
--- /dev/null
+++ b/src/pages/Landing/MobileQuizCard.tsx
@@ -0,0 +1,131 @@
+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>
+  );
+};