coffee/components/company-info/CompanyInfo.jsx

import { Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
const CompanyInfo = () => {
  return (
    <>
      <Box sx={{ display: 'flex', backgroundColor: 'primary.main' }}>
        <Box
          sx={{
            width: '50%',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            textAlign: 'center',
          }}
        >
          <Typography
            variant="h3"
            sx={{
              textAlign: 'center',
              width: '100%',
              height: 70,
              mt: 20,
              color: 'white',
            }}
          >
            We are waiting for you!
          </Typography>
          <Box
            sx={{
              mt: 3,
              display: 'flex',
              width: '100%',
              justifyContent: 'center',
              height: 60,
              textAlign: 'center',
            }}
          >
            <Image src="/images/pin.svg" alt="map" width={50} height={50} />
            <Typography
              sx={{
                color: 'white',
                pt: 2,
                pl: 2,
              }}
            >
              Nis, Zetska 36
            </Typography>
          </Box>
          <Box
            sx={{
              mt: 3,
              display: 'flex',
              width: '100%',
              justifyContent: 'center',
              height: 60,
            }}
          >
            <Image
              src="/images/Clock Icon.svg"
              alt="map"
              width={50}
              height={50}
            />
            <Typography
              sx={{
                color: 'white',
                pt: 2,
                pl: 2,
                mr: -4,
              }}
            >
              Every day: 09 to 18
            </Typography>
          </Box>
          <Box
            sx={{
              mt: 3,
              display: 'flex',
              width: '100%',
              justifyContent: 'center',
              height: 60,
            }}
          >
            <Image src="/images/mail.svg" alt="map" width={50} height={50} />
            <Typography
              sx={{
                color: 'white',
                pt: 2,
                pl: 2,
                mr: -3,
              }}
            >
              info@coffee.com
            </Typography>
          </Box>
        </Box>
        <Box sx={{ width: '50%' }}>
          <Box sx={{ pt: 8 }}>
            <Image
              src="/images/maps 1.svg"
              alt="map"
              width={700}
              height={600}
            />
          </Box>
        </Box>
      </Box>
    </>
  );
};

export default CompanyInfo;