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',
          flexDirection: { xs: 'column', md: 'row' },
          width: '100%',
          height: { xs: '100vh', md: '1024px' },
        }}
      >
        <Box
          sx={{
            width: { xs: '100%', md: '50%' },
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: { xs: 'space-around', md: 'center' },
            backgroundColor: 'primary.light',
          }}
        >
          <Box display="flex" flexDirection="column">
            <Typography
              variant="h1"
              sx={{
                fontSize: { xs: '96px', md: '64px', lg: '96px' },
                ml: 10,
                color: 'white',
              }}
            >
              Its a
            </Typography>
            <Typography
              variant="h1"
              sx={{
                fontSize: { xs: '96px', md: '64px', lg: '96px' },
                ml: 10,
                color: 'white',
              }}
            >
              {' '}
              Coffee Break
            </Typography>
          </Box>
          <Typography
            display="flex"
            justifyItems="center"
            sx={{
              fontSize: { xs: '22px', md: '18px' },
              ml: 10,
              mt: { md: '50px' },
              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={{
              mt: { md: '50px' },
              width: '100%',
              display: 'flex',
              flexDirection: { xs: 'column', sm: 'row' },
              ml: { md: 10 },
              justifyContent: { sm: 'space-evenly', md: 'flex-start' },
              alignItems: { xs: 'center' },
            }}
          >
            <Button
              sx={{
                backgroundColor: '#CBA213',
                mr: { md: 4 },
                height: 50,
                width: 150,
                textTransform: 'none',

                color: 'white',
              }}
              onClick={() => router.push(PRODUCTS_PAGE)}
            >
              Explore the Shop
            </Button>
            <Button
              sx={{
                display: { xs: 'none', sm: 'flex' },
                textTransform: 'none',
                color: 'white',
              }}
              startIcon={
                <Image
                  src="/images/Play.svg"
                  alt="profile"
                  width={50}
                  height={50}
                />
              }
            >
              How to make
            </Button>
          </Box>
        </Box>
        <Box
          sx={{
            display: { xs: 'none', md: 'flex' },
            backgroundColor: 'white',
          }}
        >
          <Box sx={{ mt: 10, ml: -12 }}>
            <Image
              src="/images/Hero-Image.png"
              alt="profile"
              width={818}
              height={796}
            />
          </Box>
        </Box>
      </Box>
    </>
  );
};

export default Hero;