coffee/components/hero/Hero.jsx

import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { PRODUCTS_PAGE } from '../../constants/pages';

const Hero = () => {
  const router = useRouter();
  return (
    <>
      <Box sx={{ display: 'flex', width: '100%', height: '100vh' }}>
        <Box
          sx={{
            width: '50%',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            backgroundColor: 'primary.light',
          }}
        >
          <Typography
            variant="h1"
            sx={{
              ml: 10,
              mt: '30%',
              color: 'white',
              height: 100,
            }}
          >
            Its a
          </Typography>
          <Typography variant="h1" sx={{ ml: 10, color: 'white', height: 100 }}>
            {' '}
            Coffee Break
          </Typography>
          <Typography
            sx={{ mt: 6, p: 'auto', px: '10%', color: 'white', pr: '20%' }}
          >
            If you drink coffee regulary you will know the difference between
            fresh coffee and old coffee. Our goal is to provide the freshest
            coffee beans in each day.
          </Typography>
          <Box
            sx={{
              width: '100%',
              display: 'flex',
              mt: 5,
            }}
          >
            <Button
              sx={{
                backgroundColor: '#CBA213',
                height: 50,
                width: 150,
                textTransform: 'none',
                ml: 10,
                color: 'white',
              }}
              onClick={() => router.push(PRODUCTS_PAGE)}
            >
              Explore the Shop
            </Button>
            <Button
              sx={{
                height: 72,
                width: 250,
                textTransform: 'none',
                mt: -2,
                ml: 2,
                color: 'white',
              }}
              startIcon={
                <Image
                  src="/images/Play.svg"
                  alt="profile"
                  width={72}
                  height={72}
                />
              }
            >
              How to make
            </Button>
          </Box>
        </Box>
        <Box sx={{ width: '50%', backgroundColor: 'white' }}>
          <Box sx={{ mt: 10, ml: -12 }}>
            <Image
              src="/images/Hero-Image.png"
              alt="profile"
              width={700}
              height={600}
            />
          </Box>
        </Box>
      </Box>
    </>
  );
};

export default Hero;