www_ourverse_new/src/components/Casestudies.jsx

const posts = [

  {
    id: 2,
    title: 'Art Gallery',
    href: '#',
    description:
      'Explore an immersive metaverse art gallery showcasing creativity and innovation in a virtual space.',
    imageUrl:
      '/images/usecases/artgallery.jpg',
    type: 'Education',
    datetime: '2020-03-16',
  },
  {
    id: 4,
    title: 'DJ Concert',
    href: '#',
    description:
      'Join an electrifying DJ concert in the metaverse and experience music like never before.',
    imageUrl:
      '/images/usecases/dj.jpg',
    type: 'Events',
    datetime: '2020-03-16',
  },
  {
    id: 5,
    title: 'Frozen World',
    href: '#',
    description:
      'Dive into the Frozen World metaverse, a unique educational environment to learn about the impact of global warming.',
    imageUrl:
      '/images/usecases/env.jpg',
    type: 'Education',
    datetime: '2020-03-16',
  },
  {
    id: 6,
    title: 'Hospital',
    href: '#',
    description:
      'Discover a metaverse hospital designed to provide insights into healthcare facilities and technology.',
    imageUrl:
      '/images/usecases/hospital.jpg',
    type: 'Healthcare',
    datetime: '2020-03-16',
  },
  {
    id: 7,
    title: 'Office',
    href: '#',
    description:
      'Step into a virtual office space in the metaverse, perfect for real estate exploration and remote collaboration.',
    imageUrl:
      '/images/usecases/office.jpg',
    type: 'Real Estate',
    datetime: '2020-03-16',
  },
  {
    id: 9,
    title: 'Beauty Concept Store',
    href: '#',
    description:
      'Experience a virtual concept cstore, demonstrating e-commerce solutions within a metaverse setting.',
    imageUrl:
      '/images/usecases/store.jpg',
    type: 'E-commerce',
    datetime: '2020-03-16',
  },
  {
    id: 10,
    title: 'UAE Presidential Court',
    href: '#',
    description:
      'Explore the UAE Presidential Court metaverse to learn about government initiatives and infrastructure.',
    imageUrl:
      '/images/usecases/uae.jpg',
    type: 'Government',
    datetime: '2020-03-16',
  },
  {
    id: 11,
    title: 'KM Universe',
    href: '#',
    description:
      'Participate in events and explore the limitless possibilities of the KM Universe metaverse.',
    imageUrl:
      '/images/usecases/universe.jpg',
    type: 'Events',
    datetime: '2020-03-16',
  },
  {
    id: 12,
    title: 'Anita Cafe',
    href: '#',
    description:
      'Visit Anita Cafe in the metaverse, where you can engage in social events and experience virtual dining.',
    imageUrl:
      '/images/usecases/cafe.jpg',
    type: 'Events',
    datetime: '2020-03-16',
  },
  
  ]
  
  export default function Casestudies() {
    return (
      <div className="bg-gradient-to-b from-purple-50/70 to-purple-50/5 lg:py-20 py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="h3-title">Case Studies</h2>
            <p className="mt-4 section-text font-display ">
            Discover how OurVerse uniquely addresses challenges and fosters innovation with specific, real-world applications of our technology.
            </p>
          </div>
          <div className="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
            {posts.map((post) => (
              <article
                key={post.id}
                className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-purple-900 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80"
              >
                <img alt="" src={post.imageUrl} className="absolute inset-0 -z-10 h-full w-full object-cover" />
                <div className="absolute inset-0 -z-10 bg-gradient-to-t from-purple-900 via-purple-900/40" />
                <div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-purple-900/10" />
  
                <div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-purple-300">
                  <time dateTime={post.datetime} className="mr-8">
                    {post.type}
                  </time>
                </div>
                <h3 className="mt-3 text-lg font-semibold leading-6 text-white">
                  <a href={post.href}>
                    <span className="absolute inset-0" />
                    {post.title}
                  </a>
                </h3>
                <h3 className="mt-3 text-sm font-normal leading-6 text-white">
                  <a href={post.href}>
                    <span className="absolute inset-0" />
                    {post.description}
                  </a>
                </h3>
              </article>
            ))}
          </div>
        </div>
      </div>
    )
  }