Cta SaaS Modern 3

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

<style>
  .gradient-text {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<section class="py-24 px-6 bg-zinc-50">
  <div class="max-w-5xl mx-auto animate-fadeInUp">
    <div class="relative">
      <div class="absolute inset-0 bg-gradient-to-br from-rose-500 to-rose-600 rounded-3xl blur-xl opacity-20"></div>
      <div class="relative bg-white rounded-3xl border border-zinc-200 p-12 md:p-16 shadow-2xl">
        <div class="text-center">
          <div class="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-rose-100 text-rose-600 rounded-full">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            <span class="text-sm font-semibold">Ready to Start?</span>
          </div>

          <h2 class="text-4xl md:text-5xl font-bold text-zinc-900 mb-6">
            See It Work <span class="gradient-text">For Yourself</span>
          </h2>

          <p class="text-xl text-zinc-600 mb-8 max-w-2xl mx-auto">
            Understanding how it works is great. Experiencing it is better. Start your free
            trial and watch your data transform in real-time.
          </p>

          <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <button
              class="px-8 py-4 bg-rose-500 hover:bg-rose-600 text-white font-semibold rounded-lg transition-all duration-300 hover:scale-105 shadow-xl shadow-rose-500/30">
              Start Free Trial
            </button>
            <button
              class="px-8 py-4 bg-zinc-900 hover:bg-zinc-800 text-white font-semibold rounded-lg transition-all duration-300">
              Watch Live Demo
            </button>
          </div>

          <div class="flex flex-wrap justify-center gap-6 text-sm text-zinc-500">
            <div class="flex items-center gap-2">
              <svg class="w-5 h-5 text-green-600" 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>
              14-day free trial
            </div>
            <div class="flex items-center gap-2">
              <svg class="w-5 h-5 text-green-600" 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>
              No credit card required
            </div>
            <div class="flex items-center gap-2">
              <svg class="w-5 h-5 text-green-600" 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>
              Setup in minutes
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>