Responsive Dark Footer with Newsletter Signup

<footer class="relative bg-[#000000] border-white/10 border-t mt-24 backdrop-blur-xl">
  <div class="max-w-7xl mx-auto px-6 py-16 md:py-20">
    <!-- Main footer content -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
      <!-- Brand column -->
      <div class="lg:col-span-1">
        <a href="/home" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[220px] h-[80px] bg-[url(https://cdn.midjourney.com/a72bbd5b-73b8-4664-a9cb-f1a8c572b5b6/0_0.png?w=800&amp;q=80)] bg-cover rounded invert-0"></a>
        <p class="text-sm text-slate-400 mb-6 max-w-xs" style="">
          Personalized wellness at your fingertips. AI-driven insights for better health outcomes.
        </p>
        <div class="flex items-center gap-4">
          <a href="#" class="h-10 w-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-slate-100 hover:bg-white/10 transition-colors">
            <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="h-5 w-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="h-10 w-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-slate-100 hover:bg-white/10 transition-colors">
            <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="h-5 w-5">
              <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="h-10 w-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-slate-100 hover:bg-white/10 transition-colors">
            <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="h-5 w-5">
              <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="h-10 w-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-slate-100 hover:bg-white/10 transition-colors">
            <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="h-5 w-5">
              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" class=""></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Product column -->
      <div class="">
        <h3 class="text-base font-semibold tracking-tight text-slate-100 mb-4" style="">Product</h3>
        <nav class="space-y-3">
          <a href="#features" class="block hover:text-slate-100 transition-colors text-sm text-slate-400" style="">Features</a>
          <a href="#how-it-works" class="block hover:text-slate-100 transition-colors text-sm text-slate-400" style="">How It Works</a>
          <a href="#roadmap" class="block hover:text-slate-100 transition-colors text-sm text-slate-400" style="">Roadmap</a>
          <a href="#pricing" class="block hover:text-slate-100 transition-colors text-sm text-slate-400" style="">Pricing</a>
          <a href="#integrations" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Integrations</a>
          <a href="#api" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">API</a>
        </nav>
      </div>

      <!-- Company column -->
      <div class="">
        <h3 class="text-base font-semibold tracking-tight text-slate-100 mb-4" style="">Company</h3>
        <nav class="space-y-3">
          <a href="#about" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">About</a>
          <a href="#blog" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Blog</a>
          <a href="#careers" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Careers</a>
          <a href="#press" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Press</a>
          <a href="#partners" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Partners</a>
          <a href="#contact" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Contact</a>
        </nav>
      </div>

      <!-- Resources column -->
      <div class="">
        <h3 class="text-base font-semibold tracking-tight text-slate-100 mb-4" style="">Resources</h3>
        <nav class="space-y-3">
          <a href="#help" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Help Center</a>
          <a href="#community" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Community</a>
          <a href="#guides" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Guides</a>
          <a href="#webinars" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Webinars</a>
          <a href="#status" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Status</a>
          <a href="#changelog" class="block text-sm text-slate-400 hover:text-slate-100 transition-colors" style="">Changelog</a>
        </nav>
      </div>
    </div>

    <!-- Newsletter signup -->
    <div class="mt-12 pt-8 border-t border-white/10">
      <div class="max-w-md">
        <h3 class="text-base font-semibold tracking-tight text-slate-100 mb-2" style="">Stay updated</h3>
        <p class="text-sm text-slate-400 mb-4" style="">Get the latest wellness insights and product updates delivered to your inbox.</p>
        <div class="flex gap-3">
          <input type="email" placeholder="Enter your email" class="flex-1 rounded-xl bg-white/5 border border-white/10 px-4 py-3 text-sm text-slate-100 placeholder-slate-400 focus:border-sky-400/50 focus:ring-1 focus:ring-sky-400/50 focus:outline-none transition-colors">
          <button class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 px-4 py-3 text-sm font-medium tracking-tight text-white hover:from-sky-400 hover:to-indigo-400 transition-colors shrink-0" style="">
            <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="h-4 w-4">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
            Subscribe
          </button>
        </div>
      </div>
    </div>

    <!-- Bottom footer -->
    <div class="mt-12 pt-8 border-t border-white/10">
      <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div class="flex flex-wrap items-center gap-6 text-sm text-slate-400">
          <span style="" class="">© 2025 PulseNova. All rights reserved.</span>
          <a href="#privacy" class="hover:text-slate-100 transition-colors" style="">Privacy Policy</a>
          <a href="#terms" class="hover:text-slate-100 transition-colors" style="">Terms of Service</a>
          <a href="#cookies" class="hover:text-slate-100 transition-colors" style="">Cookie Policy</a>
        </div>
        <div class="flex items-center gap-4 text-sm text-slate-400">
          <div class="flex items-center gap-2">
            <div class="h-2 w-2 rounded-full bg-emerald-400"></div>
            <span style="">All systems operational</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Background decoration -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -bottom-32 left-1/4 h-64 w-64 rounded-full bg-gradient-to-t from-sky-500/5 to-transparent blur-3xl"></div>
    <div class="absolute -bottom-32 right-1/4 h-64 w-64 rounded-full bg-gradient-to-t from-indigo-500/5 to-transparent blur-3xl"></div>
  </div>
</footer>