frontPanel/src/pages/startPage/CardWithImage.tsx

import { Box, Typography, useTheme } from "@mui/material";

interface Props {
  image: string;
  text: string;
  border?: string;
}

export default function CardWithImage({ image, text, border }: Props) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        minWidth: "315px",
        flexGrow: 1,
        borderRadius: "12px",
        border: { border },
        backgroundColor: "white",
        boxShadow: "0 10px 15px rgba(0, 0, 0, 0.1)",
      }}
    >
      <img
        style={{
          width: "100%",
          display: "block",
          borderBottom: `1px solid ${theme.palette.grey2.main}`,
        }}
        src={image}
        alt="card"
      />
      <Typography color={theme.palette.grey3.main} p="20px">
        {text}
      </Typography>
    </Box>
  );
}