refactor!: Create Accordion.astro component and implement in Faq.astro

Replace plain text cards in `Faq.astro` with a collapsible accordion component built with Alpine.js and Tailwind. `Accordion.astro` is rendered iteratively from `common-questions.json` content

Author: nsandoya

src/components/Accordion.astro

@@ -0,0 +1,32 @@
+---
+const {title, description, id} = Astro.props;
+console.log("index", id)
+---
+<div x-data="{ 
+        visible: false,
+        toggle() {
+            this.visible = !this.visible
+        }
+    }"
+    
+    class:list={[
+            "bg-white py-6 transition-all duration-300 ease-in-out overflow-hidden", 
+            { "border-b-0" : id === null },
+            { "border-b-2" : id },
+        ]}>
+
+    <div @click="toggle()" class="text-lg font-semibold cursor-pointer">
+      {title}
+    </div>
+
+    <div 
+        x-transition
+        class="transition-all duration-300 ease-in-out overflow-hidden"
+        :class="visible ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'"
+       
+    >
+        <p class="text-gray-600 mt-2 overflow-hidden">
+          {description}
+        </p>
+    </div>
+  </div>

src/components/Faq.astro

@@ -1,17 +1,15 @@
 ---
 import commonQuestions from "../assets/common-questions.json";
+import Accordion from "./Accordion.astro";
 ---
 
 <section class="py-16 bg-gray-50">
   <div class="container mx-auto px-4">
     <h2 class="text-3xl font-bold text-center mb-12">Preguntas frecuentes</h2>
-    <div class="container mx-auto space-y-6">
+    <div class="container faqs-container mx-auto shadow-md p-6 pt-0">
       {
-        commonQuestions.map((question) => (
-          <div class="bg-white p-6 rounded-lg shadow-md">
-            <h3 class="text-lg font-semibold mb-2">{question.title}</h3>
-            <p class="text-gray-600">{question.description}</p>
-          </div>
+        commonQuestions.map((question, index) => (
+          <Accordion {...question} id={index++ < commonQuestions.length - 1? index++ : null}/>
         ))
       }
     </div>

src/styles/globals.css

@@ -36,4 +36,13 @@
   svg {
     @apply text-sm;
   }
+
+  /* FAQ collapsibles style */
+  summary {
+    list-style: none; /* Elimina el marcador predeterminado */
+  }
+  
+  summary::-webkit-details-marker {
+    display: none; /* Para navegadores basados en Webkit (Chrome, Safari) */
+  }
 }