82 lines
3.5 KiB
JavaScript
82 lines
3.5 KiB
JavaScript
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
|
import { FaTelegramPlane, FaTwitter, FaYoutube, FaInstagram, FaLinkedin, FaFacebookF } from 'react-icons/fa' // Importing specific icons
|
|
import { FaSquareXTwitter } from "react-icons/fa6";
|
|
|
|
const features = [
|
|
{
|
|
name: 'Telegram',
|
|
description: 'Connect with our community in real-time, and participate in discussions about the future of virtual worlds.',
|
|
icon: FaTelegramPlane,
|
|
link: 'https://t.me/+wLcrJaC_DTw0NTVk', // Replace with actual Telegram link
|
|
},
|
|
{
|
|
name: 'X',
|
|
description: 'Follow us on X to receive the latest updates, insights, and news from OurVerse and our community.',
|
|
icon: FaSquareXTwitter,
|
|
link: 'https://x.com/OurVerseTF', // Replace with actual Twitter link
|
|
},
|
|
{
|
|
name: 'YouTube',
|
|
description: "Dive deep into product demos, event recaps, and videos that showcase how we're revolutionizing virtual experiences.",
|
|
icon: FaYoutube,
|
|
link: 'https://www.youtube.com/channel/UCavIIyki4cYFAUysi0aEDeA', // Replace with actual YouTube link
|
|
},
|
|
{
|
|
name: 'Instagram',
|
|
description: "Follow us on Instagram for sneak peeks of upcoming projects, community highlights, and more.",
|
|
icon: FaInstagram,
|
|
link: 'https://www.instagram.com/ourversetf/', // Replace with actual Instagram link
|
|
},
|
|
{
|
|
name: 'LinkedIn',
|
|
description: "Connect and stay informed on industry insights, partnerships, and professional opportunities.",
|
|
icon: FaLinkedin,
|
|
link: 'https://www.linkedin.com/company/ourversetf/', // Replace with actual LinkedIn link
|
|
},
|
|
{
|
|
name: 'Facebook',
|
|
description: "Join our community on Facebook to follow and be part of discussions about the evolution of immersive virtual experiences.",
|
|
icon: FaFacebookF,
|
|
link: 'https://www.facebook.com/profile.php?id=61566233156241', // Replace with actual Facebook link
|
|
},
|
|
]
|
|
|
|
export default function Socials() {
|
|
return (
|
|
<div className="relative bg-white py-16 sm:py-24 lg:py-32">
|
|
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
|
<h2 className="text-intro">Socials</h2>
|
|
<p className="mt-2 h3-title-new">
|
|
Join the Conversation
|
|
</p>
|
|
<p className="mx-auto mt-4 max-w-prose section-text font-display ">
|
|
Be a part of our global community by participating in open discussions and follow the most recent updates and news from OurVerse.
|
|
</p>
|
|
<div className="mt-12">
|
|
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<a href={feature.link} key={feature.name}
|
|
className="pt-6"
|
|
target='_blank'
|
|
rel='noreferrer'
|
|
>
|
|
<div className="flow-root rounded-lg bg-gray-50 px-6 pb-8">
|
|
<div className="-mt-6">
|
|
<div>
|
|
<span className="inline-flex items-center justify-center rounded-md btn-dark px-6 py-6 shadow-lg">
|
|
<feature.icon aria-hidden="true" className="h-6 w-6 text-white" />
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-8 text-lg font-medium tracking-tight text-gray-900">{feature.name}</h3>
|
|
<p className="mt-5 text-base text-gray-500">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|