102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
"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>
|
|
);
|
|
} |