Wireframes de Alta Fidelidad - Capitalta
Páginas Principales
- Landing Page (Home)
- Dashboard Overview
- Formulario de Solicitud (Multi-step)
- Página de Producto
- Panel de Solicitud (Vista Detalle)
1. LANDING PAGE (Home)
Estructura General
URL: /
Layout: Marketing layout con header transparente sobre hero, luego fijo con fondo blanco
Secciones:
- Hero Section
- Trust Indicators
- Features Grid
- How It Works
- Products Showcase
- Testimonials
- Stats Section
- CTA Final
- Footer
1.1 Hero Section
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ [Logo] Productos Proceso FAQ [Cotizar]│ ← Header transparente
├─────────────────────────────────────────────────────────────┤
│ │
│ Financiación PYME especializada │
│ en construcción │ ← H1 (text-5xl, font-bold)
│ │
│ Decisiones inteligentes en minutos, con │
│ tecnología y experiencia sectorial. │ ← Subtítulo (text-xl)
│ │
│ [Cotizar ahora →] [Conocer más] │ ← CTAs
│ │
│ ✓ Aprobación en 24-48h ✓ 100% digital ✓ Sin papeleo │ ← Trust bullets
│ │
│ [Imagen Hero / Ilustración] │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
HeroSection(container)Buttonvariant="primary" (Cotizar ahora)Buttonvariant="outline" (Conocer más)TrustBullets(lista de checkmarks)Image(hero image con gradient overlay)
Comportamiento:
- Animación de fade-in al cargar (Framer Motion)
- Botón "Cotizar ahora" con hover effect (scale + shadow)
- Scroll suave al hacer click en "Conocer más"
- Parallax sutil en la imagen de fondo
Responsive:
- Desktop: Layout en dos columnas (texto izq, imagen der)
- Tablet: Layout en una columna, imagen reducida
- Mobile: Texto centrado, imagen como fondo con overlay
1.2 Trust Indicators
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ [Logo CNBV] [Logo SOFOM] [Candado SSL] [5 estrellas] │
│ │
│ Regulado por SOFOM ENR Seguro y Calificación │
│ CNBV Autorizado Encriptado 4.8/5.0 │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
TrustIndicators(grid de 4 columnas)TrustBadge(icono + texto)
Comportamiento:
- Fade-in al hacer scroll
- Hover muestra tooltip con más información
1.3 Features Grid
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ ¿Por qué elegir Capitalta? │ ← H2
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ [Icono] │ │ [Icono] │ │ [Icono] │ │
│ │ │ │ │ │ │ │
│ │ Evaluación │ │ Onboarding │ │ Valuación │ │
│ │ en minutos │ │ digital │ │ automatizada │ │
│ │ │ │ │ │ │ │
│ │ Análisis de │ │ Verificación │ │ AVM y │ │
│ │ datos CFDI │ │ biométrica │ │ monitoreo │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ [Icono] │ │ [Icono] │ │ [Icono] │ │
│ │ │ │ │ │ │ │
│ │ Términos │ │ Decisión │ │ Monitoreo │ │
│ │ personalizados│ │ rápida │ │ inteligente │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
FeaturesGrid(grid 3 columnas desktop, 2 tablet, 1 mobile)FeatureCard(icono + título + descripción)Iconde Lucide React
Comportamiento:
- Stagger animation al hacer scroll (cada card con delay)
- Hover: elevación de card con shadow
- Click: modal con más detalles (opcional)
1.4 How It Works
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Cómo funciona │ ← H2
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 1 │────────→│ 2 │────────→│ 3 │────────→│ 4 │ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ Regístrate Conecta tu Recibe pre- Completa y │
│ y verifica información aprobación firma │
│ identidad CFDI personalizada │
│ │
│ [Icono] [Icono] [Icono] [Icono] │
│ │
│ Verificación Análisis Decisión Desembolso │
│ biométrica automático en minutos rápido │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
HowItWorks(container)StepCard(número + título + descripción + icono)Arrow(conector entre pasos)
Comportamiento:
- Animación de línea que conecta los pasos al hacer scroll
- Números con animación de contador
- Hover en cada paso muestra más detalles
Responsive:
- Desktop: Horizontal con flechas
- Mobile: Vertical con línea conectora a la izquierda
1.5 Products Showcase
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Nuestros productos de financiamiento │ ← H2
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Crédito Simple PYME │ │ ← H3
│ │ │ │
│ │ Financiamiento ágil hasta el 50% del valor de tu │ │
│ │ garantía inmobiliaria. │ │
│ │ │ │
│ │ • Hasta $5M MXN │ │
│ │ • Plazo: 6-36 meses │ │
│ │ • Tasa desde 18% anual │ │
│ │ │ │
│ │ [Ver detalles →] │ │
│ │ │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Persona Física con Actividad Empresarial │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Persona Moral │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Crédito para Construcción Premium │ │
│ │ [Badge: Más popular] │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
ProductsShowcase(container)ProductCard(card expandible)Badge(para destacar productos)Buttonvariant="ghost" (Ver detalles)
Comportamiento:
- Cards con hover effect (border color change)
- Click en card o botón navega a página de producto
- Badge animado para producto destacado
1.6 Testimonials
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Lo que dicen nuestros clientes │ ← H2
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ │ │ │ │
│ │ "Obtuve mi crédito │ │ "El proceso fue │ │
│ │ en 48 horas..." │ │ 100% digital..." │ │
│ │ │ │ │ │
│ │ ⭐⭐⭐⭐⭐ │ │ ⭐⭐⭐⭐⭐ │ │
│ │ │ │ │ │
│ │ Juan Pérez │ │ María González │ │
│ │ Constructor │ │ Desarrolladora │ │
│ │ [Foto] │ │ [Foto] │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ │
│ [← Prev] [1] [2] [3] [Next →] │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
Testimonials(carousel container)TestimonialCard(quote + rating + autor + foto)Carouselcontrols (prev/next, dots)
Comportamiento:
- Auto-play carousel con pausa en hover
- Swipe en mobile
- Fade transition entre testimonios
1.7 Stats Section
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ [Fondo con gradiente brand-primary a brand-navy] │
│ │
│ $500M+ 1,200+ 24-48h 98% │
│ Financiados Créditos Aprobación Satisfacción │
│ Otorgados │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
StatsSection(grid 4 columnas)StatCard(número grande + label)
Comportamiento:
- Counter animation al hacer scroll
- Números con formato de moneda/porcentaje
1.8 CTA Final
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Construyamos el futuro de tu empresa │ ← H2
│ │
│ Obtén una pre-aprobación en minutos │ ← Subtítulo
│ │
│ [Cotizar ahora →] │ ← CTA Button
│ │
│ Sin compromiso • 100% digital │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
CTASection(centered content)Buttonsize="lg" variant="primary"
Comportamiento:
- Animación de entrada al scroll
- Botón con efecto de pulso sutil
1.9 Footer
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ [Logo] │
│ │
│ Productos Empresa Recursos Legal │
│ • Crédito PYME • Sobre • Blog • Privacidad│
│ • Persona Física • Equipo • FAQ • Términos │
│ • Persona Moral • Contacto • Glosario • SOFOM │
│ • Construcción │
│ │
│ ────────────────────────────────────────────────────────────│
│ │
│ © 2025 Alta Capital SOFOM ENR. Todos los derechos reservados│
│ │
│ [Facebook] [LinkedIn] [Twitter] [Instagram] │
│ │
│ Aviso: "ALTA CAPITAL, S.A. DE C.V., S.O.F.O.M., E.N.R., │
│ no requiere de autorización de la SHCP..." │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
Footer(container)FooterColumn(grupo de links)SocialLinks(iconos sociales)LegalNotice(aviso regulatorio)
2. DASHBOARD OVERVIEW
Estructura General
URL: /dashboard
Layout: Dashboard layout con sidebar fijo, header con breadcrumbs y user menu
Secciones:
- Sidebar Navigation
- Header con Breadcrumbs
- KPI Cards
- Charts Section
- Recent Activity Table
- Quick Actions
2.1 Layout Completo
Diseño:
┌──────────┬──────────────────────────────────────────────────┐
│ │ Dashboard > Overview [User ▼]│ ← Header
│ ├──────────────────────────────────────────────────┤
│ [Logo] │ │
│ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ Overview │ │ $2.5M│ │ 45 │ │ 92% │ │ 24h │ │ ← KPI Cards
│ Pipeline │ │ Cartera│ Solicitudes│ Aprobación│ Tiempo │ │
│ Cartera │ └──────┘ └──────┘ └──────┘ └──────┘ │
│ Reportes │ │
│ Config │ ┌─────────────────┐ ┌─────────────────┐ │
│ │ │ │ │ │ │
│ ──── │ │ Gráfico de │ │ Pipeline por │ │ ← Charts
│ │ │ Originación │ │ Etapa │ │
│ [Soporte]│ │ │ │ │ │
│ [Salir] │ └─────────────────┘ └─────────────────┘ │
│ │ │
│ │ Actividad Reciente │
│ │ ┌──────────────────────────────────────────┐ │
│ │ │ Solicitud │ Cliente │ Monto │ Estado │ │ ← Table
│ │ ├──────────────────────────────────────────┤ │
│ │ │ SOL-001 │ Juan P. │ $500K │ [Pendiente]│ │
│ │ │ SOL-002 │ María G.│ $1.2M │ [Aprobado] │ │
│ │ └──────────────────────────────────────────┘ │
│ │ │
└──────────┴──────────────────────────────────────────────────┘
Componentes:
DashboardLayout(sidebar + main content)Sidebar(navegación)Header(breadcrumbs + user menu)KPICard(métrica destacada)ChartWrapper(contenedor de gráficos)ActivityTable(tabla de actividad reciente)
2.2 Sidebar Navigation
Componentes:
<Sidebar>
<Logo />
<NavSection>
<NavItem icon={LayoutDashboard} href="/dashboard">Overview</NavItem>
<NavItem icon={GitBranch} href="/dashboard/pipeline">Pipeline</NavItem>
<NavItem icon={Wallet} href="/dashboard/cartera">Cartera</NavItem>
<NavItem icon={BarChart3} href="/dashboard/reportes">Reportes</NavItem>
<NavItem icon={Settings} href="/dashboard/configuracion">Configuración</NavItem>
</NavSection>
<NavFooter>
<NavItem icon={HelpCircle}>Soporte</NavItem>
<NavItem icon={LogOut}>Salir</NavItem>
</NavFooter>
</Sidebar>
Comportamiento:
- Item activo con background y border left
- Hover effect en items
- Collapse en mobile (hamburger menu)
- Tooltips en iconos cuando sidebar está colapsado
2.3 KPI Cards
Diseño Individual:
┌────────────────────┐
│ [Icono] │
│ │
│ $2.5M │ ← Valor principal (text-3xl, font-bold)
│ Cartera Total │ ← Label (text-sm, text-muted)
│ │
│ ↑ 12% vs mes ant. │ ← Cambio (text-xs, color semantic)
└────────────────────┘
Componentes:
KPICard(card con icono, valor, label, cambio)TrendIndicator(flecha + porcentaje)
Comportamiento:
- Animación de contador al cargar
- Hover muestra tooltip con más detalles
- Click navega a vista detallada
2.4 Charts
Gráfico de Originación (Line Chart):
┌─────────────────────────────────────┐
│ Originación Mensual [⋮] │ ← Dropdown de opciones
├─────────────────────────────────────┤
│ │
│ │ ╱ │
│ │ ╱──── │
│ │ ╱──── │
│ │ ╱──── │
│ │ ╱──── │
│ └──────────────────────── │
│ Ene Feb Mar Abr May Jun │
│ │
│ ─ Monto ─ Cantidad │ ← Legend
└─────────────────────────────────────┘
Pipeline por Etapa (Funnel Chart):
┌─────────────────────────────────────┐
│ Pipeline por Etapa [⋮] │
├─────────────────────────────────────┤
│ │
│ ████████████████████ 100 Leads │
│ ███████████████ 75 Calificados │
│ ████████████ 50 En Evaluación │
│ ███████ 35 Pre-aprobados │
│ ████ 20 Aprobados │
│ │
└─────────────────────────────────────┘
Componentes:
ChartWrapper(card container)LineChart(Recharts)FunnelChart(Recharts)ChartLegendDropdownMenu(opciones de chart)
Comportamiento:
- Tooltips en hover sobre data points
- Animación de entrada
- Responsive (stack vertical en mobile)
2.5 Activity Table
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ Actividad Reciente [Filtros ▼] [Buscar 🔍]│
├──────────────────────────────────────────────────────────────┤
│ ID │ Cliente │ Monto │ Estado │ Acciones │
├──────────────────────────────────────────────────────────────┤
│ SOL-001 │ Juan Pérez │ $500,000 │ [Pendiente] │ [Ver] │
│ SOL-002 │ María Gómez │ $1.2M │ [Aprobado] │ [Ver] │
│ SOL-003 │ Pedro López │ $800K │ [Revisión] │ [Ver] │
├──────────────────────────────────────────────────────────────┤
│ [← Prev] [1] [2] [3] [Next →] │
└──────────────────────────────────────────────────────────────┘
Componentes:
DataTable(TanStack Table)TableFilters(dropdown de filtros)SearchInput(búsqueda)StatusBadge(badge de estado con color)Pagination(controles de paginación)
Comportamiento:
- Sorting por columna (click en header)
- Filtros multi-select
- Búsqueda en tiempo real (debounced)
- Click en fila navega a detalle
- Paginación con lazy loading
3. FORMULARIO DE SOLICITUD (Multi-step)
Estructura General
URL: /solicitud/persona-fisica o /solicitud/persona-moral
Layout: Formulario centrado con stepper arriba, sidebar con resumen a la derecha
Pasos:
- Información Personal/Empresa
- Información Financiera
- Garantía Propuesta
- Documentos
- Revisión y Firma
3.1 Layout Completo
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ │
│ ① ──────── ② ──────── ③ ──────── ④ ──────── ⑤ │ ← Stepper
│ Personal Financiera Garantía Documentos Revisión │
│ │
├────────────────────────────────────┬─────────────────────────┤
│ │ │
│ Información Personal │ Resumen │
│ │ │
│ Nombre completo * │ Progreso: 20% │
│ [___________________________] │ [████░░░░░░░░░░] │
│ │ │
│ RFC * │ Datos completados: │
│ [___________________________] │ ✓ Nombre │
│ │ ✗ RFC │
│ Fecha de nacimiento * │ ✗ Fecha nacimiento │
│ [___________________________] │ │
│ │ Monto solicitado: │
│ Teléfono * │ $500,000 MXN │
│ [___________________________] │ │
│ │ Plazo: │
│ Email * │ 24 meses │
│ [___________________________] │ │
│ │ │
│ [← Atrás] [Siguiente →] │ [Guardar borrador] │
│ │ │
└────────────────────────────────────┴─────────────────────────┘
Componentes:
MultiStepForm(container)Stepper(indicador de pasos)FormStep(contenido de cada paso)FormSidebar(resumen y progreso)ProgressBar(barra de progreso)FormNavigation(botones atrás/siguiente)
3.2 Stepper
Estados:
- Completado: ✓ con background verde
- Activo: número con border azul
- Pendiente: número con border gris
Componentes:
<Stepper currentStep={2} totalSteps={5}>
<Step number={1} status="completed">Personal</Step>
<Step number={2} status="active">Financiera</Step>
<Step number={3} status="pending">Garantía</Step>
<Step number={4} status="pending">Documentos</Step>
<Step number={5} status="pending">Revisión</Step>
</Stepper>
Comportamiento:
- Click en paso completado permite navegar atrás
- Pasos pendientes no son clickeables
- Animación de transición entre pasos
3.3 Paso 1: Información Personal
Campos:
- Nombre completo (text input, required)
- RFC (text input con validación de formato, required)
- Fecha de nacimiento (date picker, required)
- Teléfono (tel input con formato, required)
- Email (email input con validación, required)
- Dirección completa (textarea, required)
- Actividad económica (select, required)
Validaciones:
- RFC: formato válido (13 caracteres para persona física)
- Email: formato válido
- Teléfono: 10 dígitos
- Edad: mayor de 18 años
Componentes:
Input(text, email, tel)DatePicker(fecha de nacimiento)Select(actividad económica)Textarea(dirección)FormField(wrapper con label y error)
3.4 Paso 2: Información Financiera
Campos:
- Ingresos mensuales (currency input, required)
- Egresos mensuales (currency input, required)
- Monto solicitado (currency input, required)
- Plazo deseado (select, required)
- Destino del crédito (select, required)
- ¿Tienes otros créditos? (radio group)
- Si sí, detalles (conditional field)
Componentes:
CurrencyInput(input con formato de moneda)Select(plazo, destino)RadioGroup(otros créditos)ConditionalField(muestra/oculta según respuesta)
Comportamiento:
- Cálculo automático de capacidad de pago
- Validación de monto mínimo/máximo
- Sugerencia de plazo óptimo
3.5 Paso 3: Garantía Propuesta
Campos:
- Tipo de garantía (select: inmobiliaria, prendaria)
- Dirección del inmueble (conditional)
- Valor estimado (currency input)
- ¿Tiene gravámenes? (radio group)
- Descripción de la garantía (textarea)
Componentes:
Select(tipo de garantía)CurrencyInput(valor estimado)RadioGroup(gravámenes)Textarea(descripción)
Comportamiento:
- Validación de LTV (loan-to-value)
- Sugerencia de valuación profesional
3.6 Paso 4: Documentos
Diseño:
┌──────────────────────────────────────┐
│ Documentos Requeridos │
├──────────────────────────────────────┤
│ │
│ ✓ Identificación oficial │
│ [archivo.pdf] [Ver] [X] │
│ │
│ ⚠ Comprobante de domicilio │
│ [Arrastra archivo o click] │
│ │
│ ✗ Comprobante de ingresos │
│ [Arrastra archivo o click] │
│ │
│ ✗ Estados de cuenta (3 meses) │
│ [Arrastra archivo o click] │
│ │
└──────────────────────────────────────┘
Componentes:
FileUpload(drag & drop)FilePreview(preview de archivo subido)UploadProgress(barra de progreso)DocumentChecklist(lista de documentos)
Comportamiento:
- Drag & drop de archivos
- Validación de tipo de archivo (PDF, JPG, PNG)
- Validación de tamaño máximo (5MB)
- Preview de documentos
- Eliminación de archivos
3.7 Paso 5: Revisión y Firma
Diseño:
┌──────────────────────────────────────┐
│ Revisión de Solicitud │
├──────────────────────────────────────┤
│ │
│ Información Personal │
│ • Nombre: Juan Pérez │
│ • RFC: PEXJ800101XXX │
│ • Email: juan@example.com │
│ [Editar] │
│ │
│ Información Financiera │
│ • Monto: $500,000 MXN │
│ • Plazo: 24 meses │
│ • Destino: Capital de trabajo │
│ [Editar] │
│ │
│ Garantía │
│ • Tipo: Inmobiliaria │
│ • Valor: $1,200,000 MXN │
│ [Editar] │
│ │
│ Documentos │
│ • 4 documentos adjuntos │
│ [Ver documentos] │
│ │
│ ────────────────────────────────────│
│ │
│ ☐ Acepto términos y condiciones │
│ ☐ Acepto aviso de privacidad │
│ │
│ Firma electrónica │
│ [Área de firma] │
│ │
│ [← Atrás] [Enviar solicitud →] │
│ │
└──────────────────────────────────────┘
Componentes:
ReviewSection(sección de revisión)EditButton(botón para editar sección)Checkbox(aceptación de términos)SignaturePad(área de firma)SubmitButton(envío final)
Comportamiento:
- Click en "Editar" navega al paso correspondiente
- Validación de checkboxes antes de enviar
- Captura de firma electrónica
- Confirmación antes de envío
- Loading state durante envío
- Redirección a página de éxito
4. PÁGINA DE PRODUCTO
Estructura General
URL: /productos/[slug] (ej: /productos/credito-simple-pyme)
Layout: Marketing layout con hero específico del producto
Secciones:
- Hero del Producto
- Características Principales
- Requisitos
- Proceso
- Calculadora
- FAQ
- CTA
4.1 Hero del Producto
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Crédito Simple PYME │ ← H1
│ [Badge: Más popular] │
│ │
│ Financiamiento ágil hasta el 50% del valor │
│ de tu garantía inmobiliaria. │ ← Descripción
│ │
│ [Solicitar ahora →] [Calcular mi crédito] │ ← CTAs
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ Hasta │ │ Plazo │ │ Tasa desde │ │
│ │ $5M MXN │ │ 6-36 meses │ │ 18% anual │ │ ← Specs
│ └────────────┘ └────────────┘ └────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
ProductHero(container)Badge(destacado)Button(CTAs)SpecCard(especificaciones)
4.2 Características Principales
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Características │ ← H2
│ │
│ ✓ Aprobación en 24-48 horas │
│ ✓ Proceso 100% digital │
│ ✓ Sin comisiones ocultas │
│ ✓ Flexibilidad en el uso de recursos │
│ ✓ Renovación automática disponible │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
FeaturesList(lista con checkmarks)FeatureItem(icono + texto)
4.3 Requisitos
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Requisitos │ ← H2
│ │
│ Documentos necesarios: │
│ │
│ 📄 Identificación oficial vigente │
│ 📄 Comprobante de domicilio (no mayor a 3 meses) │
│ 📄 Comprobante de ingresos │
│ 📄 Estados de cuenta bancarios (últimos 3 meses) │
│ 📄 Escrituras de la garantía propuesta │
│ │
│ [Ver checklist completo →] │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
RequirementsList(lista de requisitos)RequirementItem(icono + descripción)Buttonvariant="link" (ver checklist)
4.4 Calculadora
Diseño:
┌─────────────────────────────────────────────────────────────┐
│ │
│ Calcula tu crédito │ ← H2
│ │
│ Monto deseado │
│ [────●────────────────] $500,000 │ ← Slider
│ $100K $5M │
│ │
│ Plazo │
│ [──────●──────────────] 24 meses │ ← Slider
│ 6 meses 36 meses │
│ │
│ ────────────────────────────────────────────────────────────│
│ │
│ Pago mensual estimado: $25,500 MXN │
│ Tasa de interés: 18% anual │
│ CAT: 22.5% │
│ │
│ [Solicitar este crédito →] │
│ │
└─────────────────────────────────────────────────────────────┘
Componentes:
LoanCalculator(calculadora interactiva)Slider(control de monto y plazo)CalculationResult(resultado del cálculo)Button(solicitar)
Comportamiento:
- Cálculo en tiempo real al mover sliders
- Validación de rangos
- Formateo de moneda
- Tooltips con explicaciones
5. PANEL DE SOLICITUD (Vista Detalle)
Estructura General
URL: /dashboard/solicitudes/[id]
Layout: Dashboard layout con sidebar de navegación
Secciones:
- Header con Estado
- Timeline de Proceso
- Tabs de Información
- Documentos Adjuntos
- Historial de Actividad
- Acciones Disponibles
5.1 Header con Estado
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ │
│ Solicitud SOL-001 [Badge: Pendiente] │
│ Juan Pérez • $500,000 MXN • 24 meses │
│ │
│ Creada: 15 dic 2025 • Última actualización: Hace 2 horas │
│ │
└──────────────────────────────────────────────────────────────┘
Componentes:
SolicitudHeader(información principal)StatusBadge(estado actual)MetaInfo(metadata)
5.2 Timeline de Proceso
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ │
│ ✓ ───── ✓ ───── ● ───── ○ ───── ○ │
│ Recibida Revisión Evaluación Aprobación Desembolso │
│ 15 dic 16 dic En proceso Pendiente Pendiente │
│ │
└──────────────────────────────────────────────────────────────┘
Componentes:
ProcessTimeline(línea de tiempo)TimelineStep(paso del proceso)
Estados:
- ✓ Completado (verde)
- ● En proceso (azul, animado)
- ○ Pendiente (gris)
5.3 Tabs de Información
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ │
│ [Información] [Documentos] [Evaluación] [Historial] │ ← Tabs
│ ───────────── │
│ │
│ Información del Solicitante │
│ │
│ Datos Personales │
│ • Nombre: Juan Pérez González │
│ • RFC: PEXJ800101XXX │
│ • Email: juan@example.com │
│ • Teléfono: (55) 1234-5678 │
│ │
│ Información Financiera │
│ • Ingresos mensuales: $80,000 MXN │
│ • Egresos mensuales: $35,000 MXN │
│ • Capacidad de pago: $45,000 MXN │
│ │
│ Garantía Propuesta │
│ • Tipo: Inmobiliaria │
│ • Dirección: Av. Reforma 123, CDMX │
│ • Valor estimado: $1,200,000 MXN │
│ • LTV: 41.7% │
│ │
└──────────────────────────────────────────────────────────────┘
Componentes:
Tabs(navegación entre secciones)InfoSection(sección de información)InfoField(campo de información)
5.4 Documentos Adjuntos
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ │
│ Documentos (4) │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 📄 Identificación oficial │ │
│ │ identificacion.pdf • 2.3 MB • 15 dic 2025 │ │
│ │ [Ver] [Descargar] [Aprobar] [Rechazar] │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 📄 Comprobante de domicilio │ │
│ │ comprobante.pdf • 1.8 MB • 15 dic 2025 │ │
│ │ [Ver] [Descargar] [Aprobar] [Rechazar] │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────┘
Componentes:
DocumentList(lista de documentos)DocumentCard(tarjeta de documento)DocumentActions(acciones disponibles)
Comportamiento:
- Preview de documentos en modal
- Descarga de documentos
- Aprobación/rechazo con comentarios
5.5 Acciones Disponibles
Diseño:
┌──────────────────────────────────────────────────────────────┐
│ │
│ Acciones │
│ │
│ [Aprobar solicitud] [Solicitar información] [Rechazar] │
│ │
│ Comentarios internos │
│ [_____________________________________________________] │
│ │
│ [Agregar comentario] │
│ │
└──────────────────────────────────────────────────────────────┘
Componentes:
ActionButtons(botones de acción)CommentBox(área de comentarios)Button(acciones principales)
Comportamiento:
- Confirmación antes de aprobar/rechazar
- Modal para solicitar información adicional
- Comentarios con timestamp y autor
Responsive Breakpoints
Tailwind CSS Breakpoints:
sm: 640px (mobile landscape)md: 768px (tablet)lg: 1024px (desktop)xl: 1280px (large desktop)2xl: 1536px (extra large)
Estrategia Responsive:
- Mobile-first approach
- Sidebar colapsable en mobile (hamburger menu)
- Tablas con scroll horizontal en mobile
- Cards en grid que se adapta (3 cols → 2 cols → 1 col)
- Formularios en una columna en mobile
Animaciones y Transiciones
Framer Motion Variants:
const fadeIn = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.5 }
};
const stagger = {
animate: {
transition: {
staggerChildren: 0.1
}
}
};
Tailwind Animations:
animate-pulse: Loading statesanimate-spin: Spinnersanimate-bounce: Call-to-action emphasis
Accesibilidad
Principios:
- Contraste mínimo 4.5:1 (WCAG AA)
- Navegación completa por teclado
- ARIA labels en todos los elementos interactivos
- Focus visible en todos los elementos
- Semántica HTML correcta
Implementación:
- Skip to main content link
- Landmarks (header, nav, main, footer)
- Headings jerárquicos (h1 → h2 → h3)
- Alt text en todas las imágenes
- Form labels asociados correctamente
Última actualización: Diciembre 2025