Hero Grid with Social Icons and Beta Signup

<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20 gap-x-12 gap-y-12 pl-8 pr-8 pt-8">
  <div class="lg:col-span-8">
    <h2 class="text-5xl lg:text-7xl font-display font-medium text-white tracking-tighter mb-8 animate-on-scroll">
      Start creating
      <br>
      <span class="text-neutral-600">dimensionally.</span>
    </h2>
    <div class="flex gap-4 animate-on-scroll" style="animation-delay: 100ms;">
      <a href="#"
        class="w-12 h-12 flex items-center justify-center rounded-full border border-white/10 hover:bg-white hover:text-black transition-all text-white">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter"
          class="lucide lucide-twitter w-5 h-5">
          <path
            d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
            class=""></path>
        </svg>
      </a>
      <a href="#"
        class="w-12 h-12 flex items-center justify-center rounded-full border border-white/10 hover:bg-white hover:text-black transition-all text-white">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="github"
          class="lucide lucide-github w-5 h-5">
          <path
            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
            class=""></path>
          <path d="M9 18c-4.51 2-5-2-7-2" class=""></path>
        </svg>
      </a>
      <a href="#"
        class="w-12 h-12 flex items-center justify-center rounded-full border border-white/10 hover:bg-white hover:text-black transition-all text-white">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="disc"
          class="lucide lucide-disc w-5 h-5">
          <circle cx="12" cy="12" r="10" class=""></circle>
          <circle cx="12" cy="12" r="2" class=""></circle>
        </svg>
      </a>
    </div>
  </div>

  <div class="lg:col-span-4 flex items-center justify-end animate-on-scroll" style="animation-delay: 200ms;">
    <div class="w-full max-w-xs p-1 rounded-2xl bg-gradient-to-br from-white/10 to-white/5">
      <div class="bg-[#0a0a0a] rounded-xl p-6">
        <h3 class="text-white font-medium mb-2">Join the Beta</h3>
        <p class="text-xs text-neutral-500 mb-4">
          Get early access to the physics engine.
        </p>
        <div class="flex gap-2">
          <input type="email" placeholder="email@domain.com" class="bg-white/5 border border-white/10 rounded px-3 py-2 text-xs text-white w-full focus:outline-none focus:border-purple-500 transition-colors">
          <button class="bg-white text-black rounded px-3 py-2 text-xs font-medium hover:bg-neutral-200">
                    Join
                  </button>
        </div>
      </div>
    </div>
  </div>
</div>