Hero Component

hero.jsx

const Hero = () => {
  return (
    <div
      className="relative bg-[url(https://unsplash.com/photos/HShd0DeMRIc/download?ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNzQxNzY4OTU5fA&force=true&w=2400)] bg-cover bg-center bg-no-repeat"
    >
      <div
        className="absolute inset-0 bg-white/75 sm:bg-transparent sm:from-white/95 sm:to-white/25 ltr:sm:bg-gradient-to-r rtl:sm:bg-gradient-to-l"
      ></div>
    
      <div
        className="relative mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:items-center lg:px-8"
      >
        <div className="max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
          <h1 className="text-3xl font-extrabold sm:text-5xl">
            Lapland Awaits
          </h1>
    
          <p className="mt-4 max-w-lg sm:text-xl/relaxed">
            Ready for a dreamy winter escape? With Tours to Lapland, experience the Northern Lights, stay in a snow hotel, sleigh with reindeer, meet a Sami family, and create unforgettable memories.
          </p>
        </div>
      </div>
    </div>
  );
}

export default Hero;