import { GiHouse } from "react-icons/gi";
import { BsFillBuildingsFill } from "react-icons/bs";
import { MdOutlineRealEstateAgent } from "react-icons/md";
import { FaUserLarge } from "react-icons/fa6";
import { Link } from "react-router-dom";

const Hero = () => {
  return (
    <div>
        <div className="relative flex flex-col items-center justify-center h-[25vh] mt-10">
        <div className="bg-hero1-pattern absolute z-10 w-full h-[25vh] bg-no-repeat bg-cover bg-center opacity-40"></div>
        <p className="uppercase z-30 tracking-wider text-md font-serif mb-10 px-2 text-blue-900 sm:text-lg text-center font-bold"> You can be sure to find a right property for you and your family
            <br/> with Chicagoland
        </p>
        <div className="relative z-30 text-center text-blue-900 flex justify-center items-center gap-4 md:gap-10">
            <Link className="flex flex-col items-center justify-center text-center hover:text-sky-950">
                <h1 className="text-xl sm:text-3xl mb-2"><GiHouse/></h1>
                <p className="uppercase text-xs font-bold tracking-wider">Buying</p>
            </Link>
            <Link className="flex flex-col items-center justify-center text-center hover:text-sky-950">
                <h1 className="text-xl sm:text-3xl mb-2"><BsFillBuildingsFill/></h1>
                <p className="uppercase text-xs font-bold tracking-wider">Renting</p>
            </Link>
            <Link className="flex flex-col items-center justify-center text-center hover:text-sky-950">
                <h1 className="text-xl sm:text-3xl mb-2"><MdOutlineRealEstateAgent/></h1>
                <p className="uppercase text-xs font-bold tracking-wider">Get Offer</p>
            </Link>
            <Link to='/contact' className="flex flex-col items-center justify-center text-center hover:text-sky-950">
                <h1 className="text-xl sm:text-3xl mb-2"><FaUserLarge/></h1>
                <p className="uppercase text-xs font-bold tracking-wider">Find agents</p>
            </Link>
        </div>
        </div>
    </div>
  )
}

export default Hero