91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { ParticipaForm } from "@/components/forms/ParticipaForm";
|
|
import { FiCheck } from "react-icons/fi";
|
|
import { useLanguage } from "@/context/LanguageContext";
|
|
|
|
export default function ParticipaPage() {
|
|
const { t } = useLanguage();
|
|
|
|
// Mapeo dinámico de los beneficios desde el diccionario
|
|
const beneficios = [
|
|
{
|
|
titulo: t.participa.benefits.b1Title,
|
|
desc: t.participa.benefits.b1Desc,
|
|
},
|
|
{
|
|
titulo: t.participa.benefits.b2Title,
|
|
desc: t.participa.benefits.b2Desc,
|
|
},
|
|
{
|
|
titulo: t.participa.benefits.b3Title,
|
|
desc: t.participa.benefits.b3Desc,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="w-full flex-grow flex flex-col lg:flex-row min-h-[calc(100vh-80px)]">
|
|
|
|
{/* Columna Informativa (Izquierda) */}
|
|
<div className="w-full lg:w-5/12 bg-ice/20 border-r border-crisp p-8 md:p-16 lg:p-20 flex flex-col justify-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<Badge>{t.participa.badge}</Badge>
|
|
|
|
<h1 className="text-[40px] md:text-[56px] font-extrabold text-navy leading-[1.05] tracking-tight mb-6">
|
|
{/* Usamos el título del diccionario */}
|
|
{t.participa.heroTitle.split(' ').slice(0, -2).join(' ')} <br />
|
|
<span className="text-ocean">
|
|
{t.participa.heroTitle.split(' ').slice(-2).join(' ')}
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-[16px] md:text-[18px] text-navy/70 leading-[1.6] font-medium mb-12 max-w-md">
|
|
{t.participa.heroDesc}
|
|
</p>
|
|
|
|
<div className="space-y-8">
|
|
{beneficios.map((item, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 + idx * 0.1 }}
|
|
className="flex items-start gap-4"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-white border border-crisp flex items-center justify-center shrink-0 mt-1">
|
|
<FiCheck className="text-ocean text-lg stroke-[3]" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-extrabold text-[16px] text-navy">{item.titulo}</h4>
|
|
<p className="text-[14px] text-navy/60 font-medium mt-1">{item.desc}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Columna Formulario (Derecha) */}
|
|
<div className="w-full lg:w-7/12 bg-white p-8 md:p-16 lg:p-20 flex flex-col justify-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="max-w-xl w-full mx-auto lg:mx-0"
|
|
>
|
|
<h3 className="text-[24px] font-extrabold text-navy mb-8">
|
|
{t.participa.formTitle}
|
|
</h3>
|
|
|
|
<ParticipaForm />
|
|
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |