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

адаптив карточек опросника , анимации

Browse Source
This commit is contained in:
ArtChaos189 2024-01-09 14:34:09 +03:00
parent 5016ebb08f
commit 5b364eda97
3 changed files with 477 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/Landing/DesktopQuizCard.tsx Normal file
View File

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

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

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Box from "@mui/material/Box"; 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 SectionStyled from "./SectionStyled";
import Link from "@mui/material/Link"; import Link from "@mui/material/Link";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
@ -20,6 +20,8 @@ import { PieСhartIcon } from "@icons/PieСhartIcon";
import { SegmentationIcon } from "@icons/SegmentationIcon"; import { SegmentationIcon } from "@icons/SegmentationIcon";
import { TestingIcon } from "@icons/TestingIcon"; import { TestingIcon } from "@icons/TestingIcon";
import { EcommerceIcon } from "@icons/EcommerceIcon"; import { EcommerceIcon } from "@icons/EcommerceIcon";
import { DesktopQuizCard } from "./DesktopQuizCard";
import { MobileQuizCard } from "./MobileQuizCard";
// const BoxUse = styled('div')(({ theme }) => ({ // const BoxUse = styled('div')(({ theme }) => ({
// [theme.breakpoints.down('md')]: { // [theme.breakpoints.down('md')]: {
@ -163,12 +165,16 @@ export default function Component() {
const [task, setTask] = useState< const [task, setTask] = useState<
"research" | "segmentation" | "testing" | "eсommerce" "research" | "segmentation" | "testing" | "eсommerce"
>("research"); >("research");
const [open, setOpen] = useState<boolean>(false);
return ( return (
<SectionStyled <SectionStyled
tag={"section"} tag={"section"}
bg={"#f2f3f7"} bg={"#f2f3f7"}
mwidth={"1160px"} mwidth={"1160px"}
sxsect={{ minHeight: "809px", alignItems: "flex-start" }} sxsect={{
minHeight: isMobile ? "auto" : "809px",
alignItems: "flex-start",
}}
sxcont={{ sxcont={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -292,233 +298,263 @@ export default function Component() {
Изящное решение исследовательских и бизнес-задач Изящное решение исследовательских и бизнес-задач
</Typography> </Typography>
</Box> </Box>
<Box {!isTablet && (
sx={{ <Box
display: "flex", sx={{
justifyContent: "space-between", display: "flex",
width: "100%", justifyContent: "space-between",
flexWrap: "wrap", width: "100%",
marginTop: "60px", gap: "20px",
}} marginTop: "60px",
> }}
<Button >
onClick={() => setTask("research")} <Button
sx={{ onClick={() => setTask("research")}
width: "275px", sx={{
height: "66px", width: "275px",
borderRadius: "12px", height: "66px",
display: "flex", borderRadius: "12px",
alignItems: "center", display: "flex",
justifyContent: "space-around", alignItems: "center",
paddingRight: "77px", gap: "15px",
textTransform: "none", justifyContent: "flex-start",
backgroundColor: task !== "research" ? "white" : "#7e2aea",
color: task !== "research" ? "black" : "#ffffff", textTransform: "none",
}} backgroundColor: task !== "research" ? "white" : "#7e2aea",
> color: task !== "research" ? "black" : "#ffffff",
<Box }}
sx={{ >
borderRadius: "8px", <Box
width: "36px", sx={{
height: "36px", borderRadius: "8px",
background: task !== "research" ? "#7E2AEA" : "white", minWidth: "36px",
display: " flex", height: "36px",
justifyContent: "center", background: task !== "research" ? "#7E2AEA" : "white",
alignItems: "center", display: " flex",
}} justifyContent: "center",
> alignItems: "center",
<PieСhartIcon }}
style={{ >
color: task !== "research" ? "white" : "#7E2AEA", <PieСhartIcon
fontSize: "24px", style={{
}} color: task !== "research" ? "white" : "#7E2AEA",
/> fontSize: "24px",
</Box> }}
/>
<Typography>Исследования</Typography> </Box>
</Button>
<Button <Typography>Исследования</Typography>
onClick={() => setTask("segmentation")} </Button>
sx={{ <Button
width: "275px", onClick={() => setTask("segmentation")}
height: "66px", sx={{
borderRadius: "12px", width: "275px",
display: "flex", height: "66px",
alignItems: "center", borderRadius: "12px",
justifyContent: "space-around", display: "flex",
paddingRight: "77px", gap: "15px",
textTransform: "none", alignItems: "center",
backgroundColor: task !== "segmentation" ? "white" : "#7e2aea", justifyContent: "flex-start",
color: task !== "segmentation" ? "black" : "#ffffff",
}} textTransform: "none",
> backgroundColor: task !== "segmentation" ? "white" : "#7e2aea",
<Box color: task !== "segmentation" ? "black" : "#ffffff",
sx={{ }}
borderRadius: "8px", >
width: "36px", <Box
height: "36px", sx={{
background: task !== "segmentation" ? "#7E2AEA" : "white", borderRadius: "8px",
display: " flex", minWidth: "36px",
justifyContent: "center", height: "36px",
alignItems: "center", background: task !== "segmentation" ? "#7E2AEA" : "white",
}} display: " flex",
> justifyContent: "center",
<SegmentationIcon alignItems: "center",
style={{ }}
color: task !== "segmentation" ? "white" : "#7E2AEA", >
fontSize: "24px", <SegmentationIcon
}} style={{
/> color: task !== "segmentation" ? "white" : "#7E2AEA",
</Box> fontSize: "24px",
}}
<Typography>Сегментация</Typography> />
</Button> </Box>
<Button
onClick={() => setTask("testing")} <Typography>Сегментация</Typography>
sx={{ </Button>
width: "275px", <Button
height: "66px", onClick={() => setTask("testing")}
borderRadius: "12px", sx={{
display: "flex", width: "275px",
alignItems: "center", height: "66px",
justifyContent: "space-around", borderRadius: "12px",
paddingRight: "77px", display: "flex",
textTransform: "none", gap: "15px",
backgroundColor: task !== "testing" ? "white" : "#7e2aea", alignItems: "center",
color: task !== "testing" ? "black" : "#ffffff", justifyContent: "flex-start",
}} textTransform: "none",
> backgroundColor: task !== "testing" ? "white" : "#7e2aea",
<Box color: task !== "testing" ? "black" : "#ffffff",
sx={{ }}
borderRadius: "8px", >
width: "36px", <Box
height: "36px", sx={{
background: task !== "testing" ? "#7E2AEA" : "white", borderRadius: "8px",
display: " flex", minWidth: "36px",
justifyContent: "center", height: "36px",
alignItems: "center", background: task !== "testing" ? "#7E2AEA" : "white",
}} display: " flex",
> justifyContent: "center",
<TestingIcon alignItems: "center",
style={{ }}
color: task !== "testing" ? "white" : "#7E2AEA", >
fontSize: "24px", <TestingIcon
}} style={{
/> color: task !== "testing" ? "white" : "#7E2AEA",
</Box> fontSize: "24px",
}}
<Typography>Тестирование</Typography> />
</Button> </Box>
<Button
onClick={() => setTask("eсommerce")} <Typography>Тестирование</Typography>
sx={{ </Button>
width: "275px", <Button
height: "66px", onClick={() => setTask("eсommerce")}
borderRadius: "12px", sx={{
display: "flex", width: "275px",
alignItems: "center", height: "66px",
justifyContent: "space-around", borderRadius: "12px",
paddingRight: "77px", display: "flex",
textTransform: "none", gap: "15px",
backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea", alignItems: "center",
color: task !== "eсommerce" ? "black" : "#ffffff", justifyContent: "flex-start",
}}
> textTransform: "none",
<Box backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea",
sx={{ color: task !== "eсommerce" ? "black" : "#ffffff",
borderRadius: "8px", }}
width: "36px", >
height: "36px", <Box
background: task !== "eсommerce" ? "#7E2AEA" : "white", sx={{
display: " flex", borderRadius: "8px",
justifyContent: "center", minWidth: "36px",
alignItems: "center", height: "36px",
}} background: task !== "eсommerce" ? "#7E2AEA" : "white",
> display: " flex",
<EcommerceIcon justifyContent: "center",
style={{ alignItems: "center",
color: task !== "eсommerce" ? "white" : "#7E2AEA", }}
fontSize: "24px", >
}} <EcommerceIcon
/> style={{
</Box> color: task !== "eсommerce" ? "white" : "#7E2AEA",
<Typography>E-commerce</Typography> fontSize: "24px",
</Button> }}
</Box> />
</Box>
<Box <Typography>E-commerce</Typography>
sx={{ </Button>
width: "100%", </Box>
minHeight: "462px", )}
backgroundColor: "#ffffff",
display: "flex", {isTablet ? (
justifyContent: "space-between",
flexWrap: "wrap",
padding: isMobile
? "0 27px 22px 20px"
: isTablet
? "20px"
: "22px 22px 22px 50px",
borderRadius: "12px",
marginTop: isMobile ? "35px" : "60px",
boxSizing: "border-box",
boxShadow:
"0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
}}
>
<Box <Box
sx={{ sx={{
height: "70%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "space-around", gap: "30px",
paddingTop: "26px", mt: isMobile ? "40px" : "50px",
paddingLeft: isMobile ? undefined : isTablet ? "30px" : undefined,
}} }}
> >
<Typography <MobileQuizCard
variant="h6" header={businessTasks.research.header}
fontSize={"36px"} image={businessTasks.research.image}
lineHeight={"42.66px"} text={businessTasks.research.text}
maxWidth={"491px"} textIcon="Исследования"
> icon={
{businessTasks[task].header} <PieСhartIcon
</Typography> style={{
<Box color: "white",
sx={{ fontSize: "24px",
maxWidth: isTablet ? "100%" : "416px", }}
marginTop: "19px", />
}} }
> />
<Typography
fontSize={"18px"} <MobileQuizCard
lineHeight={"21px"} header={businessTasks.segmentation.header}
color={"#4D4D4D"} image={businessTasks.segmentation.image}
> text={businessTasks.segmentation.text}
{businessTasks[task].text} textIcon="Сегментация"
</Typography> icon={
</Box> <SegmentationIcon
</Box> style={{
<Box color: "white",
sx={{ fontSize: "24px",
width: "100%", }}
maxWidth: isTablet ? "100%" : "550px", />
marginTop: isMobile ? undefined : isTablet ? "42px" : undefined, }
}} />
> <MobileQuizCard
<Box header={businessTasks.testing.header}
component={"img"} image={businessTasks.testing.image}
src={businessTasks[task].image} text={businessTasks.testing.text}
sx={{ textIcon="Тестирование"
width: "100%", icon={
height: isMobile ? "228px" : isTablet ? "671px" : "418px", <TestingIcon
backgroundColor: "#c8dade", style={{
borderRadius: "12px", 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>
</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> </Box>
</SectionStyled> </SectionStyled>
); );

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

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