front-hub/src/components/wideTemplCard.tsx

import { Box, Typography, SxProps, Theme, Button, useTheme, useMediaQuery } 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>;
  name?: string;
  desc?: string;
  image?: string;
}

export default function WideTemplCard({ light = true, sx, name="PenaDoc", desc="Самый удобный сервис для автоматизации документооборота и заполнения однотипных документов", image = cardImageBig }: Props) {
	const theme = useTheme()
	const isTablet = useMediaQuery(theme.breakpoints.down(1000))

	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">{name}</Typography>
				<Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px">
					{desc}
				</Typography>
			</Box>
			<img
				src={image}
				alt=""
				style={{
					display: "block",
					objectFit: "contain",
					pointerEvents: "none",
					marginBottom: "-40px",
					marginTop: "-110px",
					maxWidth: "390px",
				}}
			/>
		</Box>
	)
}