# 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**