VR Gaming Landing Page Hero Section

<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center max-w-7xl">
  <div class="order-2 lg:order-1">
    <div
      class="p-8 lg:p-10 shadow-xl border rounded-3xl backdrop-blur-sm border-indigo-500/20 bg-gradient-to-br from-blue-500/10 to-purple-600/10 hover:border-indigo-400/40 transition-all duration-300">
      <div class="flex items-center gap-3 mb-8">
        <div class="flex items-center gap-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="stroke-[1.5] fill-amber-600 text-amber-600">
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
              class=""></path>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="w-3.5 h-3.5 stroke-[1.5] text-amber-600 fill-amber-600">
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
              class=""></path>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="w-3.5 h-3.5 stroke-[1.5] text-amber-600 fill-amber-600">
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
              class=""></path>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="w-3.5 h-3.5 stroke-[1.5] text-amber-600 fill-amber-600">
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
              class=""></path>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="w-3.5 h-3.5 stroke-[1.5] text-amber-600 fill-amber-600">
            <path
              d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
              class=""></path>
          </svg>
        </div>
        <span class="text-xs font-medium text-slate-500 font-manrope" style="">4.9 • 2.4M active players</span>
      </div>
      <h1
        class="text-4xl sm:text-5xl lg:text-6xl leading-[1.1] mb-8 text-slate-100 font-montserrat font-light tracking-tighter"
        style="">
        Enter infinite
        <span class="font-light text-neutral-50 tracking-tighter font-montserrat" style="">realities.</span>
      </h1>
      <p class="text-lg leading-relaxed mb-12 text-zinc-400 font-manrope" style="">
        Dive into immersive virtual worlds where anything is possible. Team up with friends, compete globally, and
        experience the future of gaming in full VR.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 mb-16">
        <button class="inline-flex items-center justify-center px-8 py-4 rounded-xl text-sm font-medium shadow-lg shadow-blue-500/25 transition-all duration-300 bg-blue-500 hover:bg-blue-400 text-white">
              <span class="font-manrope" style="">Join Now</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] ml-2">
                <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path>
              </svg>
            </button>
        <button class="inline-flex items-center justify-center px-8 py-4 rounded-xl text-sm font-medium border transition-all duration-300 hover:bg-white/5 text-slate-300 border-white/20 hover:border-blue-400/40">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-[1.5] mr-2">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span class="font-manrope" style="">System Check</span>
            </button>
      </div>
      <div class="grid grid-cols-3 gap-8">
        <div class="text-center">
          <div
            class="w-12 h-12 flex border rounded-2xl mr-auto mb-3 ml-auto items-center justify-center border-white/20 bg-white/10 backdrop-blur-xl shadow-lg">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="stroke-[1.5] text-white">
              <path
                d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
                class=""></path>
            </svg>
          </div>
          <div class="text-xs font-medium text-blue-300 font-manrope" style="">Cross-Platform</div>
        </div>
        <div class="text-center">
          <div
            class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-3 border border-white/20 bg-white/10 backdrop-blur-xl shadow-lg">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="stroke-[1.5] text-white">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" class=""></path>
              <circle cx="9" cy="7" r="4" class=""></circle>
              <path d="m22 21-3-3m1-4a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" class=""></path>
            </svg>
          </div>
          <div class="text-xs font-medium text-blue-300 font-manrope" style="">Find Players</div>
        </div>
        <div class="text-center">
          <div
            class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-3 border border-white/20 bg-white/10 backdrop-blur-xl shadow-lg">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="stroke-[1.5] text-white">
              <path d="M3 12h18m-9-9v18" class=""></path>
            </svg>
          </div>
          <div class="text-xs font-medium text-blue-300 font-manrope" style="">Live Events</div>
        </div>
      </div>
    </div>
  </div>
  <div class="relative order-1 lg:order-2 group">
    <div
      class="overflow-hidden border rounded-3xl shadow-2xl backdrop-blur-sm border-blue-500/20 bg-gradient-to-br from-blue-500/10 to-purple-600/10 hover:border-blue-400/40 transition-all duration-300">
      <div
        class="absolute top-8 left-8 flex items-center gap-2 rounded-full px-5 py-3 text-sm font-medium border z-10 backdrop-blur-sm border-emerald-500/20 bg-white/10 text-emerald-300">
        <div class="w-2 h-2 rounded-full bg-green-600"></div>
        <span class="font-manrope" style="">2.1M Online</span>
      </div>
      <div class="h-[500px] lg:h-[650px] bg-gradient-to-br from-blue-600/20 to-purple-700/20 relative overflow-hidden">
        <div
          class="absolute inset-0 bg-cover bg-center opacity-30 transition-transform duration-500 group-hover:scale-110 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/474fd6a3-5f05-4898-9a40-ad545895afab_1600w.jpg)]"
          style=""></div>
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0983da05-1681-4d02-aab6-89899847239b_800w.jpg?w=800&amp;q=80" alt="VR gaming setup" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" style="">
      </div>
      <div class="absolute bottom-8 left-8 right-8 grid grid-cols-2 gap-6">
        <div class="border rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl border-white/20 bg-white/10 shadow-lg">
          <div class="text-2xl text-slate-100 font-montserrat font-light tracking-tighter" style="">50+</div>
          <div class="text-sm mt-1 text-blue-300 font-manrope" style="">Virtual Worlds</div>
        </div>
        <div class="rounded-2xl p-6 border backdrop-blur-xl border-white/20 bg-white/10 shadow-lg">
          <div class="text-2xl text-slate-100 font-montserrat font-light tracking-tighter" style="">24/7</div>
          <div class="text-sm mt-1 text-blue-300 font-manrope" style="">Global Servers</div>
        </div>
      </div>
    </div>
  </div>
</div>