🪗 Acordeón de FAQs con Astro, TailwindCSS y CSS Moderno

Componente moderno de acordeón de preguntas frecuentes (FAQs) desarrollado con Astro y CSS moderno, utilizando el elemento semántico details/summary para lograr animaciones fluidas sin JavaScript.

El componente está diseñado con una estética Dark Mode, transiciones suaves y una arquitectura limpia que separa datos, presentación y layout.

---

✨ Características

• Zero JavaScript Runtime: El acordeón funciona únicamente con details/summary, eliminando la necesidad de JS o dependencias de terceros.
• Animaciones Modernas: Uso de interpolate-size y ::details-content para animaciones suaves de apertura.
• Primer Item Abierto: El primer FAQ se renderiza abierto por defecto usando lógica de Astro.
• Arquitectura Limpia: Separación entre datos (lib), componentes (components) y layout (layouts).

---

🛠️ Stack Tecnológico

• Astro Framework para crear interfaces rápidas con componentes estáticos optimizados.
• TailwindCSS Framework de utilidades para estilado rápido y consistente.
• CSS Moderno Uso de:
  • interpolate-size
  • details/summary
  • ::details-content
  • grid transitions

---

📂 Estructura del Proyecto

src/
 ├─ components/
 │   └─ FAQs.astro
 │
 ├─ layouts/
 │   └─ Layout.astro
 │
 ├─ lib/
 │   └─ faqs.ts
 │
 ├─ pages/
 │   └─ index.astro
 │
 └─ styles/
     └─ global.css

Descripción

• styles/global.css: Estilos globales del proyecto (colores, tipografía, utilidades base).
• src/lib/faqs.ts: Contiene el arreglo de preguntas y respuestas utilizadas por el componente.
• src/components/FAQs.astro: Componente principal que renderiza el acordeón usando details/summary.
• src/layouts/Layout.astro: Layout base que define la estructura general de la página.
• src/pages/index.astro: Página principal que importa el layout y monta el componente de FAQs.

---

🚀 Scripts Disponibles

Todos los comandos se ejecutan desde la raíz del proyecto usando npm:

Comando	Acción
npm install	Instala las dependencias del proyecto
npm run dev	Inicia el servidor local en http://localhost:4321
npm run build	Genera la versión optimizada en dist/

---

⚙️ Cómo Personalizar

1️⃣ Editar las preguntas

Modifica el archivo:

src/lib/faqs.ts

Ejemplo:

export const faqs: FAQ[] = [
  {
    id: 1,
    pregunta: "¿Qué tipo de equipos reparan?",
    respuesta: "Reparamos laptops, computadoras de escritorio y equipos gamer.",
  },
  {
    id: 2,
    pregunta: "¿Cuánto tiempo tarda una reparación?",
    respuesta: "El tiempo depende del tipo de falla presentado.",
  },
];

---

2️⃣ Cambiar colores del acordeón

Los colores principales se controlan desde las utilidades Tailwind utilizadas en el componente:

from-primary
to-surface
bg-surface
text-ink

Puedes redefinir estos tokens en global.css o en tu configuración de Tailwind.

---

3️⃣ Ajustar animaciones

Las animaciones del acordeón están controladas por:

details::details-content
interpolate-size
transition

Ubicadas dentro del componente FAQs.astro.

---

Desarrollado con ❤️ por isnaroa