🏦 Bank Modern App

Una aplicación bancaria moderna y elegante construida con React, Tailwind CSS y Vite. Diseñada para ofrecer una experiencia de usuario excepcional con un diseño responsive y componentes reutilizables.

✨ Características

• 🎨 Diseño Moderno: Interfaz elegante y profesional
• 📱 Responsive: Optimizado para todos los dispositivos
• ⚡ Rendimiento: Construido con Vite para máxima velocidad
• 🔧 Componentes Reutilizables: Arquitectura modular y mantenible
• 🎭 Animaciones Suaves: Transiciones y efectos visuales atractivos
• 🌙 Tema Oscuro: Diseño con colores oscuros para mejor experiencia

🛠️ Tecnologías Utilizadas

• Frontend: React 18
• Styling: Tailwind CSS
• Build Tool: Vite
• Lenguaje: JavaScript ES6+
• Gestión de Estado: React Context API
• Iconos: SVG personalizados

🌐 Demo en Vivo

¡Prueba la aplicación ahora mismo! 👉 Ver Demo

---

🚀 Instalación

Pre-requisitos

• Node.js (versión 16 o superior)
• npm o yarn

Pasos de instalación

1. Clona el repositorio

git clone https://github.com/bryansuarezdev/bank-modern-app.git
cd bank-modern-app

2. Instala las dependencias

npm install
# o
yarn install

3. Ejecuta el proyecto en modo desarrollo

npm run dev
# o
yarn dev

4. Abre tu navegador

http://localhost:5173

📁 Estructura del Proyecto

bank-modern-app/
├── public/                 # Archivos estáticos
├── src/
│   ├── assets/            # Imágenes e iconos
│   ├── components/        # Componentes reutilizables
│   │   ├── Billing.jsx
│   │   ├── Business.jsx
│   │   ├── Button.jsx
│   │   ├── CardDeal.jsx
│   │   ├── Clients.jsx
│   │   ├── CTA.jsx
│   │   ├── FeedbackCard.jsx
│   │   ├── Footer.jsx
│   │   ├── GetStarted.jsx
│   │   ├── Hero.jsx
│   │   ├── Navbar.jsx
│   │   └── Stats.jsx
│   ├── constants/         # Constantes y datos
│   ├── style.js           # Estilos globales
│   ├── App.jsx            # Componente principal
│   └── main.jsx           # Punto de entrada
├── package.json
├── tailwind.config.js     # Configuración de Tailwind
└── vite.config.js         # Configuración de Vite

🎯 Componentes Principales

Hero Section

• Banner principal con llamada a la acción
• Diseño impactante y moderno

Business Section

• Información sobre servicios empresariales
• Tarjetas informativas con iconos

Billing Section

• Sección de facturación y pagos
• Diseño limpio y funcional

CardDeal Section

• Ofertas especiales de tarjetas
• Promociones atractivas

Testimonials

• Reseñas de clientes
• Sistema de feedback

Footer

• Enlaces importantes
• Redes sociales
• Información de contacto

🎨 Personalización

Colores

Los colores principales están definidos en tailwind.config.js:

• Primary: Azul corporativo
• Secondary: Verde de acento
• DimWhite: Texto secundario
• Dark: Fondo principal

Fuentes

• Poppins: Fuente principal para títulos
• Inter: Fuente secundaria para texto

📱 Responsive Design

El proyecto está optimizado para:

• 📱 Mobile: 320px - 768px
• 💻 Tablet: 768px - 1024px
• 🖥️ Desktop: 1024px+

🚀 Scripts Disponibles

# Desarrollo
npm run dev          # Inicia servidor de desarrollo

# Build
npm run build        # Construye para producción
npm run preview      # Previsualiza build de producción

# Linting
npm run lint         # Ejecuta ESLint

🌐 Deployment

Vercel (Recomendado)

1. Conecta tu repositorio de GitHub
2. Vercel detecta automáticamente la configuración
3. Se despliega en cada push

Demo actual: https://bank-modern-app-ashen.vercel.app/

Netlify

1. Arrastra la carpeta dist después del build
2. O conecta tu repositorio de GitHub

GitHub Pages

1. Ejecuta npm run build
2. Sube la carpeta dist a la rama gh-pages

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

👨‍💻 Autor

Bryan Suarez

• GitHub: @bryansuarezdev
• LinkedIn: Tu LinkedIn

🙏 Agradecimientos

• React - Biblioteca de UI
• Tailwind CSS - Framework de CSS
• Vite - Build tool
• Heroicons - Iconos SVG

📞 Contacto

¿Tienes alguna pregunta o sugerencia? ¡No dudes en contactarme!

• 📧 Email: bryan.end.dev@gmail.com
• 🐛 Issues: GitHub Issues

---

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

Licencia MIT:

• ✅ Permite: Uso comercial, modificación, distribución, uso privado
• ✅ Requiere: Inclusión de la licencia y copyright
• ❌ No permite: Responsabilidad del autor

---

⭐ Si te gusta este proyecto, ¡dale una estrella en GitHub!