import { Box, useMediaQuery, useTheme } from "@mui/material"
import CardWithLink from "@components/CardWithLink"
import card1Image from "@root/assets/landing/card1.png"

export default function () {
	const theme = useTheme()
	const upMd = useMediaQuery(theme.breakpoints.up("md"))

	return (
		<Box
			sx={{
				mt: upMd ? "93px" : "55px",
				display: "flex",
				flexWrap: "wrap",
				justifyContent: "space-evenly",
				columnGap: "40px",
				rowGap: "50px",
				backgroundColor: "\"#E6E6EB",
			}}
		>
			<CardWithLink
				headerText="PenaDoc"
				text="Самый удобный сервис для автоматизации документооборота и заполнения однотипных документов"
				linkHref="#"
				image={card1Image}
				isHighlighted={!upMd}
			/>
		</Box>
	)
}
