Corporate Footer with Contact Inquiry Form

<footer class="w-full max-w-7xl mt-24 mr-auto mb-24 ml-auto pt-12 pr-8 pb-10 pl-8">
  <div class="relative">
    <div class="relative z-10 pt-0 pr-0 pb-0 pl-0">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 border-neutral-200 border-b pb-12">
        <div class="lg:col-span-2">
          <div class="flex items-center gap-2 mb-4">
            <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="bolt"
              class="lucide lucide-bolt w-6 h-6 text-emerald-600" style="stroke-width: 1.5">
              <path
                d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                class=""></path>
              <circle cx="12" cy="12" r="4" class=""></circle>
            </svg>
            <h3 class="text-2xl sm:text-3xl text-neutral-900 font-bricolage font-medium tracking-tighter" style="">Relay
            </h3>
          </div>
          <p class="text-lg sm:text-xl text-neutral-700 leading-relaxed max-w-2xl font-sans">We're a senior design and
            engineering studio partnering with ambitious teams to build brands, products, and websites that perform.</p>
        </div>

        <!-- Navigation Links -->
        <div class="lg:col-span-1">
          <h4 class="text-neutral-900 font-medium mb-4 font-sans">Services</h4>
          <ul class="space-y-2 text-sm text-neutral-600">
            <li class=""><a href="#services" class="hover:text-emerald-600 transition font-sans">Product Design</a></li>
            <li class=""><a href="#services" class="hover:text-emerald-600 transition font-sans">Brand Systems</a></li>
            <li class=""><a href="#services" class="hover:text-emerald-600 transition font-sans">Design Engineering</a>
            </li>
            <li class=""><a href="#services" class="hover:text-emerald-600 transition font-sans">Research &amp;
                Testing</a></li>
            <li><a href="#services" class="hover:text-emerald-600 transition font-sans">Motion &amp; 3D</a></li>
          </ul>
        </div>

        <!-- Company Info -->
        <div class="lg:col-span-1">
          <h4 class="text-neutral-900 font-medium mb-4 font-sans">Company</h4>
          <ul class="space-y-2 text-sm text-neutral-600">
            <li class=""><a href="#work" class="hover:text-emerald-600 transition font-sans">Work</a></li>
            <li class=""><a href="#approach" class="hover:text-emerald-600 transition font-sans">Approach</a></li>
            <li class=""><a href="#pricing" class="hover:text-emerald-600 transition font-sans">Pricing</a></li>
            <li class=""><a href="#contact" class="hover:text-emerald-600 transition font-sans">Contact</a></li>
          </ul>
        </div>
      </div>

      <!-- Contact Section -->
      <div id="contact" class="mt-8 rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6 md:p-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
          <div class="space-y-4">
            <div
              class="inline-flex items-center gap-2 ring-1 ring-emerald-200 text-xs text-emerald-800 bg-emerald-100 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-sans">
              <span class="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse"></span>
              Now booking Q4 2024
            </div>
            <h4 class="text-xl sm:text-2xl text-neutral-900 font-bricolage font-medium tracking-tighter" style="">Ready
              to ship something great?</h4>
            <ul class="text-sm text-neutral-700 space-y-3">
              <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-600 mt-0.5 flex-shrink-0"
                  style="stroke-width: 1.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span class="font-sans">Senior-only team on every engagement</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-600 mt-0.5 flex-shrink-0"
                  style="stroke-width: 1.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span class="font-sans">Weekly demos and shared roadmaps</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-600 mt-0.5 flex-shrink-0"
                  style="stroke-width: 1.5">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                <span class="font-sans">Clear pricing, flexible scopes</span>
              </li>
            </ul>
            <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 pt-2 text-sm">
              <a href="mailto:hello@relay.studio"
                class="inline-flex items-center gap-2 text-neutral-700 hover:text-emerald-600 transition font-sans">
                <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" style="stroke-width: 1.5">
                  <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.studio
              </a>
              <span class="text-neutral-400 hidden sm:inline font-sans">•</span>
              <a href="tel:+1-555-RELAY-01"
                class="inline-flex items-center gap-2 text-neutral-700 hover:text-emerald-600 transition font-sans">
                <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" style="stroke-width: 1.5">
                  <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>
                Schedule a call
              </a>
            </div>
          </div>

          <form class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Name</label>
              <input type="text" required="" placeholder="Your name" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Email</label>
              <input type="email" required="" placeholder="you@company.com" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Company</label>
              <input type="text" placeholder="Company name" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Budget</label>
              <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                <option class="bg-white font-sans" value="25-50k">$25k–$50k</option>
                <option class="bg-white font-sans" value="50-100k">$50k–$100k</option>
                <option class="bg-white font-sans" value="100-250k">$100k–$250k</option>
                <option class="bg-white font-sans" value="custom">Custom</option>
              </select>
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Timeline</label>
              <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                <option class="bg-white font-sans" value="asap">ASAP</option>
                <option class="bg-white font-sans" value="1-2m">1–2 months</option>
                <option class="bg-white font-sans" value="3m+">3+ months</option>
              </select>
            </div>
            <div class="sm:col-span-1">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Services</label>
              <select class="w-full appearance-none outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
                <option class="bg-white font-sans">Product Design</option>
                <option class="bg-white font-sans">Brand &amp; Identity</option>
                <option class="bg-white font-sans">Web Design &amp; Build</option>
                <option class="bg-white font-sans">Design System</option>
                <option class="bg-white font-sans">Motion &amp; Content</option>
              </select>
            </div>
            <div class="sm:col-span-2">
              <label class="block text-xs font-medium text-neutral-700 mb-2 font-sans">Project details</label>
              <textarea rows="3" placeholder="What are you building? Goals, scope, links…" class="w-full placeholder-neutral-500 outline-none focus:ring-2 focus:ring-emerald-400/60 focus:border-emerald-300 transition text-sm text-neutral-900 bg-white border-neutral-200 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 justify-between items-start sm:items-center gap-4">
              <p class="text-xs text-neutral-600 font-sans">We'll get back to you within 24 hours with next steps.</p>
              <button type="submit" class="inline-flex gap-2 ring-1 ring-emerald-300 hover:bg-emerald-300 transition text-sm font-medium text-white bg-emerald-500 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center font-sans">
                <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" style="stroke-width: 1.5"><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 inquiry
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Footer Bottom -->
      <div
        class="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-0 border-neutral-200 border-t mt-8 pt-6 justify-between">
        <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
          <p class="text-neutral-500 text-sm font-sans">© 2024 Relay Studio. All rights reserved.</p>
          <div class="flex items-center gap-4 text-neutral-500 text-sm">
            <span class="font-sans">Remote-first • Global</span>
            <span class="hidden sm:inline text-neutral-300 font-sans">•</span>
            <span class="font-sans">Working across timezones</span>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <a href="#" class="text-neutral-500 hover:text-emerald-600 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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-[20px] h-[20px]">
              <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="text-neutral-500 hover:text-emerald-600 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="instagram" class="lucide lucide-instagram w-[20px] h-[20px]">
              <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="text-neutral-500 hover:text-emerald-600 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="linkedin" class="lucide lucide-linkedin w-[20px] h-[20px]">
              <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>
</footer>