Merge pull request #32 from nsandoya/11-faqs-rebasement

- Refactored `Faqs.astro` to implement a collapsible component (`Accordion.astro`) for each question.
- Implemented Alpine.js basic directives and minimalistic logic for interactivity, ensuring one accordion is open at a time.
- Closes #11

Author: nsandoya

public/icons/downIcon.svg

@@ -0,0 +1,51 @@
+---
+import downIcon from "../../public/icons/downIcon.svg?raw";
+const { title, description, id, last } = Astro.props;
+---
+<!-- 
+Child component: Alpine.js logic
+
+1. Each accordion receives a unique `id` that identifies it.
+2. When clicking on an accordion:
+   2.1 The `toggle(id)` method defined in the parent component is called.
+   2.2 The global state `activeId` is updated with the new ID.
+3. Each accordion checks if its ID matches `activeId` using the `isVisible` method:
+   - If it matches, the accordion expands (`isVisible` is `true`).
+   - If it doesn't match, it remains collapsed (`isVisible` is `false`).
+
+This way, each child component can respond reactively to the `activeId` global state.
+-->
+<div  
+  class:list={[
+  	"bg-white py-6 accordion-transition overflow-hidden",
+    {"border-b-0": last === id},
+    {"border-b-2": last != id}
+  ]}
+>
+  <div
+    @click=`toggle(${id})`
+    class="flex flex-row items-center text-lg font-semibold cursor-pointer"
+    :class=`isVisible(${id}) && 'text-blue-500'`
+    >
+    <div class="w-[95%] px-4">
+      {title}
+    </div>
+    <div
+      x-transition
+      class="w-fit"
+      :class=`isVisible(${id}) ? 'transform rotate-180 accordion-transition' : 'transform rotate-0 accordion-transition'`
+    >
+      <Fragment set:html={downIcon} />
+    </div>
+  </div>
+
+  <div
+    x-transition
+    class="accordion-transition overflow-hidden"
+    :class=`isVisible(${id}) ? 'max-h-72 opacity-100' : 'max-h-0 opacity-0'`
+  >
+    <p class="w-[90%] text-gray-600 text-base mt-2 px-4 overflow-hidden">
+      {description}
+    </p>
+  </div>
+</div>

src/components/Accordion.astro

@@ -1,17 +1,54 @@
 ---
 import commonQuestions from "../assets/common-questions.json";
+import Accordion from "./Accordion.astro";
 ---
+<!-- 
 
-<section class="py-16 bg-gray-50">
+Father component: Alpine.js logic
+
+1. `activeId` is a global state that stores the ID of the last accordion opened by the user.
+2. When clicking on a child component (an accordion), the `toggle` method updates the `activeId`:
+   - If the clicked accordion's ID matches the current `activeId`, it collapses (resets to `null`).
+   - If it's different, the new ID is set as `activeId`.
+3. Every accordion checks if its ID matches `activeId` by using the `isVisible` method. This way, accordion opens or closes.
+
+This ensures only one accordion is open at a time.
+
+-->
+<section 
+  x-data="{
+    activeId: null,
+
+    setActiveId(id) {
+      this.activeId = id;
+    },
+
+    isVisible(id) {
+      return this.activeId === id;
+    },
+
+    toggle(id){
+        if (this.activeId === id) {
+          this.setActiveId(null)
+        } else {
+          this.setActiveId(id)
+        };
+      }  
+    }"
+
+  class="py-16 bg-white">
   <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 "
+    >
       {
-        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}
+            last={commonQuestions.length}
+          />
         ))
       }
     </div>

src/components/Faq.astro

@@ -36,4 +36,13 @@
   svg {
     @apply text-sm;
   }
+
+  /* Components custom styles */
+  .faqs-container {
+    @apply mx-auto shadow-md p-6 pt-0 rounded-xl;
+  }
+
+  .accordion-transition {
+    transition: all 400ms ease-in-out;
+  }
 }