<!--
@type: FAQ
@industry: SaaS
@style: Minimal
@category: Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-gray-200: #e5e7eb;
}
/* 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(--color-white);
padding: 3rem 1rem;
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.header {
max-width: 48rem;
margin: 0 auto;
text-align: center;
}
.header h2 {
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
line-height: 1.25;
}
.header p {
margin-top: 1rem;
font-size: 1rem;
line-height: 1.75;
color: var(--color-gray-600);
}
.faq-container {
max-width: 48rem;
margin: 3rem auto 0;
}
.faq-item {
padding: 1.5rem 0;
}
.faq-item + .faq-item {
border-top: 1px solid var(--color-gray-200);
}
.faq-button {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: left;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.faq-question {
font-size: 1rem;
font-weight: 600;
line-height: 1.75;
color: var(--color-gray-900);
}
.faq-icon-wrapper {
margin-left: 1.5rem;
height: 1.75rem;
display: flex;
align-items: center;
}
.faq-icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-gray-400);
transition: transform 0.2s ease;
}
.faq-icon.rotate {
transform: rotate(180deg);
}
.faq-answer {
margin-top: 0.5rem;
padding-right: 3rem;
font-size: 1rem;
line-height: 1.75;
color: var(--color-gray-600);
display: none;
}
.faq-answer.show {
display: block;
}
/* Responsive styles */
@media (min-width: 640px) {
.faq-section {
padding: 4rem 1.5rem;
}
.container {
padding: 0 1.5rem;
}
.header h2 {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.faq-section {
padding: 5rem 2rem;
}
.container {
padding: 0 2rem;
}
}
</style>
<section class="faq-section" aria-labelledby="faq-heading">
<div class="container">
<div class="header">
<h2 id="faq-heading">
Frequently Asked Questions
</h2>
<p>
Everything you need to know about our SaaS platform. Can't find the answer you're looking for? Feel free to contact our support team.
</p>
</div>
<div class="faq-container">
<!-- FAQ Item 1 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
How does your pricing model work?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
We offer flexible, usage-based pricing that scales with your business. Start with our free tier and upgrade as you grow. All plans include core features, with premium features available in higher tiers.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
What kind of support do you offer?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
We provide 24/7 email support for all customers. Premium plans include priority support with guaranteed response times and dedicated account managers. Our extensive documentation and community forums are available to everyone.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
Can I integrate with other tools?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
Yes! We offer robust API access and native integrations with popular tools like Slack, Google Workspace, and Microsoft 365. Our developer documentation makes it easy to build custom integrations.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
What about data security and privacy?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
Security is our top priority. We're SOC 2 Type II certified and GDPR compliant. All data is encrypted at rest and in transit. We regularly conduct security audits and penetration testing to ensure your data stays safe.
</p>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const button = item.querySelector('.faq-button');
const answer = item.querySelector('.faq-answer');
const icon = item.querySelector('.faq-icon');
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
// Toggle current item
button.setAttribute('aria-expanded', !isExpanded);
answer.classList.toggle('show');
icon.classList.toggle('rotate');
// Optional: Close other items
faqItems.forEach(otherItem => {
if (otherItem !== item) {
const otherButton = otherItem.querySelector('.faq-button');
const otherAnswer = otherItem.querySelector('.faq-answer');
const otherIcon = otherItem.querySelector('.faq-icon');
otherButton.setAttribute('aria-expanded', 'false');
otherAnswer.classList.remove('show');
otherIcon.classList.remove('rotate');
}
});
});
});
});
</script>
<!--
@type: FAQ
@industry: SaaS
@style: Minimal
@category: Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" aria-labelledby="faq-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 id="faq-heading" class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Frequently Asked Questions
</h2>
<p class="mt-4 text-base leading-7 text-gray-600">
Everything you need to know about our SaaS platform. Can't find the answer you're looking for? Feel free to contact our support team.
</p>
</div>
<div class="mx-auto mt-12 max-w-3xl divide-y divide-gray-200">
<!-- FAQ Item 1 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
How does your pricing model work?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
We offer flexible, usage-based pricing that scales with your business. Start with our free tier and upgrade as you grow. All plans include core features, with premium features available in higher tiers.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
What kind of support do you offer?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
We provide 24/7 email support for all customers. Premium plans include priority support with guaranteed response times and dedicated account managers. Our extensive documentation and community forums are available to everyone.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
Can I integrate with other tools?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
Yes! We offer robust API access and native integrations with popular tools like Slack, Google Workspace, and Microsoft 365. Our developer documentation makes it easy to build custom integrations.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
What about data security and privacy?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
Security is our top priority. We're SOC 2 Type II certified and GDPR compliant. All data is encrypted at rest and in transit. We regularly conduct security audits and penetration testing to ensure your data stays safe.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Alpine.js for accordion functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<script>
// Add x-cloak styles to hide content before Alpine initializes
document.addEventListener('alpine:init', () => {
const style = document.createElement('style')
style.textContent = '[x-cloak] { display: none !important; }'
document.head.appendChild(style)
})
</script>
