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:

npm install

2. Iniciar servidor de desarrollo:

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:

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:

// 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:

transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
// Cambia 0.5s por el valor deseado

Comandos Disponibles

# 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