import { BackgroundImage } from '@/components/BackgroundImage'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'



export function Hero() {
  return (
    <div className="relative lg:py-12 mt-20 pb-12 pt-12">
      <BackgroundImage className="-bottom-14 -top-20" />
      <Container className="relative">
        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
          <h2 className="font-display lg:text-6xl text-4xl font-semibold leading-normal tracking-tighter text-gradient-dark">
            OurVerse
          </h2>
          <h1 className="lg:mt-2 mt-0 font-display lg:text-2xl text-lg font-semibold tracking-tight text-gradient-dark">
            Beyond Traditional Video Calls.  
          </h1>
          <div className="mt-4 space-y-6 mx-4 font-display section-text font-display ">
            <p>
            <span className='emphasis'>OurVerse</span> is a fully immersive metaverse platform, offering a space where virtual interactions 
            feel real, engaging, and limitless. Our metaverse is fully decentralized and <span className='emphasis text-gradient-dark'>powered by the ThreeFold Grid</span>, enabling global collaboration with enhanced security, flexibility and freedom.  
            </p>
            <p>
            Our mission is to break down the barriers to meaningful connection and collaboration. We believe that everyone, regardless of location or resources, should have access to immersive and engaging spaces where they can meet, create, and innovate together.
            </p>
            <br/>
            <a href="/about" className="lg:text-base pt-4 text-sm font-mono text-cyan-600  hover:text-purple-600">
                    <u>Learn More about OurVerse<span aria-hidden="true">→</span></u>
         </a>
          </div>
          

          <dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start text-center lg:text-left">
            {[
              ['3D Assets', '100000+'],
              ['Users', '5000+'],
              ['Verses', '2000+'],
              ['Countries', '15'],
            ].map(([name, value]) => (
              <div key={name}>
                <dt className="text-intro">{name}</dt>
                <dd className="mt-0.5 text-2xl font-semibold tracking-tight text-gradient-dark">
                  {value}
                </dd>
              </div>
            ))}
          </dl>
      </div>
      </Container>
    </div>
  )
}