Cta Kickstarter Dark

                <!--
@type: Call To Action (CTA)
@industry: Kickstarter
@style: Dark
@category: Page Section, Content, Sale, UI Element
@framework: Tailwind
@license: Free
-->

<style>
  .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);
    }
  }
</style>

<section class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 text-white py-20 px-4 relative overflow-hidden">
  <div class="max-w-7xl mx-auto relative z-10">
    <div class="text-center fade-in-up" style="animation-delay: 1s;">
      <div class="backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl p-12 max-w-4xl mx-auto">
        <h3 class="text-3xl font-bold mb-4">Ready to Join the Neural Revolution?</h3>
        <p class="text-xl text-gray-300 mb-8">
          Don't miss your chance to be part of the future. Early bird pricing ends soon!
        </p>
        <div class="flex flex-wrap justify-center gap-4 mb-2">
          <button
            class="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300 transform hover:scale-105">
            Back This Project Now
          </button>
          <button
            class="backdrop-blur-md bg-white/5 border border-white/10 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300 hover:bg-white/10">
            Share With Friends
          </button>
        </div>
        <div class="flex items-center gap-4 max-w-4xl py-4 justify-center mb-4">
          <div class="flex items-center">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp"
              class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp"
              class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
              class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-11.webp"
              class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
            <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-9.webp"
              class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3" alt="Profile">
          </div>
          <div class="flex flex-col gap-1">
            <div class="flex items-center gap-1">
              <svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            </div>
            <div class="text-sm"><span class='font-semibold'>5/5</span> <span>(1200 customers)</span></div>
          </div>
        </div>
        <div class="flex justify-center flex-wrap items-center md:space-x-4 text-sm text-gray-400">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Secure checkout
          </span>
          <span class="hidden md:block">•</span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            Money-back guarantee
          </span>
        </div>
      </div>
    </div>
  </div>
</section>