Animated AccordionFAQ template

<!-- HTML/CSS Version -->
<style>
  .accordion-item { border-bottom: 1px solid #e5e7eb; }
  .accordion-trigger { 
    display: flex; justify-content: space-between; align-items: center; 
    width: 100%; padding: 1rem 0; cursor: pointer; background: none; border: none;
    font-size: 1.125rem; font-weight: 500; text-align: left;
  }
  .accordion-content { 
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; 
    color: #4b5563; 
  }
  .accordion-item[open] .accordion-content { max-height: 200px; padding-bottom: 1rem; }
  .icon { transition: transform 0.3s ease; }
  .accordion-item[open] .icon { transform: rotate(180deg); }
</style>

<section class="max-w-2xl mx-auto" aria-labelledby="animated-faq-title">
  <h2 id="animated-faq-title" class="text-3xl font-bold mb-6">Frequently Asked Questions</h2>
  <div class="accordion">
    <details class="accordion-item" open>
      <summary class="accordion-trigger">
        <span>How do I start my first project?</span>
        <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="accordion-content">
        <p>Click the "New Project" button in your dashboard and follow the onboarding wizard to choose a template.</p>
      </div>
    </details>
    <details class="accordion-item">
      <summary class="accordion-trigger">
        <span>What integrations are supported?</span>
        <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="accordion-content">
        <p>We currently support Slack, GitHub, and Discord, with more coming soon.</p>
      </div>
    </details>
  </div>
</section>

<section class="mx-auto max-w-2xl px-4 py-12" aria-labelledby="faq-title">
  <h2 id="faq-title" class="mb-8 text-3xl font-bold tracking-tight text-gray-900">
    Common Questions
  </h2>
  <div class="space-y-2">
    <details class="group border-b border-gray-200 pb-4" open>
      <summary class="flex cursor-pointer items-center justify-between py-4 text-left text-lg font-medium text-gray-900 list-none">
        <span>How do I start my first project?</span>
        <span class="ml-6 flex-shrink-0 transition-transform duration-300 group-open:rotate-180">
          <svg class="h-6 w-6 text-gray-500" 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>
      </summary>
      <div class="mt-2 pr-12 text-gray-600 transition-all duration-300">
        <p>Click the "New Project" button in your dashboard and follow the onboarding wizard to choose a template.</p>
      </div>
    </details>
    <details class="group border-b border-gray-200 pb-4">
      <summary class="flex cursor-pointer items-center justify-between py-4 text-left text-lg font-medium text-gray-900 list-none">
        <span>What integrations are supported?</span>
        <span class="ml-6 flex-shrink-0 transition-transform duration-300 group-open:rotate-180">
          <svg class="h-6 w-6 text-gray-500" 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>
      </summary>
      <div class="mt-2 pr-12 text-gray-600 transition-all duration-300">
        <p>We currently support Slack, GitHub, and Discord, with more coming soon.</p>
      </div>
    </details>
  </div>
</section>

import React, { useState } from 'react';
import { ChevronDown } from 'lucide-react';

interface FaqItemProps {
  id: string;
  question: string;
  answer: string;
}

const FaqItem = ({ id, question, answer }: FaqItemProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const triggerId = `faq-trigger-${id}`;
  const panelId = `faq-panel-${id}`;

  return (
    <div className="border-b border-gray-200">
      <button
        id={triggerId}
        onClick={() => setIsOpen(!isOpen)}
        className="flex w-full items-center justify-between py-6 text-left"
        aria-expanded={isOpen}
        aria-controls={panelId}
      >
        <span className="text-lg font-medium text-gray-900">{question}</span>
        <ChevronDown
          aria-hidden="true"
          className={`h-5 w-5 text-gray-500 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} 
        />
      </button>
      <div
        id={panelId}
        role="region"
        aria-labelledby={triggerId}
        hidden={!isOpen}
        className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-96 pb-6' : 'max-h-0'}`}
      >
        <p className="text-gray-600">{answer}</p>
      </div>
    </div>
  );
};

const defaultFaqs = [
  { id: '1', question: 'How do I start my first project?', answer: 'Click the "New Project" button in your dashboard and follow the onboarding wizard to choose a template.' },
  { id: '2', question: 'What integrations are supported?', answer: 'We currently support Slack, GitHub, and Discord, with more coming soon.' }
];

export function AnimatedAccordion({ faqs = defaultFaqs }: { faqs?: FaqItemProps[] }) {
  return (
    <section className="mx-auto max-w-2xl px-4 py-12">
      <h2 className="mb-8 text-3xl font-bold text-gray-900">FAQ</h2>
      <div className="divide-y divide-gray-200">
        {faqs.map((faq) => (
          <FaqItem key={faq.id} {...faq} />
        ))}
      </div>
    </section>
  );
}