85 lines
4.9 KiB
JavaScript
85 lines
4.9 KiB
JavaScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { Dialog, DialogPanel } from '@headlessui/react'
|
||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
||
|
||
|
||
export default function Eventhero() {
|
||
return (
|
||
|
||
<div className="overflow-hidden bg-gradient-to-b from-purple-50/80 to-purple-50/10 ">
|
||
<div className="mx-auto max-w-7xl px-6 pb-24 pt-36 lg:px-8 lg:pt-32">
|
||
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
|
||
<div className="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl">
|
||
<h1 className="text-4xl font-bold tracking-tight text-gradient-dark sm:text-6xl">
|
||
We’re changing the way people connect.
|
||
</h1>
|
||
<p className="mt-6 section-text sm:max-w-md lg:max-w-none">
|
||
Join the most immersive and interactive connecting experiences in the borderless worlds of OurVerse, where innovation meets collaboration.
|
||
From groundbreaking keynotes to virtual networking, OurVerse Events are designed to connect, inspire, and empower.
|
||
</p>
|
||
<div className="mt-10 flex items-center gap-x-6">
|
||
<a
|
||
href="#"
|
||
className="rounded-2xl font-semibold btn-gradient-dark2"
|
||
>
|
||
Get started
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
|
||
<div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
|
||
<div className="relative">
|
||
<img
|
||
alt=""
|
||
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
|
||
className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
|
||
/>
|
||
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
|
||
</div>
|
||
</div>
|
||
<div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
|
||
<div className="relative">
|
||
<img
|
||
alt=""
|
||
src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
|
||
className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
|
||
/>
|
||
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
|
||
</div>
|
||
<div className="relative">
|
||
<img
|
||
alt=""
|
||
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
|
||
className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
|
||
/>
|
||
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
|
||
</div>
|
||
</div>
|
||
<div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
|
||
<div className="relative">
|
||
<img
|
||
alt=""
|
||
src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80"
|
||
className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
|
||
/>
|
||
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
|
||
</div>
|
||
<div className="relative">
|
||
<img
|
||
alt=""
|
||
src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
|
||
className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
|
||
/>
|
||
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|