import { BackgroundImage } from '@/components/BackgroundImage'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { RocketLaunchIcon, } from '@heroicons/react/20/solid'
import { CalendarIcon, MapPinIcon, TicketIcon} from '@heroicons/react/24/outline'

export function Event1() {
  return (
    <div className="relative lg:py-12 mt-20 pb-12">
      <BackgroundImage className="-bottom-14 -top-20" />
      <Container className="relative">
        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
          <h1 className="font-display text-3xl font-semibold tracking-tighter text-gradient sm:text-7xl">
            VerseFest 2024
          </h1>
          <h2 className="lg:mt-4 mt-2 font-display lg:text-2xl font-normal tracking-tight text-purple-600 text-xl">
          <CalendarIcon className="h-8 w-8 mx-0.2 inline-block -mt-0.5" /> OCT 24-26 • 12 PM - 6 PM UTC 
          </h2>
          <h2 className="lg:mt-0 mt-0 font-display lg:text-2xl font-normal tracking-tight text-purple-600 text-xl">
          <MapPinIcon className="h-8 w-8 mx-0.2 inline-block -mt-0.5" /> OURWORLD METAVERSE
          </h2>
          <div className="mt-6 space-y-6 font-normal lg:max-w-3xl lg:text-xl text-base -tracking-normal leading-tight text-purple-900">
            <p>
            Get ready to step into the future with <span className='font-semibold text-gradient'>VerseFest 2024 by OurVerse!</span>  
            </p>
            <p>
            This groundbreaking free virtual event is designed to unite freelancers, 
            entrepreneurs, startups, investors, gamers, and Web3 enthusiasts from every corner of the globe.
            </p>
            <p>
            Over three exciting days, you’ll immerse yourself in an innovative metaverse, discover the latest trends in technology, 
            and connect with like-minded pioneers.
            </p>
            <p>
            From engaging talks and hands-on demos to networking opportunities in stunning virtual environments, VerseFest 2024 is where the world comes together to explore the next frontier.
            </p>
          </div>
          <div className="mt-10 pb-8 flex items-center gap-x-6">
            <a
              href="#"
              className="rounded-xl bg-purple-700 px-6 py-3.5 lg:max-w-4xl max-w-2xl text-base tracking-tight font-semibold btn-gradient-dark2"
            >
              Get Your FREE Ticket  <TicketIcon className="h-5 w-5 mx-0.3 inline-block -mt-0.5" />
            </a>
          </div>
        </div>
      </Container>
    </div>
  )
}