Responsive Project Inquiry Contact Form

<div id="contact" class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl mt-6 pt-5 pr-5 pb-5 pl-5 max-w-5xl">
                  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="space-y-4">
                      <div class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-300/20 px-2.5 py-1 text-xs">
                        <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        Booking Q4
                      </div>
                      <h4 class="text-white font-semibold tracking-tight">Start a project</h4>
                      <ul class="space-y-2 text-sm text-neutral-300">
                        <li class="flex items-start gap-2">
                          <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="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                          <span class="">Senior engineers and designers only — no handoffs, no fluff.</span>
                        </li>
                        <li class="flex items-start gap-2">
                          <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="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                          <span class="">Transparent weekly demos, metrics, and delivery plans.</span>
                        </li>
                        <li class="flex items-start gap-2">
                          <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="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                          <span class="">Security, accessibility, and performance baked-in.</span>
                        </li>
                      </ul>
                      <div class="flex items-center gap-3 pt-2 text-sm">
                        <a href="mailto:hello@relay.dev" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
                          <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 w-4 h-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
                          hello@relay.dev
                        </a>
                        <span class="text-white/20">•</span>
                        <a href="tel:+14155551234" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
                          <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="phone" class="lucide lucide-phone w-4 h-4"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
                          +1 (415) 555‑1234
                        </a>
                      </div>
                    </div>

                    <form id="contact-form" class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div class="sm:col-span-1">
                        <label for="name" class="block text-xs font-medium text-white/80 mb-1">Your name</label>
                        <input id="name" name="name" type="text" required="" placeholder="Jane Doe" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                      </div>
                      <div class="sm:col-span-1">
                        <label for="email" class="block text-xs font-medium text-white/80 mb-1">Email</label>
                        <input id="email" name="email" type="email" required="" placeholder="jane@company.com" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                      </div>
                      <div class="sm:col-span-1">
                        <label for="company" class="block text-xs font-medium text-white/80 mb-1">Company</label>
                        <input id="company" name="company" type="text" placeholder="Acme Inc." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                      </div>
                      <div class="sm:col-span-1">
                        <label for="project-type" class="block text-xs font-medium text-white/80 mb-1">Project type</label>
                        <select id="project-type" name="projectType" class="w-full appearance-none outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                          <option class="bg-neutral-900" value="product">New product build</option>
                          <option class="bg-neutral-900" value="feature">Feature delivery</option>
                          <option class="bg-neutral-900" value="advisory">Advisory / audit</option>
                          <option class="bg-neutral-900" value="ai">AI integration</option>
                        </select>
                      </div>
                      <div class="sm:col-span-2">
                        <label for="message" class="block text-xs font-medium text-white/80 mb-1">What are you building?</label>
                        <textarea id="message" name="message" rows="4" placeholder="A few sentences about your goals, timeline, and success metrics." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3"></textarea>
                      </div>
                      <div class="sm:col-span-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                        <div class="flex gap-2 text-xs text-white/70 items-center">
                          <input id="nda" name="nda" type="checkbox" class="h-4 w-4 rounded bg-white/10 border-white/20 text-amber-400 focus:ring-amber-400/60">
                          <label for="nda" class="">Please send an NDA</label>
                        </div>
                        <div class="flex items-center gap-2">
                          <button type="submit" class="inline-flex gap-2 ring-1 ring-amber-300 hover:bg-amber-300 transition text-sm font-medium text-neutral-900 bg-amber-400 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center">
                            <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="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                            Send request
                          </button>
                          
                        </div>
                      </div>
                    </form>
                  </div>
                </div>