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

141
app/nosotros/page.tsx Normal file
View File

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