Glassmorphic Contact Section with Form & Info

<section
  class="md:pt-40 bg-center z-[70] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/77f55872-adf5-4910-9a7c-d21c0041bbe1_3840w.webp)] bg-cover pt-40 pb-40 relative"
  style="mask-image: linear-gradient(90deg, transparent, black 55%, black 60%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 55%, black 60%, transparent);"
  id="contact">
  <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
    <div class="absolute -left-40 top-10 h-[70vh] w-[60vh] rounded-full blur-3xl opacity-25"
      style="background: radial-gradient(closest-side, rgba(255,255,255,0.15), rgba(0,0,0,0));"></div>
  </div>

  <div class="max-w-4xl mx-auto px-6">
    <div class="text-center">
      <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-neutral-100 animate-in">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-4 w-4"><path d="M4 6l8 5 8-5" class=""></path><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect></svg>
            Let's Work Together
          </span>
      <h2 class="mt-4 text-4xl sm:text-6xl tracking-tight font-semibold text-white animate-in" data-delay="100">
        Ready to <span class="italic font-instrument-serif font-medium text-neutral-200">collaborate?</span>
      </h2>
      <p class="mt-4 text-neutral-400 text-lg max-w-2xl mx-auto animate-in" data-delay="200">
        Whether you need help with product design, strategy, or education, I'm here to help bring your vision to life.
      </p>
    </div>

    <div class="mt-12 grid md:grid-cols-2 gap-8">
      <!-- Contact Form -->
      <div class="relative rounded-2xl border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur animate-in"
        data-delay="300">
        <h3 class="text-xl font-semibold text-white mb-6">Send a Message</h3>
        <form class="space-y-6">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="">
              <label class="block text-sm font-medium text-neutral-300 mb-2">Name</label>
              <input type="text" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20" placeholder="Your name">
            </div>
            <div class="">
              <label class="block text-sm font-medium text-neutral-300 mb-2">Email</label>
              <input type="email" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20" placeholder="your@email.com">
            </div>
          </div>
          <div class="">
            <label class="block text-sm font-medium text-neutral-300 mb-2">Project Budget</label>
            <select class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20">
                  <option>$5k - $10k</option>
                  <option>$10k - $25k</option>
                  <option>$25k - $50k</option>
                  <option>$50k+</option>
                </select>
          </div>
          <div class="">
            <label class="block text-sm font-medium text-neutral-300 mb-2">Message</label>
            <textarea rows="4" class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-neutral-100 placeholder-neutral-400 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/20" placeholder="Tell me about your project..."></textarea>
          </div>
          <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-white/10 border border-white/20 px-6 py-3 text-neutral-100 hover:bg-white/15 transition">
                <span class="font-medium">Send Message</span>
                <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" data-lucide="send" class="lucide lucide-send h-4 w-4"><path d="m22 2-7 20-4-9-9-4Z" class=""></path><path d="M22 2 11 13" class=""></path></svg>
              </button>
        </form>
      </div>

      <!-- Contact Info -->
      <div class="space-y-8">
        <div class="relative rounded-2xl border border-white/10 bg-white/5 p-6 shadow-xl backdrop-blur animate-in"
          data-delay="400">
          <div class="flex items-center gap-4">
            <div class="h-12 w-12 rounded-xl bg-white/10 border-white/10 p-3 shadow-lg">
              <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" data-lucide="mail"
                class="lucide lucide-mail h-6 w-6 text-white">
                <path d="M4 6l8 5 8-5" class=""></path>
                <rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
              </svg>
            </div>
            <div class="">
              <h3 class="text-lg font-semibold text-white">Email</h3>
              <p class="text-neutral-400">hello@designer.com</p>
            </div>
          </div>
        </div>

        <div class="relative rounded-2xl border border-white/10 bg-white/5 p-6 shadow-xl backdrop-blur animate-in"
          data-delay="500">
          <div class="flex items-center gap-4">
            <div class="h-12 w-12 rounded-xl bg-white/10 border-white/10 p-3 shadow-lg">
              <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"
                data-lucide="calendar" class="lucide lucide-calendar h-6 w-6 text-white">
                <path d="M8 2v4" class=""></path>
                <path d="M16 2v4" class=""></path>
                <rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
                <path d="M3 10h18" class=""></path>
              </svg>
            </div>
            <div class="">
              <h3 class="text-lg font-semibold text-white">Schedule a Call</h3>
              <p class="text-neutral-400">Book a free consultation</p>
            </div>
          </div>
        </div>

        <div class="relative rounded-2xl border border-white/10 bg-white/5 p-6 shadow-xl backdrop-blur animate-in"
          data-delay="600">
          <h3 class="text-lg font-semibold text-white mb-4">Follow Me</h3>
          <div class="flex items-center gap-4">
            <a href="#"
              class="flex items-center justify-center w-10 h-10 rounded-lg bg-white/10 text-neutral-400 hover:text-white hover:bg-white/15 transition">
              <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"
                data-lucide="twitter" class="lucide lucide-twitter">
                <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="flex items-center justify-center w-10 h-10 rounded-lg bg-white/10 text-neutral-400 hover:text-white hover:bg-white/15 transition">
              <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"
                data-lucide="instagram" class="lucide lucide-instagram">
                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
                <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
              </svg>
            </a>
            <a href="#"
              class="flex items-center justify-center w-10 h-10 rounded-lg bg-white/10 text-neutral-400 hover:text-white hover:bg-white/15 transition">
              <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"
                data-lucide="dribbble" class="lucide lucide-dribbble">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" class=""></path>
                <path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" class=""></path>
                <path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" class=""></path>
              </svg>
            </a>
            <a href="#"
              class="flex items-center justify-center w-10 h-10 rounded-lg bg-white/10 text-neutral-400 hover:text-white hover:bg-white/15 transition">
              <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"
                data-lucide="linkedin" class="lucide lucide-linkedin">
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class="">
                </path>
                <rect width="4" height="12" x="2" y="9" class=""></rect>
                <circle cx="4" cy="4" r="2" class=""></circle>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="absolute bottom-0 left-0 right-0 pointer-events-none">
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-25 w-[60%] h-8"
      style="background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 30%, transparent 70%);">
    </div>
    <div class="h-px bg-white/10 w-full"></div>
  </div>
</section>