Merge branch 'development' of https://git.ourworld.tf/ourworld_web/ourverse_new into development
This commit is contained in:
commit
22f9e8ea20
234
src/components/Featureshome.jsx
Normal file
234
src/components/Featureshome.jsx
Normal file
@ -0,0 +1,234 @@
|
||||
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">
|
||||
The Future of Communication and Collaboration
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-3xl text-center section-text">
|
||||
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">Collaboration & Creation Tools</h3>
|
||||
<p className="mt-4 section-text">
|
||||
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-gradient-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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user