99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { ContactoForm } from "@/components/forms/ContactoForm";
|
|
import { FiMapPin, FiMail, FiPhone } from "react-icons/fi";
|
|
import { useLanguage } from "@/context/LanguageContext";
|
|
|
|
export default function ContactoPage() {
|
|
const { t } = useLanguage();
|
|
|
|
const infoContacto = [
|
|
{
|
|
icon: <FiMapPin />,
|
|
label: t.contacto.info.address,
|
|
value: "Av. de Madrid, 138, Sants-Montjuïc, 08028 Barcelona",
|
|
href: "https://www.google.com/maps/search/?api=1&query=Av.+de+Madrid,+138,+08028+Barcelona",
|
|
},
|
|
{
|
|
icon: <FiMail />,
|
|
label: t.contacto.info.email,
|
|
value: "jordi@itemopina.com",
|
|
href: "mailto:jordi@itemopina.com",
|
|
isEmail: true,
|
|
},
|
|
{
|
|
icon: <FiPhone />,
|
|
label: t.contacto.info.phone,
|
|
value: "650 066 923",
|
|
href: "tel:+34650066923",
|
|
},
|
|
];
|
|
|
|
// Lógica para resaltar la última palabra del título en color ocean
|
|
const titleWords = t.contacto.heroTitle.split(" ");
|
|
const lastWord = titleWords.pop();
|
|
const mainTitle = titleWords.join(" ");
|
|
|
|
return (
|
|
<section className="w-full flex-grow py-16 md:py-24">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-12">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
|
|
|
|
{/* Columna de Información */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="lg:col-span-5 flex flex-col justify-start"
|
|
>
|
|
<Badge>{t.contacto.badge || "Contacto Directo"}</Badge>
|
|
|
|
<h1 className="text-[48px] md:text-[64px] font-extrabold text-navy leading-[1.05] tracking-tight mb-6">
|
|
{mainTitle} <br />
|
|
<span className="text-ocean">{lastWord}</span>
|
|
</h1>
|
|
|
|
<p className="text-[16px] text-navy/70 leading-[1.6] font-medium mb-12 max-w-md">
|
|
{t.contacto.heroDesc}
|
|
</p>
|
|
|
|
<div className="space-y-8 pt-8">
|
|
{infoContacto.map((item, idx) => (
|
|
<div key={idx}>
|
|
<h4 className="text-[13px] font-extrabold text-sky uppercase tracking-widest mb-2 flex items-center gap-2">
|
|
<span className="text-ocean">{item.icon}</span>
|
|
{item.label}
|
|
</h4>
|
|
<a
|
|
href={item.href}
|
|
target={item.href.startsWith("http") ? "_blank" : undefined}
|
|
rel="noopener noreferrer"
|
|
className={`text-navy font-bold leading-relaxed hover:text-ocean transition-colors ${
|
|
item.isEmail ? "text-[18px] text-ocean" : "text-[16px]"
|
|
}`}
|
|
>
|
|
{item.value}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Columna del Formulario */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="lg:col-span-7 bg-white rounded-[32px] border border-crisp p-8 md:p-12 lg:p-16"
|
|
>
|
|
<h3 className="text-[24px] font-extrabold text-navy mb-8">
|
|
{t.contacto.form.title}
|
|
</h3>
|
|
<ContactoForm />
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |