163 lines
4.2 KiB
Markdown
163 lines
4.2 KiB
Markdown
# 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**
|