💬 Testimonios con Animación CSS Infinita en Astro

Componente de testimonios en Astro, diseñado con un sistema de animación infinita en CSS puro. Ofrece una transición fluida con un "respiro" visual entre cada mensaje, optimizado para legibilidad y alto impacto visual.

---

🛠️ Stack Tecnológico

• Astro: Framework utilizado para el renderizado estático y la estructura del componente.
• Tailwind CSS v4: Utilizado para el diseño responsive, tipografía y el sistema de colores neutrales.
• CSS Animations: Lógica principal para manejar los ciclos de visibilidad, desvanecimiento y transformaciones sin JS.

---

📂 Estructura del Proyecto

src/
├─ components/
│  └─ Testimonios.astro
├─ layouts/
│  └─ Layout.astro
└─ pages/
   └─ index.astro

• Testimonios.astro → Contiene la lógica del array de datos, el marcado HTML y los keyframes de la animación.
• index.astro → Página donde se implementa el componente dentro de un contenedor.

---

⚙️ Personalización

Puedes adaptar el contenido y los tiempos fácilmente.

1. Modificar los testimonios

Edita el array en el frontmatter de Testimonios.astro:

const testimonios = [
  {
    comentario: "Tu mensaje personalizado aquí...",
    autor: "Nombre del Cliente",
    cargo: "Cargo o Rol",
  },
];

2. Ajustar el tiempo de lectura

En el bloque <style>, cambia el multiplicador de la duración (actualmente 8s por item):

.slide {
  /* Cambia 8s por el tiempo que desees que cada item se mantenga visible */
  animation: carouselFade calc(var(--items) * 8s) infinite both;
}

3. Cambiar la altura del contenedor

Si tus testimonios son muy largos, ajusta la altura mínima en el contenedor principal:

<div class="relative w-full min-h-[450px] md:min-h-[400px]">

---

🚀 Scripts Disponibles

Comandos comunes utilizando pnpm:

Comando	Acción
pnpm install	Instala todas las dependencias del proyecto
pnpm dev	Inicia el servidor de desarrollo
pnpm build	Genera la versión optimizada del sitio

---

📋 Requisitos

• Node.js (Versión 18 o superior).
• Gestor de paquetes (pnpm recomendado, npm o yarn).

---

Desarrollado con ❤️ por isnaroa