📜 Definición Teórica

El Frontend es el Genjutsu de Interacción. En 8devmx usamos Astro 5 para la estructura ultra-veloz, Tailwind CSS 4 para el diseño atómico y DaisyUI 5 para componentes listos para el combate. Tu objetivo es crear interfaces que se sientan vivas pero que carguen tan rápido como un parpadeo.

🛠️ Guía de Implementación

Astro & Tailwind (La Sinergia Perfecta):

---
// src/components/NinjaCard.astro
const { nombre, rango } = Astro.props;
---
<div class="card bg-surface shadow-xl hover-lift border border-white/5">
  <div class="card-body">
    <h2 class="card-title text-accent font-heading">{nombre}</h2>
    <p class="text-text-muted">{rango}</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary btn-sm rounded-full glow">Misión</button>
    </div>
  </div>
</div>

JavaScript ES6+ (Chakra Avanzado):

// Desestructuración y Operador Spread
const equipo7 = ["Naruto", "Sasuke", "Sakura"];
const [lider, ...miembros] = equipo7;

// Comunicación Asíncrona (Fetch API)
const invocarDatos = async () => {
  const res = await fetch("/api/shinobis");
  const data = await res.json();
  return data.filter(s => s.activo);
};

🎯 Reto Ninja: “El Espejo de Agua”

Crea un componente en Astro que consuma una API y renderice tarjetas usando Tailwind Grid. Aplica una clase .hover-glow para que las tarjetas brillen al pasar el puntero.

✅ Checklist de Dominio

  • ¿Usas etiquetas semánticas (<article>, <section>) para el SEO-Jutsu?
  • ¿Entiendes el concepto de “Islas de Hidratación” en Astro?
  • ¿Puedes centrar un elemento usando grid place-items-center?