Initial commit: Vite + React project setup

README.md

@@ -0,0 +1,162 @@
+# Maya Contigo - Banorte Interface
+
+Aplicación web moderna desarrollada con **Vite + React + TailwindCSS** que replica el diseño de la interfaz "Maya Contigo" de Banorte.
+
+## Características
+
+- **Header fijo** con branding de Banorte
+- **Hero Banner** con efectos de iluminación circular roja
+- **Carrusel configurable** con navegación suave y animaciones
+- **Diseño responsivo** para móvil, tablet y desktop
+- **Sin librerías externas** para el carrusel (implementación custom)
+- **Fácil de extender** - solo edita el archivo de datos
+
+## Tecnologías
+
+- ⚡ **Vite** - Build tool rápido
+- ⚛️ **React 18** - UI Library
+- 🎨 **TailwindCSS** - Utility-first CSS framework
+- 🎯 **CSS Custom** - Animaciones y transiciones suaves
+
+## Instalación
+
+1. **Clonar e instalar dependencias:**
+
+```bash
+npm install
+```
+
+2. **Iniciar servidor de desarrollo:**
+
+```bash
+npm run dev
+```
+
+3. **Abrir en el navegador:**
+
+El servidor se iniciará en `http://localhost:5173`
+
+## Estructura del Proyecto
+
+```
+myinterfaz/
+├── public/
+│   └── images/           # Imágenes de los módulos
+│       ├── rh.png
+│       ├── normativa.png
+│       ├── cx.png
+│       ├── bursatil.png
+│       └── pyme.png
+├── src/
+│   ├── components/
+│   │   ├── Header.jsx    # Header fijo con logo
+│   │   ├── Hero.jsx      # Banner principal
+│   │   └── Carousel.jsx  # Carrusel configurable
+│   ├── data/
+│   │   └── modules.js    # Datos de los módulos
+│   ├── App.jsx           # Componente principal
+│   ├── main.jsx          # Entry point
+│   └── index.css         # Estilos globales
+├── index.html
+├── vite.config.js
+├── tailwind.config.js
+└── package.json
+```
+
+## Cómo Agregar Nuevos Módulos
+
+Es muy fácil agregar nuevos módulos al carrusel. Solo necesitas editar el archivo `src/data/modules.js`:
+
+```javascript
+export const modules = [
+  // Módulos existentes...
+  {
+    id: 6,                              // ID único
+    title: "MAYA CONTIGO",              // Título superior (azul)
+    subtitle: "NUEVO MODULO",           // Subtítulo (rojo)
+    img: "/images/nuevo-modulo.png",    // Ruta de la imagen
+    url: "https://example.com/nuevo"    // URL de destino
+  }
+];
+```
+
+### Pasos para agregar un módulo:
+
+1. **Agregar la imagen** en `public/images/`
+2. **Editar** `src/data/modules.js`
+3. **Agregar un nuevo objeto** al array con los campos requeridos
+4. ¡Listo! El carrusel se actualizará automáticamente
+
+## Colores de Marca Banorte
+
+Los colores están configurados en `tailwind.config.js`:
+
+- **Rojo Banorte:** `#C8102E` (usa `bg-banorte-red` o `text-banorte-red`)
+- **Azul Banorte:** `#001A4D` (usa `bg-banorte-blue` o `text-banorte-blue`)
+
+## Personalización
+
+### Cambiar el tamaño del carrusel
+
+Edita las clases de tamaño en `src/components/Carousel.jsx`:
+
+```jsx
+// Busca estas clases en el estilo inline
+.active-item .circle-container {
+  width: 240px;   // Tamaño del círculo activo
+  height: 240px;
+}
+```
+
+### Modificar velocidad de animación
+
+Cambia la duración de la transición:
+
+```jsx
+transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+// Cambia 0.5s por el valor deseado
+```
+
+## Comandos Disponibles
+
+```bash
+# Desarrollo
+npm run dev
+
+# Build para producción
+npm run build
+
+# Preview del build
+npm run preview
+```
+
+## Características del Carrusel
+
+- ✅ **Navegación con flechas** izquierda/derecha
+- ✅ **Elemento central ampliado** con efecto de enfoque
+- ✅ **Animaciones suaves** entre transiciones
+- ✅ **Responsive** - se adapta a diferentes pantallas
+- ✅ **Click para navegar** - click en el elemento activo abre el URL
+- ✅ **Escala y opacidad** para elementos no activos
+- ✅ **Sin librerías externas** - implementación 100% custom
+
+## Responsive
+
+- **Móvil (< 768px):** Muestra 3 elementos (1 central + 2 laterales)
+- **Tablet (768-1024px):** Muestra 3-5 elementos
+- **Desktop (> 1024px):** Muestra 5 elementos completos
+
+## Soporte de Navegadores
+
+- Chrome (últimas 2 versiones)
+- Firefox (últimas 2 versiones)
+- Safari (últimas 2 versiones)
+- Edge (últimas 2 versiones)
+
+## Licencia
+
+Proyecto educativo - Banorte Maya Contigo Interface
+
+---
+
+**Desarrollado con ❤️ usando Vite + React + TailwindCSS**