<!--
@type: Pricing
@industry: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-indigo-200: #c7d2fe;
--color-green-100: #dcfce7;
--color-green-500: #22c55e;
--color-green-800: #166534;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.pricing-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.pricing-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.section-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.pricing-toggle {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}
.toggle-container {
position: relative;
display: flex;
align-items: center;
padding: 0.25rem;
border-radius: 9999px;
border: 1px solid var(--color-gray-200);
}
.toggle-button {
position: relative;
width: 8rem;
border-radius: 9999px;
padding: 0.5rem 0;
font-size: 0.875rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.toggle-button[aria-pressed="true"] {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.toggle-button[aria-pressed="false"] {
background-color: transparent;
color: var(--color-gray-700);
}
.toggle-button[aria-pressed="false"]:hover {
color: var(--color-gray-900);
}
.toggle-button:focus {
outline: none;
z-index: 10;
}
.save-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-green-100);
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-green-800);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pricing-card {
border-radius: 1rem;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
transition: all 0.3s;
}
.pricing-card:hover {
border-color: var(--color-indigo-200);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.pricing-card--popular {
position: relative;
border: 2px solid var(--color-indigo-600);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.popular-badge {
position: absolute;
top: -1rem;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-indigo-600);
padding: 0.25rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-white);
}
.card-content {
padding: 2rem;
}
.plan-name {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.plan-description {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.price-container {
margin-top: 1.5rem;
}
.price {
display: flex;
align-items: baseline;
}
.price-amount {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.price-period {
margin-left: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-500);
}
.billing-info {
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
.pricing-feature-list {
margin-top: 2rem;
list-style: none;
}
.pricing-feature-item {
display: flex;
align-items: flex-start;
margin-top: 1rem;
}
.pricing-feature-item:first-child {
margin-top: 0;
}
.pricing-feature-icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-green-500);
flex-shrink: 0;
}
.pricing-feature-text {
margin-left: 0.75rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.cta-button {
display: block;
width: 100%;
margin-top: 2rem;
padding: 0.75rem 1rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: all 0.2s;
}
.cta-button--outline {
border: 1px solid var(--color-indigo-600);
background-color: var(--color-white);
color: var(--color-indigo-600);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.cta-button--outline:hover {
background-color: var(--color-gray-50);
}
.cta-button--solid {
border: 1px solid transparent;
background-color: var(--color-indigo-600);
color: var(--color-white);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.cta-button--solid:hover {
background-color: var(--color-indigo-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-600);
}
.comparison-section {
margin-top: 4rem;
}
.comparison-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-gray-900);
text-align: center;
margin-bottom: 2rem;
}
.table-container {
overflow-x: auto;
overflow-y: hidden;
border-radius: 0.5rem;
border: 1px solid var(--color-gray-200);
}
.comparison-table {
min-width: 100%;
border-collapse: collapse;
}
.comparison-table th {
background-color: var(--color-gray-50);
padding: 0.875rem 0.75rem;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gray-900);
}
.comparison-table th:first-child {
padding-left: 1.5rem;
}
.comparison-table th:not(:first-child) {
text-align: center;
}
.comparison-table td {
padding: 1rem 0.75rem;
font-size: 0.875rem;
border-top: 1px solid var(--color-gray-200);
}
.comparison-table td:first-child {
padding-left: 1.5rem;
color: var(--color-gray-900);
}
.comparison-table td:not(:first-child) {
text-align: center;
color: var(--color-gray-500);
}
</style>
<section class="pricing-section" aria-labelledby="pricing-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<span class="header-badge">Pricing</span>
<h2 id="pricing-heading" class="header-title">
Simple, transparent pricing for every business
</h2>
<p class="header-description">
Choose the perfect plan that fits your business needs. No hidden fees, no surprises.
</p>
</div>
<!-- Pricing Toggle -->
<div class="pricing-toggle">
<div class="toggle-container">
<button type="button" class="toggle-button" aria-pressed="true">Monthly</button>
<button type="button" class="toggle-button" aria-pressed="false">Annual</button>
</div>
<div class="save-badge">
Save 20%
</div>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<div class="card-content">
<h3 class="plan-name">Starter</h3>
<p class="plan-description">Perfect for small businesses just getting started</p>
<div class="price-container">
<p class="price">
<span class="price-amount">$29</span>
<span class="price-period">/month</span>
</p>
<p class="billing-info">Billed monthly</p>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Up to 5 team members</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Basic reporting & analytics</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">5GB storage</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Email support</span>
</li>
</ul>
<a href="#starter" class="cta-button cta-button--outline" role="button" aria-label="Get started with Starter plan">
Get started
</a>
</div>
</div>
<!-- Professional Plan -->
<div class="pricing-card pricing-card--popular">
<div class="popular-badge">Most popular</div>
<div class="card-content">
<h3 class="plan-name">Professional</h3>
<p class="plan-description">For growing businesses ready to scale</p>
<div class="price-container">
<p class="price">
<span class="price-amount">$79</span>
<span class="price-period">/month</span>
</p>
<p class="billing-info">Billed monthly</p>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Up to 20 team members</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Advanced reporting & analytics</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">20GB storage</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Priority email & chat support</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Custom integrations</span>
</li>
</ul>
<a href="#professional" class="cta-button cta-button--solid" role="button" aria-label="Get started with Professional plan">
Get started
</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="card-content">
<h3 class="plan-name">Enterprise</h3>
<p class="plan-description">Custom solutions for larger organizations</p>
<div class="price-container">
<p class="price">
<span class="price-amount">$199</span>
<span class="price-period">/month</span>
</p>
<p class="billing-info">Billed monthly</p>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Unlimited team members</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Custom reporting & analytics</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Unlimited storage</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">24/7 phone & priority support</span>
</li>
<li class="pricing-feature-item">
<svg class="pricing-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="pricing-feature-text">Dedicated account manager</span>
</li>
</ul>
<a href="#enterprise" class="cta-button cta-button--outline" role="button" aria-label="Contact sales for Enterprise plan">
Contact sales
</a>
</div>
</div>
</div>
<!-- Feature Comparison -->
<div class="comparison-section">
<h3 class="comparison-title">Compare plans in detail</h3>
<div class="table-container">
<table class="comparison-table">
<thead>
<tr>
<th>Features</th>
<th>Starter</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Team members</td>
<td>Up to 5</td>
<td>Up to 20</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Storage</td>
<td>5GB</td>
<td>20GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>API access</td>
<td>Basic</td>
<td>Advanced</td>
<td>Custom</td>
</tr>
<tr>
<td>Support</td>
<td>Email only</td>
<td>Email & chat</td>
<td>24/7 phone & priority</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const prices = {
starter: {
monthly: 29,
annual: Math.round(29 * 12 * 0.8)
},
professional: {
monthly: 79,
annual: Math.round(79 * 12 * 0.8)
},
enterprise: {
monthly: 199,
annual: Math.round(199 * 12 * 0.8)
}
};
const monthlyBtn = document.querySelector('[aria-pressed="true"]');
const annualBtn = document.querySelector('[aria-pressed="false"]');
const priceElements = document.querySelectorAll('.price-amount');
const billingTexts = document.querySelectorAll('.billing-info');
const periodTexts = document.querySelectorAll('.price-period');
function updatePrices(period) {
const plans = ['starter', 'professional', 'enterprise'];
priceElements.forEach((element, index) => {
const price = prices[plans[index]][period];
element.textContent = `$${price}`;
});
billingTexts.forEach(text => {
text.textContent = `Billed ${period === 'monthly' ? 'monthly' : 'annually'}`;
});
if (period === 'monthly') {
monthlyBtn.setAttribute('aria-pressed', 'true');
annualBtn.setAttribute('aria-pressed', 'false');
monthlyBtn.style.backgroundColor = 'var(--color-indigo-600)';
monthlyBtn.style.color = 'var(--color-white)';
annualBtn.style.backgroundColor = 'transparent';
annualBtn.style.color = 'var(--color-gray-700)';
} else {
annualBtn.setAttribute('aria-pressed', 'true');
monthlyBtn.setAttribute('aria-pressed', 'false');
annualBtn.style.backgroundColor = 'var(--color-indigo-600)';
annualBtn.style.color = 'var(--color-white)';
monthlyBtn.style.backgroundColor = 'transparent';
monthlyBtn.style.color = 'var(--color-gray-700)';
}
}
monthlyBtn.addEventListener('click', () => updatePrices('monthly'));
annualBtn.addEventListener('click', () => updatePrices('annual'));
});
</script>
<!--
@type: Pricing
@industry: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="pricing-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Pricing</span>
<h2 id="pricing-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Simple, transparent pricing for every business
</h2>
<p class="mt-4 text-lg text-gray-600">
Choose the perfect plan that fits your business needs. No hidden fees, no surprises.
</p>
</div>
<!-- Pricing Toggle -->
<div class="flex justify-center flex-wrap gap-4 mb-12">
<div class="relative flex items-center p-1 rounded-full border border-gray-200">
<button type="button" class="relative w-32 rounded-full bg-indigo-600 py-2 text-sm font-medium text-white focus:z-10 focus:outline-none" aria-pressed="true">Monthly</button>
<button type="button" class="relative w-32 rounded-full py-2 text-sm font-medium text-gray-700 hover:text-gray-900 focus:z-10 focus:outline-none" aria-pressed="false">Annual</button>
</div>
<div class="flex items-center">
<span class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800">
Save 20%
</span>
</div>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-8 items-start">
<!-- Starter Plan -->
<div class="rounded-2xl border border-gray-200 bg-white shadow-sm hover:border-indigo-200 hover:shadow-lg transition-all duration-300">
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Starter</h3>
<p class="mt-2 text-sm text-gray-600">Perfect for small businesses just getting started</p>
<div class="mt-6">
<p class="flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900">$29</span>
<span class="ml-1 text-sm font-medium text-gray-500">/month</span>
</p>
<p class="mt-1 text-sm text-gray-500">Billed monthly</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 5 team members</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Basic reporting & analytics</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">5GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Email support</span>
</li>
</ul>
<a href="#starter" class="mt-8 block w-full rounded-md border border-indigo-600 bg-white px-4 py-3 text-center text-sm font-medium text-indigo-600 shadow hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" role="button" aria-label="Get started with Starter plan">
Get started
</a>
</div>
</div>
<!-- Professional Plan -->
<div class="relative rounded-2xl border-2 border-indigo-600 bg-white shadow-xl">
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
<span class="inline-flex items-center rounded-full bg-indigo-600 px-4 py-1 text-sm font-medium text-white">Most popular</span>
</div>
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Professional</h3>
<p class="mt-2 text-sm text-gray-600">For growing businesses ready to scale</p>
<div class="mt-6">
<p class="flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900">$79</span>
<span class="ml-1 text-sm font-medium text-gray-500">/month</span>
</p>
<p class="mt-1 text-sm text-gray-500">Billed monthly</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 20 team members</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Advanced reporting & analytics</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">20GB storage</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Priority email & chat support</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom integrations</span>
</li>
</ul>
<a href="#professional" class="mt-8 block w-full rounded-md border border-transparent bg-indigo-600 px-4 py-3 text-center text-sm font-medium text-white shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" role="button" aria-label="Get started with Professional plan">
Get started
</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="rounded-2xl border border-gray-200 bg-white shadow-sm hover:border-indigo-200 hover:shadow-lg transition-all duration-300">
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
<p class="mt-2 text-sm text-gray-600">Custom solutions for larger organizations</p>
<div class="mt-6">
<p class="flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900">$199</span>
<span class="ml-1 text-sm font-medium text-gray-500">/month</span>
</p>
<p class="mt-1 text-sm text-gray-500">Billed monthly</p>
</div>
<ul class="mt-8 space-y-4">
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Unlimited team members</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom reporting & analytics</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Unlimited storage</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">24/7 phone & priority support</span>
</li>
<li class="flex items-start">
<svg class="h-6 w-6 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="ml-3 text-sm text-gray-600">Dedicated account manager</span>
</li>
</ul>
<a href="#enterprise" class="mt-8 block w-full rounded-md border border-indigo-600 bg-white px-4 py-3 text-center text-sm font-medium text-indigo-600 shadow hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" role="button" aria-label="Contact sales for Enterprise plan">
Contact sales
</a>
</div>
</div>
</div>
<!-- Feature Comparison -->
<div class="mt-16">
<h3 class="text-xl font-bold text-gray-900 text-center mb-8">Compare plans in detail</h3>
<div class="overflow-x-auto overflow-y-hidden rounded-lg border border-gray-200">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr class="bg-gray-50">
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Features</th>
<th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Starter</th>
<th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Professional</th>
<th scope="col" class="px-3 py-3.5 text-center text-sm font-semibold text-gray-900">Enterprise</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">Team members</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Up to 5</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Up to 20</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">Storage</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">5GB</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">20GB</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Unlimited</td>
</tr>
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">API access</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Basic</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Advanced</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Custom</td>
</tr>
<tr>
<td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">Support</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Email only</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">Email & chat</td>
<td class="px-3 py-4 text-center text-sm text-gray-500">24/7 phone & priority</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const prices = {
starter: {
monthly: 29,
annual: Math.round(29 * 12 * 0.8)
},
professional: {
monthly: 79,
annual: Math.round(79 * 12 * 0.8)
},
enterprise: {
monthly: 199,
annual: Math.round(199 * 12 * 0.8)
}
};
const monthlyBtn = document.querySelector('[aria-pressed="true"]');
const annualBtn = document.querySelector('[aria-pressed="false"]');
const priceElements = document.querySelectorAll('.text-4xl.font-bold');
const billingTexts = document.querySelectorAll('.text-sm.text-gray-500');
const periodTexts = document.querySelectorAll('.ml-1.text-sm.font-medium.text-gray-500');
function updatePrices(period) {
const plans = ['starter', 'professional', 'enterprise'];
priceElements.forEach((element, index) => {
const price = prices[plans[index]][period];
element.textContent = `$${price}`;
});
billingTexts.forEach(text => {
text.textContent = `Billed ${period === 'monthly' ? 'monthly' : 'annually'}`;
});
if (period === 'monthly') {
monthlyBtn.classList.add('bg-indigo-600', 'text-white');
monthlyBtn.classList.remove('text-gray-700');
annualBtn.classList.remove('bg-indigo-600', 'text-white');
annualBtn.classList.add('text-gray-700');
monthlyBtn.setAttribute('aria-pressed', 'true');
annualBtn.setAttribute('aria-pressed', 'false');
} else {
annualBtn.classList.add('bg-indigo-600', 'text-white');
annualBtn.classList.remove('text-gray-700');
monthlyBtn.classList.remove('bg-indigo-600', 'text-white');
monthlyBtn.classList.add('text-gray-700');
annualBtn.setAttribute('aria-pressed', 'true');
monthlyBtn.setAttribute('aria-pressed', 'false');
}
}
monthlyBtn.addEventListener('click', () => updatePrices('monthly'));
annualBtn.addEventListener('click', () => updatePrices('annual'));
});
</script>
