🌓 Image Before & After Slider con JS/JSX

Proyecto educativo creado con Astro que enseña cómo construir un componente de comparación de imágenes (Antes/Después) utilizando dos enfoques: React (JSX) y JavaScript Vanilla.

---

✨ Características

• Dual-Core Implementation: Incluye versiones en React para escalabilidad y Vanilla JS para máximo rendimiento.
• Técnica de Recorte (Clip-path): Implementación eficiente mediante clip-path: inset(), procesado por la GPU para evitar saltos visuales.
• Estética Glassmorphism: Interfaz moderna con desenfoque de fondo y bordes de cristal.
• Responsive & Touch Ready: Controladores optimizados para clics de ratón y gestos táctiles en móviles.

🛠️ Stack Tecnológico

• Astro: Base del proyecto y manejo de islas de interactividad.
• React: Implementación reactiva del slider.
• Tailwind CSS: Estilizado utilitario para un look premium.
• Lucide Icons: Iconografía minimalista para el UI.

---

📂 Estructura del Proyecto

• src/pages/index.astro: Página de demostración con secciones de texto y montaje del componente.
• src/layouts/Layout.astro: Contenedor base con la configuración de gradientes de fondo fijos.
• public/images/: Directorio para las imágenes de comparación (Before/After).

En este tutorial exploramos dos formas de resolver el mismo problema:

1. Enfoque React (Slider.jsx): Ideal para aplicaciones complejas que ya utilizan el ecosistema de React. Maneja el estado mediante useState.
2. Enfoque Vanilla (Slider.astro): Perfecto para quienes buscan el menor peso posible (0kb de JS adicional) y manipulación directa del DOM.

---

🚀 Scripts Disponibles

Comando	Acción
pnpm install	Instala todas las dependencias del proyecto.
pnpm dev	Inicia el servidor de desarrollo en localhost:4321.
pnpm build	Construye el sitio optimizado para producción.

---

⚙️ Cómo Personalizar

1. Imágenes: Sustituye los archivos en public/images/ o pasa URLs externas mediante las props beforeImg y afterImg.
2. Sensibilidad: Ajusta los umbrales de opacidad en BeforeAfter.jsx para que las etiquetas desaparezcan antes o después al mover el slider.

📋 Requisitos

• Node.js (Versión 18.x o superior).
• Navegador moderno (Soporte completo para clip-path e inset).

---

Desarrollado con ❤️ por isnaroa