coffee/components/product-card/ProductCard.jsx

import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';

const ProductCard = () => {
  return (
    <Box
      sx={{
        width: '100%',
        height: '590px',
        border: 'none',
        mb: '75px',
        backgroundColor: '#F5ECD4',
      }}
    >
      <Box width="100%">
        <Image
          src="/images/product-card-image.jpg"
          alt="product image"
          width={373.33}
          height={249}
        />
      </Box>
      <Box
        width="100%"
        sx={{
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Typography fontSize="24px" align="center" pt={1} pb={3}>
          MINIMALIST PRINTED MUG
        </Typography>
        <Typography align="center" fontSize="18px" m={2}>
          Our simple and sturdy mugs are made to last. With a minimalist desings
          you will soon be enjoying your next brew.
        </Typography>
        <Typography fontSize="24px" align="center" pt={4}>
          $20
        </Typography>
        <Box textAlign="center" mt={1}>
          <Button
            sx={{
              backgroundColor: '#CBA213',
              height: 50,
              width: 150,
              color: 'white',
            }}
          >
            Add to cart
          </Button>
        </Box>
      </Box>
    </Box>
  );
};

export default ProductCard;