Skip to content

Commit 6aa4262

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: fondo hero con imagen, nuevo copy y mejoras de footer
1 parent 7120361 commit 6aa4262

File tree

3 files changed

+167
-107
lines changed

3 files changed

+167
-107
lines changed

‎frontend/public/bg-hero.png‎

163 KB
Loading

‎frontend/src/app/page.tsx‎

Lines changed: 148 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export default function Home() {
7171
{
7272
label: 'Proyección de Pensión',
7373
data: calcularProyección(),
74-
borderColor: 'rgb(59, 130, 246)',
75-
backgroundColor: 'rgba(59, 130, 246, 0.1)',
74+
borderColor: '#00A19C',
75+
backgroundColor: 'rgba(0, 161, 156, 0.1)',
7676
fill: true,
7777
tension: 0.4,
7878
},
@@ -122,7 +122,7 @@ export default function Home() {
122122
};
123123

124124
return (
125-
<div className="min-h-screen bg-gradient-to-br from-blue-900 to-blue-800">
125+
<div className="min-h-screen">
126126
{/* Header */}
127127
<header className="container mx-auto px-4 py-6">
128128
<nav className="flex justify-between items-center">
@@ -136,122 +136,163 @@ export default function Home() {
136136
</nav>
137137
</header>
138138

139-
{/* Hero Section */}
140-
<main className="container mx-auto px-4 py-16">
141-
<div className="max-w-4xl mx-auto text-center space-y-8">
142-
<h1 className="text-7xl font-bold text-white mb-4 tracking-tight">
143-
Simula tu pensión
144-
</h1>
145-
<p className="text-xl text-blue-100 mb-8">
146-
Descubre cuánto podrías recibir en tu jubilación y aprende cómo mejorarla
147-
</p>
139+
{/* Hero Section con imagen de fondo */}
140+
<section className="w-full bg-cover bg-center" style={{ backgroundImage: 'url(/bg-hero.png)' }}>
141+
<main className="container mx-auto px-4 py-16">
142+
<div className="max-w-4xl mx-auto text-center space-y-8">
143+
<h1 className="text-7xl font-bold text-white mb-4 tracking-tight">
144+
¿Ya quieres jubilar?
145+
</h1>
146+
<p className="text-xl text-blue-100 mb-8">
147+
Descubre cuánto $$ podrías obtener si jubilaras HOY:
148+
</p>
148149

149-
{/* Simulator Card */}
150-
<div className="bg-white rounded-2xl p-8 shadow-xl">
151-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
152-
<div className="space-y-4">
153-
<div>
154-
<label className="block text-gray-700 text-sm font-medium mb-2">
155-
Edad actual
156-
</label>
157-
<input
158-
type="number"
159-
name="edad"
160-
value={formData.edad}
161-
onChange={handleInputChange}
162-
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
163-
placeholder="Ej: 45"
164-
/>
150+
{/* Simulator Card */}
151+
<div className="bg-white rounded-2xl p-8 shadow-xl">
152+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
153+
<div className="space-y-4">
154+
<div>
155+
<label className="block text-gray-700 text-sm font-medium mb-2">
156+
Edad actual
157+
</label>
158+
<input
159+
type="number"
160+
name="edad"
161+
value={formData.edad}
162+
onChange={handleInputChange}
163+
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
164+
placeholder="Ej: 45"
165+
/>
166+
</div>
167+
<div>
168+
<label className="block text-gray-700 text-sm font-medium mb-2">
169+
Salario actual
170+
</label>
171+
<input
172+
type="number"
173+
name="salario"
174+
value={formData.salario}
175+
onChange={handleInputChange}
176+
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
177+
placeholder="Ej: 3000000"
178+
/>
179+
</div>
165180
</div>
166-
<div>
167-
<label className="block text-gray-700 text-sm font-medium mb-2">
168-
Salario actual
169-
</label>
170-
<input
171-
type="number"
172-
name="salario"
173-
value={formData.salario}
174-
onChange={handleInputChange}
175-
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
176-
placeholder="Ej: 3000000"
177-
/>
181+
<div className="space-y-4">
182+
<div>
183+
<label className="block text-gray-700 text-sm font-medium mb-2">
184+
Años cotizados
185+
</label>
186+
<input
187+
type="number"
188+
name="añosCotizados"
189+
value={formData.añosCotizados}
190+
onChange={handleInputChange}
191+
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
192+
placeholder="Ej: 15"
193+
/>
194+
</div>
195+
<div>
196+
<label className="block text-gray-700 text-sm font-medium mb-2">
197+
AFP actual
198+
</label>
199+
<select
200+
name="afp"
201+
value={formData.afp}
202+
onChange={handleInputChange}
203+
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
204+
>
205+
<option value="capital">Capital</option>
206+
<option value="cuprum">Cuprum</option>
207+
<option value="habitat">Habitat</option>
208+
<option value="modelo">Modelo</option>
209+
<option value="planvital">PlanVital</option>
210+
<option value="provida">ProVida</option>
211+
</select>
212+
</div>
178213
</div>
179214
</div>
180-
<div className="space-y-4">
181-
<div>
182-
<label className="block text-gray-700 text-sm font-medium mb-2">
183-
Años cotizados
184-
</label>
185-
<input
186-
type="number"
187-
name="añosCotizados"
188-
value={formData.añosCotizados}
189-
onChange={handleInputChange}
190-
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
191-
placeholder="Ej: 15"
192-
/>
193-
</div>
194-
<div>
195-
<label className="block text-gray-700 text-sm font-medium mb-2">
196-
AFP actual
197-
</label>
198-
<select
199-
name="afp"
200-
value={formData.afp}
201-
onChange={handleInputChange}
202-
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
203-
>
204-
<option value="capital">Capital</option>
205-
<option value="cuprum">Cuprum</option>
206-
<option value="habitat">Habitat</option>
207-
<option value="modelo">Modelo</option>
208-
<option value="planvital">PlanVital</option>
209-
<option value="provida">ProVida</option>
210-
</select>
215+
<button
216+
onClick={handleCalculate}
217+
className="w-full mt-8 bg-blue-900 text-white px-8 py-4 rounded-full text-xl font-semibold hover:bg-blue-800 transition-colors duration-300 shadow-lg hover:shadow-xl"
218+
>
219+
Actualizar simulación
220+
</button>
221+
222+
{/* Gráfico de Simulación */}
223+
{showChart && (
224+
<div className="mt-8 p-4 bg-white rounded-xl">
225+
<Line options={chartOptions} data={chartData} />
226+
<div className="mt-4 text-gray-600 text-sm">
227+
<p>* Esta es una proyección estimada basada en los datos ingresados</p>
228+
<p>* Considera un incremento anual del 3% en el salario y una rentabilidad del 5% anual</p>
229+
</div>
211230
</div>
212-
</div>
231+
)}
213232
</div>
214-
<button
215-
onClick={handleCalculate}
216-
className="w-full mt-8 bg-blue-900 text-white px-8 py-4 rounded-full text-xl font-semibold hover:bg-blue-800 transition-colors duration-300 shadow-lg hover:shadow-xl"
217-
>
218-
Actualizar simulación
219-
</button>
220233

221-
{/* Gráfico de Simulación */}
222-
{showChart && (
223-
<div className="mt-8 p-4 bg-white rounded-xl">
224-
<Line options={chartOptions} data={chartData} />
225-
<div className="mt-4 text-gray-600 text-sm">
226-
<p>* Esta es una proyección estimada basada en los datos ingresados</p>
227-
<p>* Considera un incremento anual del 3% en el salario y una rentabilidad del 5% anual</p>
228-
</div>
234+
{/* Features Section */}
235+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
236+
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white">
237+
<h3 className="text-xl font-semibold mb-2">Simulación Precisa</h3>
238+
<p className="text-blue-100">Calcula tu pensión estimada con datos reales del mercado</p>
239+
</div>
240+
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white">
241+
<h3 className="text-xl font-semibold mb-2">Compara AFPs</h3>
242+
<p className="text-blue-100">Encuentra la mejor AFP para maximizar tu pensión</p>
243+
</div>
244+
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white">
245+
<h3 className="text-xl font-semibold mb-2">Recomendaciones</h3>
246+
<p className="text-blue-100">Recibe consejos personalizados para mejorar tu jubilación</p>
229247
</div>
230-
)}
231-
</div>
232-
233-
{/* Features Section */}
234-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
235-
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white">
236-
<h3 className="text-xl font-semibold mb-2">Simulación Precisa</h3>
237-
<p className="text-blue-100">Calcula tu pensión estimada con datos reales del mercado</p>
238-
</div>
239-
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white">
240-
<h3 className="text-xl font-semibold mb-2">Compara AFPs</h3>
241-
<p className="text-blue-100">Encuentra la mejor AFP para maximizar tu pensión</p>
242-
</div>
243-
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-white">
244-
<h3 className="text-xl font-semibold mb-2">Recomendaciones</h3>
245-
<p className="text-blue-100">Recibe consejos personalizados para mejorar tu jubilación</p>
246248
</div>
247249
</div>
248-
</div>
249-
</main>
250+
</main>
251+
</section>
250252

251253
{/* Footer */}
252-
<footer className="container mx-auto px-4 py-8 mt-16 border-t border-blue-800">
253-
<div className="text-center text-blue-200">
254-
<p>© 2024 MeJubilo. Todos los derechos reservados.</p>
254+
<footer className="container mx-auto px-4 py-12 mt-16 border-t border-blue-800">
255+
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
256+
<div className="space-y-4">
257+
<h3 className="text-white text-xl font-bold">MeJubilo</h3>
258+
<p className="text-blue-200 text-sm">Tu compañero en el camino hacia una jubilación segura y tranquila.</p>
259+
</div>
260+
<div>
261+
<h4 className="text-white font-semibold mb-4">Enlaces Rápidos</h4>
262+
<ul className="space-y-2">
263+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Simulador de Pensión</a></li>
264+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Comparador de AFPs</a></li>
265+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Blog</a></li>
266+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Preguntas Frecuentes</a></li>
267+
</ul>
268+
</div>
269+
<div>
270+
<h4 className="text-white font-semibold mb-4">Recursos</h4>
271+
<ul className="space-y-2">
272+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Guía de Jubilación</a></li>
273+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Calculadoras</a></li>
274+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Glosario</a></li>
275+
<li><a href="#" className="text-blue-200 hover:text-white transition-colors">Noticias</a></li>
276+
</ul>
277+
</div>
278+
<div>
279+
<h4 className="text-white font-semibold mb-4">Contacto</h4>
280+
<ul className="space-y-2">
281+
<li className="text-blue-200">contacto@mejubilo.cl</li>
282+
<li className="text-blue-200">+56 9 1234 5678</li>
283+
<li className="text-blue-200">Lunes a Viernes 9:00 - 18:00</li>
284+
</ul>
285+
</div>
286+
</div>
287+
<div className="border-t border-blue-800 mt-8 pt-8">
288+
<div className="flex flex-col md:flex-row justify-between items-center">
289+
<p className="text-blue-200 text-sm">© 2024 MeJubilo. Todos los derechos reservados.</p>
290+
<div className="flex space-x-6 mt-4 md:mt-0">
291+
<a href="#" className="text-blue-200 hover:text-white text-sm transition-colors">Términos y Condiciones</a>
292+
<a href="#" className="text-blue-200 hover:text-white text-sm transition-colors">Política de Privacidad</a>
293+
<a href="#" className="text-blue-200 hover:text-white text-sm transition-colors">Cookies</a>
294+
</div>
295+
</div>
255296
</div>
256297
</footer>
257298
</div>

‎frontend/tailwind.config.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5+
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
6+
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
7+
],
8+
theme: {
9+
extend: {
10+
colors: {
11+
'pensionfi': {
12+
green: '#00A19C', // Color verde de Pensionfi.com
13+
'green-dark': '#007A76', // Versión más oscura del verde
14+
},
15+
},
16+
},
17+
},
18+
plugins: [],
19+
}

0 commit comments

Comments
 (0)