frontPanel/src/ui_kit/CreationCard.tsx

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

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

export default function CreationCard({ header, text, image, border }: Props) {
  return (
    <Box
      sx={{
        minWidth: "315px",
        maxWidth: "560px",
        height: "100%",
        flexGrow: 1,
        backgroundColor: "white",
        p: "20px",
        border: { border },
        borderRadius: "12px",
        display: "flex",
        flexDirection: "column",
        boxShadow: "0 10px 15px rgba(0, 0, 0, 0.1)",
      }}
    >
      <Typography variant="h5" sx={{ textAlign: "left" }}>
        {header}
      </Typography>
      <Typography
        sx={{
          color: "#4D4D4D",
          mt: "20px",
          mb: "35px",
          width: "95%",
          textAlign: "left",
        }}
      >
        {text}
      </Typography>
      <img
        src={image}
        alt="quiz creation"
        style={{
          display: "block",
          width: "100%",
          marginTop: "auto",
        }}
      />
    </Box>
  );
}