www_ourverse_new/src/components/HeroFeature.jsx

72 lines
2.8 KiB
JavaScript

import {
ArrowPathIcon,
CloudArrowUpIcon,
Cog6ToothIcon,
FingerPrintIcon,
LockClosedIcon,
ServerIcon,
CubeIcon,
DocumentMagnifyingGlassIcon,
CpuChipIcon,
ShieldCheckIcon,
FilmIcon,
GlobeAltIcon,
RocketLaunchIcon,
} from '@heroicons/react/20/solid'
export default function HeroFeature() {
return (
<div className="bg-gradient-to-b from-purple-50/80 to-purple-50/10 pt-32 pb-12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-4xl text-center justify-center items-center">
<btn className="items-center rounded-2xl lg:px-12 px-6 btn-gradient-dark2 py-2.5 text-md font-semibold"
>
NEW
</btn>
<p className="mt-8 h3-title text-center">Introducing: OurHero Verse 3D</p>
<p className="mt-4 items-center align-center text-center section-text font-display">
First Generative AI 3D Tools for the Metaverse and Beyond
</p>
</div>
</div>
<div className="relative overflow-hidden pt-8">
<div className="mx-auto max-w-6xl px-6 lg:px-8">
{/* embed Video */}
<video
autoPlay
loop
muted
playsInline
className="relative w-full h-full overflow-hidden rounded-lg shadow-lg"
>
<source src="/videos/herohow.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
<div className="mt-4 mx-auto lg:mt-16 max-w-5xl px-6 lg:px-8 text-center items-center">
<h2 className="text-intro">Generative AI 3D Tool</h2>
<p className="mt-4 h3-title text-center">Transform your Imagination into Immersive Reality </p>
<p className="mt-8 items-center align-center section-text font-display -ct">
Our team has developed a cutting-edge system allowing users to generate with AI, full 3D virtual environments using text input alone,
by eliminating traditional barriers such as high technical skill requirements or expensive software.
</p>
<p className="mt-4 items-center align-center section-text font-display -ct">
Anyone, regardless of their background, skill level, or geographical location, can use the system to create complex 3D interactives environments tailored to their needs,
simply by describing them.
</p>
</div>
<div className="mt-10 pb-8 flex items-center justify-center">
<a
href="https://portal.ourverse.tf" target='_blank' rel="noopener noreferrer"
className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold shadow-sm"
>
Try Now
</a>
</div>
</div>
)
}