Proyecto moderno creado con Astro que muestra un slider responsivo de tarjetas de productos de moda, utilizando SwiperJS, Tailwind CSS y un diseño enfocado en e-commerce de ropa urbana.
- Slider Responsivo: Adaptación automática mediante breakpoints de Tailwind (1, 2 o 3 tarjetas).
- Navegación y Paginación: Flechas personalizadas y bullets con estilos propios.
- Tarjetas de Producto: Imagen, título, descripción corta, precio, tallas y botón "Añadir al carrito".
- Animaciones & Hover: Efectos de escala, sombras dinámicas y transiciones suaves usando clases utilitarias.
- Diseño Dark Mode: Estética moderna con degradados y UI enfocada en productos de alta gama.
- Astro: Framework principal para la estructura y optimización.
- React: Implementación del componente Slider interactivo.
- SwiperJS: Motor del carrusel con módulos de Navigation y Pagination.
- Tailwind CSS: Framework de estilado para un diseño rápido y consistente.
src/pages/index.astro: Página principal que monta el layout y el slider.src/layouts/Layout.astro: layout base y estilos de fondo gradiente.src/components/Slider.jsx: Componente React que configura y renderiza el slider con clases de Tailwind.src/lib/data.ts: Listado tipado de productos (Producto) que alimenta el slider.
Todos los comandos se ejecutan desde la raíz del proyecto usando pnpm:
| Comando | Acción |
|---|---|
pnpm install |
Instala todas las dependencias. |
pnpm dev |
Levanta el servidor local en http://localhost:4321. |
pnpm build |
Genera la versión optimizada en la carpeta dist/. |
- Editar Productos: Modifica el array en
src/lib/data.tspara cambiar nombres, precios o imágenes. - Cambiar Diseño: Ajusta el JSX y las clases en
src/components/Slider.jsxpara las tarjetas. - Layout General: Edita
src/layouts/Layout.astropara cambiar el fondo.
- Node.js (Versión 18.x o superior).
- pnpm como gestor de paquetes.
Desarrollado con ❤️ por isnaroa