Skip to content

Commit c3e17a3

Browse files
María Paz Arrieta LandazuriMaría Paz Arrieta Landazuri
María Paz Arrieta Landazuri
authored and
María Paz Arrieta Landazuri
committed
feat: update home page design - larger white box, adjusted text, removed balance box, redirect to account creation
1 parent 0713962 commit c3e17a3

File tree

2 files changed

+39
-45
lines changed

2 files changed

+39
-45
lines changed

‎frontend/src/app/aprende/herramientas/page.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,37 @@ export default function HerramientasPage() {
77
</h1>
88

99
<div className="space-y-6 w-full">
10+
{/* Simulador Principal */}
1011
<div className="bg-white p-8 rounded-2xl shadow-md border-2 border-gray-100 hover:border-orange-200 transition-all">
11-
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Calculadora de Pensión</h2>
12-
<p className="text-gray-600 mb-6">Calcula tu pensión estimada basada en tus aportes y años de servicio.</p>
13-
<button className="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors text-lg font-semibold shadow-md">
14-
Usar Calculadora
15-
</button>
12+
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Simulador de Pensión</h2>
13+
<p className="text-gray-600 mb-6">Calcula tu pensión estimada basada en tus aportes actuales y proyecta tu futuro previsional.</p>
14+
<div className="flex flex-col space-y-4">
15+
<input
16+
type="text"
17+
placeholder="Ingresa tu saldo AFP"
18+
className="w-full px-4 py-3 border border-gray-400 rounded-lg text-center text-lg focus:outline-none focus:ring-2 focus:ring-blue-400 placeholder:text-gray-700 text-gray-700"
19+
/>
20+
<button className="w-full bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors text-lg font-semibold shadow-md">
21+
Calcular Pensión
22+
</button>
23+
</div>
1624
</div>
1725

1826
<div className="bg-white p-8 rounded-2xl shadow-md border-2 border-gray-100 hover:border-orange-200 transition-all">
19-
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Simulador de Ahorro</h2>
27+
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Calculadora de Ahorro</h2>
2028
<p className="text-gray-600 mb-6">Simula diferentes escenarios de ahorro para tu jubilación.</p>
2129
<button className="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors text-lg font-semibold shadow-md">
2230
Iniciar Simulación
2331
</button>
2432
</div>
33+
34+
<div className="bg-white p-8 rounded-2xl shadow-md border-2 border-gray-100 hover:border-orange-200 transition-all">
35+
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Comparador de AFPs</h2>
36+
<p className="text-gray-600 mb-6">Compara las diferentes AFPs y encuentra la que mejor se adapta a tus necesidades.</p>
37+
<button className="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors text-lg font-semibold shadow-md">
38+
Comparar AFPs
39+
</button>
40+
</div>
2541
</div>
2642
</div>
2743
</div>

‎frontend/src/app/page.tsx‎

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import PensionSimulator from './components/PensionSimulator';
77
import PricingSection from './components/PricingSection';
88
import FAQSection from './components/FAQSection';
99
import Footer from './components/Footer';
10+
import Link from 'next/link';
1011

1112
// Valor UF actual (se podría actualizar con una API en producción)
1213
const UF_VALUE = 39000;
@@ -86,59 +87,36 @@ export default function Home() {
8687
const handleCalculate = () => {
8788
if (!saldo || isNaN(Number(saldo))) return;
8889
setIsCalculating(true);
89-
setResult(null); // Oculta el resultado anterior mientras calcula
90+
setResult(null);
9091
setTimeout(() => {
9192
setResult(calculateTotalPension(Number(saldo)));
9293
setIsCalculating(false);
9394
}, 3000);
9495
};
9596

9697
return (
97-
<div className="min-h-screen w-full bg-cover bg-center flex flex-col items-center justify-center" style={{ backgroundImage: 'url(/bg-hero.png)' }}>
98-
<div className="mt-8 bg-white rounded-3xl shadow-2xl px-8 py-10 max-w-lg w-full flex flex-col items-center border-2 border-gray-200" style={{ minHeight: 420 }}>
98+
<div className="min-h-screen w-full bg-cover bg-center flex flex-col items-center justify-center" style={{ backgroundImage: 'url(/bg-hero.png)', backgroundColor: 'rgba(255, 255, 255, 0.7)', backgroundBlendMode: 'overlay' }}>
99+
<div className="mt-8 bg-white rounded-3xl shadow-2xl px-12 py-16 max-w-2xl w-full flex flex-col items-center border-2 border-gray-200">
99100
{/* Header */}
100-
<div className="mb-6">
101-
<span className="text-3xl font-bold text-gray-700 mr-1">Me</span>
102-
<span className="text-3xl font-bold text-orange-400">Jubilo</span>
101+
<div className="mb-8">
102+
<span className="text-4xl font-bold text-gray-700 mr-1">Me</span>
103+
<span className="text-4xl font-bold text-orange-400">Jubilo</span>
103104
</div>
104105
{/* Main Title */}
105-
<h1 className="text-4xl md:text-5xl font-bold text-center text-gray-900 mb-2">
106-
Ya quieres <span className="text-orange-400">jubilar</span> ?
106+
<h1 className="text-5xl md:text-6xl font-bold text-center text-gray-900 mb-6">
107+
Toma el control de tus ahorros
107108
</h1>
108109
{/* Subtext */}
109-
<p className="text-lg text-center text-gray-700 mb-6">
110-
Descubre con cuánto $$<br />podrías jubilar <span className="font-bold">HOY</span>:
110+
<p className="text-2xl text-center text-gray-700 mb-10">
111+
Renta más. Paga menos comisión. Jubila mejor.
111112
</p>
112-
{/* Input and Button */}
113-
<input
114-
type="text"
115-
placeholder="Saldo AFP"
116-
value={saldo}
117-
onChange={e => {
118-
const value = e.target.value.replace(/[^0-9]/g, '');
119-
setSaldo(value);
120-
}}
121-
className="w-full max-w-xs px-4 py-3 mb-4 border border-gray-400 rounded-lg text-center text-lg focus:outline-none focus:ring-2 focus:ring-blue-400 placeholder:text-gray-700 text-gray-700"
122-
/>
123-
<button
124-
className="w-full max-w-xs bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-full text-lg shadow-md transition-colors flex items-center justify-center mb-2"
125-
onClick={handleCalculate}
113+
{/* Button */}
114+
<Link
115+
href="/entra"
116+
className="w-full max-w-md bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-full text-xl shadow-md transition-colors flex items-center justify-center"
126117
>
127-
Quiero saber <span className="ml-2">👀</span>
128-
</button>
129-
{/* Result Box o Calculando */}
130-
{isCalculating ? (
131-
<CalculandoScreen />
132-
) : result && (
133-
<div className="mt-6 w-full max-w-xs bg-blue-50 border-2 border-blue-200 rounded-2xl p-5 text-center shadow-lg animate-fade-in">
134-
<h2 className="text-xl font-bold text-blue-900 mb-2">¡Tu pensión estimada!</h2>
135-
<div className="text-lg text-gray-700 mb-1 flex justify-between"><span>Renta Vitalicia:</span> <span className="font-semibold">${result.rentaVitalicia.toLocaleString('es-CL')}</span></div>
136-
<div className="text-lg text-gray-700 mb-1 flex justify-between"><span>Seguro Social:</span> <span className="font-semibold">${result.seguroSocial.toLocaleString('es-CL')}</span></div>
137-
<div className="text-lg text-gray-700 mb-1 flex justify-between"><span>PGU:</span> <span className="font-semibold">${result.pgu.toLocaleString('es-CL')}</span></div>
138-
<hr className="my-2 border-blue-200" />
139-
<div className="text-lg font-bold text-blue-800 flex justify-between"><span>Total:</span> <span>${result.total.toLocaleString('es-CL')}</span></div>
140-
</div>
141-
)}
118+
Descubre cómo
119+
</Link>
142120
</div>
143121
</div>
144122
);

0 commit comments

Comments
 (0)