const featuredPost = {
    id: 1,
    title: 'FutureFest 2024',
    href: '/events/versefest',
    description:
      'Embrace the possibilities at FutureFest 2024, a landmark event that invites you to explore the converging worlds of technology, creativity, and sustainability.',
    date: 'Mar 16, 2020',
    datetime: '2024-03-16',
  }
  const posts = [
    {
      id: 2,
      title: 'Building a Metaverse with Revenue: Insights from Arab Meta Summit 2022 Day 2',
      href: '/events/blockchainweek1',
      description:
        'At the Arab Meta Summit 2022, Christopher K, co-founder and CEO of Aviva Technologies, shared valuable insights on how to build a successful and revenue-generating metaverse.',
      date: 'Dec 21, 2022',
      datetime: '2022-12-21',
    },
    {
        id: 3,
        title: 'Real-World Applications of the Metaverse in AR: Insights from Omrei Abu Madi at the Arab Meta Summit 2022',
        href: '/events/blockchainweek2',
        description:
          'During Day 1 of the Arab Meta Summit 2022, Omrei Abu Madi, a visionary in both the tech and tourism industries, discussed the real-world applications of the Metaverse, particularly focusing on Augmented Reality (AR).',
        date: 'Dec 18, 2022',
        datetime: '2020-12-18',
      },
    // More posts...
  ]
  
  export default function Events() {
    return (
      <div className="bg-white pt-12 pb-24">
        
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8">
          
          <article className="mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg">
            <h2 className="text-intro">Community</h2>
            <h1 className="mt-2 mb-6 text-3xl font-semibold tracking-tighter text-gradient-dark lg:text-4xl">Latest News & Updates</h1> 
            <img
                alt=""
                src="/images/futurefest.jpg"
                className="mt-4 aspect-auto w-full rounded-2xl bg-purple-50 object-cover lg:aspect-auto lg:h-[20.5rem]"
              />
            <h2 id="featured-post" className="mt-8 text-3xl font-semibold tracking-tight text-gradient lg:text-4xl">
              {featuredPost.title}
            </h2>
            <time dateTime={featuredPost.datetime} className="mt-2 block text-sm leading-6 text-purple-600">
            {featuredPost.date}
            </time>
            <p className="mt-2 section-text font-display ">{featuredPost.description}</p>
            <div className="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col">
            <div className="mt-4 flex items-center gap-x-6">
                    <a
                      href="#"
                      className="rounded-2xl font-semibold btn-dark text-base leading-6"
                    >
                      Learn More
                    </a>
                    <a href="/events" className="text-base font-semibold leading-6 text-link">
                      See more events <span aria-hidden="true">→</span>
                    </a>
                  </div>

            </div>
          </article>
          <div className="mx-auto w-full max-w-2xl border-t border-purple-900/10 pt-12 sm:pt-16 lg:mx-0 lg:max-w-none lg:border-t-0 lg:pt-0">
            <div className="-my-12 divide-y divide-purple-900/10">
              {posts.map((post) => (
                <article key={post.id} className="py-12">
                  <div className="group relative max-w-xl">
                    <time dateTime={post.datetime} className="block text-sm leading-6 text-purple-600">
                      {post.date}
                    </time>
                    <h2 className="mt-2 text-lg font-semibold text-gradient group-hover:text-purple-700">
                      <a href={post.href}>
                        <span className="absolute inset-0" />
                        {post.title}
                      </a>
                    </h2>
                    <p className="mt-4 text-sm leading-6 text-purple-600">{post.description}</p>
                  </div>
                  <div className="mt-4 flex">
                  <a
                  href={post.href}
                  aria-describedby="post"
                  className="text-sm font-semibold leading-6 text-cyan-600 hover:text-purple-700 mt-2"
                >
                  Learn More <span aria-hidden="true">&rarr;</span>
                </a>
                  </div>
                </article>
                
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }