235 lines
8.4 KiB
JavaScript
235 lines
8.4 KiB
JavaScript
import {
|
||
ChatBubbleBottomCenterTextIcon,
|
||
UserGroupIcon,
|
||
SquaresPlusIcon,
|
||
VideoCameraIcon,
|
||
CalendarIcon,
|
||
|
||
} from '@heroicons/react/24/outline'
|
||
|
||
const transferFeatures = [
|
||
{
|
||
id: 1,
|
||
name: 'Creative Collaboration',
|
||
description:
|
||
'Work on projects together with real-time collaboration in shared virtual spaces, interactive 3D whiteboards, and dynamic environments for live demos and workshops.',
|
||
icon: UserGroupIcon,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: 'OurVerse Studio',
|
||
description:
|
||
'Create professional-grade live content with integrated virtual studio tools and multi-cam switching for high-quality broadcasting.',
|
||
icon: VideoCameraIcon,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: 'Build Your Verse',
|
||
description:
|
||
'Design custom virtual environments using AI-powered tools, extensive 3D model and template libraries, and immersive animations to bring your virtual spaces to life.',
|
||
icon: SquaresPlusIcon,
|
||
},
|
||
]
|
||
const communicationFeatures = [
|
||
{
|
||
id: 1,
|
||
name: 'Advanced Communication',
|
||
description:
|
||
'Connect through holograms, video and voice chat, and powerful sharing tools that elevate interaction and engagement.',
|
||
icon: ChatBubbleBottomCenterTextIcon,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: 'Event Management',
|
||
description:
|
||
'Host customized events with dynamic spaces, real-time updates, virtual networking lounges, live streaming, and analytics.',
|
||
icon: CalendarIcon,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: 'Integrated CRM',
|
||
description:
|
||
'Manage customer and user interactions within one unified platform designed to support your business’s digital transformation.',
|
||
icon: CalendarIcon,
|
||
},
|
||
]
|
||
|
||
export default function Featureshome() {
|
||
return (
|
||
<div className="overflow-hidden py-16 lg:py-24">
|
||
<div className="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
|
||
<svg
|
||
fill="none"
|
||
width={404}
|
||
height={784}
|
||
viewBox="0 0 404 784"
|
||
aria-hidden="true"
|
||
className="absolute left-full hidden -translate-x-1/2 -translate-y-1/4 transform lg:block"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
x={0}
|
||
y={0}
|
||
id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7"
|
||
width={20}
|
||
height={20}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-purple-200" />
|
||
</pattern>
|
||
</defs>
|
||
<rect fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" width={404} height={784} />
|
||
</svg>
|
||
|
||
<div className="relative">
|
||
<h2 className="text-center h3-title-new">
|
||
The Future of Communication and Collaboration
|
||
</h2>
|
||
<p className="mx-auto mt-4 max-w-3xl text-center section-text font-display ">
|
||
OurVerse offers cutting-edge tools and immersive virtual environments designed to bring your events, meetings, and creative projects to life in new and exciting ways.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
|
||
<div className="relative">
|
||
<h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Features</h2>
|
||
<h3 className="h3-title-new">Collaboration & Creation Tools</h3>
|
||
<p className="mt-4 section-text font-display ">
|
||
Transform how you and your team work together with our innovative, real-time creative tools.
|
||
</p>
|
||
|
||
<dl className="mt-10 space-y-10">
|
||
{transferFeatures.map((item) => (
|
||
<div key={item.id} className="relative">
|
||
<dt>
|
||
<div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-gradient text-white">
|
||
<item.icon aria-hidden="true" className="h-8 w-8" />
|
||
</div>
|
||
<p className="ml-16 text-lg font-semibold leading-6 text-cyan-700">{item.name}</p>
|
||
</dt>
|
||
<dd className="ml-16 mt-2 text-base text-purple-700">{item.description}</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
|
||
<div aria-hidden="true" className="relative -mx-4 mt-10 lg:mt-0">
|
||
<svg
|
||
fill="none"
|
||
width={784}
|
||
height={404}
|
||
viewBox="0 0 784 404"
|
||
className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
x={0}
|
||
y={0}
|
||
id="ca9667ae-9f92-4be7-abcb-9e3d727f2941"
|
||
width={20}
|
||
height={20}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-purple-200" />
|
||
</pattern>
|
||
</defs>
|
||
<rect fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" width={784} height={404} />
|
||
</svg>
|
||
<img
|
||
alt=""
|
||
src="/images/feature1.png"
|
||
width={490}
|
||
className="relative mx-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<svg
|
||
fill="none"
|
||
width={404}
|
||
height={784}
|
||
viewBox="0 0 404 784"
|
||
aria-hidden="true"
|
||
className="absolute right-full hidden translate-x-1/2 translate-y-12 transform lg:block"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
x={0}
|
||
y={0}
|
||
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
|
||
width={20}
|
||
height={20}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-purple-200" />
|
||
</pattern>
|
||
</defs>
|
||
<rect fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" width={404} height={784} />
|
||
</svg>
|
||
|
||
<div className="relative mt-12 sm:mt-16 lg:mt-24">
|
||
<div className="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:items-center lg:gap-8">
|
||
<div className="lg:col-start-2">
|
||
|
||
|
||
<dl className="mt-10 space-y-10">
|
||
{communicationFeatures.map((item) => (
|
||
<div key={item.id} className="relative">
|
||
<dt>
|
||
<div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-gradient text-white">
|
||
<item.icon aria-hidden="true" className="h-8 w-8" />
|
||
</div>
|
||
<p className="ml-16 text-lg font-semibold leading-6 text-cyan-700">{item.name}</p>
|
||
</dt>
|
||
<dd className="ml-16 mt-2 text-base text-purple-700">{item.description}</dd>
|
||
</div>
|
||
))}
|
||
<div className="mt-6">
|
||
<a
|
||
href="/features"
|
||
className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-dark
|
||
>
|
||
Explore Features
|
||
</a>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
|
||
<div className="relative -mx-4 mt-10 lg:col-start-1 lg:mt-0">
|
||
<svg
|
||
fill="none"
|
||
width={784}
|
||
height={404}
|
||
viewBox="0 0 784 404"
|
||
aria-hidden="true"
|
||
className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
|
||
>
|
||
<defs>
|
||
<pattern
|
||
x={0}
|
||
y={0}
|
||
id="e80155a9-dfde-425a-b5ea-1f6fadd20131"
|
||
width={20}
|
||
height={20}
|
||
patternUnits="userSpaceOnUse"
|
||
>
|
||
<rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-purple-200" />
|
||
</pattern>
|
||
</defs>
|
||
<rect fill="url(#e80155a9-dfde-425a-b5ea-1f6fadd20131)" width={784} height={404} />
|
||
</svg>
|
||
<img
|
||
alt=""
|
||
src="/images/feature2a.png"
|
||
width={490}
|
||
className="relative mx-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|