coffee/components/cards/data-card/DataCard.jsx

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

const DataCard = () => {
  return (
    <Paper
      sx={{
        p: 3,
        width: '100%',
        mb: 2,
        backgroundColor: '#f2f2f2',
        display: 'flex',
      }}
      elevation={3}
    >
      <Box sx={{ width: '30%', borderRadius: 4, overflow: 'hidden' }}>
        <Image
          src="/images/coffee-mug.svg"
          alt="profile"
          width={200}
          height={250}
        />
      </Box>
      <Box
        sx={{ ml: 3, display: 'flex', flexDirection: 'column', width: '60%' }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            height: 25,
            fontWeight: 600,
            fontSize: 20,
          }}
        >
          Begin Mug in White
        </Typography>
        <Typography
          sx={{
            mt: 3,
            fontSize: 14,
          }}
        >
          Simple and beautiful Begin mug. Perfect companion for your next
          delicious cup of coffee.
        </Typography>
      </Box>
    </Paper>
  );
};

export default DataCard;