Hero Kickstarter Dark

                <!--
@type: Hero
@industry: Kickstarter
@style: Dark
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<style>
  .fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
</style>

<section class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 text-white flex items-center justify-center relative px-4 py-20 pt-24">
  <!-- Background Elements -->
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500 opacity-10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-1/4 right-1/4 w-48 h-48 bg-indigo-500 opacity-10 rounded-full blur-3xl" style="animation-delay: -1s;"></div>
    <div class="absolute top-1/2 right-1/3 w-32 h-32 bg-cyan-500 opacity-10 rounded-full blur-2xl" style="animation-delay: -2s;"></div>
  </div>

  <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
    <!-- Left Content -->
    <div class="space-y-8">
      <!-- Badge -->
      <div class="fade-in-up">
        <span class="inline-flex items-center px-4 py-2 rounded-full text-xs font-medium bg-blue-500/20 text-blue-300 border border-blue-500/30">
          <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
          Live on Kickstarter
        </span>
      </div>

      <!-- Main Heading -->
      <div class="fade-in-up" style="animation-delay: 0.2s;">
        <h1 class="text-5xl lg:text-7xl font-bold leading-tight">
          The Future of
          <span class="bg-gradient-to-r from-blue-400 via-cyan-400 to-indigo-400 bg-clip-text text-transparent">
            Neural
          </span>
          <br>
          Computing
        </h1>
      </div>

      <!-- Description -->
      <div class="fade-in-up" style="animation-delay: 0.4s;">
        <p class="text-xl text-gray-300 leading-relaxed max-w-lg">
          Experience seamless brain-computer interaction with NeuralLink Pro. Revolutionary technology that reads neural signals with 99.9% accuracy.
        </p>
      </div>

      <!-- Stats -->
      <div class="fade-in-up flex space-x-8" style="animation-delay: 0.6s;">
        <div>
          <div class="text-3xl font-bold text-cyan-400">$2.4M</div>
          <div class="text-sm text-gray-400">Raised</div>
        </div>
        <div>
          <div class="text-3xl font-bold text-blue-400">1,247</div>
          <div class="text-sm text-gray-400">Backers</div>
        </div>
        <div>
          <div class="text-3xl font-bold text-indigo-400">23</div>
          <div class="text-sm text-gray-400">Days Left</div>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="fade-in-up" style="animation-delay: 0.8s;">
        <div class="space-y-2">
          <div class="flex justify-between text-sm">
            <span class="text-gray-400">Progress</span>
            <span class="text-cyan-400 font-medium">240% funded</span>
          </div>
          <div class="w-full bg-gray-700/50 rounded-full h-3">
            <div class="bg-gradient-to-r from-cyan-500 to-blue-500 h-3 rounded-full glow" style="width: 75%"></div>
          </div>
        </div>
      </div>

      <!-- CTA Buttons -->
      <div class="fade-in-up flex flex-wrap gap-4" style="animation-delay: 1s;">
        <button class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300 transform hover:scale-105 glow">
          Back This Project
        </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">
          Watch Demo
        </button>
      </div>
    </div>

    <!-- Right Content - Product Showcase -->
    <div class="fade-in-up relative" style="animation-delay: 0.6s;">
      <div class="relative">
        <img src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1620x1080.webp"
        alt="Product Visualization" class="w-full h-full object-cover rounded-2xl"
        width="600" height="400" loading="lazy">
      </div>
    </div>
  </div>

  <!-- Scroll Indicator -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
    <div class="flex flex-col items-center space-y-2 text-gray-400">
      <span class="text-xs">Scroll to explore</span>
      <div class="w-0.5 h-8 bg-gradient-to-b from-gray-400 to-transparent animate-pulse"></div>
    </div>
  </div>
</section>