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">
            Powered by ThreeFold
          </h1>
          <div className="mt-4 space-y-6 mx-4 font-display section-text">
            <p>
            <span className='emphasis'>OurVerse</span> is a fully immersive metaverse platform, offering a space where virtual interactions 
            feel real, engaging, and limitless.</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>
          </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="font-mono text-sm text-cyan-600">{name}</dt>
                <dd className="mt-0.5 text-2xl font-semibold tracking-tight text-gradient-dark">
                  {value}
                </dd>
              </div>
            ))}
          </dl>
      </div>
      </Container>
    </div>
  )
}