<!--
@type: Pricing
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* Spacing */
--spacing-1: 0.25rem;
--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;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
--content-max-width: 48rem; /* max-w-3xl */
--header-max-width: 42rem; /* max-w-2xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.pricing-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) var(--spacing-4);
}
.pricing-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.pricing-header {
text-align: center;
max-width: var(--header-max-width);
margin: 0 auto;
margin-bottom: var(--spacing-10);
}
.pricing-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.pricing-description {
font-size: 1rem;
color: var(--color-gray-600);
}
.billing-toggle {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-4);
margin-bottom: var(--spacing-12);
}
.billing-label {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.billing-discount {
color: var(--color-blue-600);
}
.toggle-button {
position: relative;
display: inline-flex;
height: 1.5rem;
width: 2.75rem;
flex-shrink: 0;
cursor: pointer;
border-radius: 9999px;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
transition: background-color 0.2s ease-in-out;
}
.toggle-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-100);
}
.toggle-slider {
pointer-events: none;
display: inline-block;
height: 1.25rem;
width: 1.25rem;
transform: translate(1px, 1px);
border-radius: 9999px;
background-color: var(--color-gray-800);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out;
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 1rem;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s ease;
}
.pricing-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.pricing-card--featured {
border-color: var(--color-blue-600);
}
.pricing-card--featured:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.popular-badge {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-blue-600);
padding: var(--spacing-1) var(--spacing-4);
font-size: 0.75rem;
color: var(--color-white);
}
.plan-header {
margin-bottom: var(--spacing-6);
}
.plan-name {
font-size: 1.25rem;
font-weight: 400;
color: var(--color-gray-800);
}
.plan-description {
margin-top: var(--spacing-2);
font-size: 0.875rem;
color: var(--color-gray-600);
}
.plan-price {
margin-top: var(--spacing-4);
display: flex;
align-items: baseline;
}
.price-amount {
font-size: 2.25rem;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--color-gray-800);
}
.price-period {
margin-left: var(--spacing-1);
font-size: 0.875rem;
color: var(--color-gray-600);
}
.feature-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: var(--spacing-4);
}
.feature-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-600);
}
.feature-text {
margin-left: var(--spacing-3);
font-size: 0.875rem;
color: var(--color-gray-600);
}
.plan-button {
display: block;
width: 100%;
margin-top: var(--spacing-8);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: all 0.15s ease;
}
.plan-button--outline {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
color: var(--color-gray-800);
}
.plan-button--outline:hover {
background-color: var(--color-gray-50);
}
.plan-button--primary {
background-color: var(--color-blue-600);
color: var(--color-white);
border: none;
}
.plan-button--primary:hover {
background-color: var(--color-blue-700);
}
.plan-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-100);
}
.princing-faq-section {
margin-top: var(--spacing-16);
max-width: var(--content-max-width);
margin-left: auto;
margin-right: auto;
}
.princing-faq-title {
font-size: 1.5rem;
font-weight: 500;
color: var(--color-gray-800);
text-align: center;
margin-bottom: var(--spacing-8);
}
.princing-faq-list {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.princing-faq-item {
background-color: var(--color-white);
border-radius: 0.5rem;
padding: var(--spacing-6);
border: 1px solid var(--color-gray-200);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.princing-faq-question {
font-size: 1.125rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-2);
}
.princing-faq-answer {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.pricing-section {
padding: var(--spacing-24) var(--spacing-6);
}
.pricing-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.pricing-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="pricing-section" aria-labelledby="pricing-heading">
<div class="pricing-container">
<!-- Header -->
<div class="pricing-header">
<h2 id="pricing-heading" class="pricing-title">
Choose the perfect plan for your needs
</h2>
<p class="pricing-description">
All plans include a 14-day free trial. No credit card required.
</p>
</div>
<!-- Toggle Annual/Monthly -->
<div class="billing-toggle">
<span class="billing-label">Monthly</span>
<button
type="button"
class="toggle-button"
role="switch"
aria-checked="false"
id="billing-toggle"
>
<span class="toggle-slider" id="billing-toggle-button"></span>
</button>
<span class="billing-label">Annual <span class="billing-discount">(Save 20%)</span></span>
</div>
<!-- Pricing Cards -->
<div class="pricing-grid">
<!-- Basic Plan -->
<div class="pricing-card">
<div class="plan-header">
<h3 class="plan-name">Basic</h3>
<p class="plan-description">Perfect for individuals and small projects</p>
<div class="plan-price">
<span class="price-amount" id="basic-price">$19</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="feature-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="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">1 product</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="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>
<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="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">48-hour support response</span>
</li>
</ul>
<a href="#" class="plan-button plan-button--outline" aria-label="Get started with Basic plan">Get started</a>
</div>
<!-- Professional Plan (Featured) -->
<div class="pricing-card pricing-card--featured">
<div class="popular-badge">Most popular</div>
<div class="plan-header">
<h3 class="plan-name">Professional</h3>
<p class="plan-description">For growing businesses and teams</p>
<div class="plan-price">
<span class="price-amount" id="pro-price">$49</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="feature-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="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">5 products</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="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="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="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-hour support response</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="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">API access</span>
</li>
</ul>
<a href="#" class="plan-button plan-button--primary" aria-label="Get started with Professional plan">Get started</a>
</div>
<!-- Enterprise Plan -->
<div class="pricing-card">
<div class="plan-header">
<h3 class="plan-name">Enterprise</h3>
<p class="plan-description">Custom solutions for large organizations</p>
<div class="plan-price">
<span class="price-amount" id="enterprise-price">$99</span>
<span class="price-period">/month</span>
</div>
</div>
<ul class="feature-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="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 products</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="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 dashboard</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="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>
<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="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">Dedicated account manager</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="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="plan-button plan-button--outline" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
<!-- FAQ Section -->
<div class="princing-faq-section">
<h3 class="princing-faq-title">Frequently Asked Questions</h3>
<div class="princing-faq-list">
<div class="princing-faq-item">
<h4 class="princing-faq-question">Can I switch plans later?</h4>
<p class="princing-faq-answer">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
</div>
<div class="princing-faq-item">
<h4 class="princing-faq-question">Is there a setup fee?</h4>
<p class="princing-faq-answer">No, there are no setup fees or hidden costs. You only pay the advertised price for your selected plan.</p>
</div>
<div class="princing-faq-item">
<h4 class="princing-faq-question">What payment methods do you accept?</h4>
<p class="princing-faq-answer">We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('billing-toggle');
const toggleButton = document.getElementById('billing-toggle-button');
const basicPrice = document.getElementById('basic-price');
const proPrice = document.getElementById('pro-price');
const enterprisePrice = document.getElementById('enterprise-price');
let isAnnual = false;
const prices = {
monthly: {
basic: '$19',
pro: '$49',
enterprise: '$99'
},
annual: {
basic: '$15',
pro: '$39',
enterprise: '$79'
}
};
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggleButton.style.transform = isAnnual ? 'translateX(100%)' : 'translateX(1px)';
toggle.setAttribute('aria-checked', isAnnual);
// Update prices
basicPrice.textContent = isAnnual ? prices.annual.basic : prices.monthly.basic;
proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
});
});
</script>
<!--
@type: Pricing
@industry: Product
@style: Light
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 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-10">
<h2 id="pricing-heading" class="text-3xl font-medium text-gray-800 sm:text-4xl mb-4">
Choose the perfect plan for your needs
</h2>
<p class="text-base text-gray-600">
All plans include a 14-day free trial. No credit card required.
</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 border-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-100 bg-white" role="switch" aria-checked="false" id="billing-toggle">
<span class="translate-x-px translate-y-px pointer-events-none inline-block h-5 w-5 transform rounded-full bg-gray-800 shadow ring-0 transition duration-200 ease-in-out" id="billing-toggle-button"></span>
</button>
<span class="text-sm text-gray-600">Annual <span class="text-blue-600">(Save 20%)</span></span>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Basic Plan -->
<div class="relative flex flex-col rounded-2xl bg-white border border-gray-200 p-8 shadow-sm hover:shadow transition duration-300">
<div class="mb-6">
<h3 class="text-xl font-normal text-gray-800">Basic</h3>
<p class="mt-2 text-sm text-gray-600">Perfect for individuals and small projects</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-medium tracking-tight text-gray-800" id="basic-price">$19</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">1 product</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>
<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">48-hour support response</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg border border-gray-200 bg-white px-6 py-3 text-center text-sm font-medium text-gray-800 hover:bg-gray-50 focus:ring-2 focus:ring-blue-100 transition duration-150" aria-label="Get started with Basic plan">Get started</a>
</div>
<!-- Professional Plan (Featured) -->
<div class="relative flex flex-col rounded-2xl bg-white border border-blue-600 p-8 shadow-sm hover:shadow-md transition duration-300">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center rounded-full bg-blue-600 px-4 py-1 text-xs text-white">Most popular</div>
<div class="mb-6">
<h3 class="text-xl font-normal text-gray-800">Professional</h3>
<p class="mt-2 text-sm text-gray-600">For growing businesses and teams</p>
<div class="mt-4 flex items-baseline">
<span class="text-4xl font-medium tracking-tight text-gray-800" id="pro-price">$49</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">5 products</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">24-hour support response</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">API access</span>
</li>
</ul>
<a href="#" class="mt-8 block w-full rounded-lg bg-blue-600 px-6 py-3 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-100 transition duration-150" aria-label="Get started with Professional plan">Get started</a>
</div>
<!-- Enterprise Plan -->
<div class="relative flex flex-col rounded-2xl bg-white border border-gray-200 p-8 shadow-sm hover:shadow transition duration-300">
<div class="mb-6">
<h3 class="text-xl font-normal text-gray-800">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-medium tracking-tight text-gray-800" id="enterprise-price">$99</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 products</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 dashboard</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>
<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">Dedicated account manager</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-200 bg-white px-6 py-3 text-center text-sm font-medium text-gray-800 hover:bg-gray-50 focus:ring-2 focus:ring-blue-100 transition duration-150" aria-label="Contact sales for Enterprise plan">Contact sales</a>
</div>
</div>
<!-- FAQ Section -->
<div class="mt-16 max-w-3xl mx-auto">
<h3 class="text-2xl font-medium text-gray-800 text-center mb-8">Frequently Asked Questions</h3>
<div class="space-y-6">
<div class="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
<h4 class="text-lg font-normal text-gray-800 mb-2">Can I switch plans later?</h4>
<p class="text-sm text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
</div>
<div class="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
<h4 class="text-lg font-normal text-gray-800 mb-2">Is there a setup fee?</h4>
<p class="text-sm text-gray-600">No, there are no setup fees or hidden costs. You only pay the advertised price for your selected plan.</p>
</div>
<div class="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
<h4 class="text-lg font-normal text-gray-800 mb-2">What payment methods do you accept?</h4>
<p class="text-sm text-gray-600">We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('billing-toggle');
const toggleButton = document.getElementById('billing-toggle-button');
const basicPrice = document.getElementById('basic-price');
const proPrice = document.getElementById('pro-price');
const enterprisePrice = document.getElementById('enterprise-price');
let isAnnual = false;
const prices = {
monthly: {
basic: '$19',
pro: '$49',
enterprise: '$99'
},
annual: {
basic: '$15',
pro: '$39',
enterprise: '$79'
}
};
toggle.addEventListener('click', function() {
isAnnual = !isAnnual;
toggleButton.style.transform = isAnnual ? 'translateX(100%)' : 'translateX(0)';
toggle.setAttribute('aria-checked', isAnnual);
// Update prices
basicPrice.textContent = isAnnual ? prices.annual.basic : prices.monthly.basic;
proPrice.textContent = isAnnual ? prices.annual.pro : prices.monthly.pro;
enterprisePrice.textContent = isAnnual ? prices.annual.enterprise : prices.monthly.enterprise;
});
});
</script>
