import {
    ArrowPathIcon,
    CloudArrowUpIcon,
    Cog6ToothIcon,
    FingerPrintIcon,
    LockClosedIcon,
    ServerIcon,
    CubeIcon,
    DocumentMagnifyingGlassIcon,
    CpuChipIcon,
    ShieldCheckIcon,
    FilmIcon,
    GlobeAltIcon,
    RocketLaunchIcon,
  } from '@heroicons/react/20/solid'
  
  const products = [
    {
      id: 1,
      name: 'Verse LaunchPad',
      href: '#',
      imageSrc: '/images/healthcare.jpg',
      imageAlt:
        'A dynamic space where innovative startups take the stage, pitching their groundbreaking ideas to potential investors.',
    },
    {
      id: 2,
      name: 'Verse Lounge',
      href: '#',
      imageSrc: '/images/healthcare.jpg',
      imageAlt:
        'A sleek digital media space designed for press, influencers, and content creators.',
    },
    {
      id: 3,
      name: 'VerseBeats Club',
      href: '#',
      imageSrc: '/images/healthcare.jpg',
      imageAlt:
        'Holographic technology meets the pulse of AI-driven beats.',
    },
    {
      id: 4,
      name: 'Mindscape Academy',
      href: '#',
      imageSrc: '/images/healthcare.jpg',
      imageAlt:
        'your gateway to the future of learning, offering a series of free educational experiences and immersive workshops focused on AI, Web3, and essential future skills.',
    },
    {
      id: 5,
      name: 'AI Colloseum',
      href: '#',
      imageSrc: '/images/healthcare.jpg',
      imageAlt:
        'A grand conference room where thought leaders, innovators, and enthusiasts gather to explore the vast possibilities of artificial intelligence.',
    },
    {
      id: 6,
      name: 'Freelance Oasis',
      href: '#',
      imageSrc: '/images/healthcare.jpg',
      imageAlt:
        'A  a dedicated space for freelancers to connect, collaborate, and grow.',
    },

    // More products...
  ]
  
  export default function Experiences() {
    return (
      <div className="bg-white lg:py-20 py-24">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-4xl sm:text-center">
            <p className="mt-2 text-intro">Rooms</p>
            <p className="mt-2 font-display text-4xl font-medium tracking-tighter text-gradient sm:text-5xl">Verse Spaces</p>
            <p className="mt-4 font-normal text-2xl tracking-tight text-purple-900">
            VerseFest 2024 is packed with dynamic experiences that cater to every interest 
            and level of expertise in 6 different virtual spaces within OurWorld Verse.
            </p>
          </div>
        </div>
        <div className="mx-auto lg:mt-12 max-w-7xl px-6 mt-8 mb-12 lg:px-8">
        <div className="mt-2 grid  gap-x-8 gap-y-8 md:grid-cols-2 lg:grid-cols-3">
          {products.map((product) => (
            <div key={product.id} className="group relative">
              <div className="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg bg-purple-100">
                <img alt={product.imageAlt} src={product.imageSrc} className="object-cover object-center" />
                <div aria-hidden="true" className="flex items-end p-4 opacity-100 group-hover:opacity-100">
                  <div className="w-full rounded-md bg-white bg-opacity-75 px-4 py-2 text-center text-sm font-medium text-purple-700 backdrop-blur backdrop-filter">
                   <a href="https://portal.ourverse.tf" target='_blank' >
                    <span aria-hidden="true" className="absolute inset-0" />
                    {product.name}
                  </a>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        </div>
      </div>
    )
  }