52 lines
3.8 KiB
TypeScript
52 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
import { Facebook, Instagram, MessageCircle } from "lucide-react";
|
|
|
|
// APP_VERSION la actualiza el propio CI (.gitea/workflows/build.yaml) al
|
|
// mismo tiempo que el tag de la imagen -- antes decia "v4.1" fijo,
|
|
// inutil para distinguir a simple vista si Staging y Produccion estan
|
|
// en la misma version o no.
|
|
const appVersion = process.env.APP_VERSION || "dev";
|
|
|
|
// Las 4 paginas de "Ayuda" ya tienen contenido real (app/envios,
|
|
// app/cambios, app/preguntas-frecuentes, app/contacto).
|
|
const HELP_LINKS = [
|
|
{ label: "Preguntas frecuentes", href: "/preguntas-frecuentes" },
|
|
{ label: "Envíos", href: "/envios" },
|
|
{ label: "Cambios", href: "/cambios" },
|
|
{ label: "Contacto", href: "/contacto" },
|
|
];
|
|
|
|
// Cuentas reales confirmadas por el usuario (Instagram verificado en
|
|
// vivo antes de linkearlo -- la primera cuenta sugerida, @arishopping,
|
|
// no era la real). El link de WhatsApp usa el mismo numero real ya
|
|
// confirmado en /contacto y en el fallback del checkout.
|
|
const SOCIAL_LINKS = [
|
|
{ label: "Instagram", href: "https://www.instagram.com/ari_shopping1/", Icon: Instagram },
|
|
{ label: "Facebook", href: "https://www.facebook.com/share/1Dkmvko6HF/", Icon: Facebook },
|
|
{ label: "WhatsApp", href: "https://wa.me/573016138155", Icon: MessageCircle },
|
|
];
|
|
|
|
const SHOP_LINKS = [
|
|
{ label: "Novedades", href: "/catalog" },
|
|
{ label: "Juguetes", href: "/catalog" },
|
|
{ label: "Mochilas", href: "/catalog" },
|
|
{ label: "Regalos", href: "/catalog" },
|
|
];
|
|
|
|
export function Footer() {
|
|
return <footer className="bg-ari-marino text-white"><div className="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:grid-cols-2 lg:grid-cols-4"><div><div className="flex flex-col items-start gap-3"><img src="/images/brand/logo-ari.svg" alt="ARI shopping" className="h-11 w-auto" width={200} height={64} />{/* eslint-disable-line @next/next/no-img-element -- vector propio, next/image no optimiza SVG sin habilitar dangerouslyAllowSVG */}<p className="text-xs text-white/60">Tesoros para cada aventura.</p></div><div className="mt-5 flex gap-3">{SOCIAL_LINKS.map(({ label, href, Icon }) => <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} className="text-white/80 transition hover:text-ari-coral-claro"><Icon /></a>)}</div></div><FooterColumn title="Compra" links={SHOP_LINKS} /><FooterColumn title="Ayuda" links={HELP_LINKS} />{/* min-w-0: sin esto, un grid item de texto toma como minimo su ancho
|
|
max-content (una sola linea, "Recibe lanzamientos y promociones
|
|
especiales." sin wrappear, ~335px) en vez de dejarse achicar y
|
|
wrappear dentro del track del grid -- confirmado en vivo 2026-09-20
|
|
contra un viewport real de 320px: la columna entera del footer (y
|
|
con ella, la pagina completa) quedaba forzada a 335px de ancho por
|
|
este unico parrafo. Mismo bug de fondo que el ya documentado en
|
|
product-gallery.tsx/app/product/[slug]/page.tsx, en un grid en vez
|
|
de un overflow-x-auto. */}
|
|
<div className="min-w-0"><h3 className="font-black">Newsletter</h3><p className="mt-3 text-sm leading-6 text-white/60">Recibe lanzamientos y promociones especiales.</p><div className="mt-4 flex rounded-full bg-white p-1"><input className="min-w-0 flex-1 bg-transparent px-4 text-sm text-slate-950 outline-none" placeholder="Tu correo" /><button className="rounded-full bg-ari-coral px-4 text-sm font-black text-white">Unirme</button></div></div></div><div className="border-t border-white/10 py-5 text-center text-xs text-white/50">© 2026 ARI Shopping · Frontend headless {appVersion} · GitOps</div></footer>;
|
|
}
|
|
|
|
function FooterColumn({ title, links }: { title: string; links: { label: string; href: string }[] }) {
|
|
return <div><h3 className="font-black">{title}</h3><div className="mt-4 grid gap-3 text-sm text-white/60">{links.map((link) => <Link key={link.label} href={link.href} className="hover:text-ari-coral-claro">{link.label}</Link>)}</div></div>;
|
|
}
|