Responsive Portfolio Footer with CTA

<section class="mt-12">
  <div class="relative overflow-hidden bg-neutral-900 rounded-3xl">
    <!-- Footer Content -->
    <div class="relative z-10 sm:p-12 md:p-16 pt-12 pr-8 pb-8 pl-8">
      <!-- Top Section -->
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-12 border-b border-white/10">
        <!-- Logo/Brand Section -->
        <div class="lg:col-span-4">
          <div class="flex items-center gap-2 mb-4">
            
            <h3 class="text-2xl font-medium text-white tracking-tight font-geist">Alex Chen</h3>
          </div>
          <p class="text-neutral-400 text-sm leading-relaxed font-geist max-w-sm">
            Creating exceptional digital experiences that engage users and drive business results. Based in San Francisco, working worldwide.
          </p>
          <div class="mt-6">
            <a href="#contact" class="inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-6 py-3 text-sm font-medium shadow-sm hover:bg-amber-400 transition-colors font-geist">
              Start a Project
              <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="lucide lucide-arrow-right h-4 w-4 ml-2"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </a>
          </div>
        </div>

        <!-- Services -->
        <div class="lg:col-span-1">
          <h4 class="text-white font-medium mb-4 font-geist">Services</h4>
          <ul class="space-y-3">
            <li class=""><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">UI/UX Design</a></li>
            <li class=""><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Product Strategy</a></li>
            <li class=""><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Design Systems</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Brand Identity</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Frontend Development</a></li>
          </ul>
        </div>

        <!-- Work -->
        <div class="lg:col-span-1">
          <h4 class="text-white font-medium mb-4 font-geist">Work</h4>
          <ul class="space-y-3">
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Portfolio</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Case Studies</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Process</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">Testimonials</a></li>
          </ul>
        </div>

        <!-- Company -->
        

        <!-- Contact -->
        <div class="lg:col-span-2">
          <h4 class="text-white font-medium mb-4 font-geist">Connect</h4>
          <ul class="space-y-3">
            <li class="">
              <a href="mailto:hello@creativestudio.com" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">hello@creativestudio.com</a>
            </li>
            <li class="">
              <a href="tel:+14155551234" class="text-neutral-400 hover:text-white transition-colors text-sm font-geist">(415) 555-1234</a>
            </li>
          </ul>
          
          <!-- Social Links -->
          <div class="mt-4 flex items-center gap-3">
            <a href="#" class="flex items-center justify-center h-8 w-8 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors">
              <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" 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 h-8 w-8 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors">
              <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" 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>
            <a href="#" class="flex items-center justify-center h-8 w-8 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors">
              <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" class="lucide lucide-github"><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>
          </div>
        </div>
      </div>

      <!-- Bottom Section -->
      <div class="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-4 text-sm text-neutral-400 font-geist">
          <span class="">© 2024 Creative Studio. All rights reserved.</span>
        </div>
        
        <div class="flex items-center gap-6 text-sm">
          <span class="inline-flex items-center gap-2 text-neutral-400 font-geist">
            <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
            Available for new projects
          </span>
          <span class="text-neutral-500">•</span>
          <span class="text-neutral-400 font-geist">San Francisco, CA</span>
        </div>
      </div>
    </div>
  </div>
</section>