From cda25dea2ea086cdb183a987b697db239c49ba41 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sat, 12 Sep 2026 02:55:24 +0000
Subject: [PATCH] =?UTF-8?q?feat(ecommerce):=20p=C3=A1ginas=20reales=20de?=
 =?UTF-8?q?=20Env=C3=ADos=20y=20Contacto=20en=20el=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El footer "Ayuda" no tenía contenido real -- los 4 links apuntaban a
/catalog. Se agregan dos páginas nuevas con información real:

- /envios: transportadoras reales de EnvíoClick (Coordinadora, Envía,
  TCC, Rappi, Pibox -- confirmadas en una cotización real, ver ADR
  0010 §2) y cómo se calcula el costo.
- /contacto: WhatsApp real (+57 301 613 8155, mismo número ya usado en
  el fallback de checkout) y correo contacto@cruzcloud.net (reenviado
  por Cloudflare Email Routing -- configuración manual de DNS pendiente
  del lado del usuario, fuera de alcance de este cambio).

"Preguntas frecuentes" y "Cambios" quedan sin contenido real definido
todavía, apuntando a /catalog como antes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01THZFwPzrwv6VAbuwmaf5vR
---
 workloads/ecommerce/app/contacto/page.tsx     | 63 ++++++++++++++++++
 workloads/ecommerce/app/envios/page.tsx       | 66 +++++++++++++++++++
 .../ecommerce/components/layout/footer.tsx    | 26 +++++++-
 3 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 workloads/ecommerce/app/contacto/page.tsx
 create mode 100644 workloads/ecommerce/app/envios/page.tsx

