247 lines
13 KiB
TypeScript
247 lines
13 KiB
TypeScript
"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="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"
|
|
>
|
|
<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"
|
|
>
|
|
<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>
|
|
</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>
|
|
);
|
|
} |