65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import card1Image from "@root/assets/landing/card1.png";
|
||
|
||
export default function TemplCardPhoneLight() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
console.log("я узкий");
|
||
return (
|
||
<Box
|
||
sx={{
|
||
mt: upMd ? "93px" : "55px",
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
justifyContent: "space-evenly",
|
||
columnGap: "40px",
|
||
rowGap: "50px",
|
||
backgroundColor: "inherit",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
flexGrow: 1,
|
||
alignItems: "start",
|
||
p: "20px",
|
||
maxWidth: "360px",
|
||
backgroundColor: " #E6E6EB",
|
||
borderRadius: "12px",
|
||
boxShadow: "0 10px 0 -5px #BABBC8",
|
||
color: "black",
|
||
height: "520px",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<img
|
||
src={card1Image}
|
||
alt=""
|
||
style={{
|
||
objectFit: "contain",
|
||
width: "100%",
|
||
display: "block",
|
||
pointerEvents: "none",
|
||
}}
|
||
/>
|
||
<Typography variant="h5">Шаблонизатор</Typography>
|
||
<Typography mt="20px" mb="20px">
|
||
"Текст- это текст, который имеет некоторые характеристики реального
|
||
письменного текст"
|
||
</Typography>
|
||
|
||
<Button variant="pena-contained-light">
|
||
Подробнее
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|