diff --git a/workloads/ecommerce/app/contacto/page.tsx b/workloads/ecommerce/app/contacto/page.tsx
new file mode 100644
index 0000000..32ab4bb
--- /dev/null
+++ b/workloads/ecommerce/app/contacto/page.tsx
@@ -0,0 +1,63 @@
+import type { Metadata } from "next";
+import { Mail, MapPin, MessageCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = { title: "Contacto | ARI Shopping" };
+
+// Numero real confirmado en vivo (probando el boton "Confirmar por
+// WhatsApp" del checkout con navegador real): mismo canal que ya usan
+// los clientes para confirmar pedidos, consistencia a proposito.
+const WHATSAPP_URL = "https://wa.me/573016138155";
+// Correo corporativo nuevo (contacto@cruzcloud.net -> reenviado por
+// Cloudflare Email Routing a la casilla real) -- ver nota de
+// implementacion en ADR 0010 para el paso manual de DNS pendiente.
+const CONTACT_EMAIL = "contacto@cruzcloud.net";
+
+export default function ContactoPage() {
+  return (
+    <section className="mx-auto max-w-2xl px-4 py-14 text-center lg:py-20">
+      <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Ayuda</span>
+      <h1 className="mt-3 text-4xl font-black tracking-tight sm:text-5xl">Contacto</h1>
+      <p className="mt-5 text-lg leading-8 text-slate-600">
+        ¿Tenés una pregunta sobre tu pedido, un producto o un cambio? Escribinos, te respondemos lo antes posible.
+      </p>
+
+      <div className="mt-10 grid gap-4 sm:grid-cols-2">
+        <a
+          href={WHATSAPP_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex flex-col items-center gap-3 rounded-2xl border border-slate-200 p-6 transition hover:border-ari-marino hover:bg-ari-marino/5"
+        >
+          <MessageCircle className="size-7 text-ari-marino" />
+          <div>
+            <p className="font-black">WhatsApp</p>
+            <p className="mt-1 text-sm text-slate-500">+57 301 613 8155</p>
+          </div>
+        </a>
+        <a
+          href={`mailto:${CONTACT_EMAIL}`}
+          className="flex flex-col items-center gap-3 rounded-2xl border border-slate-200 p-6 transition hover:border-ari-marino hover:bg-ari-marino/5"
+        >
+          <Mail className="size-7 text-ari-marino" />
+          <div>
+            <p className="font-black">Correo</p>
+            <p className="mt-1 text-sm text-slate-500">{CONTACT_EMAIL}</p>
+          </div>
+        </a>
+      </div>
+
+      <div className="mt-10 flex items-center justify-center gap-2 text-sm text-slate-500">
+        <MapPin className="size-4" />
+        Despachamos desde Bogotá D.C., Colombia
+      </div>
+
+      <Button asChild variant="primary" size="lg" className="mt-10">
+        <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+          <MessageCircle className="size-5" />
+          Escribirnos por WhatsApp
+        </a>
+      </Button>
+    </section>
+  );
+}
diff --git a/workloads/ecommerce/app/envios/page.tsx b/workloads/ecommerce/app/envios/page.tsx
new file mode 100644
index 0000000..562f23c
--- /dev/null
+++ b/workloads/ecommerce/app/envios/page.tsx
@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import { Calculator, Clock, MapPinned, Truck } from "lucide-react";
+
+export const metadata: Metadata = { title: "Envíos | ARI Shopping" };
+
+// ADR 0010 §2: el costo de envio se calcula en vivo con EnvioClick (peso +
+// direccion), no es un valor fijo -- el copy de abajo describe ese
+// comportamiento real, no un placeholder. Transportadoras reales
+// confirmadas en una cotizacion en vivo contra la API de EnvioClick
+// (PIBOX, COORDINADORA, ENVIA, RAPPI, TCC) -- EnvioClick cotiza entre
+// ellas y el sistema toma automaticamente la mas economica por pedido.
+const CARRIERS = ["Coordinadora", "Envía", "TCC", "Rappi", "Pibox"];
+
+export default function EnviosPage() {
+  return (
+    <section className="mx-auto max-w-3xl px-4 py-14 lg:py-20">
+      <span className="text-xs font-black uppercase tracking-[.18em] text-ari-coral">Ayuda</span>
+      <h1 className="mt-3 text-4xl font-black tracking-tight sm:text-5xl">Envíos</h1>
+      <p className="mt-5 text-lg leading-8 text-slate-600">
+        Hacemos envíos a nivel nacional desde nuestra bodega en Bogotá D.C.
+      </p>
+
+      <div className="mt-10 grid gap-6 sm:grid-cols-2">
+        <div className="rounded-2xl border border-slate-200 p-6">
+          <Calculator className="size-6 text-ari-marino" />
+          <h2 className="mt-3 font-black">Costo calculado en tiempo real</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600">
+            El valor del envío se calcula automáticamente según el peso de tu pedido y la dirección de entrega —
+            lo ves exacto en el checkout antes de pagar, nunca es una tarifa a ciegas.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-slate-200 p-6">
+          <Truck className="size-6 text-ari-marino" />
+          <h2 className="mt-3 font-black">Transportadoras aliadas</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600">
+            Cotizamos automáticamente entre {CARRIERS.join(", ")} y asignamos la tarifa más conveniente para cada
+            pedido.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-slate-200 p-6">
+          <Clock className="size-6 text-ari-marino" />
+          <h2 className="mt-3 font-black">Tiempos de entrega</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600">
+            Varían según la transportadora asignada y tu ciudad — una vez despachado tu pedido te compartimos el
+            número de guía para hacerle seguimiento.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-slate-200 p-6">
+          <MapPinned className="size-6 text-ari-marino" />
+          <h2 className="mt-3 font-black">Cobertura</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600">
+            Envíos a todo el territorio nacional colombiano desde nuestra bodega en Bogotá D.C.
+          </p>
+        </div>
+      </div>
+
+      <p className="mt-10 text-sm text-slate-500">
+        ¿Tenés dudas puntuales sobre un pedido? Escribinos por{" "}
+        <a href="/contacto" className="font-bold text-ari-marino hover:underline">
+          nuestros canales de contacto
+        </a>
+        .
+      </p>
+    </section>
+  );
+}
diff --git a/workloads/ecommerce/components/layout/footer.tsx b/workloads/ecommerce/components/layout/footer.tsx
index 3436fb3..99d7f84 100644
--- a/workloads/ecommerce/components/layout/footer.tsx
+++ b/workloads/ecommerce/components/layout/footer.tsx
@@ -1,10 +1,30 @@
 import Link from "next/link";
 import { Facebook, Instagram, MessageCircle } from "lucide-react";
 
+// "Envíos" y "Contacto" ya tienen paginas reales (app/envios,
+// app/contacto -- contenido real: transportadoras de EnvioClick,
+// WhatsApp/correo reales). "Preguntas frecuentes" y "Cambios" todavia
+// no tienen contenido real decidido -- quedan apuntando a /catalog
+// (no rotas, pero tampoco resueltas) hasta que se defina que van a
+// decir.
+const HELP_LINKS = [
+  { label: "Preguntas frecuentes", href: "/catalog" },
+  { label: "Envíos", href: "/envios" },
+  { label: "Cambios", href: "/catalog" },
+  { label: "Contacto", href: "/contacto" },
+];
+
+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"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={["Novedades", "Juguetes", "Mochilas", "Regalos"]} /><FooterColumn title="Ayuda" links={["Preguntas frecuentes", "Envíos", "Cambios", "Contacto"]} /><div><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 v4.1 · GitOps</div></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"><Instagram /><Facebook /><MessageCircle /></div></div><FooterColumn title="Compra" links={SHOP_LINKS} /><FooterColumn title="Ayuda" links={HELP_LINKS} /><div><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 v4.1 · GitOps</div></footer>;
 }
 
-function FooterColumn({ title, links }: { title: string; links: 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} href="/catalog" className="hover:text-ari-coral-claro">{link}</Link>)}</div></div>;
+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>;
 }