<!--
@type: FAQ
@industry: Business
@style: Modern
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--slate-50: #f8fafc;
--slate-200: #e2e8f0;
--slate-500: #64748b;
--slate-600: #475569;
--slate-900: #0f172a;
}
/* Reset */
* {
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";
}
/* Component styles */
.faq-section {
background-color: var(--slate-50);
padding: 4rem 1rem;
}
.faq-wrapper {
max-width: 48rem; /* max-w-3xl */
margin-left: auto;
margin-right: auto;
}
.faq-title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: var(--slate-900);
margin-bottom: 2rem;
text-align: center;
}
.faq-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.faq-item {
border-bottom: 1px solid var(--slate-200);
padding-bottom: 1.5rem;
}
.faq-item:last-child {
border-bottom: none;
padding-bottom: 0.5rem;
}
.faq-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.faq-button:focus {
outline: none;
}
.faq-question {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
color: var(--slate-900);
}
.faq-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--slate-500);
transition: transform 0.2s ease;
}
.faq-content {
margin-top: 0.75rem;
display: none;
}
.faq-answer {
color: var(--slate-600);
}
/* Responsive breakpoints */
@media (min-width: 768px) {
.faq-section {
padding: 6rem 1.5rem;
}
}
</style>
<section class="faq-section">
<div>
<div class="faq-wrapper">
<h3 class="faq-title">Frequently asked questions</h3>
<div class="faq-items">
<!-- FAQ Item 1 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-1">
<h4 class="faq-question">Can I change plans later?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-1" class="faq-content">
<p class="faq-answer">Yes, you can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged the prorated amount for the remainder of your billing cycle. When you downgrade, the new rate will apply to your next billing cycle.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-2">
<h4 class="faq-question">What payment methods do you accept?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-2" class="faq-content">
<p class="faq-answer">We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. We don't store your payment information on our servers—we use a secure payment processor.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-3">
<h4 class="faq-question">Do you offer a free trial?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-3" class="faq-content">
<p class="faq-answer">Yes, we offer a 14-day free trial on all plans. No credit card is required to start your trial. You can upgrade to a paid plan at any time during your trial period.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-4">
<h4 class="faq-question">What's your refund policy?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-4" class="faq-content">
<p class="faq-answer">We offer a 30-day money-back guarantee. If you're not satisfied with our product, you can request a full refund within 30 days of your purchase. To request a refund, please contact our support team.</p>
</div>
</div>
</div>
</div>
</div>
<script>
// FAQ accordion functionality
document.querySelectorAll('.faq-button').forEach(button => {
button.addEventListener('click', () => {
const content = document.getElementById(button.getAttribute('aria-controls'));
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
content.style.display = !isExpanded ? 'block' : 'none';
// Rotate the icon
const icon = button.querySelector('svg');
icon.style.transform = !isExpanded ? 'rotate(180deg)' : '';
});
});
</script>
</section>
<!--
@type: FAQ
@industry: Business
@style: Modern
@category: Content, Sale, Support
@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">
<div class="max-w-3xl mx-auto">
<h3 class="text-2xl font-bold text-slate-900 mb-8 text-center">Frequently asked questions</h3>
<div class="space-y-6">
<!-- FAQ Item 1 -->
<div class="border-b border-slate-200 pb-6">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-1">
<h4 class="text-lg font-medium text-slate-900">Can I change plans later?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-1" class="mt-3 hidden">
<p class="text-slate-600">Yes, you can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged the prorated amount for the remainder of your billing cycle. When you downgrade, the new rate will apply to your next billing cycle.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="border-b border-slate-200 pb-6">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-2">
<h4 class="text-lg font-medium text-slate-900">What payment methods do you accept?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-2" class="mt-3 hidden">
<p class="text-slate-600">We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. We don't store your payment information on our servers—we use a secure payment processor.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="border-b border-slate-200 pb-6">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-3">
<h4 class="text-lg font-medium text-slate-900">Do you offer a free trial?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-3" class="mt-3 hidden">
<p class="text-slate-600">Yes, we offer a 14-day free trial on all plans. No credit card is required to start your trial. You can upgrade to a paid plan at any time during your trial period.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="pb-2">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-4">
<h4 class="text-lg font-medium text-slate-900">What's your refund policy?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-4" class="mt-3 hidden">
<p class="text-slate-600">We offer a 30-day money-back guarantee. If you're not satisfied with our product, you can request a full refund within 30 days of your purchase. To request a refund, please contact our support team.</p>
</div>
</div>
</div>
</div>
</div>
<script>
// FAQ accordion functionality
document.querySelectorAll('[aria-controls^="faq-"]').forEach(button => {
button.addEventListener('click', () => {
const content = document.getElementById(button.getAttribute('aria-controls'));
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
content.classList.toggle('hidden');
// Rotate the icon
const icon = button.querySelector('svg');
icon.style.transform = !isExpanded ? 'rotate(180deg)' : '';
icon.style.transition = 'transform 0.2s ease';
});
});
</script>
</section>
