<!--
@type: Pricing
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<!-- Pricing Table Component -->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-green-500: #22c55e;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Base Styles */
.pricing-section {
background-color: var(--color-white);
padding: 4rem 1rem;
font-family: var(--font-sans);
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
/* Header */
.pricing-header {
text-align: center;
max-width: 42rem;
margin: 0 auto 2rem;
}
.pricing-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.pricing-description {
font-size: 1.125rem;
color: var(--color-gray-600);
margin-top: 1rem;
}
/* Toggle Switch */
.toggle-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.toggle-label {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.toggle-label-active {
color: var(--color-gray-900);
font-weight: 500;
}
.toggle-switch {
position: relative;
display: inline-flex;
height: 1.5rem;
width: 2.75rem;
flex-shrink: 0;
cursor: pointer;
border-radius: 9999px;
border: 2px solid transparent;
background-color: var(--color-gray-200);
transition: background-color 0.2s ease-in-out;
}
.toggle-switch:focus {
outline: none;
ring: 2px solid var(--color-blue-600);
ring-offset: 2px;
}
.toggle-switch.active {
background-color: var(--color-blue-600);
}
.toggle-button {
pointer-events: none;
display: inline-block;
height: 1.25rem;
width: 1.25rem;
transform: translateX(0);
border-radius: 9999px;
background-color: var(--color-white);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
transition: transform 0.2s ease-in-out;
}
.toggle-switch.active .toggle-button {
transform: translateX(100%);
}
.savings-tag {
color: var(--color-green-500);
}
/* Pricing Cards Grid */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
/* Pricing Card */
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 1rem;
border: 1px solid var(--color-gray-200);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: border-color 0.3s, box-shadow 0.3s;
}
.pricing-card:hover {
border-color: var(--color-gray-300);
box-shadow: var(--shadow-lg);
}
.pricing-card.featured {
border: 2px solid var(--color-blue-600);
box-shadow: var(--shadow-lg);
}
.popular-badge {
position: absolute;
top: -1rem;
right: 2rem;
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-blue-600);
padding: 0.25rem 1rem;
font-size: 0.875rem;
color: var(--color-white);
}
.card-header {
margin-bottom: 1.5rem;
}
.plan-name {
font-size: 1.25rem;
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: 1rem;
display: flex;
align-items: baseline;
}
.price {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-gray-900);
letter-spacing: -0.025em;
}
.price-period {
margin-left: 0.25rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Pricing List */
.pricing-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.pricing-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.pricing-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-blue-600);
}
.pricing-text {
margin-left: 0.75rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Action Button */
.action-button {
display: block;
width: 100%;
margin-top: 2rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: background-color 0.15s;
}
.action-button-outline {
border: 1px solid var(--color-gray-300);
background-color: var(--color-white);
color: var(--color-gray-900);
}
.action-button-outline:hover {
background-color: var(--color-gray-50);
}
.action-button-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
border: none;
}
.action-button-primary:hover {
background-color: var(--color-blue-700);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.pricing-section {
padding: 6rem 1.5rem;
}
.pricing-title {
font-size: 2.25rem;
}
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
.container {
padding: 0 2rem;
}
}
</style>
<section class="pricing-section" aria-labelledby="pricing-heading">
<div class="container">
<!-- Header -->
<div class="pricing-header">
<h2 id="pricing-heading" class="pricing-title">
Simple, transparent pricing
</h2>
<p class="pricing-description">
Choose the perfect plan for your business needs. All plans include a 14-day free trial.
</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="toggle-container">
<span class="toggle-label">Monthly</span>
<button type="button" class="toggle-switch" role="switch" aria-checked="false" id="billing-toggle">
<span class="toggle-button" id="billing-toggle-button"></span>
</button>
<span class="toggle-label toggle-label-active">Annual <span class="savings-tag">(Save 20%)</span></span>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Starter Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="plan-name">Starter</h3>
<p class="plan-description">Perfect for small teams just getting started</p>
<div class="price-container">
<span class="price" id="starter-price">$29</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="pricing-list">
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Up to 5 team members</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">20GB storage</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Basic analytics</span>
</li>
</ul>
<a href="#" class="action-button action-button-outline" aria-label="Get started with Starter plan">Get started</a>
</div>
<!-- Pro Plan (Featured) -->
<div class="pricing-card featured">
<div class="popular-badge">Most popular</div>
<div class="card-header">
<h3 class="plan-name">Pro</h3>
<p class="plan-description">For growing teams ready to scale</p>
<div class="price-container">
<span class="price" id="pro-price">$79</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="pricing-list">
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Up to 20 team members</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">100GB storage</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Advanced analytics</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Priority support</span>
</li>
</ul>
<a href="#" class="action-button action-button-primary" aria-label="Get started with Pro plan">Get started</a>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="card-header">
<h3 class="plan-name">Enterprise</h3>
<p class="plan-description">Custom solutions for large organizations</p>
<div class="price-container">
<span class="price" id="enterprise-price">$299</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="pricing-list">
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Unlimited team members</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">1TB storage</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Custom analytics</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">24/7 dedicated support</span>
</li>
<li class="pricing-item">
<svg class="pricing-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Custom integrations</span>
</li>
</ul>
<a href="#" class="action-button action-button-outline" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('billing-toggle');
const toggleButton = document.getElementById('billing-toggle-button');
const starterPrice = document.getElementById('starter-price');
const proPrice = document.getElementById('pro-price');
const enterprisePrice = document.getElementById('enterprise-price');
let isAnnual = false;
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$299'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$239'
}
};
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggle.classList.toggle('active');
toggle.setAttribute('aria-checked', isAnnual);
// Update prices
starterPrice.textContent = isAnnual ? prices.annual.starter : prices.monthly.starter;
proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
});
});
</script>
<!--
@type: Pricing
@industry: SaaS
@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">
<!-- Header -->
<div class="text-center max-w-2xl mx-auto mb-8">
<h2 id="pricing-heading" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Simple, transparent pricing
</h2>
<p class="mt-4 text-lg text-gray-600">
Choose the perfect plan for your business needs. All plans include a 14-day free trial.
</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="flex justify-center items-center gap-4 mb-12">
<span class="text-sm text-gray-600">Monthly</span>
<button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 bg-gray-200" role="switch" aria-checked="true" id="billing-toggle">
<span class="translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" id="billing-toggle-button"></span>
</button>
<span class="text-sm text-gray-900 font-medium">Annual <span class="text-green-500">(Save 20%)</span></span>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Starter Plan -->
<div class="relative flex flex-col rounded-2xl border border-gray-200 p-8 shadow-sm hover:border-gray-300 hover:shadow transition duration-300">
<div class="mb-6">
<h3 class="text-xl font-medium text-gray-900">Starter</h3>
<p class="mt-2 text-sm text-gray-600">Perfect for small teams just getting started</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900" id="starter-price">$29</span>
<span class="ml-1 text-sm text-gray-600">/month</span>
</div>
</div>
<ul role="list" class="space-y-4 flex-1">
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 5 team members</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">20GB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Basic analytics</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 transition duration-150" aria-label="Get started with Starter plan">Get started</a>
</div>
<!-- Pro Plan (Featured) -->
<div class="relative flex flex-col rounded-2xl border-2 border-blue-600 p-8 shadow-lg">
<div class="absolute -top-4 right-8 inline-flex items-center rounded-full bg-blue-600 px-4 py-1 text-sm text-white">Most popular</div>
<div class="mb-6">
<h3 class="text-xl font-medium text-gray-900">Pro</h3>
<p class="mt-2 text-sm text-gray-600">For growing teams ready to scale</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900" id="pro-price">$79</span>
<span class="ml-1 text-sm text-gray-600">/month</span>
</div>
</div>
<ul role="list" class="space-y-4 flex-1">
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Up to 20 team members</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">100GB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Advanced analytics</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Priority support</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg bg-blue-600 px-4 py-2 text-center text-sm font-medium text-white hover:bg-blue-700 transition duration-150" aria-label="Get started with Pro plan">Get started</a>
</div>
<!-- Enterprise Plan -->
<div class="relative flex flex-col rounded-2xl border border-gray-200 p-8 shadow-sm hover:border-gray-300 hover:shadow transition duration-300">
<div class="mb-6">
<h3 class="text-xl font-medium text-gray-900">Enterprise</h3>
<p class="mt-2 text-sm text-gray-600">Custom solutions for large organizations</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-bold tracking-tight text-gray-900" id="enterprise-price">$299</span>
<span class="ml-1 text-sm text-gray-600">/month</span>
</div>
</div>
<ul role="list" class="space-y-4 flex-1">
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Unlimited team members</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">1TB storage</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom analytics</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">24/7 dedicated support</span>
</li>
<li class="flex items-center">
<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-3 text-sm text-gray-600">Custom integrations</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-50 transition duration-150" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('billing-toggle');
const toggleButton = document.getElementById('billing-toggle-button');
const starterPrice = document.getElementById('starter-price');
const proPrice = document.getElementById('pro-price');
const enterprisePrice = document.getElementById('enterprise-price');
let isAnnual = false;
const prices = {
monthly: {
starter: '$29',
pro: '$79',
enterprise: '$299'
},
annual: {
starter: '$23',
pro: '$63',
enterprise: '$239'
}
};
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggleButton.style.transform = isAnnual ? 'translateX(100%)' : 'translateX(0)';
toggle.setAttribute('aria-checked', isAnnual);
// Update toggle background color
if (isAnnual) {
toggle.classList.remove('bg-gray-200');
toggle.classList.add('bg-blue-600');
} else {
toggle.classList.remove('bg-blue-600');
toggle.classList.add('bg-gray-200');
}
// Update prices
starterPrice.textContent = isAnnual ? prices.annual.starter : prices.monthly.starter;
proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
});
});
</script>
