import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/20/solid'

export default function Featurehero() {
  return (
    <div className="relative isolate overflow-hidden bg-purple-900 py-24 sm:py-32">
      <img
        alt=""
        src="/images/featureshome.jpg"
        className="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center"
      />

      {/* Gradient Overlay from left to right */}
      <div className="absolute inset-0 bg-gradient-to-r from-[#302b4b] via-[#302b4b]/70 to-white/0 -z-10"></div>

      <div className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl">
      <div className="absolute inset-0 bg-gradient-to-b  from-[#302b4b] via-[#443c94] to-white"></div>
      </div>
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl lg:mx-0">
          <h2 className="lg:text-6xl font-semibold tracking-tight text-gradient-new2 text-xl">The Future of Collaboration</h2>
          <p className="mt-6 section-text-light max-w-xl font-display">
          Step into the future of communication and collaboration with immersive virtual environments. 
          OurVerse provides innovative tools that transform your events, meetings, and creative projects, 
          offering fresh and exciting ways to bring your vision to life.
          </p>
          <div className="mt-10 pb-8 flex items-center gap-x-6">
            <a
              href="https://portal.ourverse.tf"
              className="rounded-2xl btn-light font-semibold px-3.5 py-2.5"
              target="_blank"
              rel="noopener noreferrer"
            >
              Join OurVerse
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}