feat(all-deployment)

src/components/Footer.tsx

@@ -1,95 +1,207 @@
+import { Mail, MapPin, MessageCircle } from 'lucide-react';
 import type { ThemeProps } from '../types';
 
+const navLinks = [
+  { label: 'Sistemas',   href: '#machinery' },
+  { label: 'Anatomía',   href: '#anatomy' },
+  { label: 'Proceso',    href: '#proceso' },
+  { label: 'Principios', href: '#principios' },
+];
+
 export const Footer = ({ isNavyBg }: ThemeProps) => {
-  const isDark = isNavyBg;
+  const bg     = isNavyBg ? '#001040' : '#0a0a0a';
+  const sub    = 'rgba(255,255,255,0.45)';
+  const border = 'rgba(255,255,255,0.08)';
+
+  const handleNav = (href: string) => {
+    const el = document.querySelector(href);
+    if (el) el.scrollIntoView({ behavior: 'smooth' });
+  };
 
   return (
-    <footer className={`border-t px-6 py-14 md:px-12 transition-colors duration-500 ${
-      isDark
-        ? 'border-white/10 bg-[linear-gradient(135deg,#001f5b,#0a2b78)] text-white'
-        : 'border-brand-navy/10 bg-white text-brand-black'
-    }`}>
-      <div className={`mx-auto grid max-w-7xl gap-8 text-sm md:grid-cols-5 ${isDark ? 'text-white' : 'text-brand-navy'}`}>
-        
-        <div className="md:col-span-2">
-          <div className="mb-4 flex items-center gap-3">
-            <img
-              src={isDark ? '/icons/Logo_blanco.svg' : '/icons/Logo_negro.svg'}
-              alt="RyNext logo"
-              className="h-9 w-auto object-contain"
-            />
-            <div className="flex items-center">
-              <span className={`font-display text-xl font-extrabold tracking-tight ${
-                isDark ? 'text-white' : 'text-brand-black'
-              }`}>
-                Ry<span className="text-brand-red">Next</span>
-              </span>
-              <span className={`ml-2 text-xs font-semibold ${isDark ? 'text-slate-300' : 'text-brand-navy/75'}`}>
-                — Software Studio
-              </span>
+    <footer
+      style={{ background: bg, borderTop: `1px solid ${border}` }}
+      className="px-8 pt-20 pb-10 md:px-14 transition-colors duration-500"
+      role="contentinfo"
+    >
+      <div className="mx-auto max-w-7xl">
+        {/* Main grid */}
+        <div className="grid gap-14 md:grid-cols-[1.8fr_1fr_1.2fr]">
+          {/* Brand */}
+          <div>
+            <div className="mb-6 flex items-center gap-3">
+              <img
+                src="/icons/Logo_blanco.svg"
+                alt="Rynext logo"
+                className="h-9 w-auto object-contain"
+              />
+              <img
+                src="/icons/Text_Logo_Blanco.svg"
+                alt="Rynext"
+                style={{
+                  width: "130px",
+                  height: "18px",
+                  objectFit: "cover",
+                  objectPosition: "center 52%",
+                  display: "block",
+                }}
+              />
             </div>
-          </div>
-
-          <p className={`max-w-md text-[13px] leading-6 ${isDark ? 'text-slate-200' : 'text-brand-navy/75'}`}>
-            Diseñamos productos y plataformas con foco en velocidad, estabilidad y crecimiento real de negocio.
-          </p>
-
-          <div className="mt-4 grid gap-2 sm:grid-cols-2">
-            <div className={`rounded-xl border px-3 py-2 ${isDark ? 'border-white/10 bg-white/5' : 'border-brand-navy/10 bg-[#001f5b]/5'}`}>
-              <p className="text-[11px] font-semibold tracking-[0.08em] text-sky-500">Operación</p>
-              <p className={`mt-1 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>MX • LATAM • remoto</p>
-            </div>
-            <div className={`rounded-xl border px-3 py-2 ${isDark ? 'border-white/10 bg-white/5' : 'border-brand-navy/10 bg-[#001f5b]/5'}`}>
-              <p className="text-[11px] font-semibold tracking-[0.08em] text-sky-500">Entrega</p>
-              <p className={`mt-1 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>Sprints • roadmap • support</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Columna Servicios */}
-        <div>
-          <p className="mb-3 text-[11px] font-semibold tracking-[0.08em] text-sky-500">Servicios</p>
-          <ul className={`space-y-2 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>
-            <li>Software a medida</li>
-            <li>Plataformas web</li>
-            <li>Integraciones y APIs</li>
-            <li>Arquitectura cloud</li>
-          </ul>
-        </div>
-
-        {/* Columna Contacto */}
-        <div>
-          <p className="mb-3 text-[11px] font-semibold tracking-[0.08em] text-sky-500">Contacto</p>
-          <ul className={`space-y-2 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>
-            <li>
-              <a href="mailto:[email protected]?subject=Consulta%20RyNext" className="underline decoration-current/40 underline-offset-4 transition hover:text-brand-blue">
-                soporte@rynext.com.mx
+            <p
+              className="text-sm leading-relaxed mb-8"
+              style={{ color: sub, maxWidth: "30ch" }}
+            >
+              Diseñamos y construimos sistemas empresariales a medida,
+              arquitectura real, sin atajos técnicos.
+            </p>
+            {/* Social */}
+            <div className="flex items-center gap-3">
+              <a
+                href="https://linkedin.com/company/rynext"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Rynext en LinkedIn"
+                className="flex h-9 w-9 items-center justify-center rounded transition-colors"
+                style={{ background: "rgba(255,255,255,0.07)", color: sub }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLAnchorElement).style.background =
+                    "rgba(255,255,255,0.14)";
+                  (e.currentTarget as HTMLAnchorElement).style.color = "#fff";
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLAnchorElement).style.background =
+                    "rgba(255,255,255,0.07)";
+                  (e.currentTarget as HTMLAnchorElement).style.color = sub;
+                }}
+              >
+                {/* LinkedIn SVG */}
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                  <rect x="2" y="9" width="4" height="12" />
+                  <circle cx="4" cy="4" r="2" />
+                </svg>
               </a>
