<!--
@type: FAQ
@industry: Software
@style: Minimal
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
}
* {
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";
}
.faq-section {
background-color: var(--color-white);
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 640px) {
.faq-section {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.container {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem;
padding-right: 2rem;
}
}
.faq-header {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 4rem;
}
.faq-label {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.faq-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-gray-900);
letter-spacing: -0.025em;
}
@media (min-width: 640px) {
.faq-title {
font-size: 2.25rem;
}
}
.faq-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.faq-categories {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 1024px) {
.faq-categories {
grid-template-columns: repeat(3, 1fr);
}
}
.faq-category {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.category-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-indigo-600);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.faq-item:not(:last-child) {
padding: 1.5rem 0;
border-bottom: 1px solid var(--color-gray-200);
}
.faq-question {
display: flex;
width: 100%;
align-items: flex-start;
justify-content: space-between;
text-align: left;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.question-text {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
}
.question-icon-container {
margin-left: 1.5rem;
display: flex;
align-items: center;
}
.question-icon {
height: 1.5rem;
width: 1.5rem;
color: var(--color-gray-400);
transition: transform 0.2s ease;
}
.faq-answer {
margin-top: 0.5rem;
padding-right: 3rem;
display: none;
}
.faq-answer.active {
display: block;
}
.answer-text {
font-size: 1rem;
color: var(--color-gray-600);
}
.rotate-180 {
transform: rotate(180deg);
}
</style>
<section class="faq-section" aria-labelledby="faq-heading">
<div class="container">
<!-- Section Header -->
<div class="faq-header">
<span class="faq-label">FAQ</span>
<h2 id="faq-heading" class="faq-title">
Frequently asked questions
</h2>
<p class="faq-description">
Find answers to common questions about our software platform. Can't find what you're looking for? Contact our support team.
</p>
</div>
<!-- FAQ Categories -->
<div class="faq-categories">
<!-- Getting Started -->
<div class="faq-category">
<h3 class="category-title">Getting Started</h3>
<dl class="faq-list">
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">How do I start using the platform?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">Sign up for a free 14-day trial, no credit card required. Our onboarding team will help you set up your account and guide you through the essential features.</p>
</dd>
</div>
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">What's included in the free trial?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">The trial includes all Professional plan features, including team collaboration, advanced reporting, and priority support.</p>
</dd>
</div>
</dl>
</div>
<!-- Billing & Pricing -->
<div class="faq-category">
<h3 class="category-title">Billing & Pricing</h3>
<dl class="faq-list">
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">How does your pricing work?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">We offer three plans: Starter ($29/month), Professional ($79/month), and Enterprise (custom pricing). All plans can be billed monthly or annually with a 20% discount.</p>
</dd>
</div>
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">Can I change my plan later?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
</dd>
</div>
</dl>
</div>
<!-- Features & Integration -->
<div class="faq-category">
<h3 class="category-title">Features & Integration</h3>
<dl class="faq-list">
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">What integrations do you offer?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">We integrate with popular tools like QuickBooks, Stripe, Google Workspace, and more. Custom integrations are available on Enterprise plans.</p>
</dd>
</div>
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">Is API access included?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">Yes, all plans include API access. Basic plans have rate limits, while Professional and Enterprise plans offer higher limits and advanced endpoints.</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', function() {
const answer = this.parentNode.nextElementSibling;
const icon = this.querySelector('.question-icon');
// Toggle active state
answer.classList.toggle('active');
icon.classList.toggle('rotate-180');
// Update aria-expanded
const isExpanded = answer.classList.contains('active');
this.setAttribute('aria-expanded', isExpanded);
});
});
});
</script>
<!--
@type: FAQ
@industry: Software
@style: Minimal
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="faq-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">FAQ</span>
<h2 id="faq-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Frequently asked questions
</h2>
<p class="mt-4 text-lg text-gray-600">
Find answers to common questions about our software platform. Can't find what you're looking for? Contact our support team.
</p>
</div>
<!-- FAQ Categories -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Getting Started -->
<div class="space-y-6">
<h3 class="text-lg font-medium text-indigo-600">Getting Started</h3>
<dl class="space-y-6 divide-y divide-gray-200" x-data="{ selected: null }">
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">How do I start using the platform?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">Sign up for a free 14-day trial, no credit card required. Our onboarding team will help you set up your account and guide you through the essential features.</p>
</dd>
</div>
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">What's included in the free trial?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">The trial includes all Professional plan features, including team collaboration, advanced reporting, and priority support.</p>
</dd>
</div>
</dl>
</div>
<!-- Billing & Pricing -->
<div class="space-y-6">
<h3 class="text-lg font-medium text-indigo-600">Billing & Pricing</h3>
<dl class="space-y-6 divide-y divide-gray-200">
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">How does your pricing work?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">We offer three plans: Starter ($29/month), Professional ($79/month), and Enterprise (custom pricing). All plans can be billed monthly or annually with a 20% discount.</p>
</dd>
</div>
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">Can I change my plan later?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
</dd>
</div>
</dl>
</div>
<!-- Features & Integration -->
<div class="space-y-6">
<h3 class="text-lg font-medium text-indigo-600">Features & Integration</h3>
<dl class="space-y-6 divide-y divide-gray-200">
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">What integrations do you offer?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">We integrate with popular tools like QuickBooks, Stripe, Google Workspace, and more. Custom integrations are available on Enterprise plans.</p>
</dd>
</div>
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">Is API access included?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">Yes, all plans include API access. Basic plans have rate limits, while Professional and Enterprise plans offer higher limits and advanced endpoints.</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
