68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { Box, Typography, SxProps, Theme, Button } from "@mui/material";
|
||
import cardImageBig from "@root/assets/landing/card1big.png";
|
||
import { PenaLink } from "@frontend/kitui";
|
||
import { Link as RouterLink } from "react-router-dom";
|
||
|
||
interface Props {
|
||
light?: boolean;
|
||
sx?: SxProps<Theme>;
|
||
}
|
||
|
||
export default function WideTemplCard({ light = true, sx }: Props) {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
position: "relative",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
py: "40px",
|
||
px: "20px",
|
||
backgroundColor: light ? "#E6E6EB" : "#434657",
|
||
borderRadius: "12px",
|
||
|
||
...sx,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "start",
|
||
}}
|
||
>
|
||
<Typography variant="h5">Шаблонизатор</Typography>
|
||
<Typography mt="20px" maxWidth="552px">
|
||
Текст- это текст, который имеет некоторые характеристики реального письменного текс
|
||
</Typography>
|
||
{light ? (
|
||
<Button variant="pena-contained-light" sx={{ mt: "28px" }}>
|
||
Подробнее
|
||
</Button>
|
||
) : (
|
||
<PenaLink
|
||
component={RouterLink}
|
||
to="/"
|
||
sx={{
|
||
mt: "auto",
|
||
}}
|
||
>
|
||
Подробнее
|
||
</PenaLink>
|
||
)}
|
||
</Box>
|
||
<img
|
||
src={cardImageBig}
|
||
alt=""
|
||
style={{
|
||
display: "block",
|
||
objectFit: "contain",
|
||
pointerEvents: "none",
|
||
marginBottom: "-40px",
|
||
marginTop: "-110px",
|
||
maxWidth: "390px",
|
||
}}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|