first commit

app/contacto/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/Badge";
+import { ContactoForm } from "@/components/forms/ContactoForm";
+import { FiMapPin, FiMail, FiPhone } from "react-icons/fi";
+import { useLanguage } from "@/context/LanguageContext";
+
+export default function ContactoPage() {
+  const { t } = useLanguage();
+
+  const infoContacto = [
+    {
+      icon: <FiMapPin />,
+      label: t.contacto.info.address,
+      value: "Av. de Madrid, 138, Sants-Montjuïc, 08028 Barcelona",
+      href: "https://www.google.com/maps/search/?api=1&query=Av.+de+Madrid,+138,+08028+Barcelona",
+    },
+    {
+      icon: <FiMail />,
+      label: t.contacto.info.email,
+      value: "jordi@itemopina.com",
+      href: "mailto:jordi@itemopina.com",
+      isEmail: true,
+    },
+    {
+      icon: <FiPhone />,
+      label: t.contacto.info.phone,
+      value: "650 066 923",
+      href: "tel:+34650066923",
+    },
+  ];
+
+  // Lógica para resaltar la última palabra del título en color ocean
+  const titleWords = t.contacto.heroTitle.split(" ");
+  const lastWord = titleWords.pop();
+  const mainTitle = titleWords.join(" ");
+
+  return (
+    <section className="w-full flex-grow py-16 md:py-24">
+      <div className="max-w-7xl mx-auto px-6 lg:px-12">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
+          
+          {/* Columna de Información */}
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="lg:col-span-5 flex flex-col justify-start"
+          >
+            <Badge>{t.contacto.badge || "Contacto Directo"}</Badge>
+
+            <h1 className="text-[48px] md:text-[64px] font-extrabold text-navy leading-[1.05] tracking-tight mb-6">
+              {mainTitle} <br />
+              <span className="text-ocean">{lastWord}</span>
+            </h1>
+            
+            <p className="text-[16px] text-navy/70 leading-[1.6] font-medium mb-12 max-w-md">
+              {t.contacto.heroDesc}
+            </p>
+
+            <div className="space-y-8  pt-8">
+              {infoContacto.map((item, idx) => (
+                <div key={idx}>
+                  <h4 className="text-[13px] font-extrabold text-sky uppercase tracking-widest mb-2 flex items-center gap-2">
+                    <span className="text-ocean">{item.icon}</span>
+                    {item.label}
+                  </h4>
+                  <a 
+                    href={item.href}
+                    target={item.href.startsWith("http") ? "_blank" : undefined}
+                    rel="noopener noreferrer"
+                    className={`text-navy font-bold leading-relaxed hover:text-ocean transition-colors ${
+                      item.isEmail ? "text-[18px] text-ocean" : "text-[16px]"
+                    }`}
+                  >
+                    {item.value}
+                  </a>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Columna del Formulario */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="lg:col-span-7 bg-white rounded-[32px] border border-crisp p-8 md:p-12 lg:p-16"
+          >
+            <h3 className="text-[24px] font-extrabold text-navy mb-8">
+              {t.contacto.form.title}
+            </h3>
+            <ContactoForm />
+          </motion.div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

app/globals.css

@@ -1,26 +1,28 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --color-navy: #03045E;
+  --color-ocean: #0077B6;
+  --color-sky: #00B4D8;
+  --color-powder: #90E0EF;
+  --color-ice: #CAF0F8;
+  --font-sans: 'Manrope', sans-serif;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer base {
+  /* Esto elimina la línea azul en todos los navegadores */
+  *, *:focus, *:active, *:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+    ring: 0 !important;
+  }
+  
+  input, textarea, select, button {
+    outline: none !important;
+    box-shadow: none !important;
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+@utility border-crisp {
+  border: 1px solid rgba(202, 240, 248, 0.6);
+}

app/insights/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+import { Badge } from "@/components/ui/Badge";
+import { Card } from "@/components/ui/Card";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useLanguage } from "@/context/LanguageContext";
+
+export default function InsightsPage() {
+  const { t, locale } = useLanguage();
+
+  // Mapeo de meses para las fechas de los artículos
+  const months = {
+    es: { mayo: "Mayo", abril: "Abril", marzo: "Marzo" },
+    ca: { mayo: "Maig", abril: "Abril", marzo: "Març" },
+    en: { mayo: "May", abril: "April", marzo: "March" }
+  };
+
+  const articulos = [
+    {
+      titulo: locale === 'en' ? "The new post-pandemic consumer in Spain" : 
+              locale === 'ca' ? "El nou consumidor post-pandèmia a Espanya" : 
+              "El nuevo consumidor post-pandemia en España",
+      categoria: t.insights.categories.tendencias,
+      imagen: "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop",
+      fecha: `${months[locale].mayo} 2026`,
+      size: "large"
+    },
+    {
+      titulo: locale === 'en' ? "Agile methodologies in fieldwork" : 
+              locale === 'ca' ? "Metodologies àgils en el treball de camp" : 
+              "Metodologías ágiles en el trabajo de campo",
+      categoria: t.insights.categories.innovacion,
+      imagen: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop",
+      fecha: `${months[locale].abril} 2026`,
+      size: "small"
+    },
+    {
+      titulo: locale === 'en' ? "Mystery Shopping: Beyond compliance" : 
+              locale === 'ca' ? "Mistery Shopping: Més enllà del compliment" : 
+              "Mistery Shopping: Más allá del cumplimiento",
+      categoria: t.insights.categories.estrategia,
+      imagen: "https://images.unsplash.com/photo-1534452203293-494d7ddbf7e0?q=80&w=2072&auto=format&fit=crop",
+      fecha: `${months[locale].marzo} 2026`,
+      size: "small"
+    }
+  ];
+
+  // Dividimos el título para aplicar el color al final
+  const titleParts = t.insights.title.split('&');
+
+  return (
+    <section className="max-w-7xl mx-auto px-6 lg:px-12 py-20">
+      <div className="mb-16">
+        <Badge>{t.insights.badge}</Badge>
+        <h1 className="text-[48px] md:text-[64px] font-extrabold text-navy leading-[1.05] tracking-tight mt-6">
+          {titleParts[0]} & <br /> <span className="text-ocean">{titleParts[1]}</span>
+        </h1>
+        <p className="text-[18px] text-navy/70 font-medium mt-8 max-w-2xl">
+          {t.insights.description}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {articulos.map((item, idx) => (
+          <motion.div
+            key={idx}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: idx * 0.1 }}
+            className={item.size === "large" ? "md:col-span-2" : "md:col-span-1"}
+          >
+            <Card variant="white" className="p-0 overflow-hidden h-full flex flex-col group cursor-pointer border-crisp hover:border-ocean transition-all">
+              <div className="relative h-64 w-full overflow-hidden">
+                <Image 
+                  src={item.imagen} 
+                  alt={item.titulo} 
+                  fill 
+                  className="object-cover group-hover:scale-105 transition-transform duration-500"
+                />
+                <div className="absolute top-4 left-4">
+                  <span className="bg-white/90 backdrop-blur text-ocean text-[10px] font-extrabold px-3 py-1 rounded-full uppercase tracking-widest">
+                    {item.categoria}
+                  </span>
+                </div>
+              </div>
+              <div className="p-8">
+                <span className="text-navy/40 text-[12px] font-bold">{item.fecha}</span>
+                <h3 className="text-[22px] font-extrabold text-navy mt-2 leading-tight group-hover:text-ocean transition-colors">
+                  {item.titulo}
+                </h3>
+                <div className="mt-6 flex items-center text-ocean font-bold text-[14px]">
+                  {t.insights.readMore}
+                  <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
+                </div>
+              </div>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/layout.tsx

@@ -1,20 +1,15 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Manrope } from "next/font/google";
 import "./globals.css";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { LanguageProvider } from "@/context/LanguageContext";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const manrope = Manrope({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ITEM OPINA | Inteligencia de Mercado",
+  description: "Estudios de mercado y consultoría con rigor metodológico.",
 };
 
 export default function RootLayout({
@@ -23,11 +18,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="es">
+      <body className={`${manrope.className} antialiased flex flex-col min-h-screen`}>
+        <LanguageProvider>
+          <Navbar />
+          <main className="flex-grow">
+            {children}
+          </main>
+          <Footer />
+        </LanguageProvider>
+      </body>
     </html>
   );
-}
+}

app/nosotros/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/Badge";
+import { Card } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import Link from "next/link";
+import { useLanguage } from "@/context/LanguageContext";
+
+export default function NosotrosPage() {
+  const { t, locale } = useLanguage();
+
+  // Dividimos el título para aplicar el color al final (Desde 2004 / Des de 2004 / Since 2004)
+  const titleParts = t.nosotros.title.split('.');
+
+  return (
+    <div className="w-full">
+      {/* Hero Narrativo */}
+      <section className="max-w-5xl mx-auto px-6 lg:px-12 pt-24 pb-20 md:pt-32 md:pb-24 text-center">
+        <Badge>{t.nosotros.badge}</Badge>
+
+        <h1 className="text-[48px] md:text-[64px] lg:text-[80px] font-extrabold text-navy leading-[1.00] tracking-tight mb-8">
+          {titleParts[0]}.<br />
+          <span className="text-ocean">{titleParts[1]}</span>
+        </h1>
+        
+        <p className="text-[18px] md:text-[22px] text-navy/70 leading-[1.6] font-medium max-w-3xl mx-auto">
+          {t.nosotros.desc}
+        </p>
+      </section>
+
+      {/* Sección Historia (Layout Asimétrico) */}
+      <section className="w-full bg-ice/10 border-t border-crisp py-24">
+        <div className="max-w-7xl mx-auto px-6 lg:px-12 flex flex-col md:flex-row gap-16 lg:gap-24">
+          
+          <div className="md:w-1/3">
+            <div className="sticky top-32">
+              <h2 className="text-[32px] md:text-[40px] font-extrabold text-navy leading-[1.1] mb-6">
+                {t.nosotros.history.title}
+              </h2>
+              <p className="text-[16px] text-navy/60 font-medium leading-[1.6]">
+                {locale === 'en' ? "Get to know us. From our foundation in Barcelona to our national consolidation." : 
+                 locale === 'ca' ? "Coneix-nos. Des de la nostra fundació a Barcelona fins a la nostra consolidació nacional." : 
+                 "Conócenos. Desde nuestra fundación en Barcelona hasta nuestra consolidación a nivel nacional."}
+              </p>
+            </div>
+          </div>
+
+          <div className="md:w-2/3 space-y-10 text-[18px] text-navy/80 font-medium leading-[1.7]">
+            <motion.p 
+              initial={{ opacity: 0, y: 10 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+            >
+              {t.nosotros.history.p1}
+            </motion.p>
+            <motion.p 
+              initial={{ opacity: 0, y: 10 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.1 }}
+            >
+              {t.nosotros.history.p2}
+            </motion.p>
+            <motion.p 
+              initial={{ opacity: 0, y: 10 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.2 }}
+            >
+              {t.nosotros.history.p3}
+            </motion.p>
+          </div>
+        </div>
+      </section>
+
+      {/* Sección Misión con Cards horizontales */}
+      <section className="w-full bg-white pt-24 pb-12 border-t border-crisp">
+        <div className="max-w-7xl mx-auto px-6 lg:px-12">
+          <h2 className="text-[14px] font-extrabold tracking-widest uppercase text-ocean mb-12">
+            {locale === 'en' ? "Our Mission" : locale === 'ca' ? "La nostra Missió" : "Nuestra Misión"}
+          </h2>
+
+          <div className="space-y-6">
+            <Card variant="none" className="flex-row items-center gap-12 group py-12" delay={0.1}>
+              <div className="text-[24px] font-extrabold text-sky group-hover:text-ocean transition-colors">01.</div>
+              <div className="flex-1 grid md:grid-cols-3 gap-6 items-center">
+                <h3 className="text-[28px] font-extrabold text-navy">{t.nosotros.mission.m1Title}</h3>
+                <p className="md:col-span-2 text-[16px] text-navy/70 font-medium leading-[1.6]">
+                  {t.nosotros.mission.m1Desc}
+                </p>
+              </div>
+            </Card>
+
+            <Card variant="none" className="flex-row items-center gap-12 group py-12" delay={0.2}>
+              <div className="text-[24px] font-extrabold text-sky group-hover:text-ocean transition-colors">02.</div>
+              <div className="flex-1 grid md:grid-cols-3 gap-6 items-center">
+                <h3 className="text-[28px] font-extrabold text-navy">{t.nosotros.mission.m2Title}</h3>
+                <p className="md:col-span-2 text-[16px] text-navy/70 font-medium leading-[1.6]">
+                  {t.nosotros.mission.m2Desc}
+                </p>
+              </div>
+            </Card>
+
+            <Card variant="none" className="flex-row items-center gap-12 group py-12 border-b border-crisp" delay={0.3}>
+              <div className="text-[24px] font-extrabold text-sky group-hover:text-ocean transition-colors">03.</div>
+              <div className="flex-1 grid md:grid-cols-3 gap-6 items-center">
+                <h3 className="text-[28px] font-extrabold text-navy">{t.nosotros.mission.m3Title}</h3>
+                <p className="md:col-span-2 text-[16px] text-navy/70 font-medium leading-[1.6]">
+                  {t.nosotros.mission.m3Desc}
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Final */}
+      <section className="w-full bg-white py-24">
+        <div className="max-w-7xl mx-auto px-6 lg:px-12">
+          <div className="w-full bg-navy rounded-[32px] p-12 md:p-20 text-center flex flex-col items-center">
+            <h2 className="text-[40px] md:text-[56px] font-extrabold text-white tracking-tight leading-[1.1] mb-6 max-w-2xl">
+              {locale === 'en' ? "A team ready to understand your market." : 
+               locale === 'ca' ? "Un equip disposat a entendre el teu mercat." : 
+               "Un equipo dispuesto a entender tu mercado."}
+            </h2>
+            <p className="text-[18px] text-white/70 font-medium mb-10 max-w-lg">
+              {locale === 'en' ? "Let's talk about your next research project. Tell us what you need to discover." : 
+               locale === 'ca' ? "Parlem del teu proper projecte de recerca. Explica'ns què necessites descobrir." : 
+               "Hablemos de tu próximo proyecto de investigación. Cuéntanos qué necesitas descubrir."}
+            </p>
+            <Link href="/contacto">
+              <Button variant="outline" className="bg-white border-white text-navy hover:bg-ice transition-colors">
+                {t.navbar.contacto}
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

app/page.tsx

@@ -1,65 +1,247 @@
-import Image from "next/image";
+"use client";
+import { motion } from "framer-motion";
+import { BentoGrid } from "@/components/ui/BentoGrid";
+import { Card } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { Badge } from "@/components/ui/Badge";
+import Link from "next/link";
+import { useLanguage } from "@/context/LanguageContext";
 
 export default function Home() {
+  const { t, locale } = useLanguage();
+
+  // Helper para las etiquetas de los meses en el SVG según el idioma
+  const months = {
+    es: ["ENE", "MAR", "JUN", "SEP", "DIC"],
+    ca: ["GEN", "MAR", "JUN", "SET", "DES"],
+    en: ["JAN", "MAR", "JUN", "SEP", "DEC"]
+  };
+
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+    <div className="w-full overflow-x-hidden">
+      {/* Hero Section */}
+      <section className="max-w-7xl mx-auto px-6 lg:px-12 pt-12 md:pt-20 pb-20 md:pb-32">
+        <div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-12">
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="flex-1 w-full text-center lg:text-left"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            <Badge>{t.home.badge}</Badge>
+            <h1 className="text-[40px] sm:text-[56px] lg:text-[88px] font-extrabold text-navy leading-[1.1] lg:leading-[0.95] tracking-tight mb-6 md:mb-8">
+              {/* Dividimos el título para mantener el salto de línea estético */}
+              {locale === 'en' ? "The value" : locale === 'ca' ? "El valor" : "El valor"} <br />
+              <span className="text-ocean">
+                {locale === 'en' ? "of knowing." : locale === 'ca' ? "de saber." : "de saber."}
+              </span>
+            </h1>
+            <p className="text-[16px] md:text-[20px] text-navy/70 leading-relaxed max-w-lg mx-auto lg:mx-0 mb-8 md:mb-10 font-medium">
+              {t.home.description}
+            </p>
+            <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-4">
+              <Link href="/servicios" className="w-full sm:w-auto">
+                <Button variant="primary" className="w-full">{t.home.btnServices}</Button>
+              </Link>
+              <Link href="/nosotros" className="w-full sm:w-auto">
+                <Button variant="outline" className="w-full">{t.home.btnMethod}</Button>
+              </Link>
+            </div>
+          </motion.div>
+
+          {/* Gráfico Animado SVG */}
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 1, delay: 0.2 }}
+            className="flex-1 w-full max-w-[500px] lg:max-w-none shadow-2xl rounded-[20px] md:rounded-[28px] overflow-hidden border border-crisp"
           >
-            Documentation
-          </a>
+            <svg
+              viewBox="0 0 800 420"
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-full h-auto block"
+              role="img"
+              aria-label="Animación de estadísticas"
+            >
+              <defs>
+                <linearGradient id="barGradient" x1="0" y1="1" x2="0" y2="0">
+                  <stop offset="0%" stopColor="#03045E" />
+                  <stop offset="100%" stopColor="#0077B6" />
+                </linearGradient>
+
+                <style>{`
+                  .bg-svg { fill: #ffffff; }
+                  .axis-svg { stroke: #03045E; stroke-width: 2; stroke-linecap: round; opacity: 0.2; }
+                  .grid-svg { stroke: #CAF0F8; stroke-width: 1; stroke-dasharray: 4 8; }
+                  .bar-svg { fill: url(#barGradient); rx: 8; transform-box: fill-box; transform-origin: bottom; animation: mutateBars 7s ease-in-out infinite; }
+                  .bar-svg:nth-of-type(1) { animation-delay: 0s; }
+                  .bar-svg:nth-of-type(2) { animation-delay: .15s; }
+                  .bar-svg:nth-of-type(3) { animation-delay: .3s; }
+                  .bar-svg:nth-of-type(4) { animation-delay: .45s; }
+                  .bar-svg:nth-of-type(5) { animation-delay: .6s; }
+                  .line-svg { fill: none; stroke: #00B4D8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: drawLine 7s ease-in-out infinite; }
+                  .dot-svg { fill: #03045E; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulseDots 7s ease-in-out infinite; }
+                  .dot-svg:nth-of-type(1) { animation-delay: .1s; }
+                  .dot-svg:nth-of-type(2) { animation-delay: .2s; }
+                  .dot-svg:nth-of-type(3) { animation-delay: .3s; }
+                  .dot-svg:nth-of-type(4) { animation-delay: .4s; }
+                  .dot-svg:nth-of-type(5) { animation-delay: .5s; }
+                  .label-svg { font-family: 'Manrope', sans-serif; font-size: 14px; fill: #03045E; opacity: .5; font-weight: 600; }
+                  .title-svg { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; fill: #03045E; text-transform: uppercase; letter-spacing: 1px; }
+                  .metric-svg { font-family: 'Manrope', sans-serif; font-size: 42px; font-weight: 800; fill: #0077B6; animation: fadeMetric 7s ease-in-out infinite; }
+                  .chip-svg { fill: #CAF0F8; opacity: 0.3; }
+                  .chipText-svg { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; fill: #0077B6; animation: chipShift 7s ease-in-out infinite; }
+
+                  @keyframes mutateBars {
+                    0%, 100% { transform: scaleY(.35); opacity: .4; }
+                    20% { transform: scaleY(1); opacity: 1; }
+                    40% { transform: scaleY(.62); opacity: .7; }
+                    60% { transform: scaleY(.15); opacity: .3; }
+                    80% { transform: scaleY(.9); opacity: .9; }
+                  }
+                  @keyframes drawLine {
+                    0%, 22% { stroke-dashoffset: 520; opacity: 0; }
+                    38%, 62% { stroke-dashoffset: 0; opacity: 1; }
+                    78%, 100% { stroke-dashoffset: -520; opacity: 0; }
+                  }
+                  @keyframes pulseDots {
+                    0%, 25% { opacity: 0; transform: scale(.2); }
+                    42%, 62% { opacity: 1; transform: scale(1); }
+                    82%, 100% { opacity: 0; transform: scale(.2); }
+                  }
+                  @keyframes fadeMetric {
+                    0%, 18% { opacity: .4; }
+                    28%, 50% { opacity: 1; }
+                    65%, 100% { opacity: .55; }
+                  }
+                  @keyframes chipShift {
+                    0%, 100% { opacity: .45; }
+                    35%, 65% { opacity: 1; }
+                  }
+                `}</style>
+              </defs>
+
+              <rect className="bg-svg" width="800" height="420" rx="28" />
+              <text className="title-svg" x="64" y="72">
+                {locale === 'en' ? "REAL-TIME DATA" : locale === 'ca' ? "DADES EN TEMPS REAL" : "DATOS EN TIEMPO REAL"}
+              </text>
+              <text className="label-svg" x="64" y="98">
+                {locale === 'en' ? "Trends and Projections" : locale === 'ca' ? "Tendències i Projeccions" : "Tendencias y Proyecciones"}
+              </text>
+              <rect className="chip-svg" x="610" y="52" width="126" height="38" rx="19" />
+              <text className="chipText-svg" x="635" y="76">LIVE DATA</text>
+              <text className="metric-svg" x="64" y="165">92.4%</text>
+              <text className="label-svg" x="64" y="192">
+                {locale === 'en' ? "analysis precision" : locale === 'ca' ? "precisió d'anàlisi" : "precisión de análisis"}
+              </text>
+
+              <line className="grid-svg" x1="250" y1="120" x2="720" y2="120" />
+              <line className="grid-svg" x1="250" y1="180" x2="720" y2="180" />
+              <line className="grid-svg" x1="250" y1="240" x2="720" y2="240" />
+              <line className="grid-svg" x1="250" y1="300" x2="720" y2="300" />
+
+              <line className="axis-svg" x1="250" y1="330" x2="720" y2="330" />
+              <line className="axis-svg" x1="250" y1="110" x2="250" y2="330" />
+
+              <rect className="bar-svg" x="295" y="150" width="48" height="180" />
+              <rect className="bar-svg" x="380" y="205" width="48" height="125" />
+              <rect className="bar-svg" x="465" y="125" width="48" height="205" />
+              <rect className="bar-svg" x="550" y="185" width="48" height="145" />
+              <rect className="bar-svg" x="635" y="95" width="48" height="235" />
+
+              <path className="line-svg" d="M319 250 C350 210, 380 240, 404 220 C440 185, 470 160, 489 180 C525 215, 550 210, 574 190 C610 155, 640 120, 659 145" />
+
+              <circle className="dot-svg" cx="319" cy="250" r="7" />
+              <circle className="dot-svg" cx="404" cy="220" r="7" />
+              <circle className="dot-svg" cx="489" cy="180" r="7" />
+              <circle className="dot-svg" cx="574" cy="190" r="7" />
+              <circle className="dot-svg" cx="659" cy="145" r="7" />
+
+              {months[locale].map((month, i) => (
+                <text key={i} className="label-svg" x={304 + (i * 85)} y="360">{month}</text>
+              ))}
+            </svg>
+          </motion.div>
         </div>
-      </main>
+      </section>
+
+      {/* Grid de Propuesta de Valor */}
+      <section className="bg-ice/10 py-16 md:py-24 border-t border-crisp">
+        <div className="max-w-7xl mx-auto px-6 lg:px-12">
+          <div className="mb-12 md:mb-16 max-w-2xl text-center md:text-left mx-auto md:mx-0">
+            <h2 className="text-[32px] md:text-[40px] font-extrabold text-navy tracking-tight leading-[1.1] mb-4">
+              {t.home.whyUs.title}
+            </h2>
+            <p className="text-[16px] md:text-[18px] text-navy/60 font-medium">
+              {t.home.whyUs.desc}
+            </p>
+          </div>
+
+          <BentoGrid>
+            {/* Card 1 */}
+            <Card variant="ice" className="md:col-span-2 min-h-[280px] md:min-h-[320px] justify-between group" delay={0.1}>
+              <div className="text-[12px] md:text-[14px] font-extrabold tracking-widest uppercase text-ocean">
+                01 / {locale === 'en' ? "Analysis" : locale === 'ca' ? "Anàlisi" : "Análisis"}
+              </div>
+              <div>
+                <h3 className="text-[26px] md:text-[32px] font-extrabold text-navy mb-3 md:mb-4 leading-tight">
+                  {t.home.whyUs.card1Title}
+                </h3>
+                <p className="text-[15px] md:text-[16px] text-navy/70 leading-relaxed max-w-md font-medium">
+                  {t.home.whyUs.card1Desc}
+                </p>
+              </div>
+            </Card>
+
+            {/* Card 2 */}
+            <Card variant="white" className="md:col-span-1 min-h-[280px] md:min-h-[320px] justify-between" delay={0.2}>
+              <div className="text-[12px] md:text-[14px] font-extrabold tracking-widest uppercase text-sky">
+                02 / {locale === 'en' ? "Coverage" : locale === 'ca' ? "Cobertura" : "Cobertura"}
+              </div>
+              <div>
+                <h3 className="text-[26px] md:text-[28px] font-extrabold text-navy mb-3 md:mb-4">
+                  {t.home.whyUs.card2Title}
+                </h3>
+                <p className="text-[15px] md:text-[16px] text-navy/70 leading-relaxed font-medium">
+                  {t.home.whyUs.card2Desc}
+                </p>
+              </div>
+            </Card>
+
+            {/* Card 3 */}
+            <Card variant="white" className="md:col-span-1 min-h-[280px] md:min-h-[320px] justify-between" delay={0.3}>
+              <div className="text-[12px] md:text-[14px] font-extrabold tracking-widest uppercase text-sky">
+                03 / {locale === 'en' ? "Flexibility" : locale === 'ca' ? "Flexibilitat" : "Flexibilidad"}
+              </div>
+              <div>
+                <h3 className="text-[26px] md:text-[28px] font-extrabold text-navy mb-3 md:mb-4">
+                  {t.home.whyUs.card3Title}
+                </h3>
+                <p className="text-[15px] md:text-[16px] text-navy/70 leading-relaxed font-medium">
+                  {t.home.whyUs.card3Desc}
+                </p>
+              </div>
+            </Card>
+
+            {/* CTA Card */}
+            <Card variant="navy" className="md:col-span-2 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-8 p-8 md:p-10" delay={0.4}>
+              <div className="flex-1 text-center md:text-left">
+                <h3 className="text-[26px] md:text-[32px] font-extrabold text-white mb-2 leading-tight">
+                  {t.home.whyUs.ctaTitle}
+                </h3>
+                <p className="text-white/70 font-medium max-w-sm mx-auto md:mx-0">
+                  {t.home.whyUs.ctaDesc}
+                </p>
+              </div>
+              <Link href="/contacto" className="w-full md:w-auto">
+                <Button variant="ocean" className="w-full md:w-auto whitespace-nowrap">
+                  {t.home.whyUs.ctaBtn}
+                </Button>
+              </Link>
+            </Card>
+          </BentoGrid>
+        </div>
+      </section>
     </div>
   );
-}
+}

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>
+  );
+}

app/servicios/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/Badge";
+import { Card } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { BentoGrid } from "@/components/ui/BentoGrid";
+import Link from "next/link";
+import Image from "next/image";
+import { useLanguage } from "@/context/LanguageContext";
+
+export default function ServiciosPage() {
+  const { t } = useLanguage();
+
+  return (
+    <div className="w-full">
+      {/* Hero de Servicios */}
+      <section className="max-w-7xl mx-auto px-6 lg:px-12 pt-20 pb-24 md:pt-32 md:pb-24">
+        <Badge>{t.servicios.heroBadge || "Cartera de Servicios"}</Badge>
+
+        <h1 className="text-[40px] md:text-[56px] lg:text-[64px] font-extrabold text-ocean leading-[1.05] tracking-tight max-w-5xl mb-16">
+          {t.servicios.hero}
+        </h1>
+
+        {/* Descripción en dos columnas */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20  pt-12"> 
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <h2 className="text-[14px] font-extrabold tracking-widest uppercase text-sky mb-4">
+              {t.servicios.cat1}
+            </h2>
+            <p className="text-[16px] md:text-[18px] text-navy/70 font-medium leading-[1.7]">
+              {t.servicios.cat1Desc}
+            </p>
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <h2 className="text-[14px] font-extrabold tracking-widest uppercase text-sky mb-4">
+              {t.servicios.cat2}
+            </h2>
+            <p className="text-[16px] md:text-[18px] text-navy/70 font-medium leading-[1.7]">
+              {t.servicios.cat2Desc}
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Grid Bento de Servicios */}
+      <section className="w-full bg-white pb-32">
+        <div className="max-w-7xl mx-auto px-6 lg:px-12">
+          <BentoGrid>
+            
+            {/* Imagen 1 */}
+            <Card variant="none" className="p-0 overflow-hidden min-h-[300px] md:min-h-[400px] border border-crisp" delay={0.1}>
+              <div className="relative w-full h-full">
+                <Image 
+                  src="https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=2069&auto=format&fit=crop" 
+                  alt={t.servicios.items.consultoria} 
+                  fill 
+                  className="object-cover"
+                />
+              </div>
+            </Card>
+
+            {/* Consultoría */}
+            <Card variant="ice" className="min-h-[300px] md:min-h-[400px] justify-center group border border-crisp" delay={0.2}>
+              <h3 className="text-[32px] font-extrabold text-navy mb-4">{t.servicios.items.consultoria}</h3>
+              <p className="text-[16px] text-navy/70 font-medium leading-[1.6] mb-8">
+                {t.servicios.consultoriaDesc}
+              </p>
+              <div className="mt-auto">
+                <Link href="/contacto">
+                  <Button variant="primary" className="!py-3 !px-6 text-[13px] w-full sm:w-auto">
+                    {t.servicios.btnGo || "Ir a la página"}
+                  </Button>
+                </Link>
+              </div>
+            </Card>
+
+            {/* Red de Campo */}
+            <Card variant="white" className="min-h-[300px] md:min-h-[400px] justify-center border border-crisp" delay={0.3}>
+              <h3 className="text-[32px] font-extrabold text-navy mb-4">{t.servicios.items.red}</h3>
+              <p className="text-[16px] text-navy/70 font-medium leading-[1.6] mb-8">
+                {t.servicios.redDesc}
+              </p>
+              <div className="mt-auto">
+                <Link href="/contacto">
+                  <Button variant="primary" className="!py-3 !px-6 text-[13px] w-full sm:w-auto">
+                    {t.servicios.btnGo || "Ir a la página"}
+                  </Button>
+                </Link>
+              </div>
+            </Card>
+
+            {/* Estudios (Bloque destacado) */}
+            <Card variant="navy" className="md:col-span-2 min-h-[300px] md:min-h-[400px] justify-center border border-navy" delay={0.4}>
+              <h3 className="text-[40px] font-extrabold text-white mb-6">{t.servicios.items.estudios}</h3>
+              <p className="text-[18px] text-white/80 font-medium leading-[1.6] max-w-md mb-10">
+                {t.servicios.estudiosDesc}
+              </p>
+              <div className="mt-auto">
+                <Link href="/contacto">
+                  <Button variant="outline" className="bg-ocean border-ocean text-white hover:bg-white hover:text-ocean hover:border-white transition-all w-full sm:w-auto">
+                    {t.servicios.btnGo || "Ir a la página"}
+                  </Button>
+                </Link>
+              </div>
+            </Card>
+
+            {/* Imagen 2 */}
+            <Card variant="none" className="p-0 overflow-hidden min-h-[300px] md:min-h-[400px] border border-crisp" delay={0.5}>
+              <div className="relative w-full h-full">
+                <Image 
+                  src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop" 
+                  alt={t.servicios.items.estudios} 
+                  fill 
+                  className="object-cover"
+                />
+              </div>
+            </Card>
+
+          </BentoGrid>
+        </div>
+      </section>
+    </div>
+  );
+}