import { IoIosSearch } from "react-icons/io";

const Home = () => {
  return (
    <>
    <div className="relative flex items-center justify-center h-[80vh]">
      <div className="bg-hero-pattern absolute z-10 w-full h-[80vh] bg-no-repeat bg-cover bg-center"></div>
      <div className="relative z-30 text-white text-center flex flex-col justify-center items-center">
        <h1 className="uppercase tracking-tight text-5xl font-serif mb-4 text-shadow-lg shadow-black">Chicago properties for sale</h1>
        <p className="text-shadow-DEFAULT shadow-black">Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br />Alias dolorem error atque aut, asperiores et tempore iste quaerat pariatur maxime?</p>
        <form className="text-black mt-5 bg-white rounded-lg flex items-center">
          <input type="text" placeholder="Search your dream property" className="px-4 py-3 focus:outline-none bg-transparent text-sm w-60 sm:w-80"/>
          <IoIosSearch className="text-slate-600 text-lg m-2"/>
        </form>
      </div>
      
    </div>
  </>
  )
}

export default Home