first commit

2026-05-11 20:50:44 +02:00
parent f7ba09d405
commit 838bec205e
36 changed files with 2514 additions and 99 deletions
--- a/app/insights/page.tsx
+++ b/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>
+  );
+}