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