<!--
@type: FAQ
@industry: Marketing
@style: Dark
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-400: #60a5fa;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* 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-gray-900);
padding: 4rem 1rem;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-white);
}
.section-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-300);
}
.faq-grid {
display: grid;
gap: 1.5rem;
}
.faq-item {
background-color: var(--color-gray-800);
border-radius: 0.75rem;
padding: 1.5rem;
border: 1px solid var(--color-gray-700);
}
.faq-button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.faq-question {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-white);
}
.faq-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-400);
transition: transform 0.2s;
}
.faq-icon.active {
transform: rotate(180deg);
}
.faq-answer {
margin-top: 1rem;
color: var(--color-gray-300);
display: none;
line-height: 1.5;
}
.faq-answer.active {
display: block;
}
.cta-section {
margin-top: 3rem;
text-align: center;
}
.cta-text {
color: var(--color-gray-300);
margin-bottom: 1.5rem;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
border-radius: 0.5rem;
border: none;
text-decoration: none;
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.faq-section {
padding: 5rem 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.faq-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
<section class="faq-section">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">Frequently Asked Questions</h2>
<p class="section-description">Get answers to the most common questions about our marketing services</p>
</div>
<!-- FAQ Grid -->
<div class="faq-grid">
<!-- FAQ Item 1 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<h3 class="faq-question">How do you measure campaign success?</h3>
<svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="faq-answer">
We track multiple KPIs including ROI, conversion rates, engagement metrics, and customer acquisition costs. Our comprehensive analytics dashboard provides real-time insights into campaign performance, allowing for data-driven optimizations.
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<h3 class="faq-question">What marketing channels do you specialize in?</h3>
<svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="faq-answer">
We excel in digital marketing across social media, SEO, content marketing, email campaigns, and PPC advertising. Our integrated approach ensures your message reaches your target audience through the most effective channels.
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<h3 class="faq-question">What is your pricing structure?</h3>
<svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="faq-answer">
We offer flexible pricing packages tailored to your business needs and goals. Our transparent pricing model includes monthly retainers, project-based fees, and performance-based options. Contact us for a customized quote.
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<h3 class="faq-question">How long until we see results?</h3>
<svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="faq-answer">
Results timeline varies by campaign type and goals. Generally, initial results are visible within 1-3 months, with significant improvements in 3-6 months. We provide regular progress reports and optimize strategies continuously.
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<p class="cta-text">Still have questions? We're here to help!</p>
<a href="#contact" class="cta-button">Contact Our Team</a>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const faqButtons = document.querySelectorAll('.faq-button');
faqButtons.forEach(button => {
button.addEventListener('click', () => {
const answer = button.nextElementSibling;
const icon = button.querySelector('.faq-icon');
const isExpanded = button.getAttribute('aria-expanded') === 'true';
// Toggle current FAQ item
button.setAttribute('aria-expanded', !isExpanded);
answer.classList.toggle('active');
icon.classList.toggle('active');
});
});
});
</script>
<!--
@type: FAQ
@industry: Marketing
@style: Dark
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-white sm:text-4xl">Frequently Asked Questions</h2>
<p class="mt-4 text-lg text-gray-300">Get answers to the most common questions about our marketing services</p>
</div>
<!-- FAQ Grid -->
<div class="grid gap-6 lg:grid-cols-2">
<!-- FAQ Item 1 -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700" x-data="{ open: false }">
<button
class="flex justify-between items-center w-full text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg font-semibold text-white">How do you measure campaign success?</h3>
<svg
class="w-5 h-5 text-blue-400 transform transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div
class="mt-4 text-gray-300"
x-show="open"
x-collapse
x-cloak
>
We track multiple KPIs including ROI, conversion rates, engagement metrics, and customer acquisition costs. Our comprehensive analytics dashboard provides real-time insights into campaign performance, allowing for data-driven optimizations.
</div>
</div>
<!-- FAQ Item 2 -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700" x-data="{ open: false }">
<button
class="flex justify-between items-center w-full text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg font-semibold text-white">What marketing channels do you specialize in?</h3>
<svg
class="w-5 h-5 text-blue-400 transform transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div
class="mt-4 text-gray-300"
x-show="open"
x-collapse
x-cloak
>
We excel in digital marketing across social media, SEO, content marketing, email campaigns, and PPC advertising. Our integrated approach ensures your message reaches your target audience through the most effective channels.
</div>
</div>
<!-- FAQ Item 3 -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700" x-data="{ open: false }">
<button
class="flex justify-between items-center w-full text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg font-semibold text-white">What is your pricing structure?</h3>
<svg
class="w-5 h-5 text-blue-400 transform transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div
class="mt-4 text-gray-300"
x-show="open"
x-collapse
x-cloak
>
We offer flexible pricing packages tailored to your business needs and goals. Our transparent pricing model includes monthly retainers, project-based fees, and performance-based options. Contact us for a customized quote.
</div>
</div>
<!-- FAQ Item 4 -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700" x-data="{ open: false }">
<button
class="flex justify-between items-center w-full text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg font-semibold text-white">How long until we see results?</h3>
<svg
class="w-5 h-5 text-blue-400 transform transition-transform duration-200"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div
class="mt-4 text-gray-300"
x-show="open"
x-collapse
x-cloak
>
Results timeline varies by campaign type and goals. Generally, initial results are visible within 1-3 months, with significant improvements in 3-6 months. We provide regular progress reports and optimize strategies continuously.
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 text-center">
<p class="text-gray-300 mb-6">Still have questions? We're here to help!</p>
<a href="#contact" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200">
Contact Our Team
</a>
</div>
</div>
</section>
<!-- Alpine.js for accordion functionality -->
<script src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.start()
})
</script>
