102 lines
4.5 KiB
JavaScript
102 lines
4.5 KiB
JavaScript
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">→</span>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|