import React from 'react'
import Image from 'next/image'


const Hero = () => {

  return (
    <div className='w-full h-full lg:h-screen flex flex-col relative'>
      <p className='text-center mt-20 uppercase text-4xl sm:text-6xl md:text-[90px] lg:text-[125px] xl:text-[150px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>It's donut time</p>
      <Image src='/donut-bg.jpg' width={1600} height={1600} alt='home-hero' className='w-full md:h-full object-cover -mt-5 sm:-mt-10 -z-10'/>
    </div>
  )
}

export default Hero