CTA Banner with Animated Cursor-Follow Button

<div class="relative sm:p-16 bg-neutral-50/5 border-white/10 border rounded-3xl pt-12 pr-12 pb-12 pl-12 backdrop-blur-2xl">
                    <div class="fade-in">
                        <h2 class="text-4xl sm:text-5xl font-semibold text-white tracking-tight mb-6">
                            Ready to unlock your 
                            <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-500 to-cyan-400">creative potential?</span>
                        </h2>
                        <p class="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
                            Join thousands of creative minds who've transformed their thinking process with Nexus. Start your free trial today.
                        </p>
                        
                        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                            <div class="inline-block bg-transparent">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); 
    
    .cursor-follow-cta {
      --cursor-x: 50%;
      --cursor-y: 50%;
      position: relative;
      overflow: hidden;
      border-radius: 9999px;
      padding: 1.25rem 2.5rem;
      font-size: 1.125rem;
      line-height: 1.2;
      font-weight: 500;
      color: #ffffff;
      background: #000000;
      border: 2px solid #1d4ed8;
      box-shadow: inset 0 0 0 1px #1a1818;
      cursor: pointer;
      isolation: isolate;
      font-family: 'Inter', 'Helvetica Neue', sans-serif;
      z-index: 0;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .cursor-follow-cta::before {
      content: '';
      position: absolute;
      top: var(--cursor-y);
      left: var(--cursor-x);
      transform: translate(-50%, -50%);
      width: 120px;
      height: 120px;
      background: radial-gradient(
        circle at center,
        rgba(29, 78, 216, 0.4) 0%,
        rgba(29, 78, 216, 0.2) 35%,
        rgba(29, 78, 216, 0.1) 60%,
        transparent 100%
      );
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: -1;
      filter: blur(15px);
      will-change: transform, opacity;
    }
    
    .cursor-follow-cta:hover::before {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    
    .cursor-follow-cta:hover {
      border-color: #3b82f6;
      box-shadow: 
        inset 0 0 0 1px #1a1818,
        0 0 30px rgba(29, 78, 216, 0.3),
        0 0 50px rgba(29, 78, 216, 0.15);
      transform: translateY(-1px);
    }
    
    .cursor-follow-cta span {
      position: relative;
      z-index: 2;
      display: inline-block;
      transition: all 0.3s ease;
    }
    
    .cursor-follow-cta:active {
      transform: translateY(1px) scale(0.98);
      transition: all 0.1s ease;
    }
    
    /* Smooth snake-like movement */
    .cursor-follow-cta::after {
      content: '';
      position: absolute;
      top: var(--cursor-y);
      left: var(--cursor-x);
      transform: translate(-50%, -50%);
      width: 160px;
      height: 160px;
      background: radial-gradient(
        circle at center,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(59, 130, 246, 0.04) 40%,
        transparent 80%
      );
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      z-index: -2;
      filter: blur(25px);
      will-change: transform, opacity;
    }
    
    .cursor-follow-cta:hover::after {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.2);
    }
  </style>
  <button class="cursor-follow-cta focus:outline-none" id="cursor-follow-button" style="position: relative; overflow: hidden; cursor: pointer; padding: 1rem 2rem; height: auto; width: fit-content; background-color: rgb(122, 48, 143); font-size: 1.125rem; color: white; border: none; border-radius: 9999px; box-shadow: rgb(122, 48, 143) 0px 0px 2px 1px; font-family: Inter, &quot;Helvetica Neue&quot;, sans-serif; font-weight: 500; line-height: 1.2; --cursor-x: 70.37107880642694%; --cursor-y: 67.17201166180759%;">
  <span style="position: relative; z-index: 10; display: flex; align-items: center; gap: 0.5rem;" class="">Download Nexus <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="w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7,10 12,15 17,10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg></span>
  <div style="content: &quot;&quot;; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: radial-gradient(circle at 0% 45%, rgb(16, 5, 36) 19%, rgba(16, 5, 36, 0.26) 46%, rgba(16, 5, 36, 0) 100%); pointer-events: none;"></div>
  <div style="content: &quot;&quot;; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-image: radial-gradient(circle at 100% 45%, rgb(16, 5, 36) 19%, rgba(16, 5, 36, 0.26) 46%, rgba(16, 5, 36, 0) 100%); pointer-events: none;"></div>
  <style>
    #cursor-follow-button:hover {
      box-shadow: 0px 0px 20px 0 rgb(122, 48, 143) !important;
    }
    #cursor-follow-button:hover > div:first-of-type,
    #cursor-follow-button:hover > div:last-of-type {
      width: 0 !important;
      opacity: 0 !important;
    }
  </style>
</button>
</div>
                            <button class="apple-button hover:bg-white/10 active:bg-white/5 flex gap-2 text-base font-medium text-white bg-white/5 border-white/20 border rounded-full pt-3 pr-8 pb-3 pl-8 backdrop-blur-xl items-center">
                        <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" data-lucide="play" class="lucide lucide-play h-4 w-4" style="stroke-width: 2;"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
                        Watch the film
                    </button>
                        </div>
                        
                        <p class="text-sm text-zinc-500 mt-6">
                            Free 14-day trial • No credit card required • Available on all platforms
                        </p>
                    </div>
                </div>