-            </li>
-            <li>Cancún, Quintana Roo, México</li>
-            <li>Reserva de proyecto en 48h</li>
-          </ul>
+              <a
+                href={`https://wa.me/529981234567?text=${encodeURIComponent('¿En qué podemos ayudarte?')}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Rynext en WhatsApp"
+                className="flex h-9 w-9 items-center justify-center rounded transition-colors"
+                style={{ background: "rgba(255,255,255,0.07)", color: sub }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLAnchorElement).style.background =
+                    "rgba(255,255,255,0.14)";
+                  (e.currentTarget as HTMLAnchorElement).style.color = "#fff";
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLAnchorElement).style.background =
+                    "rgba(255,255,255,0.07)";
+                  (e.currentTarget as HTMLAnchorElement).style.color = sub;
+                }}
+              >
+                <MessageCircle size={15} />
+              </a>
+            </div>
+          </div>
+
+          {/* Navegación */}
+          <div>
+            <p
+              className="text-mono-label mb-6"
+              style={{
+                color: "rgba(255,255,255,0.25)",
+                letterSpacing: "0.12em",
+              }}
+            >
+              Navegación
+            </p>
+            <ul className="flex flex-col gap-3.5">
+              {navLinks.map((link) => (
+                <li key={link.href}>
+                  <button
+                    onClick={() => handleNav(link.href)}
+                    className="text-sm font-medium transition-colors"
+                    style={{
+                      color: sub,
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 0,
+                    }}
+                    onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
+                    onMouseLeave={(e) => (e.currentTarget.style.color = sub)}
+                  >
+                    {link.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Contacto */}
+          <div>
+            <p
+              className="text-mono-label mb-6"
+              style={{
+                color: "rgba(255,255,255,0.25)",
+                letterSpacing: "0.12em",
+              }}
+            >
+              Contacto
+            </p>
+            <ul className="flex flex-col gap-4">
+              <li className="flex items-start gap-3">
+                <MapPin
+                  size={14}
+                  style={{ color: "#e50914", marginTop: 2, flexShrink: 0 }}
+                />
+                <span className="text-sm leading-snug" style={{ color: sub }}>
+                  Cancún, Quintana Roo
+                  <br />
+                  México
+                </span>
+              </li>
+              <li className="flex items-center gap-3">
+                <Mail size={14} style={{ color: "#e50914", flexShrink: 0 }} />
+                <a
+                  href="mailto:[email protected]"
+                  className="text-sm font-medium transition-colors"
+                  style={{ color: sub }}
+                  onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
+                  onMouseLeave={(e) => (e.currentTarget.style.color = sub)}
+                >
+                  contacto@rynext.com.mx
+                </a>
+              </li>
+              <li className="mt-2">
+                <a
+                  href="mailto:[email protected]"
+                  className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold text-white transition hover:opacity-90"
+                  style={{ background: "#e50914", borderRadius: 3 }}
+                >
+                  Hablemos de tu proyecto
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
 
-        {/* Columna Horario */}
-        <div>
-          <p className="mb-3 text-[11px] font-semibold tracking-[0.08em] text-sky-500">Horario</p>
-          <ul className={`space-y-2 text-[13px] ${isDark ? 'text-slate-200' : 'text-brand-navy/80'}`}>
-            <li>Lun–Vie 9:00–18:00</li>
-            <li>Reuniones por agenda</li>
-            <li>Soporte de proyecto</li>
-            <li>Consultoría técnica</li>
-          </ul>
-        </div>
-
-      </div>
-
-      {/* Copyright */}
-      <div className={`mx-auto mt-8 flex max-w-7xl flex-col items-center justify-between gap-4 border-t pt-6 text-[13px] sm:flex-row ${isDark ? 'border-white/10' : 'border-brand-navy/10'}`}>
-        <div className={isDark ? 'text-slate-200' : 'text-brand-navy/80'}>
-          © {new Date().getFullYear()} RyNext. Todos los derechos reservados.
+        {/* Bottom bar */}
+        <div
+          className="mt-16 border-t pt-8 text-center"
+          style={{ borderColor: border }}
+        >
+          <p className="text-xs" style={{ color: "rgba(255,255,255,0.25)" }}>
+            © {new Date().getFullYear()} Rynext Technologies S.A.S. | Todos los
+            derechos reservados.
+          </p>
         </div>
       </div>
     </footer>
   );
-};
+};