import localFont from "next/font/local";
import Image from "next/image";
import badge from '../../../public/badge-ticket.png'
import arrow from '../../../public/arrow.png'

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})


function Hero() {
    return (
        <div>
            <div className="flex flex-col w-full items-center justify-center mb-16">
                    <div className="flex flex-row items-center justify-between gap-4">
                       <h1 className={`${figtree.className} text-7xl font-medium`}>Find Your PakStay Home in</h1>
                       <div className="relative">
                           <Image src={badge} alt="badge" width={400} height={400} />
                           <div className="absolute top-1/2 left-[52%] transform -translate-x-1/2 -translate-y-1/2 rotate-[-8deg]">
                               <h2 className={`${figtree.className} text-6xl font-bold text-black uppercase`}>Karachi</h2>
                           </div>
                       </div>
                    </div>
                    <div>
                        <h3 className={`${figtree.className} text-xl font-bold`}>Travel Karo, Tension Free!</h3>
                    </div>
            </div>
        </div>
    )
}

export default Hero;