add faqs components

Author: AmilkarDominguez

src/components/Navbar.astro

@@ -49,6 +49,10 @@ import header from "../assets/images/header.png"
           <a href="/#organizadores" class="block py-1 px-4">Equipo</a>
         </li>
 
+        <li class="flex justify-center items-center">
+          <a href="/#faqs" class="block py-1 px-4">Faqs</a>
+        </li>
+
         <li class="flex justify-center items-center">
           <a href="playground" class="block py-1 px-4">Playground ✨</a>
         </li>

src/components/faqs/FaqCard.astro

@@ -0,0 +1,24 @@
+---
+const { question, answer } = Astro.props;
+---
+
+<details class="border py-8 [&_svg]:open:-rotate-180">
+    <summary class="flex justify-between px-8 cursor-pointer">
+        <span class="text-xl font-bold" title={question}>{question}</span>
+        <svg
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6 transition-all duration-200"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
+        </svg>
+    </summary>
+    <section class="px-8 mt-4 text-xl text-justify" title={answer}>
+        {answer}
+    </section>
+</details>

src/components/faqs/Faqs.astro

@@ -0,0 +1,16 @@
+---
+import faqs from "./faqs.json";
+import FaqCard from "./FaqCard.astro";
+---
+
+<section id="faqs" class="bg-black text-white">
+    <section class="max-w-screen-xl mx-auto px-4 py-16 space-y-8">
+        <h2 class="text-2xl sm:text-3xl font-bold mx-auto">FAQs</h2>
+        <h1 class="text-1xl sm:text-xl mx-auto">
+            ¿Tienes dudas? ¡Esperamos puedas despejarlas aquí!
+        </h1>
+        <section class="flex flex-col">
+            {faqs.map((faq) => <FaqCard {...faq} />)}
+        </section>
+    </section>
+</section>

src/components/faqs/faqs.json

@@ -0,0 +1,14 @@
+[
+    {
+        "question": "¿Pregunta 1?",
+        "answer": "Respuesta 1"
+    },
+    {
+        "question": "¿Pregunta 2?",
+        "answer": "Respuesta 2"
+    },
+    {
+        "question": "¿Pregunta 3?",
+        "answer": "Respuesta 3"
+    }
+]

src/pages/index.astro

@@ -5,6 +5,7 @@ import Layout from 'layouts/Layout.astro';
 import Navbar from 'components/Navbar.astro';
 import Organizers from 'components/organizers/Organizers.astro';
 import Workshops from 'components/Workshops.astro';
+import Faqs from 'components/faqs/Faqs.astro';
 ---
 
 <Layout>
@@ -14,5 +15,6 @@ import Workshops from 'components/Workshops.astro';
     <AboutUs />
     <Workshops />
     <Organizers />
+	<Faqs />
   </main>
 </Layout>