<!--
@type: Pricing
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-500: #64748b;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-900: #0f172a;
--color-indigo-50: #eef2ff;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--spacing-1: 0.25rem;
--spacing-1-5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
/* Base Styles */
.pricing-section {
background-color: var(--color-slate-50);
padding: 4rem 1rem;
}
/* Heading Styles */
.heading-container {
text-align: center;
max-width: 48rem; /* max-w-3xl */
margin-left: auto;
margin-right: auto;
margin-bottom: 2.5rem;
}
.heading-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 1rem;
line-height: 1;
}
.heading-description {
font-size: 1.125rem;
color: var(--color-slate-600);
}
/* Pricing Toggle */
.toggle-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.toggle-buttons {
background-color: var(--color-slate-100);
padding: 0.375rem;
border-radius: 0.75rem;
display: inline-flex;
align-items: center;
margin-bottom: 0.5rem;
}
.toggle-button {
position: relative;
padding: 0.5rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.toggle-button.active {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.toggle-button:not(.active) {
color: var(--color-slate-700);
background-color: transparent;
}
.toggle-hint {
font-size: 0.75rem;
color: var(--color-indigo-600);
font-weight: 500;
}
/* Pricing Cards Grid */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
/* Pricing Card Base */
.pricing-card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: 2rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.3s;
}
/* Featured Card */
.pricing-card-featured {
border: 2px solid var(--color-indigo-600);
box-shadow: var(--shadow-xl);
position: relative;
}
.featured-badge {
position: absolute;
top: 0;
right: 0;
background-color: var(--color-indigo-600);
color: var(--color-white);
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-bottom-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
/* Card Header */
.card-header {
margin-bottom: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 0.5rem;
}
.card-description {
color: var(--color-slate-600);
}
/* Pricing */
.pricing-container {
margin-bottom: 1.5rem;
}
.price-wrapper {
display: flex;
align-items: baseline;
}
.price {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-slate-900);
}
.price-period {
color: var(--color-slate-600);
margin-left: 0.5rem;
}
.billing-info {
font-size: 0.875rem;
color: var(--color-slate-500);
margin-top: 0.5rem;
}
/* Features List */
.pricing-list {
list-style: none;
margin-bottom: 2rem;
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.feature-item:last-child {
margin-bottom: 0;
}
.feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-indigo-600);
margin-top: 0.125rem;
flex-shrink: 0;
}
.feature-text {
color: var(--color-slate-600);
margin-left: 0.75rem;
}
/* CTA Button */
.cta-wrapper {
margin-top: auto;
}
.cta-button {
display: block;
width: 100%;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-align: center;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.cta-button-primary {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.cta-button-primary:hover {
background-color: var(--color-indigo-700);
}
.cta-button-secondary {
background-color: var(--color-white);
color: var(--color-indigo-600);
border: 1px solid var(--color-indigo-600);
}
.cta-button-secondary:hover {
background-color: var(--color-indigo-50);
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.pricing-section {
padding: 6rem 1.5rem;
}
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.heading-title {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem;
padding-right: 2rem;
}
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="pricing-section">
<div>
<!-- Heading -->
<div class="heading-container">
<h2 class="heading-title">Simple, transparent pricing</h2>
<p class="heading-description">Choose the plan that's right for your business and scale as you grow.</p>
</div>
<!-- Pricing Toggle -->
<div class="toggle-container">
<div class="toggle-buttons">
<button id="monthly-toggle" class="toggle-button active">
<span>Monthly</span>
</button>
<button id="annual-toggle" class="toggle-button">
<span>Annual</span>
</button>
</div>
<p class="toggle-hint">Save 20% with annual billing</p>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="card-title">Starter</h3>
<p class="card-description">Perfect for small businesses just getting started.</p>
</div>
<div class="pricing-container">
<div class="price-wrapper">
<span class="price" id="starter-price">$29</span>
<span class="price-period" id="starter-period">/month</span>
</div>
<p class="billing-info" id="starter-billing">Billed monthly or $278 annually</p>
</div>
<ul class="pricing-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Up to 5 team members</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">20GB storage</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Basic analytics</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Email support</span>
</li>
</ul>
<div class="cta-wrapper">
<a href="#" class="cta-button cta-button-secondary" aria-label="Get started with Starter plan">Get started</a>
</div>
</div>
<!-- Professional Plan (Featured) -->
<div class="pricing-card pricing-card-featured">
<div class="featured-badge">MOST POPULAR</div>
<div class="card-header">
<h3 class="card-title">Professional</h3>
<p class="card-description">Ideal for growing businesses with more demands.</p>
</div>
<div class="pricing-container">
<div class="price-wrapper">
<span class="price" id="pro-price">$79</span>
<span class="price-period" id="pro-period">/month</span>
</div>
<p class="billing-info" id="pro-billing">Billed monthly or $758 annually</p>
</div>
<ul class="pricing-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Up to 20 team members</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">100GB storage</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Advanced analytics</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Priority email & chat support</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Custom integrations</span>
</li>
</ul>
<div class="cta-wrapper">
<a href="#" class="cta-button cta-button-primary" aria-label="Get started with Professional plan">Get started</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="card-title">Enterprise</h3>
<p class="card-description">Advanced features for large organizations.</p>
</div>
<div class="pricing-container">
<div class="price-wrapper">
<span class="price" id="enterprise-price">$199</span>
<span class="price-period" id="enterprise-period">/month</span>
</div>
<p class="billing-info" id="enterprise-billing">Billed monthly or $1,910 annually</p>
</div>
<ul class="pricing-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Unlimited team members</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Unlimited storage</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Enterprise analytics</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">24/7 dedicated support</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Custom development</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="feature-text">SLA & dedicated account manager</span>
</li>
</ul>
<div class="cta-wrapper">
<a href="#" class="cta-button cta-button-secondary" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</div>
<script>
// Pricing toggle functionality
const monthlyToggle = document.getElementById('monthly-toggle');
const annualToggle = document.getElementById('annual-toggle');
// Price data
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$199',
period: '/month',
starterBilling: 'Billed monthly',
proBilling: 'Billed monthly',
enterpriseBilling: 'Billed monthly'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$159',
period: '/month',
starterBilling: 'Billed annually ($278)',
proBilling: 'Billed annually ($758)',
enterpriseBilling: 'Billed annually ($1,910)'
}
};
// Default to monthly
let currentPlan = 'monthly';
// Toggle functions
function setMonthly() {
currentPlan = 'monthly';
monthlyToggle.classList.add('active');
annualToggle.classList.remove('active');
updatePrices();
}
function setAnnual() {
currentPlan = 'annual';
annualToggle.classList.add('active');
monthlyToggle.classList.remove('active');
updatePrices();
}
function updatePrices() {
// Update all prices based on current plan
document.getElementById('starter-price').textContent = prices[currentPlan].starter;
document.getElementById('pro-price').textContent = prices[currentPlan].pro;
document.getElementById('enterprise-price').textContent = prices[currentPlan].enterprise;
document.getElementById('starter-period').textContent = prices[currentPlan].period;
document.getElementById('pro-period').textContent = prices[currentPlan].period;
document.getElementById('enterprise-period').textContent = prices[currentPlan].period;
document.getElementById('starter-billing').textContent = prices[currentPlan].starterBilling;
document.getElementById('pro-billing').textContent = prices[currentPlan].proBilling;
document.getElementById('enterprise-billing').textContent = prices[currentPlan].enterpriseBilling;
}
// Add event listeners
monthlyToggle.addEventListener('click', setMonthly);
annualToggle.addEventListener('click', setAnnual);
</script>
</section>
<!--
@type: Pricing
@industry: Business
@style: Modern
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 md:py-24">
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
<!-- Heading -->
<div class="text-center max-w-3xl mx-auto mb-10">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Simple, transparent pricing</h2>
<p class="text-lg text-slate-600">Choose the plan that's right for your business and scale as you grow.</p>
</div>
<!-- Pricing Toggle - Újratervezett verzió -->
<div class="flex flex-col items-center justify-center mb-12">
<div class="bg-slate-100 p-1.5 rounded-xl inline-flex items-center mb-2">
<button id="monthly-toggle" class="relative px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 bg-indigo-600 text-white">
<span>Monthly</span>
</button>
<button id="annual-toggle" class="relative px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 text-slate-700">
<span>Annual</span>
</button>
</div>
<p class="text-xs text-indigo-600 font-medium">Save 20% with annual billing</p>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Starter Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg border border-slate-200 flex flex-col h-full transition-colors duration-300">
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-900 mb-2">Starter</h3>
<p class="text-slate-600">Perfect for small businesses just getting started.</p>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-4xl font-bold text-slate-900" id="starter-price">$29</span>
<span class="text-slate-600 ml-2" id="starter-period">/month</span>
</div>
<p class="text-sm text-slate-500 mt-2" id="starter-billing">Billed monthly or $278 annually</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Up to 5 team members</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">20GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Basic analytics</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Email support</span>
</li>
</ul>
<div class="mt-auto">
<a href="#" class="block w-full bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg text-center font-medium hover:bg-indigo-50 transition-colors" aria-label="Get started with Starter plan">Get started</a>
</div>
</div>
<!-- Professional Plan (Featured) -->
<div class="bg-white rounded-xl p-8 shadow-xl border-2 border-indigo-600 flex flex-col h-full relative transition-transform duration-300">
<div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div>
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-900 mb-2">Professional</h3>
<p class="text-slate-600">Ideal for growing businesses with more demands.</p>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-4xl font-bold text-slate-900" id="pro-price">$79</span>
<span class="text-slate-600 ml-2" id="pro-period">/month</span>
</div>
<p class="text-sm text-slate-500 mt-2" id="pro-billing">Billed monthly or $758 annually</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Up to 20 team members</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">100GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Advanced analytics</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Priority email & chat support</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Custom integrations</span>
</li>
</ul>
<div class="mt-auto">
<a href="#" class="block w-full bg-indigo-600 text-white px-6 py-3 rounded-lg text-center font-medium hover:bg-indigo-700 transition-colors" aria-label="Get started with Professional plan">Get started</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-xl p-8 shadow-lg border border-slate-200 flex flex-col h-full transition-transform duration-300">
<div class="mb-6">
<h3 class="text-xl font-bold text-slate-900 mb-2">Enterprise</h3>
<p class="text-slate-600">Advanced features for large organizations.</p>
</div>
<div class="mb-6">
<div class="flex items-baseline">
<span class="text-4xl font-bold text-slate-900" id="enterprise-price">$199</span>
<span class="text-slate-600 ml-2" id="enterprise-period">/month</span>
</div>
<p class="text-sm text-slate-500 mt-2" id="enterprise-billing">Billed monthly or $1,910 annually</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Unlimited team members</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Unlimited storage</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Enterprise analytics</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">24/7 dedicated support</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">Custom development</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-slate-600 ml-3">SLA & dedicated account manager</span>
</li>
</ul>
<div class="mt-auto">
<a href="#" class="block w-full bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg text-center font-medium hover:bg-indigo-50 transition-colors" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</div>
<script>
// Pricing toggle functionality with the new button-based toggle
const monthlyToggle = document.getElementById('monthly-toggle');
const annualToggle = document.getElementById('annual-toggle');
// Price data
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$199',
period: '/month',
starterBilling: 'Billed monthly',
proBilling: 'Billed monthly',
enterpriseBilling: 'Billed monthly'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$159',
period: '/month',
starterBilling: 'Billed annually ($278)',
proBilling: 'Billed annually ($758)',
enterpriseBilling: 'Billed annually ($1,910)'
}
};
// Default to monthly
let currentPlan = 'monthly';
// Toggle functions
function setMonthly() {
currentPlan = 'monthly';
monthlyToggle.classList.add('bg-indigo-600', 'text-white');
monthlyToggle.classList.remove('text-slate-700');
annualToggle.classList.remove('bg-indigo-600', 'text-white');
annualToggle.classList.add('text-slate-700');
updatePrices();
}
function setAnnual() {
currentPlan = 'annual';
annualToggle.classList.add('bg-indigo-600', 'text-white');
annualToggle.classList.remove('text-slate-700');
monthlyToggle.classList.remove('bg-indigo-600', 'text-white');
monthlyToggle.classList.add('text-slate-700');
updatePrices();
}
function updatePrices() {
// Update all prices based on current plan
document.getElementById('starter-price').textContent = prices[currentPlan].starter;
document.getElementById('pro-price').textContent = prices[currentPlan].pro;
document.getElementById('enterprise-price').textContent = prices[currentPlan].enterprise;
document.getElementById('starter-period').textContent = prices[currentPlan].period;
document.getElementById('pro-period').textContent = prices[currentPlan].period;
document.getElementById('enterprise-period').textContent = prices[currentPlan].period;
document.getElementById('starter-billing').textContent = prices[currentPlan].starterBilling;
document.getElementById('pro-billing').textContent = prices[currentPlan].proBilling;
document.getElementById('enterprise-billing').textContent = prices[currentPlan].enterpriseBilling;
}
// Add event listeners
monthlyToggle.addEventListener('click', setMonthly);
annualToggle.addEventListener('click', setAnnual);
</script>
</section>
