239 lines
9.2 KiB
TypeScript
239 lines
9.2 KiB
TypeScript
import { Mail, MapPin, MessageCircle } from 'lucide-react';
|
|
import { Link } from 'react-router';
|
|
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 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
|
|
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>
|
|
<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://www.facebook.com/RynextTechnologies/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Rynext en Facebook"
|
|
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;
|
|
}}
|
|
>
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
|
</svg>
|
|
</a>
|
|
<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>
|
|
<a
|
|
href={`https://wa.me/529984814889?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>
|
|
|
|
{/* Bottom bar */}
|
|
<div
|
|
className="mt-16 border-t pt-8 text-center"
|
|
style={{ borderColor: border }}
|
|
>
|
|
<div className="flex flex-col items-center gap-2 sm:flex-row sm:justify-center sm:gap-4">
|
|
<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>
|
|
<Link
|
|
to="/privacidad"
|
|
className="text-xs transition-colors"
|
|
style={{ color: "rgba(255,255,255,0.25)", textDecoration: "none" }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.6)")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.25)")}
|
|
>
|
|
Aviso de Privacidad
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|