Component:

Faq Marketing Dark

Name: Faq Marketing Dark
Availability: InStock

Free

Tags: FAQ Content Sale Support Marketing Dark

Colors:

Description:

This carefully crafted FAQ component is perfect for Marketing landing pages, featuring a Dark design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Faq Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions