import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'


export default function Venue() {
  return (
    <div className="overflow-hidden bg-white py-24 lg:py-24">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
          <div className="lg:pr-8 lg:pt-4">
            <div className="lg:max-w-lg">
            <p className="mt-2 text-intro">Venue</p>
              <p className="mt-2 text-3xl font-medium tracking-tight text-gradient lg:text-5xl">OurWorld Verse</p>
              <p className="mt-6 text-lg leading-8 text-purple-900">
              Hosted within the dynamic environment of OurVerse, 'OurWorld Verse' is more than just a virtual venue—
              it's a fully immersive experience.
              </p>
              <p className="mt-6 text-lg leading-8 text-purple-900">
              Designed to showcase the endless possibilities of the metaverse, 
              this digital space allows you to explore, connect, and interact in ways that go far beyond traditional event venues.
              </p>
              <p className="mt-6 text-lg leading-8 text-purple-900">
              Navigate through stunning virtual landscapes, engage with other participants in real-time, 
              and discover the cutting-edge features of our metaverse platform.
              </p>
            </div>
          </div>
          <video
          autoPlay
          loop
          muted
          playsInline
          width={2432}
          height={1442}
          className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-purple-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
            >
          <source src="/videos/ourverse2.mp4" type="video/mp4" />
          Your browser does not support the video tag.
         </video>
        </div>
      </div>
    </div>
  )
}