Faq E-commerce Modern

                <!--
@type: FAQ
@industry: E-commerce
@style: Modern
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->

<section class="w-full py-12 md:py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 text-center">
    <div class="max-w-4xl mx-auto space-y-6">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">
        Frequently Asked Questions
      </h2>
      <p class="text-lg text-gray-600 md:text-xl">
        Find quick answers to the most common questions about our products, orders, and services.
      </p>
    </div>
    <div class="mt-12 max-w-3xl mx-auto">
      <div class="w-full" id="accordion">
        <div class="border-b border-gray-200">
          <button
            class="accordion-trigger w-full text-lg font-semibold text-gray-800 hover:text-orange-500 transition-colors py-4 text-left flex justify-between items-center"
            data-index="0" aria-expanded="false" aria-controls="content-0">
            <span>What are your shipping options and delivery times?</span>
            <svg class="accordion-icon w-5 h-5 transform transition-transform duration-200" 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"></path>
            </svg>
          </button>
          <div class="accordion-content overflow-hidden transition-all duration-200 max-h-0" id="content-0"
            aria-labelledby="trigger-0">
            <div class="text-gray-600 text-base py-4 text-left">
              We offer standard and express shipping. Standard delivery typically takes 5-7 business days, while express
              delivery arrives within 2-3 business days. Shipping costs vary based on your location and order total.
            </div>
          </div>
        </div>

        <div class="border-b border-gray-200">
          <button
            class="accordion-trigger w-full text-lg font-semibold text-gray-800 hover:text-orange-500 transition-colors py-4 text-left flex justify-between items-center"
            data-index="1" aria-expanded="false" aria-controls="content-1">
            <span>What is your return and exchange policy?</span>
            <svg class="accordion-icon w-5 h-5 transform transition-transform duration-200" 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"></path>
            </svg>
          </button>
          <div class="accordion-content overflow-hidden transition-all duration-200 max-h-0" id="content-1"
            aria-labelledby="trigger-1">
            <div class="text-gray-600 text-base py-4 text-left">
              We offer a 30-day hassle-free return policy from the date of delivery. Items must be unworn, unwashed, and
              in their original condition with tags attached. Exchanges are subject to product availability.
            </div>
          </div>
        </div>

        <div class="border-b border-gray-200">
          <button
            class="accordion-trigger w-full text-lg font-semibold text-gray-800 hover:text-orange-500 transition-colors py-4 text-left flex justify-between items-center"
            data-index="2" aria-expanded="false" aria-controls="content-2">
            <span>What payment methods do you accept?</span>
            <svg class="accordion-icon w-5 h-5 transform transition-transform duration-200" 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"></path>
            </svg>
          </button>
          <div class="accordion-content overflow-hidden transition-all duration-200 max-h-0" id="content-2"
            aria-labelledby="trigger-2">
            <div class="text-gray-600 text-base py-4 text-left">
              We accept all major credit cards (Visa, Mastercard, American Express, Discover), PayPal, and Apple Pay. We
              also offer a 'buy now, pay later' option through Affirm for eligible purchases.
            </div>
          </div>
        </div>

        <div class="border-b border-gray-200">
          <button
            class="accordion-trigger w-full text-lg font-semibold text-gray-800 hover:text-orange-500 transition-colors py-4 text-left flex justify-between items-center"
            data-index="3" aria-expanded="false" aria-controls="content-3">
            <span>How can I track my order?</span>
            <svg class="accordion-icon w-5 h-5 transform transition-transform duration-200" 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"></path>
            </svg>
          </button>
          <div class="accordion-content overflow-hidden transition-all duration-200 max-h-0" id="content-3"
            aria-labelledby="trigger-3">
            <div class="text-gray-600 text-base py-4 text-left">
              Once your order is shipped, you will receive a confirmation email with a tracking number. You can use this
              number on our 'Track Order' page or directly on the carrier's website.
            </div>
          </div>
        </div>

        <div class="border-b border-gray-200">
          <button
            class="accordion-trigger w-full text-lg font-semibold text-gray-800 hover:text-orange-500 transition-colors py-4 text-left flex justify-between items-center"
            data-index="4" aria-expanded="false" aria-controls="content-4">
            <span>Do you offer international shipping?</span>
            <svg class="accordion-icon w-5 h-5 transform transition-transform duration-200" 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"></path>
            </svg>
          </button>
          <div class="accordion-content overflow-hidden transition-all duration-200 max-h-0" id="content-4"
            aria-labelledby="trigger-4">
            <div class="text-gray-600 text-base py-4 text-left">
              Yes, we ship internationally to over 100 countries. Please note that international orders may be subject
              to customs duties and taxes, which are the responsibility of the recipient.
            </div>
          </div>
        </div>

        <div class="border-b border-gray-200">
          <button
            class="accordion-trigger w-full text-lg font-semibold text-gray-800 hover:text-orange-500 transition-colors py-4 text-left flex justify-between items-center"
            data-index="5" aria-expanded="false" aria-controls="content-5">
            <span>How do I create an account and what are the benefits?</span>
            <svg class="accordion-icon w-5 h-5 transform transition-transform duration-200" 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"></path>
            </svg>
          </button>
          <div class="accordion-content overflow-hidden transition-all duration-200 max-h-0" id="content-5"
            aria-labelledby="trigger-5">
            <div class="text-gray-600 text-base py-4 text-left">
              You can create an account by clicking on the 'Sign Up' link in the header. Benefits include faster
              checkout, order history tracking, exclusive discounts, and personalized recommendations.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-12">
      <p class="text-lg text-gray-600 mb-6">Still have questions? Our support team is here to help!</p>
      <button
        class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
        Contact Support
      </button>
    </div>
  </div>
</section>

<script>
  function setupAccordionEvents() {
    const triggers = document.querySelectorAll('.accordion-trigger');

    triggers.forEach(trigger => {
      trigger.addEventListener('click', function () {
        const index = this.getAttribute('data-index');
        const content = document.getElementById(`content-${index}`);
        const icon = this.querySelector('.accordion-icon');
        const isExpanded = this.getAttribute('aria-expanded') === 'true';

        // Close all other accordion items
        triggers.forEach((otherTrigger, otherIndex) => {
          if (otherTrigger.getAttribute('data-index') !== index) {
            const otherContent = document.getElementById(`content-${otherTrigger.getAttribute('data-index')}`);
            const otherIcon = otherTrigger.querySelector('.accordion-icon');

            otherTrigger.setAttribute('aria-expanded', 'false');
            otherContent.style.maxHeight = '0px';
            otherIcon.style.transform = 'rotate(0deg)';
          }
        });

        // Toggle current item
        if (isExpanded) {
          this.setAttribute('aria-expanded', 'false');
          content.style.maxHeight = '0px';
          icon.style.transform = 'rotate(0deg)';
        } else {
          this.setAttribute('aria-expanded', 'true');
          content.style.maxHeight = content.scrollHeight + 'px';
          icon.style.transform = 'rotate(180deg)';
        }
      });
    });
  }

  // Initialize the accordion when the page loads
  document.addEventListener('DOMContentLoaded', function () {
    setupAccordionEvents();
  });
</script>