first commit
This commit is contained in:
gestions-UO
133
app/servicios/page.tsx
Normal file
133
app/servicios/page.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"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 { BentoGrid } from "@/components/ui/BentoGrid";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useLanguage } from "@/context/LanguageContext";
|
||||
|
||||
export default function ServiciosPage() {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Hero de Servicios */}
|
||||
<section className="max-w-7xl mx-auto px-6 lg:px-12 pt-20 pb-24 md:pt-32 md:pb-24">
|
||||
<Badge>{t.servicios.heroBadge || "Cartera de Servicios"}</Badge>
|
||||
|
||||
<h1 className="text-[40px] md:text-[56px] lg:text-[64px] font-extrabold text-ocean leading-[1.05] tracking-tight max-w-5xl mb-16">
|
||||
{t.servicios.hero}
|
||||
</h1>
|
||||
|
||||
{/* Descripción en dos columnas */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 pt-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-[14px] font-extrabold tracking-widest uppercase text-sky mb-4">
|
||||
{t.servicios.cat1}
|
||||
</h2>
|
||||
<p className="text-[16px] md:text-[18px] text-navy/70 font-medium leading-[1.7]">
|
||||
{t.servicios.cat1Desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<h2 className="text-[14px] font-extrabold tracking-widest uppercase text-sky mb-4">
|
||||
{t.servicios.cat2}
|
||||
</h2>
|
||||
<p className="text-[16px] md:text-[18px] text-navy/70 font-medium leading-[1.7]">
|
||||
{t.servicios.cat2Desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Grid Bento de Servicios */}
|
||||
<section className="w-full bg-white pb-32">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<BentoGrid>
|
||||
|
||||
{/* Imagen 1 */}
|
||||
<Card variant="none" className="p-0 overflow-hidden min-h-[300px] md:min-h-[400px] border border-crisp" delay={0.1}>
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=2069&auto=format&fit=crop"
|
||||
alt={t.servicios.items.consultoria}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Consultoría */}
|
||||
<Card variant="ice" className="min-h-[300px] md:min-h-[400px] justify-center group border border-crisp" delay={0.2}>
|
||||
<h3 className="text-[32px] font-extrabold text-navy mb-4">{t.servicios.items.consultoria}</h3>
|
||||
<p className="text-[16px] text-navy/70 font-medium leading-[1.6] mb-8">
|
||||
{t.servicios.consultoriaDesc}
|
||||
</p>
|
||||
<div className="mt-auto">
|
||||
<Link href="/contacto">
|
||||
<Button variant="primary" className="!py-3 !px-6 text-[13px] w-full sm:w-auto">
|
||||
{t.servicios.btnGo || "Ir a la página"}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Red de Campo */}
|
||||
<Card variant="white" className="min-h-[300px] md:min-h-[400px] justify-center border border-crisp" delay={0.3}>
|
||||
<h3 className="text-[32px] font-extrabold text-navy mb-4">{t.servicios.items.red}</h3>
|
||||
<p className="text-[16px] text-navy/70 font-medium leading-[1.6] mb-8">
|
||||
{t.servicios.redDesc}
|
||||
</p>
|
||||
<div className="mt-auto">
|
||||
<Link href="/contacto">
|
||||
<Button variant="primary" className="!py-3 !px-6 text-[13px] w-full sm:w-auto">
|
||||
{t.servicios.btnGo || "Ir a la página"}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Estudios (Bloque destacado) */}
|
||||
<Card variant="navy" className="md:col-span-2 min-h-[300px] md:min-h-[400px] justify-center border border-navy" delay={0.4}>
|
||||
<h3 className="text-[40px] font-extrabold text-white mb-6">{t.servicios.items.estudios}</h3>
|
||||
<p className="text-[18px] text-white/80 font-medium leading-[1.6] max-w-md mb-10">
|
||||
{t.servicios.estudiosDesc}
|
||||
</p>
|
||||
<div className="mt-auto">
|
||||
<Link href="/contacto">
|
||||
<Button variant="outline" className="bg-ocean border-ocean text-white hover:bg-white hover:text-ocean hover:border-white transition-all w-full sm:w-auto">
|
||||
{t.servicios.btnGo || "Ir a la página"}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Imagen 2 */}
|
||||
<Card variant="none" className="p-0 overflow-hidden min-h-[300px] md:min-h-[400px] border border-crisp" delay={0.5}>
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop"
|
||||
alt={t.servicios.items.estudios}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user