90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
|
|
import clsx from 'clsx'
|
|
|
|
import { BackgroundImage } from '@/components/BackgroundImage'
|
|
import { Container } from '@/components/Container'
|
|
|
|
const products = [
|
|
{
|
|
id: 1,
|
|
name: 'Enhancing Education',
|
|
color: 'Transform traditional education with immersive distance learning opportunities',
|
|
href: '#',
|
|
imageSrc: '/images/education.jpg',
|
|
imageAlt: 'classroom',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Environmental Awareness',
|
|
color: 'Advocate for environmental conservation through virtual eco-tours & initiatives.',
|
|
href: '#',
|
|
imageSrc: '/images/environment.jpg',
|
|
imageAlt: 'environment',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Supporting Healthcare',
|
|
color: 'Innovate healthcare delivery by integrating virtual consultations & tools.',
|
|
href: '#',
|
|
imageSrc: '/images/healthcare.jpg',
|
|
imageAlt: 'clinic',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Empowering Africa',
|
|
color: 'Foster cultural and economic growth across Africa through virtual solutions.',
|
|
href: '#',
|
|
imageSrc: '/images/africa.jpg',
|
|
imageAlt: 'africa',
|
|
},
|
|
]
|
|
|
|
export function Product() {
|
|
return (
|
|
<section id="schedule" aria-label="Schedule" className="py-8 lg:py-24 mb-12">
|
|
<Container className="relative z-10">
|
|
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-4xl lg:pr-24">
|
|
<h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Usecases</h2>
|
|
<h2 className="mt-2 font-display text-4xl font-semibold tracking-tighter text-gradient-dark sm:text-5xl">
|
|
Transforming Possibilities Across Industries Digitally
|
|
</h2>
|
|
<p className="mt-4 font-display lg:text-xl text-lg tracking-tight text-purple-900">
|
|
Explore diverse scenarios where our platform empowers users to create, collaborate,
|
|
and innovate in immersive virtual environments, unlocking new potentials across industries and communities.
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
<div className="relative lg:mt-14 mt-16">
|
|
<BackgroundImage position="right" className="-bottom-32 -top-40" />
|
|
<Container className="relative">
|
|
<div className="mt-4 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
|
|
{products.map((product) => (
|
|
<div key={product.id}>
|
|
<div className="relative">
|
|
<div className="relative h-full w-full overflow-hidden rounded-sm">
|
|
<img
|
|
alt={product.imageAlt}
|
|
src={product.imageSrc}
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="relative mt-4">
|
|
<h3 className="lg:text-base text-lg font-medium text-cyan-700">{product.name}</h3>
|
|
<p className="mt-1 mb-2 lg:text-sm text-base text-purple-900">{product.color}</p>
|
|
<a href={product.href} className="lg:text-xs text-sm font-mono text-cyan-600 hover:text-purple-600">
|
|
Read Usecase <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|