63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/24/outline'
|
|
|
|
const supportLinks = [
|
|
{
|
|
name: 'Sales',
|
|
href: '#',
|
|
icon: PhoneIcon,
|
|
},
|
|
{
|
|
name: 'Technical Support',
|
|
href: '#',
|
|
icon: LifebuoyIcon,
|
|
},
|
|
{
|
|
name: 'Media Inquiries',
|
|
href: '#',
|
|
icon: NewspaperIcon,
|
|
},
|
|
{
|
|
name: 'Media Inquiries',
|
|
href: '#',
|
|
icon: NewspaperIcon,
|
|
},
|
|
]
|
|
|
|
export default function Example() {
|
|
return (
|
|
<div className="bg-white">
|
|
{/* Header */}
|
|
<div className="relative bg-gray-800 pb-40">
|
|
<div className="absolute inset-0">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div aria-hidden="true" className="absolute inset-0 bg-gray-800 mix-blend-multiply" />
|
|
</div>
|
|
<div className="relative mx-auto max-w-7xl px-6 py-24 lg:px-8">
|
|
<h1 className="mt-8 text-3xl font-medium tracking-tight text-white lg:text-4xl">Community</h1>
|
|
<p className="mt-6 max-w-3xl text-xl text-gray-300">
|
|
Together we are shaping the future of immersive virtual environments, powered by cutting-edge technology and innovative collaborations.
|
|
Join OurVerse and be a part of creating new realities.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overlapping cards */}
|
|
<section aria-labelledby="contact-heading" className="relative z-10 mx-auto -mt-60 max-w-2xl px-6 lg:mx-20">
|
|
<div className="flex flex-wrap justify-start gap-x-10 gap-y-6 leading-7">
|
|
{supportLinks.slice(0, 4).map((link, index) => ( // Assuming you only want to show 4 icons
|
|
<div key={link.name} className="px-0 pb-8 pt-16">
|
|
<div className="relative top-0 left-0 -translate-y-1/2 rounded-xl bg-indigo-600 p-5 shadow-lg">
|
|
<link.icon aria-hidden="true" className="h-4 w-4 text-white" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|