first commit

app/participa/page.tsx

@@ -0,0 +1,91 @@
+"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>
+  );
+}