Spotlight Pricing Cards Grid

<div class="py-32 relative border-t border-white/5 bg-zinc-950">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');</style>
  <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6 font-['Inter','Helvetica_Neue',sans-serif]">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-5xl text-white mb-4 tracking-tight font-['Manrope',sans-serif] font-medium">Simple, transparent pricing</h2>
      <p class="text-lg text-zinc-400 font-medium">For studios, startups and solo makers using Kreona Studio.</p>
      <div class="flex items-center justify-center mt-8">
        <div class="bg-zinc-900 p-1 rounded-full border border-white/10 flex items-center">
          <button class="px-6 py-2 rounded-full bg-zinc-800 text-white text-sm shadow-sm font-medium">Monthly</button>
          <button class="px-6 py-2 rounded-full text-zinc-400 text-sm hover:text-white font-medium">
            <span class="text-emerald-400 text-xs ml-1 font-medium">-20%</span>
          </button>
        </div>
      </div>
    </div>
    <script>document.addEventListener('mousemove',(e)=>{const cards=document.querySelectorAll('.spotlight-card');cards.forEach(card=>{const rect=card.getBoundingClientRect();const x=e.clientX-rect.left;const y=e.clientY-rect.top;card.style.setProperty('--mouse-x',`${x}px`);card.style.setProperty('--mouse-y',`${y}px`);});});</script>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-0 items-stretch w-full
      max-w-7xl mx-auto border-l border-white/10">
      <div class="spotlight-card group relative p-10 bg-zinc-950 border-y
        border-r border-white/10 flex flex-col min-h-[420px]
        overflow-hidden transition-colors hover:border-white/20">
        <div class="pointer-events-none absolute -inset-px opacity-0
          group-hover:opacity-100 transition-opacity duration-300 z-0" style="background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,0.06),transparent 40%);"></div>
        <div class="absolute inset-0
          bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
          bg-[size:24px_24px] pointer-events-none opacity-50"></div>
        <div class="absolute top-0 left-0 w-3 h-3 border-t border-l
          border-transparent group-hover:border-white/40
          transition-colors z-10"></div>
        <div class="absolute bottom-0 right-0 w-3 h-3 border-b border-r
          border-transparent group-hover:border-white/40
          transition-colors z-10"></div>
        <div class="relative z-10 flex flex-col h-full pointer-events-none">
          <div class="flex justify-start mb-8">
            <span class="px-4 py-1 border border-white/10 text-[10px] font-semibold
              text-zinc-400 uppercase tracking-widest bg-zinc-900/50
              backdrop-blur-sm">Light</span>
          </div>
          <div class="relative flex-grow">
            <div class="absolute inset-0 flex items-center justify-center
              transition-all duration-500
              ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-0
              group-hover:-translate-y-4 group-hover:scale-95
              origin-bottom">
              <div class="text-7xl text-white font-['Manrope',sans-serif] font-medium
                tracking-tighter flex items-start leading-none">
                <span class="text-2xl mt-2 ml-2 text-zinc-600 font-mono tracking-normal">$</span>
              </div>
            </div>
            <div class="absolute inset-0 flex flex-col justify-center gap-5
              transition-all duration-500
              ease-[cubic-bezier(0.23,1,0.32,1)] opacity-0 translate-y-8
              scale-95 group-hover:opacity-100 group-hover:translate-y-0
              group-hover:scale-100 origin-center">
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="text-zinc-600 shrink-0 mt-0.5">
                  <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm text-zinc-300 font-medium leading-snug">Limited article access</span>
              </div>
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="text-zinc-600 shrink-0 mt-0.5">
                  <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm text-zinc-300 font-medium leading-snug">Basic daily updates</span>
              </div>
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="text-zinc-600 shrink-0 mt-0.5">
                  <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm text-zinc-300 font-medium leading-snug">Community support</span>
              </div>
            </div>
          </div>
          <div class="mt-auto pt-10 flex items-end gap-6 justify-between pointer-events-auto">
            <p class="text-sm text-zinc-500 font-medium leading-relaxed
              max-w-[70%] transition-colors group-hover:text-zinc-400">Enjoy access to a limited selection of articles.</p>
            <button class="flex-shrink-0 w-12 h-12 bg-zinc-900 border border-white/10
              flex items-center justify-center text-zinc-400
              hover:bg-white hover:text-black transition-all duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="spotlight-card group relative p-10 bg-zinc-950 border-y
        border-r border-white/10 flex flex-col min-h-[420px]
        overflow-hidden">
        <div class="pointer-events-none absolute -inset-px opacity-0
          group-hover:opacity-100 transition-opacity duration-300 z-0" style="background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(6,182,212,0.08),transparent 40%);"></div>
        <div class="absolute inset-0 border border-cyan-500/20
          pointer-events-none opacity-60 group-hover:opacity-100
          transition-opacity duration-500"></div>
        <div class="absolute top-0 right-0 w-40 h-40 bg-cyan-500/5 blur-[80px]
          pointer-events-none group-hover:bg-cyan-500/10
          transition-colors"></div>
        <div class="absolute top-0 left-0 w-3 h-3 border-t border-l
          border-cyan-500/50 z-10 transition-all
          group-hover:border-cyan-400"></div>
        <div class="absolute top-0 right-0 w-3 h-3 border-t border-r
          border-cyan-500/50 z-10 transition-all
          group-hover:border-cyan-400"></div>
        <div class="absolute bottom-0 left-0 w-3 h-3 border-b border-l
          border-cyan-500/50 z-10 transition-all
          group-hover:border-cyan-400"></div>
        <div class="absolute bottom-0 right-0 w-3 h-3 border-b border-r
          border-cyan-500/50 z-10 transition-all
          group-hover:border-cyan-400"></div>
        <div class="relative z-10 flex flex-col h-full pointer-events-none">
          <div class="flex justify-start mb-10">
            <span class="px-4 py-1 border border-cyan-500/30 text-[10px]
              font-semibold text-cyan-400 uppercase tracking-widest
              bg-cyan-950/20 shadow-[0_0_15px_-5px_rgba(34,211,238,0.3)]
              backdrop-blur-sm">Most Popular</span>
          </div>
          <div class="relative flex-grow">
            <div class="absolute inset-0 flex items-center justify-center
              transition-all duration-500
              ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-0
              group-hover:-translate-y-4 group-hover:scale-95
              origin-bottom">
              <div class="text-7xl text-white font-['Manrope',sans-serif] font-medium
                tracking-tighter flex items-start leading-none
                drop-shadow-[0_0_15px_rgba(34,211,238,0.2)]">
                <span class="text-2xl mt-2 ml-2 text-cyan-500/70 font-mono tracking-normal">$</span>
              </div>
            </div>
            <div class="absolute inset-0 flex flex-col justify-center gap-5
              transition-all duration-500
              ease-[cubic-bezier(0.23,1,0.32,1)] opacity-0 translate-y-8
              scale-95 group-hover:opacity-100 group-hover:translate-y-0
              group-hover:scale-100 origin-center">
              <div class="flex items-start gap-4">
                <div class="mt-0.5 text-cyan-500 shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                    <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <span class="text-sm text-zinc-300 group-hover:text-white transition-colors font-medium leading-snug">Exclusive blog posts</span>
              </div>
              <div class="flex items-start gap-4">
                <div class="mt-0.5 text-cyan-500 shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                    <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <span class="text-sm text-zinc-300 group-hover:text-white transition-colors font-medium leading-snug">Downloadable resources</span>
              </div>
              <div class="flex items-start gap-4">
                <div class="mt-0.5 text-cyan-500 shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                    <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <span class="text-sm text-zinc-300 group-hover:text-white transition-colors font-medium leading-snug">Live monthly webinars</span>
              </div>
            </div>
          </div>
          <div class="mt-auto pt-10 flex items-end gap-6 justify-between pointer-events-auto">
            <p class="text-sm text-zinc-400 font-medium leading-relaxed
              max-w-[70%] transition-colors group-hover:text-zinc-300">Unlock additional content, features, and resources.</p>
            <button class="flex-shrink-0 w-12 h-12 bg-cyan-500 border border-cyan-400
              flex items-center justify-center text-black
              hover:bg-cyan-400 transition-all duration-300
              shadow-[0_0_20px_-5px_rgba(34,211,238,0.5)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="spotlight-card group relative p-10 bg-zinc-950 border-y
        border-r border-white/10 flex flex-col min-h-[420px]
        overflow-hidden transition-colors hover:border-white/20">
        <div class="pointer-events-none absolute -inset-px opacity-0
          group-hover:opacity-100 transition-opacity duration-300 z-0" style="background:radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,0.06),transparent 40%);"></div>
        <div class="absolute inset-0
          bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
          bg-[size:24px_24px] pointer-events-none opacity-50"></div>
        <div class="absolute top-0 left-0 w-3 h-3 border-t border-l
          border-transparent group-hover:border-white/40
          transition-colors z-10"></div>
        <div class="absolute bottom-0 right-0 w-3 h-3 border-b border-r
          border-transparent group-hover:border-white/40
          transition-colors z-10"></div>
        <div class="relative z-10 flex flex-col h-full pointer-events-none">
          <div class="flex justify-start mb-8">
            <span class="px-4 py-1 border border-white/10 text-[10px] font-semibold
              text-zinc-400 uppercase tracking-widest bg-zinc-900/50
              backdrop-blur-sm">Pro</span>
          </div>
          <div class="relative flex-grow">
            <div class="absolute inset-0 flex items-center justify-center
              transition-all duration-500
              ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-0
              group-hover:-translate-y-4 group-hover:scale-95
              origin-bottom">
              <div class="text-7xl text-white font-['Manrope',sans-serif] font-medium
                tracking-tighter flex items-start leading-none">
                <span class="text-2xl mt-2 ml-2 text-zinc-600 font-mono tracking-normal">$</span>
              </div>
            </div>
            <div class="absolute inset-0 flex flex-col justify-center gap-5
              transition-all duration-500
              ease-[cubic-bezier(0.23,1,0.32,1)] opacity-0 translate-y-8
              scale-95 group-hover:opacity-100 group-hover:translate-y-0
              group-hover:scale-100 origin-center">
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="text-white shrink-0 mt-0.5">
                  <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm text-zinc-200 font-medium leading-snug">Unlimited content access</span>
              </div>
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="text-white shrink-0 mt-0.5">
                  <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm text-zinc-200 font-medium leading-snug">Priority 24/7 support</span>
              </div>
              <div class="flex items-start gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="text-white shrink-0 mt-0.5">
                  <path fill="currentColor" fill-rule="evenodd" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm text-zinc-200 font-medium leading-snug">All features included</span>
              </div>
            </div>
          </div>
          <div class="mt-auto pt-10 flex items-end gap-6 justify-between pointer-events-auto">
            <p class="text-sm text-zinc-500 font-medium leading-relaxed
              max-w-[70%] transition-colors group-hover:text-zinc-400">Get unlimited access to all content.</p>
            <button class="flex-shrink-0 w-12 h-12 bg-zinc-900 border border-white/10
              flex items-center justify-center text-zinc-400
              hover:bg-white hover:text-black transition-all duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>