Faq Mobile App Minimal

                <!--
@type: FAQ
@industry: Mobile App
@style: Minimal
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->

<section class="relative bg-[#f9faff] pt-24 pb-48 overflow-hidden">
  <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <!-- Floating Header -->
    <div class="relative mx-auto max-w-3xl text-center">
      <span
        class="inline-block mb-4 px-4 py-1 bg-purple-100 backdrop-blur-sm rounded-full text-purple-600 text-sm font-medium tracking-wider uppercase">
        FAQ
      </span>
      <h2 class="text-4xl font-bold tracking-tight text-gray-900 [text-wrap:balance] sm:text-5xl">
        Frequently Asked Questions
      </h2>
      <p class="mt-6 text-lg text-gray-600 leading-relaxed">Everything you need to know about FitMom and getting started with your fitness journey.</p>
    </div>

    <!-- FAQ Grid -->
    <div class="mx-auto mt-16 max-w-3xl">
      <dl class="space-y-8" id="faq-list">
        <!-- Question 1 -->
        <div class="group faq-item">
          <dt>
            <button 
              class="flex w-full items-start justify-between rounded-lg px-6 py-4 text-left bg-purple-100 hover:bg-purple-200"
            >
              <span class="text-base font-semibold leading-7 text-gray-900">How much time do I need for workouts?</span>
              <span class="ml-6 flex h-7 items-center">
                <svg 
                  class="h-6 w-6 transform text-gray-600 transition-transform duration-200" 
                  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="mt-2 px-6 text-base leading-7 text-gray-600 hidden">
            Our workouts are designed to fit into a busy mom's schedule. Most sessions are 20-30 minutes long, and you can even split them into smaller segments throughout the day. The app adapts to your available time and energy level.
          </dd>
        </div>

        <!-- Question 2 -->
        <div class="group faq-item">
          <dt>
            <button 
              class="flex w-full items-start justify-between rounded-lg px-6 py-4 text-left bg-purple-100 hover:bg-purple-200"
            >
              <span class="text-base font-semibold leading-7 text-gray-900">Is it safe for postpartum exercise?</span>
              <span class="ml-6 flex h-7 items-center">
                <svg 
                  class="h-6 w-6 transform text-gray-600 transition-transform duration-200" 
                  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="mt-2 px-6 text-base leading-7 text-gray-600 hidden">
            Yes! Our program is specifically designed for postpartum recovery. All workouts are created by certified pre/postnatal fitness experts and can be customized based on your delivery type, recovery stage, and any specific conditions. Always consult your healthcare provider before starting any exercise program.
          </dd>
        </div>

        <!-- Question 3 -->
        <div class="group faq-item">
          <dt>
            <button 
              class="flex w-full items-start justify-between rounded-lg px-6 py-4 text-left bg-purple-100 hover:bg-purple-200"
            >
              <span class="text-base font-semibold leading-7 text-gray-900">What equipment do I need?</span>
              <span class="ml-6 flex h-7 items-center">
                <svg 
                  class="h-6 w-6 transform text-gray-600 transition-transform duration-200" 
                  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="mt-2 px-6 text-base leading-7 text-gray-600 hidden">
            Most workouts require minimal or no equipment. Basic items like a yoga mat, resistance bands, and light dumbbells can be helpful but aren't necessary. We offer equipment-free alternatives for all exercises.
          </dd>
        </div>

        <!-- Question 4 -->
        <div class="group faq-item">
          <dt>
            <button 
              class="flex w-full items-start justify-between rounded-lg px-6 py-4 text-left bg-purple-100 hover:bg-purple-200"
            >
              <span class="text-base font-semibold leading-7 text-gray-900">Can I work out with my baby?</span>
              <span class="ml-6 flex h-7 items-center">
                <svg 
                  class="h-6 w-6 transform text-gray-600 transition-transform duration-200" 
                  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="mt-2 px-6 text-base leading-7 text-gray-600 hidden">
            Absolutely! We have special "Mommy & Me" workout sections designed to incorporate your baby into the exercises safely. These sessions are great for bonding while getting fit.
          </dd>
        </div>

        <!-- Question 5 -->
        <div class="group faq-item">
          <dt>
            <button 
              class="flex w-full items-start justify-between rounded-lg px-6 py-4 text-left bg-purple-100 hover:bg-purple-200"
            >
              <span class="text-base font-semibold leading-7 text-gray-900">How does the AI personalization work?</span>
              <span class="ml-6 flex h-7 items-center">
                <svg 
                  class="h-6 w-6 transform text-gray-600 transition-transform duration-200" 
                  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="mt-2 px-6 text-base leading-7 text-gray-600 hidden">
            Our AI system learns from your preferences, progress, and feedback to adjust workout intensity, duration, and type. It considers factors like your sleep quality, energy levels, and available time to create the perfect workout for each session.
          </dd>
        </div>

        <!-- Question 6 -->
        <div class="group faq-item">
          <dt>
            <button 
              class="flex w-full items-start justify-between rounded-lg px-6 py-4 text-left bg-purple-100 hover:bg-purple-200"
            >
              <span class="text-base font-semibold leading-7 text-gray-900">What support is available?</span>
              <span class="ml-6 flex h-7 items-center">
                <svg 
                  class="h-6 w-6 transform text-gray-600 transition-transform duration-200" 
                  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="mt-2 px-6 text-base leading-7 text-gray-600 hidden">
            You'll have access to our community of moms, certified trainers, and nutrition experts. Premium members get 1-on-1 coaching sessions and priority support. Our help center is available 24/7, and we offer weekly live Q&A sessions.
          </dd>
        </div>
      </dl>

      <!-- CTA Section -->
      <div class="mt-16 text-center">
        <p class="text-base text-gray-600">Still have questions?</p>
        <div class="mt-6 flex items-center justify-center gap-4">
          <a href="#contact" class="text-base font-semibold leading-6 text-purple-600 hover:text-purple-500">
            Contact Support <span aria-hidden="true">→</span>
          </a>
          <span class="text-gray-400">or</span>
          <a href="#schedule-call" class="text-base font-semibold leading-6 text-purple-600 hover:text-purple-500">
            Schedule a Call <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(item => {
    const button = item.querySelector('button');
    const answer = item.querySelector('dd');
    const icon = item.querySelector('svg');

    button.addEventListener('click', () => {
      // Close all other answers
      faqItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.querySelector('dd').classList.add('hidden');
          otherItem.querySelector('svg').classList.remove('rotate-180');
        }
      });

      // Toggle current answer
      answer.classList.toggle('hidden');
      icon.classList.toggle('rotate-180');
    });
  });
});
</script>