Footer Kickstarter Dark

                <!--
@type: Footer
@industry: Kickstarter
@style: Dark
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->

<style>
  .social-icon {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .social-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  .social-icon:hover::before {
    left: 100%;
  }

  .social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  }

  .newsletter-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .newsletter-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .link-hover {
    position: relative;
    transition: color 0.3s ease;
  }

  .link-hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    transition: width 0.3s ease;
  }

  .link-hover:hover::after {
    width: 100%;
  }

  .link-hover:hover {
    color: #06b6d4;
  }
</style>

<footer class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 text-white relative">
  <div class="relative z-10 max-w-7xl mx-auto px-4 pt-20 pb-8">
    <!-- Main Footer Content -->
    <div class="grid lg:grid-cols-4 md:grid-cols-2 gap-12 mb-16">
      <!-- Company Info -->
      <div class="lg:col-span-2 fade-in-up">
        <div class="flex items-center space-x-3 mb-6">
          <div class="relative">
            <div class="w-12 h-12 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-xl flex items-center justify-center relative">
              <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" />
                <path d="M2 17L12 22L22 17" />
                <path d="M2 12L12 17L22 12" />
              </svg>
            </div>
          </div>
          <div>
            <h3 class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
              NeuralLink Pro
            </h3>
            <p class="text-sm text-gray-400">Revolutionary Neural Interface</p>
          </div>
        </div>

        <p class="text-gray-300 mb-8 max-w-md leading-relaxed">
          Pioneering the future of human-computer interaction through advanced neural interface technology. Join
          thousands of researchers and innovators shaping tomorrow.
        </p>

        <!-- Newsletter Signup -->
        <div class="space-y-4">
          <h4 class="text-lg font-semibold">Stay Updated</h4>
          <div class="flex space-x-3">
            <input type="email" placeholder="Enter your email"
              class="flex-1 px-4 py-3 rounded-lg newsletter-input text-white placeholder-gray-400 outline-none">
            <button
              class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105">
              Subscribe
            </button>
          </div>
          <p class="text-xs text-gray-500">Get the latest updates on campaign progress and product development</p>
        </div>
      </div>

      <!-- Quick Links -->
      <div class="fade-in-up" style="animation-delay: 0.2s;">
        <h4 class="text-lg font-semibold mb-6">Campaign</h4>
        <ul class="space-y-3">
          <li><a href="#project" class="link-hover text-gray-300">Project Overview</a></li>
          <li><a href="#rewards" class="link-hover text-gray-300">Rewards & Pricing</a></li>
          <li><a href="#timeline" class="link-hover text-gray-300">Development Timeline</a></li>
          <li><a href="#updates" class="link-hover text-gray-300">Project Updates</a></li>
          <li><a href="#faq" class="link-hover text-gray-300">FAQ</a></li>
          <li><a href="#team" class="link-hover text-gray-300">Meet the Team</a></li>
        </ul>
      </div>

      <!-- Resources -->
      <div class="fade-in-up" style="animation-delay: 0.4s;">
        <h4 class="text-lg font-semibold mb-6">Resources</h4>
        <ul class="space-y-3">
          <li><a href="#documentation" class="link-hover text-gray-300">Technical Docs</a></li>
          <li><a href="#api" class="link-hover text-gray-300">API Reference</a></li>
          <li><a href="#sdk" class="link-hover text-gray-300">Developer SDK</a></li>
          <li><a href="#research" class="link-hover text-gray-300">Research Papers</a></li>
          <li><a href="#support" class="link-hover text-gray-300">Support Center</a></li>
          <li><a href="#community" class="link-hover text-gray-300">Community Forum</a></li>
        </ul>
      </div>
    </div>

    <!-- Social Media & Contact -->
    <div class="flex flex-col lg:flex-row justify-between items-center space-y-8 lg:space-y-0 mb-12 fade-in-up"
      style="animation-delay: 0.8s;">
      <!-- Social Links -->
      <div class="md:flex items-center space-x-4 text-center md:text-left">
        <span class="text-gray-400">Follow Us:</span>
        <div class="flex items-center space-x-4 ml-0 flex-wrap">
          <a href="#"
            class="social-icon w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
            </svg>
          </a>
          <a href="#"
            class="social-icon w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
            </svg>
          </a>
          <a href="#"
            class="social-icon w-12 h-12 bg-gradient-to-br from-pink-500 to-red-600 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.042-3.441.219-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.888-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.357-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z" />
            </svg>
          </a>
          <a href="#"
            class="social-icon w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
            </svg>
          </a>
          <a href="#"
            class="social-icon w-12 h-12 bg-gradient-to-br from-gray-600 to-gray-700 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path
                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Contact Info -->
      <div class="text-center lg:text-right space-y-2">
        <p class="text-gray-300">Questions? Contact us:</p>
        <p class="text-cyan-400 font-medium">[email protected]</p>
        <p class="text-gray-400 text-sm">Response time: < 24 hours</p>
      </div>
    </div>

    <!-- Bottom Bar -->
    <div class="border-t border-gray-700/30 pt-8 fade-in-up" style="animation-delay: 1s;">
      <div class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
        <div class="flex flex-wrap items-center gap-6 text-sm text-gray-400">
          <span>© 2025 NeuralLink Pro. All rights reserved.</span>
          <a href="#privacy" class="link-hover">Privacy Policy</a>
          <a href="#terms" class="link-hover">Terms of Service</a>
          <a href="#cookies" class="link-hover">Cookie Policy</a>
          <a href="#accessibility" class="link-hover">Accessibility</a>
        </div>

        <div class="flex items-center space-x-4 text-sm text-gray-400">
          <span class="flex items-center">
            <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
            All systems operational
          </span>
          <span>|</span>
          <span>Last updated: 2 hours ago</span>
        </div>
      </div>
    </div>
  </div>
</footer>