<!--
@type: Pricing
@industry: Fintech
@style: Glassmorphism
@category: Sale, Page Section, Content
@framework: Tailwind
@license: Free
-->
<section
class="relative py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"
>
<div class="relative z-10 container mx-auto px-4">
<div class="text-center mb-20 space-y-8">
<div class="inline-block">
<span
class="px-6 py-3 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
>💰 Simple Pricing</span
>
</div>
<h2 class="text-5xl md:text-7xl font-bold leading-tight">
<span
class="bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent"
>Choose Your</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Perfect Plan</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Transparent pricing that scales with your business. No hidden fees, no
surprises. Start free and upgrade as you grow.
</p>
</div>
<div class="mb-20">
<div id="pricing-toggle" class="flex justify-center">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-full p-2 flex items-center space-x-2"
>
<button
id="toggle-monthly"
class="px-6 py-3 rounded-full font-medium transition-all duration-300 bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg"
>
Monthly
</button>
<button
id="toggle-yearly"
class="px-6 py-3 rounded-full font-medium transition-all duration-300 flex items-center space-x-2 text-gray-300 hover:text-white"
>
<span>Yearly</span>
<span
class="bg-green-500/20 text-green-400 px-2 py-1 rounded-full text-xs font-bold"
>Save 20%</span
>
</button>
</div>
</div>
</div>
<div class="mb-20">
<div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">
<div class="group cursor-pointer">
<div
class="relative bg-white/10 backdrop-blur-md border rounded-3xl p-8 h-full"
>
<div class="space-y-8">
<div class="text-center space-y-4">
<h3
class="text-2xl font-bold transition-colors duration-300 text-white group-hover:text-blue-300"
>
Starter
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
Perfect for small businesses and startups getting started with
digital payments.
</p>
</div>
<div class="text-center space-y-2">
<div class="space-y-2">
<div
class="flex items-baseline justify-center space-x-2 pricing-card"
data-plan="Starter"
>
<span
class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
><span
class="font-bold text-white price-value"
data-period="monthly"
>$29</span
></span
><span class="text-gray-400 text-lg price-period"
>/month</span
>
</div>
<div class="text-gray-400 text-sm">$290/year (save $58)</div>
</div>
</div>
<div class="space-y-4">
<div class="space-y-3">
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Up to 1,000 transactions/month</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Basic payment processing</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Standard API access</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Email support</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Basic analytics dashboard</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>2 team members</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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="lucide lucide-check w-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Standard security features</span
>
</div>
</div>
<div class="space-y-3 pt-4 border-t border-white/10">
<div class="flex items-start space-x-3">
<div class="p-1 bg-red-500/20 text-red-400 rounded-full">
<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="lucide lucide-x w-4 h-4"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</div>
<span class="text-sm text-gray-400"
>No advanced analytics</span
>
</div>
<div class="flex items-start space-x-3">
<div class="p-1 bg-red-500/20 text-red-400 rounded-full">
<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="lucide lucide-x w-4 h-4"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</div>
<span class="text-sm text-gray-400"
>Limited integrations</span
>
</div>
<div class="flex items-start space-x-3">
<div class="p-1 bg-red-500/20 text-red-400 rounded-full">
<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="lucide lucide-x w-4 h-4"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</div>
<span class="text-sm text-gray-400"
>No priority support</span
>
</div>
</div>
</div>
<button
class="w-full py-4 rounded-xl font-semibold transition-all duration-300 hover:scale-105 group bg-white/10 backdrop-blur-md border border-white/20 text-white hover:bg-white/20"
>
Start Free Trial<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="lucide lucide-arrow-right ml-2 w-5 h-5 inline group-hover:translate-x-1 transition-transform duration-200"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="relative bg-white/10 backdrop-blur-md border rounded-3xl p-8 h-full"
>
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<div
class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-2 rounded-full text-sm font-bold flex items-center space-x-2"
>
<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="lucide lucide-star w-4 h-4 fill-current"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><span>Most Popular</span>
</div>
</div>
<div class="space-y-8">
<div class="text-center space-y-4">
<h3
class="text-2xl font-bold transition-colors duration-300 text-white"
>
Professional
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-200"
>
Ideal for growing businesses that need advanced features and
higher transaction volumes.
</p>
</div>
<div class="text-center space-y-2">
<div class="space-y-2">
<div
class="flex items-baseline justify-center space-x-2 pricing-card"
data-plan="Professional"
>
<span
class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
><span
class="font-bold text-white price-value"
data-period="monthly"
>$99</span
></span
><span class="text-gray-400 text-lg price-period"
>/month</span
>
</div>
<div class="text-gray-400 text-sm">$990/year (save $198)</div>
</div>
</div>
<div class="space-y-4">
<div class="space-y-3">
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Up to 10,000 transactions/month</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Advanced payment processing</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Full API access with webhooks</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Priority email & chat support</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Advanced analytics & reporting</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>10 team members</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Enhanced security features</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Custom integrations</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Multi-currency support</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-200"
>Fraud detection</span
>
</div>
</div>
</div>
<button
class="w-full py-4 rounded-xl font-semibold transition-all duration-300 hover:scale-105 group bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl hover:shadow-purple-500/25"
>
Get Started<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="lucide lucide-arrow-right ml-2 w-5 h-5 inline group-hover:translate-x-1 transition-transform duration-200"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="relative bg-white/10 backdrop-blur-md border rounded-3xl p-8 h-full"
>
<div class="space-y-8">
<div class="text-center space-y-4">
<h3
class="text-2xl font-bold transition-colors duration-300 text-white group-hover:text-blue-300"
>
Enterprise
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
For large organizations requiring custom solutions, dedicated
support, and unlimited scale.
</p>
</div>
<div class="text-center space-y-2">
<div class="space-y-2">
<div
class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
Custom
</div>
<div class="text-gray-400 text-sm">
Contact us for pricing
</div>
</div>
</div>
<div class="space-y-4">
<div class="space-y-3">
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Unlimited transactions</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Custom payment solutions</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Dedicated API endpoints</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>24/7 phone & priority support</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Custom analytics & reporting</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Unlimited team members</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Enterprise security & compliance</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Custom integrations & development</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Global payment support</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Advanced fraud protection</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>Dedicated account manager</span
>
</div>
<div class="flex items-start space-x-3">
<div
class="p-1 rounded-full transition-all duration-300 bg-green-500/20 text-green-400 group-hover:scale-110"
>
<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-4 h-4"
>
<path d="M20 6 9 17l-5-5"></path>
</svg>
</div>
<span
class="text-sm transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>SLA guarantees</span
>
</div>
</div>
</div>
<button
class="w-full py-4 rounded-xl font-semibold transition-all duration-300 hover:scale-105 group bg-white/10 backdrop-blur-md border border-white/20 text-white hover:bg-white/20"
>
Contact Sales<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="lucide lucide-arrow-right ml-2 w-5 h-5 inline group-hover:translate-x-1 transition-transform duration-200"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
const isYearlyKey = 'pricing-isYearly'
let isYearly = JSON.parse(localStorage.getItem(isYearlyKey)) || false
const btnMonthly = document.getElementById('toggle-monthly')
const btnYearly = document.getElementById('toggle-yearly')
const pricingCards = document.querySelectorAll('.pricing-card')
const plans = {
Starter: { monthly: 29, yearly: 290 },
Professional: { monthly: 99, yearly: 990 },
Enterprise: { monthly: null, yearly: null }, // "Custom"
}
function updateToggleUI() {
if (isYearly) {
btnYearly.classList.add(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
btnMonthly.classList.remove(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
btnMonthly.classList.add('text-gray-300', 'hover:text-white')
} else {
btnMonthly.classList.add(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
btnYearly.classList.remove(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
btnYearly.classList.add('text-gray-300', 'hover:text-white')
}
}
function updatePricing() {
pricingCards.forEach((card) => {
const planName = card.dataset.plan
const plan = plans[planName]
if (!plan) return
const priceValue = card.querySelector('.price-value')
const pricePeriod = card.querySelector('.price-period')
if (plan.monthly === null) {
priceValue.textContent = 'Custom'
pricePeriod.textContent = ''
} else {
const amount = isYearly ? plan.yearly : plan.monthly
priceValue.textContent = `$${amount.toLocaleString()}`
pricePeriod.textContent = isYearly ? '/year' : '/month'
}
})
}
btnMonthly.addEventListener('click', () => {
isYearly = false
localStorage.setItem(isYearlyKey, JSON.stringify(isYearly))
updateToggleUI()
updatePricing()
})
btnYearly.addEventListener('click', () => {
isYearly = true
localStorage.setItem(isYearlyKey, JSON.stringify(isYearly))
updateToggleUI()
updatePricing()
})
// Init
updateToggleUI()
updatePricing()
</script>
