Accordéon Bauhaus pour les organisations à but non lucratif

<div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-700 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight uppercase relative">
    <span class="block">Our Mission</span>
    <span class="absolute left-1/2 -translate-x-1/2 bottom-0 w-20 h-2 bg-red-500 dark:bg-red-700"></span>
  </h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">What is our primary goal?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">Our primary goal is to empower communities through sustainable initiatives, focusing on education, health, and environmental preservation.</p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How do we achieve our impact?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">We work directly with local partners, implement needs-based programs, and rely on the generosity of volunteers and donors to make a lasting difference.</p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How can I get involved or donate?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">You can volunteer your time, make a one-time donation, or set up a recurring gift. Visit our 'Get Involved' page for more details on how your support makes a difference.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 text-center">
    <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-amber-50 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 animate-pulse-slow transition duration-300 ease-in-out">
      <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4-4m0 0l-4-4m4 4H3"></path></svg>
      Learn More & Donate
    </a>
  </div>
</div>

<!-- Alpine.js for interactivity (required for accordion functionality) -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>