92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
|
import {Box, Typography, useMediaQuery, useTheme, Button, SxProps, Theme} from "@mui/material";
|
|||
|
|
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
|||
|
|
import CardWithLink from "@components/CardWithLink";
|
|||
|
|
import UnderlinedLink from "@components/UnderlinedLink";
|
|||
|
|
import SectionWrapper from "@components/SectionWrapper";
|
|||
|
|
import card1Image from "@root/assets/landing/card1.png";
|
|||
|
|
import card2Image from "@root/assets/landing/card2.png";
|
|||
|
|
import card3Image from "@root/assets/landing/card3.png";
|
|||
|
|
import cardImageBig from "@root/assets/landing/card1big.png";
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
light?: boolean;
|
|||
|
|
sx?: SxProps<Theme>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ({light = true, sx}: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|||
|
|
|
|||
|
|
return <Box sx={{
|
|||
|
|
position: "relative",
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
py: "40px",
|
|||
|
|
px: "20px",
|
|||
|
|
backgroundColor: light ? "#E6E6EB" : "#434657",
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
boxShadow: `
|
|||
|
|
0px 100px 309px rgba(37, 39, 52, 0.24),
|
|||
|
|
0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
|
|||
|
|
0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
|
|||
|
|
0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
|
|||
|
|
0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
|
|||
|
|
0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)
|
|||
|
|
`,
|
|||
|
|
...sx
|
|||
|
|
}}>
|
|||
|
|
<Box sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
}}>
|
|||
|
|
<Typography variant="h5">Шаблонизатор</Typography>
|
|||
|
|
<Typography mt="20px" maxWidth="552px">Текст- это текст, который имеет некоторые характеристики
|
|||
|
|
реального
|
|||
|
|
письменного текс</Typography>
|
|||
|
|
{
|
|||
|
|
light ?
|
|||
|
|
<Button
|
|||
|
|
sx={{
|
|||
|
|
mt:"28px",
|
|||
|
|
width: "180px",
|
|||
|
|
paddingTop: "10px",
|
|||
|
|
paddingBottom: "10px",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
boxShadow: "none",
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
color: "black",
|
|||
|
|
"&:hover": {
|
|||
|
|
backgroundColor: "#581CA7",
|
|||
|
|
color: "white"
|
|||
|
|
},
|
|||
|
|
"&:active": {
|
|||
|
|
backgroundColor: "black",
|
|||
|
|
color: "white"
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
variant="contained">Подробнее</Button>
|
|||
|
|
:
|
|||
|
|
<UnderlinedLink
|
|||
|
|
linkHref="#"
|
|||
|
|
text="Подробнее"
|
|||
|
|
endIcon={<ArrowForwardIcon sx={{height: "20px", width: "20px"}}/>}
|
|||
|
|
sx={{
|
|||
|
|
mt: "auto",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
</Box>
|
|||
|
|
<img
|
|||
|
|
src={cardImageBig}
|
|||
|
|
alt=""
|
|||
|
|
style={{
|
|||
|
|
display: "block",
|
|||
|
|
objectFit: "contain",
|
|||
|
|
pointerEvents: "none",
|
|||
|
|
marginBottom: "-40px",
|
|||
|
|
marginTop: "-110px",
|
|||
|
|
maxWidth: "390px",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
}
|