<div class="gradient-faq-container">
<div class="faq-header">
<h2 class="faq-title">Frequently Asked Questions</h2>
<p class="faq-subtitle">Find answers to common questions</p>
</div>
<div class="faq-accordion">
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span class="question-text">What makes this FAQ component special?</span>
<span class="question-icon">+</span>
</button>
<div class="faq-answer">
<p>This FAQ features animated gradient backgrounds, smooth micro-interactions, and a modern design with CSS animations.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span class="question-text">How do the gradient animations work?</span>
<span class="question-icon">+</span>
</button>
<div class="faq-answer">
<p>The gradient animations use CSS keyframes with background-position transitions to create a flowing effect.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span class="question-text">Is this design responsive?</span>
<span class="question-icon">+</span>
</button>
<div class="faq-answer">
<p>Yes, the design is fully responsive and adapts beautifully to all screen sizes.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span class="question-text">What browsers support this?</span>
<span class="question-icon">+</span>
</button>
<div class="faq-answer">
<p>Modern browsers including Chrome, Firefox, Safari, and Edge support all features.</p>
</div>
</div>
</div>
</div>
.gradient-faq-container {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
font-family: 'Inter', sans-serif;
}
.faq-header {
text-align: center;
margin-bottom: 2rem;
}
.faq-title {
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.faq-subtitle {
color: #6b7280;
font-size: 1.1rem;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
border-radius: 12px;
overflow: hidden;
background: linear-gradient(45deg, #667eea, #764ba2);
background-size: 300% 300%;
animation: gradientShift 8s ease infinite;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.faq-question {
width: 100%;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.95);
border: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
transition: background 0.3s ease;
}
.faq-question:hover {
background: rgba(255, 255, 255, 1);
}
.question-icon {
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.faq-item.active .question-icon {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 200px;
padding: 0 1.5rem 1.5rem;
}
.faq-answer p {
margin: 0;
color: #4b5563;
line-height: 1.6;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@media (max-width: 768px) {
.gradient-faq-container {
padding: 1rem;
}
.faq-title {
font-size: 2rem;
}
.faq-question {
padding: 1.25rem;
font-size: 1rem;
}
.faq-item.active .faq-answer {
padding: 0 1.25rem 1.25rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
const isActive = item.classList.contains('active');
// Close all other items
faqItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('active');
}
});
// Toggle current item
if (isActive) {
item.classList.remove('active');
} else {
item.classList.add('active');
}
});
});
});