Landing page para préstamos con el saldo de una tarjeta de crédito
Demo • Cómo funciona • Estructura • Desarrollo • Diseño
Sitio de una sola página para un prestamista de Necochea, Buenos Aires. El negocio es simple: el cliente retira efectivo contra el saldo disponible de su tarjeta de crédito y lo devuelve en cuotas cuando le llega el resumen.
La página tiene que responder una sola pregunta, y responderla rápido: cuánto pago por mes y cuánto saldo necesito tener libre. Todo lo demás está subordinado a eso.
Note
Este es un trabajo de cliente ya finalizado, conservado como pieza de portafolio. Los botones de WhatsApp son de demostración y no enlazan con ningún número real.
- Tabla de valores con 15 montos y 3 plazos, generada en tiempo de carga desde una única tabla de tasas.
- Simulador para montos fuera de la tabla, con validación de mínimo y máximo.
- Cero dependencias y cero build. Se abre el
index.htmly funciona. - Responsive desde 320 px, con la columna de montos fija al desplazar la tabla horizontalmente.
- Accesible: navegación por teclado con foco visible, tabla con encabezados asociados, y
prefers-reduced-motionrespetado en todas las animaciones. - Contraste AA verificado en los 14 pares de color de la paleta.
Todo el sitio se alimenta de js/rates.js, que es la única fuente de verdad. La tabla de valores, el simulador y el ejemplo que aparece en la tarjeta del hero salen de la misma función: si cambia una tasa, cambian los tres a la vez.
const INTEREST_RATES = {
1: 0.75, // 75 % mensual
3: 0.33, // 33 % mensual
6: 0.2083334, // 20,83 % mensual
12: 0.15 // 15 % mensual
};
function calculateLoan(amount, terms) {
const monthlyRate = INTEREST_RATES[terms];
const balanceNeeded = amount * (1 + monthlyRate * terms);
const monthlyPayment = balanceNeeded / terms;
return {
balanceNeeded: Math.trunc(balanceNeeded),
monthlyPayment: Math.trunc(monthlyPayment)
};
}La tasa es simple, no compuesta: se multiplica por la cantidad de cuotas y se aplica una sola vez sobre el capital.
Para $300.000 en 6 cuotas:
| Concepto | Cálculo | Resultado |
|---|---|---|
| Saldo necesario | 300000 × (1 + 0,2083334 × 6) |
$675.000 |
| Cuota mensual | 675000 / 6 |
$112.500 |
El saldo necesario es cuánto tiene que haber disponible en la tarjeta, no cuánto se retira. Es la distinción que la tabla deja explícita en columnas separadas, porque es donde se confunde la gente.
Important
Para actualizar las tasas se toca únicamente js/rates.js. Ningún valor está escrito a mano en el HTML.
index.html Marcado completo; la marca va como <symbol> SVG reutilizado
css/
colors.css Tokens: paleta, tipografía, espaciado, sombras
main.css Base, secciones, botones, utilidades, movimiento reducido
navbar.css Barra fija con desenfoque y menú desplegable
hero.css Hero, tarjeta de crédito en CSS y sombras animadas
requirements.css Requisitos
cards.css Tarjetas aceptadas
services.css Tabla de valores y simulador
contact.css Pasos numerados y llamada a la acción
whatsapp.css Botón flotante
footer.css Pie de página
js/
rates.js Tasas, montos y cálculo (se carga primero, sin defer)
table.js Arma la tabla de valores
calculator.js Simulador y cifras de la tarjeta del hero
ui.js Menú, sección activa e inclinación de la tarjeta
assets/img/
logo/mark.svg Marca vectorizada desde el logo original
logo/favicon.svg Marca sobre cuadrado marino
logo/fondo.png Patrón de billetes, usado como textura de la tarjeta
tarjetas/ Logos de las tarjetas aceptadas
Las únicas peticiones externas son Google Fonts y Bootstrap Icons, ambas por CDN.
No hay nada que instalar. Para trabajar con rutas absolutas y evitar restricciones de file://, conviene levantar un servidor estático:
python3 -m http.server 8000Y abrir http://localhost:8000.
Cualquier alternativa sirve igual:
npx serve .Los botones apuntan a #contact. Hay cinco en el HTML —tres con clase .btn--whatsapp, el flotante .wa-float y el del pie— más el que arma calculator.js con el resultado de la simulación. Para enlazarlos a un número real hay que reemplazar el href por una URL de wa.me:
<a class="btn btn--whatsapp" href="https://wa.me/549XXXXXXXXXX?text=Hola!%20Quiero%20pedir%20un%20pr%C3%A9stamo"
target="_blank" rel="noopener">El resumen de tarjeta como lenguaje visual. Es el artefacto que el cliente realmente recibe y donde ve la deuda. La tabla lo imita: cifras monoespaciadas y tabulares, reglas finas, encabezado de dos filas que agrupa por plazo.
El cian solo para cifras accionables. Si algo está en cian es un número que importa o un botón que se puede tocar. Nunca es decoración. El saldo necesario, que es un requisito y no un pago, queda deliberadamente en segundo plano.
Tipografía de una fundidora argentina. Chivo para títulos, Archivo para texto y Chivo Mono para todas las cifras. Las tres son de Omnibus-Type, de Buenos Aires.
La numeración solo donde el orden es información. Los requisitos van con tildes porque son condiciones simultáneas. Los pasos de "cómo funciona" van numerados porque ahí el orden importa de verdad.
La marca es el logo original, vectorizado. El PNG de origen tenía el dibujo calado en el canal alfa. Se trazó con marching squares y se simplificó con Ramer-Douglas-Peucker: de 233 KB en .ico a 2,1 KB en SVG. El trazo se engrosó por dilatación de la máscara antes de vectorizar, para que la línea fina del original sobreviva a 16 px.
Desarrollado por Cesar Augusto Fernandez Carbonell.