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

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

@ -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,12 +298,13 @@ export default function Component() {
Изящное решение исследовательских и бизнес-задач
</Typography>
</Box>
{!isTablet && (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
flexWrap: "wrap",
gap: "20px",
marginTop: "60px",
}}
>
@ -309,8 +316,9 @@ export default function Component() {
borderRadius: "12px",
display: "flex",
alignItems: "center",
justifyContent: "space-around",
paddingRight: "77px",
gap: "15px",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "research" ? "white" : "#7e2aea",
color: task !== "research" ? "black" : "#ffffff",
@ -319,7 +327,7 @@ export default function Component() {
<Box
sx={{
borderRadius: "8px",
width: "36px",
minWidth: "36px",
height: "36px",
background: task !== "research" ? "#7E2AEA" : "white",
display: " flex",
@ -344,9 +352,10 @@ export default function Component() {
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "space-around",
paddingRight: "77px",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "segmentation" ? "white" : "#7e2aea",
color: task !== "segmentation" ? "black" : "#ffffff",
@ -355,7 +364,7 @@ export default function Component() {
<Box
sx={{
borderRadius: "8px",
width: "36px",
minWidth: "36px",
height: "36px",
background: task !== "segmentation" ? "#7E2AEA" : "white",
display: " flex",
@ -380,9 +389,9 @@ export default function Component() {
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "space-around",
paddingRight: "77px",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "testing" ? "white" : "#7e2aea",
color: task !== "testing" ? "black" : "#ffffff",
@ -391,7 +400,7 @@ export default function Component() {
<Box
sx={{
borderRadius: "8px",
width: "36px",
minWidth: "36px",
height: "36px",
background: task !== "testing" ? "#7E2AEA" : "white",
display: " flex",
@ -416,9 +425,10 @@ export default function Component() {
height: "66px",
borderRadius: "12px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "space-around",
paddingRight: "77px",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea",
color: task !== "eсommerce" ? "black" : "#ffffff",
@ -427,7 +437,7 @@ export default function Component() {
<Box
sx={{
borderRadius: "8px",
width: "36px",
minWidth: "36px",
height: "36px",
background: task !== "eсommerce" ? "#7E2AEA" : "white",
display: " flex",
@ -445,80 +455,106 @@ export default function Component() {
<Typography>E-commerce</Typography>
</Button>
</Box>
)}
{isTablet ? (
<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)",
}}
>
<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>
);

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