Skip to content

Commit 08da0e0

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: add pricing section with three plans
1 parent 2262646 commit 08da0e0

File tree

1 file changed

+187
-0
lines changed

1 file changed

+187
-0
lines changed

‎frontend/src/app/page.tsx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,193 @@ export default function Home() {
250250
</main>
251251
</section>
252252

253+
{/* Pricing Section */}
254+
<section className="py-20 bg-gray-50">
255+
<div className="container mx-auto px-4">
256+
<div className="text-center mb-16">
257+
<h2 className="text-4xl font-bold text-gray-900 mb-4">Planes y Precios</h2>
258+
<p className="text-xl text-gray-600">
259+
Elige el plan que mejor se adapte a tus necesidades y comienza a optimizar tu futuro previsional hoy mismo
260+
</p>
261+
</div>
262+
263+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
264+
{/* Plan Individual */}
265+
<div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-200">
266+
<div className="text-center">
267+
<h3 className="text-2xl font-bold text-gray-900 mb-4">Individual</h3>
268+
<div className="text-4xl font-bold text-gray-900 mb-6">$0<span className="text-lg font-normal text-gray-600">/mes</span></div>
269+
<p className="text-gray-600 mb-8">Funcionalidades básicas para comenzar</p>
270+
<button className="w-full bg-blue-900 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-800 transition-colors">
271+
Registrarse
272+
</button>
273+
</div>
274+
<ul className="mt-8 space-y-4">
275+
<li className="flex items-center text-gray-600">
276+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
277+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
278+
</svg>
279+
Simulador de reforma previsional
280+
</li>
281+
<li className="flex items-center text-gray-600">
282+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
283+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
284+
</svg>
285+
Acceso a tu perfil con situación previsional
286+
</li>
287+
<li className="flex items-center text-gray-600">
288+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
289+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
290+
</svg>
291+
Conexión con tu AFP
292+
</li>
293+
<li className="flex items-center text-gray-600">
294+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
295+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
296+
</svg>
297+
Acceso completo al leaderboard
298+
</li>
299+
</ul>
300+
</div>
301+
302+
{/* Plan Pro */}
303+
<div className="bg-white rounded-2xl shadow-xl p-8 border-2 border-blue-900 transform scale-105">
304+
<div className="text-center">
305+
<div className="bg-blue-900 text-white text-sm font-semibold px-4 py-1 rounded-full inline-block mb-4">
306+
Popular
307+
</div>
308+
<h3 className="text-2xl font-bold text-gray-900 mb-4">Pro</h3>
309+
<div className="text-4xl font-bold text-gray-900 mb-2">$5,000<span className="text-lg font-normal text-gray-600">/mes</span></div>
310+
<div className="text-sm text-green-600 font-semibold mb-2">50% descuento</div>
311+
<p className="text-sm text-gray-500 mb-4">*Precio especial para los primeros 100 usuarios</p>
312+
<p className="text-gray-600 mb-8">Funcionalidades avanzadas para optimizar</p>
313+
<button className="w-full bg-blue-900 text-white px-6 py-3 rounded-full font-semibold hover:bg-blue-800 transition-colors">
314+
Elegir Plan Pro
315+
</button>
316+
</div>
317+
<ul className="mt-8 space-y-4">
318+
<li className="flex items-center text-gray-600">
319+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
320+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
321+
</svg>
322+
Simulador de reforma previsional
323+
</li>
324+
<li className="flex items-center text-gray-600">
325+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
326+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
327+
</svg>
328+
Acceso a tu perfil con situación previsional
329+
</li>
330+
<li className="flex items-center text-gray-600">
331+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
332+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
333+
</svg>
334+
Conexión con tu AFP
335+
</li>
336+
<li className="flex items-center text-gray-600">
337+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
338+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
339+
</svg>
340+
Acceso completo al leaderboard
341+
</li>
342+
<li className="flex items-center text-gray-600">
343+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
344+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
345+
</svg>
346+
Notificaciones y alertas semanales
347+
</li>
348+
<li className="flex items-center text-gray-600">
349+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
350+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
351+
</svg>
352+
Análisis detallado de jubilación anticipada
353+
</li>
354+
<li className="flex items-center text-gray-600">
355+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
356+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
357+
</svg>
358+
Planificación de Excedentes de Libre Disposición
359+
</li>
360+
<li className="flex items-center text-gray-600">
361+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
362+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
363+
</svg>
364+
Asesoría previsional trimestral
365+
</li>
366+
</ul>
367+
</div>
368+
369+
{/* Plan Plus */}
370+
<div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-200">
371+
<div className="text-center">
372+
<div className="bg-gray-900 text-white text-sm font-semibold px-4 py-1 rounded-full inline-block mb-4">
373+
Próximamente
374+
</div>
375+
<h3 className="text-2xl font-bold text-gray-900 mb-4">Plus</h3>
376+
<div className="text-4xl font-bold text-gray-900 mb-6">$20,000<span className="text-lg font-normal text-gray-600">/mes</span></div>
377+
<p className="text-gray-600 mb-8">Experiencia premium con asesoría</p>
378+
<button className="w-full bg-gray-300 text-gray-600 px-6 py-3 rounded-full font-semibold cursor-not-allowed">
379+
Próximamente
380+
</button>
381+
</div>
382+
<ul className="mt-8 space-y-4">
383+
<li className="flex items-center text-gray-600">
384+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
385+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
386+
</svg>
387+
Simulador de reforma previsional
388+
</li>
389+
<li className="flex items-center text-gray-600">
390+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
391+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
392+
</svg>
393+
Acceso a tu perfil con situación previsional
394+
</li>
395+
<li className="flex items-center text-gray-600">
396+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
397+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
398+
</svg>
399+
Conexión con tu AFP
400+
</li>
401+
<li className="flex items-center text-gray-600">
402+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
403+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
404+
</svg>
405+
Acceso completo al leaderboard
406+
</li>
407+
<li className="flex items-center text-gray-600">
408+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
409+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
410+
</svg>
411+
Notificaciones y alertas semanales
412+
</li>
413+
<li className="flex items-center text-gray-600">
414+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
415+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
416+
</svg>
417+
Análisis detallado de jubilación anticipada
418+
</li>
419+
<li className="flex items-center text-gray-600">
420+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
421+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
422+
</svg>
423+
Planificación de Excedentes de Libre Disposición
424+
</li>
425+
<li className="flex items-center text-gray-600">
426+
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
427+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
428+
</svg>
429+
Asesoría previsional trimestral
430+
</li>
431+
</ul>
432+
<div className="mt-8 text-center text-gray-500 text-sm">
433+
Estamos trabajando en este plan. ¡Muy pronto disponible!
434+
</div>
435+
</div>
436+
</div>
437+
</div>
438+
</section>
439+
253440
{/* Footer */}
254441
<footer className="container mx-auto px-4 py-12 mt-16 border-t border-blue-800">
255442
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">

0 commit comments

Comments
 (0)