import { Button } from '@/components/Button';
import { Container } from '@/components/Container';
import { Gradient } from '@/components/Gradient';
import { ChevronRightIcon } from '@heroicons/react/20/solid'

export function Heropage() {
  return (
    <div className="lg:pt-24 pt-24 pb-12 min-h-screen flex items-center justify-center relative">
      <Container>
        {/* Background Video */}
        <video
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover -z-10"
        >
          <source src="/videos/heroverse2.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>

        <div className="mx-auto max-w-xl lg:max-w-6xl text-center">
          <h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-6xl text-4xl">
          OurHero Verse 3D
          </h1>
          <h2 className="font-display mt-8 lg:max-w-4xl section-text-light">OurVerse has developed <span className='font-semibold text-white'>OurHero Verse 3D</span>, a cutting-edge system that allows users to generate full 3D virtual environments using text input alone. With this tool, users can create immersive and interactive environments, tailored to their needs, simply by describing them.  <br/> <br/>In addition to full environments, the system can generate HDRI environments, ensuring a surrounding atmosphere that matches the generated space. </h2>
          <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
          </div>
          <div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
            <a
              href="#"
              className="rounded-2xl btn-dark px-3.5 py-2.5 text-base font-semibold shadow-sm"
            >
              Try HeroVerse 3D
            </a>
            <a href="#" className="text-sm font-semibold leading-6 text-white hover:text-purple-200">
              Learn more <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </Container>
    </div>
  );
}
