<section class="relative py-20 scan-lines" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
<div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
<div class="absolute inset-0 opacity-20">
<div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
<div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
<div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
<div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
</div>
<div class="container px-4 mx-auto relative z-10">
<div class="max-w-xl lg:max-w-2xl mx-auto mb-12 text-center">
<span class="text-xs font-semibold text-blue-400 uppercase tracking-wider">SYSTEM PROTOCOLS</span>
<h2 class="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">ACCESS LEVELS CONFIGURED FOR MAXIMUM EFFICIENCY</h2>
<p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Interface with premium protocols. Execute advanced algorithms. Select your access tier and transcend digital limitations.</p>
<div class="flex justify-center gap-6">
<a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="text-lg pb-2 border-b-4 font-semibold tracking-wider transition-all duration-300 hover:animate-pulse" :class="{ 'border-blue-400 text-blue-400': pricing == $refs.pricing1.textContent, 'border-transparent hover:border-blue-400 text-gray-400': pricing != $refs.pricing1.textContent }" href="#">MONTHLY</a>
<a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" class="text-lg pb-2 border-b-4 font-semibold tracking-wider transition-all duration-300 hover:animate-pulse" :class="{ 'border-blue-400 text-blue-400': pricing == $refs.pricing2.textContent, 'border-transparent hover:border-blue-400 text-gray-400': pricing != $refs.pricing2.textContent }" href="#">YEARLY</a>
</div>
</div>
<div class="flex flex-wrap items-center -mx-4 -mb-6 lg:mb-0">
<div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
<div class="relative p-6 md:p-12 bg-gradient-to-br from-gray-900 to-gray-950 border border-blue-400 border-opacity-30 hologram-effect animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5"></div>
<div class="relative z-10 lg:text-center">
<h3 class="text-2xl font-bold text-blue-400 tracking-wider mb-2">BASIC PROTOCOL</h3>
<span class="inline-block mb-6 text-4xl md:text-6xl font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">$34,99</span>
<ul class="mb-6 text-left text-lg space-y-3">
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">Complete documentation</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">Working materials in Figma</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">100GB cloud storage</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-blue-400 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">500 team members</p>
</li>
</ul>
<a class="group relative block w-full px-5 py-3 text-sm text-center font-semibold text-blue-400 hover:text-gray-950 hover:bg-blue-400 border-2 border-blue-400 transition-all duration-300 transform hover:scale-105 overflow-hidden tracking-wider" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
<span class="relative z-10">INITIALIZE </span>
<div class="absolute inset-0 bg-blue-400 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
</a>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
</div>
</div>
<div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
<div class="relative p-6 md:p-12 bg-gradient-to-br from-blue-500 via-purple-600 to-blue-500 border-2 border-purple-400 hologram-effect animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); animation-delay: -2s;">
<div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-green-400 opacity-10"></div>
<div class="relative z-10 lg:text-center">
<div class="flex items-center justify-center mb-2">
<span class="px-3 py-1 text-xs font-bold text-gray-950 bg-green-400 tracking-wider animate-pulse">PREMIUM</span>
</div>
<h3 class="text-2xl font-bold text-gray-50 tracking-wider mb-2">PRO PROTOCOL</h3>
<span class="inline-block mb-6 text-4xl md:text-6xl font-black text-white font-heading tracking-wider animate-glitch">$65,99</span>
<ul class="mb-6 text-left text-lg space-y-3">
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-green-400 rounded-full flex items-center justify-center animate-pulse group-hover:animate-none transition-all duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-lg text-white">Complete documentation</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-green-400 rounded-full flex items-center justify-center animate-pulse group-hover:animate-none transition-all duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-lg text-white">Working materials in Figma</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-green-400 rounded-full flex items-center justify-center animate-pulse group-hover:animate-none transition-all duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-lg text-white">100GB cloud storage</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-green-400 rounded-full flex items-center justify-center animate-pulse group-hover:animate-none transition-all duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-lg text-white">500 team members</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-green-400 rounded-full flex items-center justify-center animate-pulse group-hover:animate-none transition-all duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-lg text-white">Premium support</p>
</li>
</ul>
<a class="group relative block w-full px-5 py-3 text-sm text-center bg-gradient-to-r from-green-400 to-blue-400 hover:from-blue-400 hover:to-purple-500 text-gray-950 font-semibold transition-all duration-300 transform hover:scale-105 animate-pulse-neon overflow-hidden tracking-wider" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
<span class="relative z-10">EXECUTE PROTOCOL</span>
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
</a>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<div class="absolute bottom-4 left-4 w-1 h-1 bg-purple-400 rounded-full animate-pulse delay-75"></div>
</div>
</div>
<div class="w-full lg:w-1/3 px-4">
<div class="relative p-6 md:p-12 bg-gradient-to-br from-gray-900 to-gray-950 border border-purple-500 border-opacity-30 hologram-effect animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); animation-delay: -4s;">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-blue-400 to-green-400 opacity-5"></div>
<div class="relative z-10 lg:text-center">
<h3 class="text-2xl font-bold text-purple-500 tracking-wider mb-2">ELITE PROTOCOL</h3>
<span class="inline-block mb-6 text-4xl md:text-6xl font-black font-heading tracking-wider bg-gradient-to-r from-purple-500 to-green-400 bg-clip-text text-transparent">$99,99</span>
<ul class="mb-6 text-left text-lg space-y-3">
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">Complete documentation</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">Working materials in Figma</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">100GB cloud storage</p>
</li>
<li class="flex items-center group">
<div class="mr-3 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center opacity-80 group-hover:opacity-100 transition-opacity duration-300">
<svg class="w-4 h-4 text-gray-950" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<p class="text-gray-300">500 team members</p>
</li>
</ul>
<a class="group relative block w-full px-5 py-3 text-sm text-center font-semibold text-purple-500 hover:text-gray-950 hover:bg-purple-500 border-2 border-purple-500 transition-all duration-300 transform hover:scale-105 overflow-hidden tracking-wider" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
<span class="relative z-10">ACTIVATE </span>
<div class="absolute inset-0 bg-purple-500 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
</a>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
