add community
This commit is contained in:
parent
e8e8a8c621
commit
4be4914a09
97
src/components/Community.jsx
Normal file
97
src/components/Community.jsx
Normal file
@ -0,0 +1,97 @@
|
||||
const featuredPost = {
|
||||
id: 1,
|
||||
title: 'FutureFest 2024',
|
||||
href: '#',
|
||||
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: '2020-03-16',
|
||||
}
|
||||
const posts = [
|
||||
{
|
||||
id: 2,
|
||||
title: 'Boost your conversion rate',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.',
|
||||
date: 'Mar 10, 2020',
|
||||
datetime: '2020-03-16',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Boost your conversion rate',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.',
|
||||
date: 'Mar 10, 2020',
|
||||
datetime: '2020-03-16',
|
||||
},
|
||||
// More posts...
|
||||
]
|
||||
|
||||
export default function Example() {
|
||||
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-base font-medium font-mono leading-7 text-blue-500">Community</h2>
|
||||
<img
|
||||
alt=""
|
||||
src="/images/futurefest2.jpg"
|
||||
className="mt-4 aspect-auto w-full rounded-2xl bg-gray-50 object-cover lg:aspect-auto lg:h-[20.5rem]"
|
||||
/>
|
||||
<h2 id="featured-post" className="mt-8 text-3xl font-medium tracking-tight text-blue-700 sm:text-4xl">
|
||||
{featuredPost.title}
|
||||
</h2>
|
||||
<time dateTime={featuredPost.datetime} className="mt-2 block text-sm leading-6 text-gray-600">
|
||||
{featuredPost.date}
|
||||
</time>
|
||||
<p className="mt-2 text-lg leading-8 text-gray-600">{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="flex">
|
||||
<a
|
||||
href={featuredPost.href}
|
||||
aria-describedby="featured-post"
|
||||
className="text-sm font-semibold leading-6 text-blue-700 mt-2"
|
||||
>
|
||||
Learn More <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<div className="mx-auto w-full max-w-2xl border-t border-gray-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-gray-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-gray-600">
|
||||
{post.date}
|
||||
</time>
|
||||
<h2 className="mt-2 text-lg font-semibold text-blue-700 group-hover:text-blue-400">
|
||||
<a href={post.href}>
|
||||
<span className="absolute inset-0" />
|
||||
{post.title}
|
||||
</a>
|
||||
</h2>
|
||||
<p className="mt-4 text-sm leading-6 text-gray-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-blue-700 mt-2"
|
||||
>
|
||||
Learn More <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -10,8 +10,8 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
const navigationItems = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'Usecases', href: '#' },
|
||||
{ name: 'Events', href: '#' },
|
||||
{ name: 'Usecases', href: 'usecases' },
|
||||
{ name: 'Community', href: '#' },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
@ -33,7 +33,7 @@ export function Header() {
|
||||
</div>
|
||||
<Button href="#">Join OurVerse</Button>
|
||||
</div>
|
||||
<div className="lg:hidden flex items-center">
|
||||
<div className="lg:hidden flex items-center bg-gradient">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
@ -70,7 +70,7 @@ export function Header() {
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<Button href="#" className="mt-4">
|
||||
<Button href="#" className="mt-4 bg-gradient">
|
||||
Join OurVerse
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -15,34 +15,34 @@ export function Homepage() {
|
||||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover -z-10"
|
||||
>
|
||||
<source src="/videos/ourverse1.mp4" type="video/mp4" />
|
||||
<source src="/videos/ourverse4.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<div className="mx-auto max-w-xl lg:max-w-6xl">
|
||||
<div className="mt-12 mb-6 lg:mt-16">
|
||||
<div className="inline-flex space-x-6">
|
||||
<span className="rounded-full bg-blue-700/10 px-3 py-1 text-sm font-semibold leading-6 text-blue-700 ring-1 ring-inset ring-indigo-600/10">
|
||||
<span className="rounded-full bg-gradient-light px-3 py-1 text-sm font-semibold leading-6 font-blue1 ring-1 ring-inset ring-indigo-600/10">
|
||||
What's new
|
||||
</span>
|
||||
<a href="/events/versefest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-blue-500 hover:text-blue-900">
|
||||
<a href="/community/versefest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 font-blue1 hover:text-blue-900">
|
||||
<span className="underline">Announcing: VerseFest 2024</span>
|
||||
<ChevronRightIcon className="h-5 w-5 text-blue-700" aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="font-display lg:max-w-2xl font-bold tracking-tighter text-blue-700 lg:text-7xl text-5xl">
|
||||
<h1 className="font-display lg:max-w-2xl font-bold tracking-tighter font-gradient lg:text-7xl text-5xl">
|
||||
A New, Vibrant Virtual World.
|
||||
</h1>
|
||||
<div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight text-blue-900">
|
||||
<p>Discover <span className='text-blue-700 font-semibold'>OurVerse</span>, a new virtual space designed for everyone,
|
||||
<div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight font-blue2">
|
||||
<p>Discover <span className='font-gradient font-semibold'>OurVerse</span>, a new virtual space designed for everyone,
|
||||
where you can express yourself freely, build meaningful relationships,
|
||||
and explore endless possibilities in an environment that celebrates diversity and authenticity.</p>
|
||||
</div>
|
||||
<div className="mt-10 pb-8 flex items-center gap-x-6">
|
||||
<a
|
||||
href="#"
|
||||
className="rounded-xl bg-blue-700 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
|
||||
className="rounded-2xl bg-gradient px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
|
||||
>
|
||||
Join OurVerse
|
||||
</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user