front-hub/src/components/wideTemplCard.tsx

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: "0 10px 0 -5px #BABBC8",
        ...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>
  );
}