export default function Eventbanner() {
    return (
      <div className="bg-gradient-to-b from-purple-50/10 to-purple-50/80">
        <div className="mx-auto max-w-2xl px-4 pb-24 sm:px-6 lg:max-w-7xl">
          <h2 className="text-intro">Community</h2>
          <h2 className="mt-2 mb-4  h3-title-new">
            Events
          </h2>
          <div className="relative overflow-hidden rounded-lg lg:h-96">
            <div className="absolute inset-0">
              <img
                alt=""
                src="/images/eventbg.jpg"
                className="h-full w-full object-cover object-center"
              />
            </div>
            <div aria-hidden="true" className="relative h-96 w-full lg:hidden" />
            <div aria-hidden="true" className="relative h-32 w-full lg:hidden" />
            <div className="absolute py-4 inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-purple-950 bg-opacity-90 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96  lg:flex-col lg:items-start lg:rounded-br-none lg:rounded-tl-lg">
              <div>
                <h2 className="mt-4 lg:text-3xl text-xl font-bold text-white">OurVerse </h2>
                    <h2 className="lg:text-3xl text-xl font-bold text-white">FutureFest 2024</h2>
                    <h3 className="text-xl font-bold text-white">Nov 22 - 24</h3>
                <p className="mt-4 text-md text-gray-300">
                OurVerse's OurFutureFest connects freelancers, innovators, and businesses in the Metaverse, empowering them to explore new technologies and collaborate seamlessly across boundaries.
                </p>
              </div>
              <a
                href="/events/versefest.html"
                className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md btn-dark bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
              >
                Register Now
              </a>
            </div>
          </div>
          </div>
        </div>
    )
  }