Component:
Free Pricing Fintech Glassmorphism
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Pricing component is perfect for Fintech landing pages, featuring a Glassmorphic design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@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>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page