FAQs Section

<div class="bg-white py-6 sm:py-9">
  <div class="max-w-4xl mx-auto px-3">
    <h2 class="text-3xl font-bold text-center text-gray-900 mb-6">Help Center</h2>
    <div class="mb-6">
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex space-x-6" aria-label="Tabs">
          <a href="#" class="border-sky-600 text-sky-700 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm" aria-current="page">General</a>
          <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">Account</a>
          <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">Billing</a>
        </nav>
      </div>
    </div>
    <div class="space-y-3">
      <div>
        <h4 class="font-semibold text-gray-800 text-lg">What is your refund policy?</h4>
        <p class="text-gray-600 mt-1 text-sm">We offer a 30-day money-back guarantee on all our plans if you are not satisfied with our service.</p>
      </div>
      <div class="pt-3 border-t border-gray-100">
        <h4 class="font-semibold text-gray-800 text-lg">How secure is my data?</h4>
        <p class="text-gray-600 mt-1 text-sm">We use industry-standard encryption and security protocols to protect your data. Your privacy is our top priority.</p>
      </div>
    </div>
  </div>
</div>

<div class="bg-slate-50 py-6 sm:py-9">
  <div class="max-w-2xl mx-auto px-3">
    <h2 class="text-2xl font-semibold text-center text-slate-800 mb-6">Quick Answers</h2>
    <dl class="space-y-6">
      <div>
        <dt class="text-md font-medium text-slate-700">Do you offer custom enterprise solutions?</dt>
        <dd class="mt-1 text-sm text-slate-600">Yes, we provide tailored solutions for enterprise clients. Please
          contact our sales team for more information.</dd>
      </div>
      <div>
        <dt class="text-md font-medium text-slate-700">What is the data retention policy?</dt>
        <dd class="mt-1 text-sm text-slate-600">Data is retained based on your subscription plan. You can find detailed
          information in our terms of service.</dd>
      </div>
      <div>
        <dt class="text-md font-medium text-slate-700">How can I integrate with other tools?</dt>
        <dd class="mt-1 text-sm text-slate-600">We offer various integrations and an API for custom connections. Check
          our documentation for available options.</dd>
      </div>
    </dl>
  </div>
</div>

<div class="bg-white py-6 sm:py-9">
  <div class="max-w-3xl mx-auto px-3">
    <h2 class="text-2xl font-bold text-center text-gray-900 sm:text-3xl mb-6">Frequently Asked Questions</h2>
    <div class="space-y-3">
      <details class="group border-b border-gray-200 py-3">
        <summary class="flex justify-between items-center font-medium text-gray-900 cursor-pointer list-none">
          What is Tailwind CSS?
          <span class="text-cyan-700 group-open:rotate-180 transition-transform duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
          </span>
        </summary>
        <p class="text-gray-600 mt-3">Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4,
          text-center and rotate-90 that can be composed to build any design, directly in your markup.</p>
      </details>
      <details class="group border-b border-gray-200 py-3" open>
        <summary class="flex justify-between items-center font-medium text-gray-900 cursor-pointer list-none">
          How do I install Next.js?
          <span class="text-cyan-700 group-open:rotate-180 transition-transform duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
          </span>
        </summary>
        <p class="text-gray-600 mt-3">You can install Next.js using npm or yarn. The recommended way is to use
          'create-next-app', which sets up everything automatically for you.</p>
      </details>
      <details class="group border-b border-gray-200 py-3">
        <summary class="flex justify-between items-center font-medium text-gray-900 cursor-pointer list-none">
          What are server components?
          <span class="text-cyan-700 group-open:rotate-180 transition-transform duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
          </span>
        </summary>
        <p class="text-gray-600 mt-3">Server Components allow developers to build UIs that span the server and client,
          combining the rich interactivity of client-side apps with the improved performance of traditional server
          rendering.</p>
      </details>
    </div>
  </div>
</div>

<div class="bg-gray-50 py-6 sm:py-9">
  <div class="max-w-7xl mx-auto px-3">
    <h2 class="text-3xl font-bold text-center text-gray-900 mb-9">Common Questions</h2>
    <div class="grid md:grid-cols-2 gap-x-9 gap-y-6">
      <div>
        <h3 class="text-lg font-semibold text-teal-700 mb-1">What payment methods do you accept?</h3>
        <p class="text-gray-600 text-sm">We accept all major credit cards, PayPal, and direct bank transfers for
          enterprise plans.</p>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-teal-700 mb-1">Is there a free trial available?</h3>
        <p class="text-gray-600 text-sm">Yes, we offer a 14-day free trial for all our plans. No credit card required to
          get started.</p>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-teal-700 mb-1">Can I change my plan later?</h3>
        <p class="text-gray-600 text-sm">You can upgrade, downgrade, or cancel your plan at any time from your account
          dashboard.</p>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-teal-700 mb-1">How is customer support handled?</h3>
        <p class="text-gray-600 text-sm">We offer 24/7 email support for all plans, and dedicated phone support for our
          Pro and Enterprise customers.</p>
      </div>
    </div>
  </div>
</div>