first commit

2026-05-11 20:50:44 +02:00
parent f7ba09d405
commit 838bec205e
36 changed files with 2514 additions and 99 deletions
--- a/app/contacto/page.tsx
+++ b/app/contacto/page.tsx
@@ -0,0 +1,99 @@
+"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>
+  );
+}