jruizcaisa/item_opina
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
gestions-UO
2026-05-11 20:50:44 +02:00
parent f7ba09d405
commit 838bec205e
36 changed files with 2514 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
app/page.tsx
View File

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