From 27bb2fc0aa2a9d388ad7d47555d462c2b18957d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raul=20Mauricio=20U=C3=B1ate=20Castro?= <runate@ccl.com.co>
Date: Wed, 26 Aug 2026 17:18:30 -0500
Subject: [PATCH 1/7] Version Editorial - 0.0.1-beta.1

---
 app/globals.css                     | 210 +++++++++++++++++--------
 app/layout.tsx                      |  10 +-
 app/page.tsx                        | 100 ++----------
 components/layout/Footer.tsx        | 120 +++++++++++++++
 components/layout/Navbar.tsx        | 110 +++++++++++++
 components/map/ColombiaMap.tsx      |  76 +++++++++
 components/map/LeafletMap.tsx       | 127 +++++++++++++++
 components/map/marker-colors.ts     |  15 ++
 components/sections/Communities.tsx |  88 +++++++++++
 components/sections/Events.tsx      | 230 ++++++++++++++++++++++++++++
 components/sections/Hero.tsx        |  73 +++++++++
 components/sections/Newsletter.tsx  | 139 +++++++++++++++++
 components/sections/Sponsors.tsx    | 106 +++++++++++++
 components/ui/MosaicBar.tsx         |  30 ++++
 components/ui/Reveal.tsx            |  42 +++++
 components/ui/SectionHeading.tsx    |  40 +++++
 data/mockCommunities.ts             |  62 ++++++++
 data/mockEvents.ts                  |  44 ++++++
 data/mockMapMarkers.ts              |  53 +++++++
 data/mockSponsors.ts                |  27 ++++
 lib/mock/newsletter.ts              |  39 +++++
 lib/site.ts                         |  33 ++++
 lib/types.ts                        |  59 +++++++
 package-lock.json                   |  63 +++++++-
 package.json                        |   6 +-
 25 files changed, 1745 insertions(+), 157 deletions(-)
 create mode 100644 components/layout/Footer.tsx
 create mode 100644 components/layout/Navbar.tsx
 create mode 100644 components/map/ColombiaMap.tsx
 create mode 100644 components/map/LeafletMap.tsx
 create mode 100644 components/map/marker-colors.ts
 create mode 100644 components/sections/Communities.tsx
 create mode 100644 components/sections/Events.tsx
 create mode 100644 components/sections/Hero.tsx
 create mode 100644 components/sections/Newsletter.tsx
 create mode 100644 components/sections/Sponsors.tsx
 create mode 100644 components/ui/MosaicBar.tsx
 create mode 100644 components/ui/Reveal.tsx
 create mode 100644 components/ui/SectionHeading.tsx
 create mode 100644 data/mockCommunities.ts
 create mode 100644 data/mockEvents.ts
 create mode 100644 data/mockMapMarkers.ts
 create mode 100644 data/mockSponsors.ts
 create mode 100644 lib/mock/newsletter.ts
 create mode 100644 lib/site.ts
 create mode 100644 lib/types.ts

diff --git a/app/globals.css b/app/globals.css
index 3ed8004..0b7a38d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,6 @@
 @import "tailwindcss";
+/* Antes de los overrides dark de la sección Leaflet para ganar en el cascade */
+@import "leaflet/dist/leaflet.css";
 
 :root {
   --background: #0d0d1a;
@@ -8,104 +10,176 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-titillium);
   --font-mono: var(--font-geist-mono);
 }
 
+/* ── Paleta oficial (extraída de public/images/logo.png) ──
+   Tailwind v4 no usa tailwind.config.ts: los tokens se declaran aquí
+   y generan clases como bg-python-blue o text-accent-orange. */
+@theme {
+  /* Marca */
+  --color-python-blue: #306998;
+  --color-python-blue-light: #4b8bbe;
+  --color-python-yellow: #ffd43b;
+  --color-python-yellow-light: #ffe873;
+
+  /* Acentos del mosaico del logo */
+  --color-accent-red: #e24329;
+  --color-accent-orange: #f58220;
+  --color-accent-green: #2fb350;
+  --color-accent-purple: #5c4ee5;
+
+  /* Neutros (modo oscuro) */
+  --color-night: #0d0d1a;
+  --color-night-soft: #12122a;
+  --color-night-card: #16162e;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  font-family: var(--font-titillium), "Segoe UI", Arial, sans-serif;
 }
 
-/* ── Blob decorativo ──────────────────────────────────────── */
-.blob {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(100px);
-  opacity: 0.13;
-  pointer-events: none;
-  will-change: transform;
+::selection {
+  background: var(--color-python-yellow);
+  color: var(--color-night);
+}
+
+/* ── Utilidades editoriales de marca ──────────────────── */
+
+/* Esquina inferior derecha cortada: contraste angular frente al mapa orgánico */
+@utility cut-corner {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 18px),
+    calc(100% - 18px) 100%,
+    0 100%
+  );
+}
+
+/* Corte diagonal inferior para portadas de eventos */
+@utility clip-diagonal {
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
+}
+
+/* Texto contorneado para marcas de agua */
+@utility text-stroke {
+  -webkit-text-stroke: 1px rgb(255 255 255 / 0.1);
+  color: transparent;
 }
 
-.blob-blue {
-  width: 520px;
-  height: 520px;
-  background: #4584b6;
-  top: -160px;
-  left: -160px;
-  animation: blob-float 11s ease-in-out infinite;
+/* ── Animación de entrada al hacer scroll (componente Reveal) ── */
+.reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition:
+    opacity 0.7s ease,
+    transform 0.7s ease;
 }
 
-.blob-yellow {
-  width: 420px;
-  height: 420px;
-  background: #ffd43b;
-  top: -120px;
-  right: -120px;
-  animation: blob-float-reverse 13s ease-in-out infinite;
+.reveal.is-visible {
+  opacity: 1;
+  transform: none;
 }
 
-.blob-red {
-  width: 360px;
-  height: 360px;
-  background: #e63329;
-  bottom: -120px;
-  left: 8%;
-  animation: blob-float 15s ease-in-out infinite 2s;
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
 }
 
-.blob-green {
-  width: 300px;
-  height: 300px;
-  background: #4caf50;
-  bottom: -80px;
-  right: 6%;
-  animation: blob-float-reverse 12s ease-in-out infinite 1s;
+/* ── Leaflet (mapa del hero) ────────────────────────── */
+.leaflet-container {
+  background: var(--color-night);
+  font-family: inherit;
 }
 
-/* ── Animaciones de blob ──────────────────────────────────── */
-@keyframes blob-float {
-  0%, 100% { transform: translateY(0px) scale(1); }
-  50%       { transform: translateY(-28px) scale(1.06); }
+/* Marcador cuadrado del mosaico con anillo pulsante */
+.map-marker {
+  background: transparent;
+  border: 0;
+}
+
+.map-marker__dot {
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--color-night);
+}
+
+.map-marker__ring {
+  position: absolute;
+  inset: 0;
+  opacity: 0.5;
+  animation: marker-pulse 2s ease-out infinite;
+}
+
+@keyframes marker-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .map-marker__ring {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+/* Popup acorde al estilo editorial (anguloso, sombra dura) */
+.leaflet-popup-content-wrapper {
+  background: var(--color-night);
+  color: var(--foreground);
+  border: 1px solid rgb(255 255 255 / 0.2);
+  border-radius: 0;
+  box-shadow: 8px 8px 0 0 rgb(0 0 0 / 0.45);
 }
 
-@keyframes blob-float-reverse {
-  0%, 100% { transform: translateY(0px) scale(1); }
-  50%       { transform: translateY(28px) scale(0.94); }
+.leaflet-popup-content {
+  margin: 16px;
 }
 
-/* ── Gradiente animado en el texto ───────────────────────── */
-.gradient-text {
-  background: linear-gradient(135deg, #ffd43b 0%, #4584b6 40%, #ffd43b 80%);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  animation: gradient-shift 5s ease infinite;
+.leaflet-popup-content p {
+  margin: 0;
 }
 
-@keyframes gradient-shift {
-  0%, 100% { background-position: 0% 50%; }
-  50%       { background-position: 100% 50%; }
+.leaflet-popup-tip {
+  background: var(--color-night);
+  border: 1px solid rgb(255 255 255 / 0.2);
+  box-shadow: none;
 }
 
-/* ── Glow suave en el logo ───────────────────────────────── */
-.logo-glow {
-  filter: drop-shadow(0 0 32px rgba(69, 132, 182, 0.25));
-  transition: filter 0.4s ease;
+.leaflet-container a.leaflet-popup-close-button {
+  color: #a1a1aa;
 }
 
-.logo-glow:hover {
-  filter: drop-shadow(0 0 48px rgba(255, 212, 59, 0.3));
+.leaflet-container a.leaflet-popup-close-button:hover {
+  color: #ffffff;
 }
 
-/* ── Badge «Próximamente» ────────────────────────────────── */
-@keyframes badge-ring {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0.45); }
-  60%       { box-shadow: 0 0 0 10px rgba(255, 212, 59, 0); }
+/* Atribución OSM/CARTO discreta sobre fondo oscuro */
+.leaflet-control-attribution {
+  background: rgb(13 13 26 / 0.85) !important;
+  color: #71717a;
+  font-size: 10px;
 }
 
-.badge-glow {
-  animation: badge-ring 2.8s ease-out infinite;
+.leaflet-control-attribution a {
+  color: #a1a1aa;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 01cba3e..40996e8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,13 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist_Mono, Titillium_Web } from "next/font/google";
 import ConsoleInit from "./ConsoleInit";
 import "./globals.css";
 export { metadata, viewport } from "@/lib/seo";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+// 300 detalles/lead · 400 cuerpo · 600 labels · 700 botones · 900 titulares
+const titillium = Titillium_Web({
+  variable: "--font-titillium",
   subsets: ["latin"],
+  weight: ["300", "400", "600", "700", "900"],
 });
 
 const geistMono = Geist_Mono({
@@ -21,7 +23,7 @@ export default function RootLayout({
   return (
     <html
       lang="es"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${titillium.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
         <ConsoleInit />
diff --git a/app/page.tsx b/app/page.tsx
index c681a6e..f321abd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,89 +1,23 @@
-import Image from "next/image";
-import { asset } from "@/lib/assets";
+import Navbar from "@/components/layout/Navbar";
+import Footer from "@/components/layout/Footer";
+import Hero from "@/components/sections/Hero";
+import Communities from "@/components/sections/Communities";
+import Events from "@/components/sections/Events";
+import Sponsors from "@/components/sections/Sponsors";
+import Newsletter from "@/components/sections/Newsletter";
 
 export default function Home() {
   return (
-    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-[#0d0d1a]">
-
-      {/* ── Blobs de color decorativos ────────────────────────── */}
-      <div className="blob blob-blue" aria-hidden="true" />
-      <div className="blob blob-yellow" aria-hidden="true" />
-      <div className="blob blob-red" aria-hidden="true" />
-      <div className="blob blob-green" aria-hidden="true" />
-
-      {/* ── Grilla sutil de fondo ─────────────────────────────── */}
-      <div
-        className="absolute inset-0 opacity-[0.025]"
-        aria-hidden="true"
-        style={{
-          backgroundImage:
-            "linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), " +
-            "linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)",
-          backgroundSize: "60px 60px",
-        }}
-      />
-
-      {/* ── Contenido principal ───────────────────────────────── */}
-      <main className="relative z-10 flex flex-col items-center gap-8 px-6 py-16 text-center max-w-3xl mx-auto">
-
-        {/* Logo */}
-        <div className="logo-glow">
-          <Image
-            src={asset("/images/logo.png")}
-            alt="Python Colombia"
-            width={480}
-            height={148}
-            priority
-            className="w-56 sm:w-72 md:w-[420px] h-auto"
-          />
-        </div>
-
-        {/* Badge «Próximamente» */}
-        <span className="badge-glow inline-flex items-center gap-2 rounded-full border border-yellow-400/30 bg-yellow-400/10 px-5 py-2 text-xs font-bold tracking-[0.2em] uppercase text-yellow-300">
-          <span className="h-2 w-2 rounded-full bg-yellow-400 animate-pulse" />
-          Próximamente
-        </span>
-
-        {/* Encabezado principal */}
-        <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight tracking-tight max-w-2xl">
-          El hogar digital de la comunidad{" "}
-          <span className="gradient-text">Python Colombia</span>{" "}
-          se está renovando.
-        </h1>
-
-        {/* Subtexto */}
-        <p className="text-zinc-400 text-base sm:text-lg leading-relaxed max-w-lg">
-          Estamos construyendo algo increíble para ti y toda la comunidad.
-          Vuelve pronto y sé parte de este gran paso.
-        </p>
-
-        {/* Snippet decorativo tipo código */}
-        <div className="mt-2 w-full max-w-sm rounded-xl border border-zinc-700/50 bg-zinc-900/60 backdrop-blur-sm px-6 py-4 text-left font-mono text-sm leading-7">
-          <span className="text-[#ffd43b]">import</span>{" "}
-          <span className="text-[#4584b6]">python_colombia</span>
-          <br />
-          <br />
-          <span className="text-[#4caf50]">community</span>{" "}
-          <span className="text-zinc-300">=</span>{" "}
-          <span className="text-[#4584b6]">python_colombia</span>
-          <span className="text-zinc-300">.</span>
-          <span className="text-zinc-200">Community</span>
-          <span className="text-zinc-300">()</span>
-          <br />
-          <span className="text-zinc-500"># coming soon... 🐍</span>
-        </div>
-
+    <>
+      <Navbar />
+      <main className="flex-1">
+        <Hero />
+        <Communities />
+        <Events />
+        <Sponsors />
+        <Newsletter />
       </main>
-
-      {/* ── Footer ────────────────────────────────────────────── */}
-      <footer className="relative z-10 pb-8 text-center">
-        <p className="text-zinc-600 text-sm">
-          © {new Date().getFullYear()} Python Colombia
-          <span className="mx-2 text-zinc-700">·</span>
-          Comunidad de Python en Colombia ♥
-        </p>
-      </footer>
-
-    </div>
+      <Footer />
+    </>
   );
 }
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
new file mode 100644
index 0000000..0cd28f4
--- /dev/null
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,120 @@
+import Image from "next/image";
+import type { IconType } from "react-icons";
+import {
+  FaDiscord,
+  FaEnvelope,
+  FaFacebookF,
+  FaGithub,
+  FaInstagram,
+  FaMedium,
+  FaSlack,
+  FaTelegram,
+  FaXTwitter,
+} from "react-icons/fa6";
+import { asset } from "@/lib/assets";
+import { MosaicStrip } from "@/components/ui/MosaicBar";
+import { CODE_OF_CONDUCT_URL, CONTACT_EMAIL, NAV_LINKS, SOCIAL_LINKS } from "@/lib/site";
+
+/** Icono y color de hover por red (acentos del mosaico del logo). */
+const SOCIAL_ICONS: Record<string, { icon: IconType; hoverClass: string }> = {
+  email: { icon: FaEnvelope, hoverClass: "hover:text-python-yellow hover:border-python-yellow/50" },
+  x: { icon: FaXTwitter, hoverClass: "hover:text-white hover:border-white/50" },
+  facebook: { icon: FaFacebookF, hoverClass: "hover:text-python-blue-light hover:border-python-blue-light/50" },
+  instagram: { icon: FaInstagram, hoverClass: "hover:text-accent-red hover:border-accent-red/50" },
+  github: { icon: FaGithub, hoverClass: "hover:text-white hover:border-white/50" },
+  telegram: { icon: FaTelegram, hoverClass: "hover:text-python-blue-light hover:border-python-blue-light/50" },
+  medium: { icon: FaMedium, hoverClass: "hover:text-accent-green hover:border-accent-green/50" },
+  slack: { icon: FaSlack, hoverClass: "hover:text-accent-orange hover:border-accent-orange/50" },
+  discord: { icon: FaDiscord, hoverClass: "hover:text-accent-purple hover:border-accent-purple/50" },
+};
+
+export default function Footer() {
+  return (
+    <footer className="relative bg-night-soft">
+      {/* El mosaico del logo remata la página, como en la navbar */}
+      <MosaicStrip />
+
+      <div className="relative mx-auto max-w-6xl px-4 py-16 sm:px-6">
+        <div className="grid gap-12 md:grid-cols-[1.4fr_1fr]">
+          <div>
+            <Image
+              src={asset("/images/logo.png")}
+              alt="Python Colombia"
+              width={195}
+              height={60}
+              className="h-12 w-auto"
+            />
+            <p className="mt-5 max-w-sm text-sm font-light leading-relaxed text-zinc-400">
+              La comunidad oficial de Python en Colombia. Aprende, comparte y
+              crece junto a pythonistas de todo el país.
+            </p>
+            <nav aria-label="Secciones" className="mt-8 flex flex-wrap gap-x-6 gap-y-2">
+              {NAV_LINKS.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400 transition hover:text-python-yellow focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-python-yellow"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          </div>
+
+          <div>
+            <h2 className="text-sm font-black uppercase tracking-[0.25em] text-white">
+              Encuéntranos en
+            </h2>
+            <ul className="mt-4 flex flex-wrap gap-3">
+              {SOCIAL_LINKS.map((social) => {
+                const entry = SOCIAL_ICONS[social.id];
+                if (!entry) return null;
+                const Icon = entry.icon;
+                const external = social.href.startsWith("http");
+                return (
+                  <li key={social.id}>
+                    <a
+                      href={social.href}
+                      aria-label={social.label}
+                      title={social.label}
+                      {...(external
+                        ? { target: "_blank", rel: "noopener noreferrer" }
+                        : {})}
+                      className={`flex h-11 w-11 items-center justify-center border border-white/10 bg-white/5 text-zinc-300 transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow ${entry.hoverClass}`}
+                    >
+                      <Icon size={18} aria-hidden="true" />
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+            <p className="mt-5 text-sm text-zinc-400">
+              Escríbenos:{" "}
+              <a
+                href={`mailto:${CONTACT_EMAIL}`}
+                className="font-medium text-python-yellow underline-offset-4 transition hover:underline"
+              >
+                {CONTACT_EMAIL}
+              </a>
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-6 sm:flex-row sm:items-center">
+          <p className="font-mono text-xs text-zinc-500">
+            © {new Date().getFullYear()} Python Colombia. Todos los derechos
+            reservados.
+          </p>
+          <a
+            href={CODE_OF_CONDUCT_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-semibold uppercase tracking-[0.15em] text-zinc-400 underline-offset-4 transition hover:text-python-yellow hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-python-yellow"
+          >
+            Código de Conducta
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
new file mode 100644
index 0000000..d788e5c
--- /dev/null
+++ b/components/layout/Navbar.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { LuMenu, LuX } from "react-icons/lu";
+import { asset } from "@/lib/assets";
+import { NAV_LINKS } from "@/lib/site";
+import { MosaicStrip } from "@/components/ui/MosaicBar";
+
+// TODO: cuando existan páginas propias, reemplazar estos anchors por rutas
+// reales de Next.js (<Link href="/comunidades" />, etc.).
+
+const linkClass =
+  "px-1 py-2 text-[13px] font-semibold uppercase tracking-[0.18em] text-zinc-300 transition hover:text-python-yellow focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-python-yellow";
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  const solid = scrolled || open;
+
+  return (
+    <header
+      className={`sticky top-0 z-50 transition-colors duration-300 ${
+        solid
+          ? "border-b border-white/10 bg-night/90 shadow-lg shadow-black/20 backdrop-blur-md"
+          : "border-b border-transparent bg-transparent"
+      }`}
+    >
+      <MosaicStrip />
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
+        <a
+          href="#hero"
+          aria-label="Python Colombia — ir al inicio"
+          className="focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-python-yellow"
+          onClick={() => setOpen(false)}
+        >
+          <Image
+            src={asset("/images/logo.png")}
+            alt="Python Colombia"
+            width={146}
+            height={45}
+            priority
+            className="h-9 w-auto"
+          />
+        </a>
+
+        {/* Navegación de escritorio */}
+        <nav aria-label="Principal" className="hidden items-center gap-6 md:flex">
+          {NAV_LINKS.map((link) => (
+            <a key={link.href} href={link.href} className={linkClass}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        {/* Botón hamburguesa */}
+        <button
+          type="button"
+          className="p-2 text-zinc-200 transition hover:bg-white/10 hover:text-white focus-visible:outline-2 focus-visible:outline-python-yellow md:hidden"
+          aria-expanded={open}
+          aria-controls="mobile-nav"
+          aria-label={open ? "Cerrar menú" : "Abrir menú"}
+          onClick={() => setOpen((value) => !value)}
+        >
+          {open ? <LuX size={22} aria-hidden="true" /> : <LuMenu size={22} aria-hidden="true" />}
+        </button>
+      </div>
+
+      {/* Drawer móvil */}
+      {open && (
+        <nav
+          id="mobile-nav"
+          aria-label="Principal móvil"
+          className="border-t border-white/10 bg-night/95 backdrop-blur-md md:hidden"
+        >
+          <ul className="space-y-1 px-4 pb-6 pt-3">
+            {NAV_LINKS.map((link) => (
+              <li key={link.href}>
+                <a
+                  href={link.href}
+                  onClick={() => setOpen(false)}
+                  className="block px-3 py-3 text-sm font-semibold uppercase tracking-[0.18em] text-zinc-200 transition hover:bg-white/5 hover:text-python-yellow focus-visible:outline-2 focus-visible:outline-python-yellow"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )}
+    </header>
+  );
+}
diff --git a/components/map/ColombiaMap.tsx b/components/map/ColombiaMap.tsx
new file mode 100644
index 0000000..61b86c2
--- /dev/null
+++ b/components/map/ColombiaMap.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import type { CommunityMarker } from "@/lib/types";
+import { markerColor } from "./marker-colors";
+
+const LeafletMap = dynamic(() => import("./LeafletMap"), {
+  ssr: false,
+  loading: () => <MapSkeleton />,
+});
+
+function MapSkeleton() {
+  return (
+    <div
+      className="flex h-full w-full animate-pulse items-center justify-center bg-night-soft"
+      aria-hidden="true"
+    >
+      <p className="font-mono text-sm text-zinc-500">&gt;&gt;&gt; cargando_mapa()</p>
+    </div>
+  );
+}
+
+interface ColombiaMapProps {
+  markers: readonly CommunityMarker[];
+}
+
+/**
+ * Mapa real de Colombia (Leaflet + CARTO Dark Matter) + chips de ciudades.
+ * Los chips permiten abrir cada popup con teclado y en táctil, como
+ * alternativa accesible al click directo sobre el marcador.
+ */
+export default function ColombiaMap({ markers }: ColombiaMapProps) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  return (
+    <div className="w-full" role="region" aria-label="Mapa de comunidades de Python en Colombia">
+      <div className="relative">
+        {/* `isolate` encapsula los z-index de Leaflet para no tapar la navbar */}
+        <div className="isolate h-[380px] w-full overflow-hidden border border-white/10 sm:h-[480px] lg:h-[560px]">
+          <LeafletMap markers={markers} activeId={activeId} onSelect={setActiveId} />
+        </div>
+        {/* Bloques del mosaico anclados a las esquinas del contenedor */}
+        <span aria-hidden="true" className="absolute -left-1.5 -top-1.5 h-3 w-3 bg-python-yellow" />
+        <span aria-hidden="true" className="absolute -bottom-1.5 -right-1.5 h-3 w-3 bg-accent-red" />
+      </div>
+
+      <ul className="mt-3 flex flex-wrap justify-center gap-2" aria-label="Comunidades en el mapa">
+        {markers.map((marker, index) => {
+          const isActive = activeId === marker.id;
+          return (
+            <li key={marker.id}>
+              <button
+                type="button"
+                aria-pressed={isActive}
+                onClick={() => setActiveId(isActive ? null : marker.id)}
+                className={`inline-flex items-center gap-2 border px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow ${
+                  isActive
+                    ? "border-python-yellow bg-python-yellow text-night"
+                    : "border-white/15 bg-transparent text-zinc-300 hover:border-white/40 hover:text-white"
+                }`}
+              >
+                <span
+                  className="h-2 w-2"
+                  style={{ backgroundColor: markerColor(index) }}
+                  aria-hidden="true"
+                />
+                {marker.city}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/components/map/LeafletMap.tsx b/components/map/LeafletMap.tsx
new file mode 100644
index 0000000..a74313f
--- /dev/null
+++ b/components/map/LeafletMap.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import L from "leaflet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+import type { CommunityMarker } from "@/lib/types";
+import { markerColor } from "./marker-colors";
+
+/** Territorio continental de Colombia. */
+const COLOMBIA_BOUNDS = L.latLngBounds([-4.2, -79], [12.5, -66.8]);
+
+interface LeafletMapProps {
+  markers: readonly CommunityMarker[];
+  activeId: string | null;
+  onSelect: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+/** Marcador cuadrado (mosaico del logo) con anillo pulsante, vía divIcon. */
+function buildIcon(color: string): L.DivIcon {
+  return L.divIcon({
+    className: "map-marker",
+    html:
+      `<span class="map-marker__ring" style="background:${color}"></span>` +
+      `<span class="map-marker__dot" style="background:${color}"></span>`,
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+    popupAnchor: [0, -12],
+  });
+}
+
+export default function LeafletMap({ markers, activeId, onSelect }: LeafletMapProps) {
+  const mapRef = useRef<L.Map | null>(null);
+  const markerRefs = useRef(new Map<string, L.Marker>());
+
+  const icons = useMemo(
+    () => markers.map((_, index) => buildIcon(markerColor(index))),
+    [markers],
+  );
+
+  // Sincroniza los chips de la leyenda con el popup del marcador.
+  useEffect(() => {
+    if (!activeId) {
+      mapRef.current?.closePopup();
+      return;
+    }
+    const marker = markerRefs.current.get(activeId);
+    if (marker && !marker.isPopupOpen()) marker.openPopup();
+  }, [activeId]);
+
+  return (
+    <MapContainer
+      ref={mapRef}
+      className="h-full w-full"
+      bounds={COLOMBIA_BOUNDS}
+      boundsOptions={{ padding: [8, 8] }}
+      maxBounds={COLOMBIA_BOUNDS}
+      zoomSnap={0.25}
+      // Infografía curada: sin navegación libre, solo marcadores clicables.
+      zoomControl={false}
+      dragging={false}
+      scrollWheelZoom={false}
+      doubleClickZoom={false}
+      touchZoom={false}
+      boxZoom={false}
+      keyboard={false}
+    >
+      {/* CARTO Dark Matter quedó descartado: hoy marca "API KEY REQUIRED" en
+          peticiones anónimas. Esri Dark Gray es gratuito, sin key y del mismo
+          estilo oscuro. URL en orden {z}/{y}/{x}. */}
+      <TileLayer
+        url="https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}"
+        attribution='&copy; <a href="https://www.esri.com/">Esri</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        maxZoom={16}
+      />
+
+      {markers.map((marker, index) => (
+        <Marker
+          key={marker.id}
+          position={[marker.coordinates.lat, marker.coordinates.lng]}
+          icon={icons[index]}
+          title={marker.name}
+          ref={(instance) => {
+            if (instance) markerRefs.current.set(marker.id, instance);
+            else markerRefs.current.delete(marker.id);
+          }}
+          eventHandlers={{
+            popupopen: () => onSelect(marker.id),
+            popupclose: () =>
+              onSelect((current) => (current === marker.id ? null : current)),
+          }}
+        >
+          <Popup maxWidth={240}>
+            <div className="w-56">
+              <p className="flex items-center gap-2 text-sm font-bold text-white">
+                <span
+                  className="h-2.5 w-2.5 shrink-0"
+                  style={{ backgroundColor: markerColor(index) }}
+                  aria-hidden="true"
+                />
+                {marker.name}
+              </p>
+              <p className="mt-0.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-500">
+                {marker.city}
+              </p>
+              <p className="mt-2 text-xs font-light leading-relaxed text-zinc-300">
+                {marker.description}
+              </p>
+              <a
+                href={marker.communityUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                // Color inline: evita el azul de `.leaflet-container a`.
+                style={{ color: "var(--color-night)" }}
+                className="mt-3 inline-flex items-center gap-1.5 bg-python-yellow px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.1em] transition hover:bg-python-yellow-light focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow"
+              >
+                Ir a la comunidad
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M7 17L17 7M9 7h8v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </a>
+            </div>
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}
diff --git a/components/map/marker-colors.ts b/components/map/marker-colors.ts
new file mode 100644
index 0000000..0d12efe
--- /dev/null
+++ b/components/map/marker-colors.ts
@@ -0,0 +1,15 @@
+/**
+ * Acentos del mosaico del logo para los marcadores del mapa.
+ * Duplican los tokens de `@theme` (globals.css) porque Leaflet recibe hex directos.
+ */
+export const MARKER_COLORS = [
+  "#e24329", // accent-red
+  "#f58220", // accent-orange
+  "#2fb350", // accent-green
+  "#5c4ee5", // accent-purple
+  "#ffd43b", // python-yellow
+] as const;
+
+export function markerColor(index: number): string {
+  return MARKER_COLORS[index % MARKER_COLORS.length];
+}
diff --git a/components/sections/Communities.tsx b/components/sections/Communities.tsx
new file mode 100644
index 0000000..c96401e
--- /dev/null
+++ b/components/sections/Communities.tsx
@@ -0,0 +1,88 @@
+import Image from "next/image";
+import Reveal from "@/components/ui/Reveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import { mockCommunities } from "@/data/mockCommunities";
+
+/** Portadas de bloque sólido (mosaico del logo) con texto de contraste AA. */
+const COVERS = [
+  { block: "bg-accent-red", text: "text-white/90" },
+  { block: "bg-accent-orange", text: "text-night/80" },
+  { block: "bg-accent-green", text: "text-night/80" },
+  { block: "bg-accent-purple", text: "text-white/90" },
+] as const;
+
+const HOVER_SHADOWS = [
+  "hover:shadow-[8px_8px_0_0_var(--color-accent-red)]",
+  "hover:shadow-[8px_8px_0_0_var(--color-accent-orange)]",
+  "hover:shadow-[8px_8px_0_0_var(--color-accent-green)]",
+  "hover:shadow-[8px_8px_0_0_var(--color-accent-purple)]",
+] as const;
+
+export default function Communities() {
+  return (
+    <section id="comunidades" className="scroll-mt-24 py-24 lg:py-36">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <Reveal>
+          <SectionHeading
+            number="01"
+            eyebrow="Comunidades"
+            title="Una red que crece por todo el país"
+            description="Grupos locales y temáticos donde compartir, aprender y construir con Python. Encuentra el tuyo o ayúdanos a crear uno nuevo."
+          />
+        </Reveal>
+
+        {/* La columna central baja en desktop para romper la grilla uniforme */}
+        <ul className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:pb-10">
+          {mockCommunities.map((community, index) => (
+            <li key={community.id} className={index % 3 === 1 ? "lg:translate-y-10" : ""}>
+              <Reveal delay={(index % 3) * 90} className="h-full">
+                <article
+                  className={`group flex h-full flex-col border border-white/10 bg-night-card transition hover:-translate-y-1 motion-reduce:hover:translate-y-0 ${HOVER_SHADOWS[index % HOVER_SHADOWS.length]}`}
+                >
+                  {community.coverImage ? (
+                    <Image
+                      src={community.coverImage}
+                      alt={`Portada de ${community.name}`}
+                      width={640}
+                      height={256}
+                      className="cut-corner h-28 w-full object-cover"
+                    />
+                  ) : (
+                    <div
+                      className={`cut-corner flex h-28 items-end p-4 ${COVERS[index % COVERS.length].block}`}
+                      aria-hidden="true"
+                    >
+                      <span className={`font-mono text-xs font-semibold ${COVERS[index % COVERS.length].text}`}>
+                        &gt;&gt;&gt; import {community.id.replaceAll("-", "_")}
+                      </span>
+                    </div>
+                  )}
+
+                  <div className="flex flex-1 flex-col p-5">
+                    <div className="flex items-start justify-between gap-3">
+                      <h3 className="text-xl font-bold leading-tight text-white">
+                        {community.name}
+                      </h3>
+                      <span className="shrink-0 border border-white/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.15em] text-zinc-400">
+                        {community.city}
+                      </span>
+                    </div>
+                    <p className="mt-2 flex-1 text-sm font-light leading-relaxed text-zinc-400">
+                      {community.description}
+                    </p>
+                    <button
+                      type="button"
+                      className="mt-5 self-start border border-white/25 px-4 py-2 text-xs font-bold uppercase tracking-[0.12em] text-zinc-200 transition hover:bg-python-yellow/10 group-hover:border-python-yellow group-hover:text-python-yellow focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow"
+                    >
+                      Ver comunidad
+                    </button>
+                  </div>
+                </article>
+              </Reveal>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/Events.tsx b/components/sections/Events.tsx
new file mode 100644
index 0000000..8f485bb
--- /dev/null
+++ b/components/sections/Events.tsx
@@ -0,0 +1,230 @@
+import Image from "next/image";
+import { LuCalendar, LuClock3, LuMapPin, LuArrowUpRight } from "react-icons/lu";
+import Reveal from "@/components/ui/Reveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import { mockEvents } from "@/data/mockEvents";
+import type { CommunityEvent, EventMode } from "@/lib/types";
+
+const MODE_BADGES: Record<EventMode, string> = {
+  Presencial: "bg-accent-green text-night",
+  Virtual: "bg-accent-purple text-white",
+  Híbrido: "bg-accent-orange text-night",
+};
+
+/** Portadas de bloque sólido con texto de contraste AA. */
+const EVENT_COVERS = [
+  { block: "bg-python-blue", text: "text-white/85" },
+  { block: "bg-accent-purple", text: "text-white/85" },
+  { block: "bg-accent-orange", text: "text-night/75" },
+  { block: "bg-accent-green", text: "text-night/75" },
+] as const;
+
+const dateFormatter = new Intl.DateTimeFormat("es-CO", {
+  weekday: "long",
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+  timeZone: "America/Bogota",
+});
+
+const timeFormatter = new Intl.DateTimeFormat("es-CO", {
+  hour: "numeric",
+  minute: "2-digit",
+  hour12: true,
+  timeZone: "America/Bogota",
+});
+
+const badgeDayFormatter = new Intl.DateTimeFormat("es-CO", {
+  day: "2-digit",
+  timeZone: "America/Bogota",
+});
+
+const badgeMonthFormatter = new Intl.DateTimeFormat("es-CO", {
+  month: "short",
+  timeZone: "America/Bogota",
+});
+
+/** «jueves, 24 de septiembre» -> «Jueves, 24 de septiembre» */
+function capitalizeFirst(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+interface EventCardProps {
+  event: CommunityEvent;
+  index: number;
+  isPast?: boolean;
+  /** La tarjeta destacada ocupa dos columnas con portada más alta. */
+  featured?: boolean;
+}
+
+function EventCard({ event, index, isPast = false, featured = false }: EventCardProps) {
+  const startsAt = new Date(event.startsAt);
+  const cover = EVENT_COVERS[index % EVENT_COVERS.length];
+
+  return (
+    <a
+      href={event.eventUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`${event.title} — abrir página del evento`}
+      className={`group flex h-full flex-col border border-white/10 bg-night-card transition hover:-translate-y-1 hover:shadow-[8px_8px_0_0_var(--color-python-blue-light)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow motion-reduce:hover:translate-y-0 ${
+        isPast ? "opacity-60 saturate-50" : ""
+      }`}
+    >
+      <div className="relative">
+        {event.coverImage ? (
+          <Image
+            src={event.coverImage}
+            alt=""
+            width={640}
+            height={280}
+            className={`clip-diagonal w-full object-cover ${featured ? "h-48" : "h-32"}`}
+          />
+        ) : (
+          <div
+            className={`clip-diagonal flex items-center justify-center ${featured ? "h-48" : "h-32"} ${cover.block}`}
+            aria-hidden="true"
+          >
+            <span className={`font-mono text-sm font-semibold ${cover.text}`}>
+              python_colombia.events
+            </span>
+          </div>
+        )}
+
+        {/* Fecha anclada a la esquina superior izquierda */}
+        <div
+          className="absolute left-0 top-0 bg-python-yellow px-3 py-2 text-center text-night"
+          aria-hidden="true"
+        >
+          <p className="text-xl font-black leading-none">
+            {badgeDayFormatter.format(startsAt)}
+          </p>
+          <p className="text-[10px] font-bold uppercase tracking-[0.15em]">
+            {badgeMonthFormatter.format(startsAt).replace(".", "")}
+          </p>
+        </div>
+
+        {isPast && (
+          <span className="absolute right-0 top-0 border-b border-l border-white/15 bg-night px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-300">
+            Finalizado
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-1 flex-col p-5">
+        <span
+          className={`self-start px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.15em] ${MODE_BADGES[event.mode]}`}
+        >
+          {event.mode}
+        </span>
+        <h3
+          className={`mt-3 flex-1 leading-snug text-white transition group-hover:text-python-yellow ${
+            featured ? "text-2xl font-black tracking-tight sm:text-3xl" : "text-lg font-bold"
+          }`}
+        >
+          {event.title}
+        </h3>
+        <dl className="mt-4 space-y-1.5 text-sm text-zinc-400">
+          <div className="flex items-center gap-2">
+            <dt className="sr-only">Fecha</dt>
+            <LuCalendar size={15} className="shrink-0 text-python-blue-light" aria-hidden="true" />
+            <dd>{capitalizeFirst(dateFormatter.format(startsAt))}</dd>
+          </div>
+          <div className="flex items-center gap-2">
+            <dt className="sr-only">Hora</dt>
+            <LuClock3 size={15} className="shrink-0 text-python-blue-light" aria-hidden="true" />
+            <dd>{timeFormatter.format(startsAt)}</dd>
+          </div>
+          <div className="flex items-center gap-2">
+            <dt className="sr-only">Lugar</dt>
+            <LuMapPin size={15} className="shrink-0 text-python-blue-light" aria-hidden="true" />
+            <dd>{event.location}</dd>
+          </div>
+        </dl>
+        <p className="mt-5 inline-flex items-center gap-1 text-xs font-bold uppercase tracking-[0.15em] text-python-blue-light transition group-hover:text-python-yellow">
+          Ver evento
+          <LuArrowUpRight size={14} aria-hidden="true" />
+        </p>
+      </div>
+    </a>
+  );
+}
+
+// Snapshot al momento del build (export estático); se refresca en cada deploy.
+const BUILD_TIME = Date.now();
+
+export default function Events() {
+  const upcoming = mockEvents
+    .filter((event) => new Date(event.startsAt).getTime() >= BUILD_TIME)
+    .sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
+  const past = mockEvents
+    .filter((event) => new Date(event.startsAt).getTime() < BUILD_TIME)
+    .sort((a, b) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
+
+  return (
+    <section
+      id="eventos"
+      className="scroll-mt-24 border-y border-white/5 bg-night-soft py-16 lg:py-24"
+    >
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <Reveal>
+          <SectionHeading
+            number="02"
+            eyebrow="Eventos"
+            title="Próximos encuentros de la comunidad"
+            description="Charlas, talleres y meetups presenciales y virtuales. Haz click en cualquier evento para registrarte."
+            accentClass="text-accent-orange"
+          />
+        </Reveal>
+
+        {upcoming.length > 0 ? (
+          <ul className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {upcoming.map((event, index) => (
+              <li key={event.id} className={index === 0 ? "sm:col-span-2" : ""}>
+                <Reveal delay={(index % 3) * 90} className="h-full">
+                  <EventCard event={event} index={index} featured={index === 0} />
+                </Reveal>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <Reveal>
+            <div className="mt-14 max-w-xl border border-dashed border-white/15 bg-night-card p-10">
+              <p className="font-mono text-sm text-zinc-500">
+                &gt;&gt;&gt; eventos.proximos(){" "}
+                <span className="text-zinc-600"># []</span>
+              </p>
+              <p className="mt-4 text-xl font-bold text-white">
+                Pronto anunciaremos nuevos eventos
+              </p>
+              <p className="mt-2 text-sm font-light text-zinc-400">
+                Síguenos en redes o suscríbete al newsletter para enterarte de
+                primero.
+              </p>
+            </div>
+          </Reveal>
+        )}
+
+        {past.length > 0 && (
+          <div className="mt-20">
+            <Reveal>
+              <h3 className="flex items-center gap-4 text-xs font-bold uppercase tracking-[0.35em] text-zinc-500">
+                Eventos anteriores
+                <span aria-hidden="true" className="h-px flex-1 bg-white/10" />
+              </h3>
+            </Reveal>
+            <ul className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {past.map((event, index) => (
+                <li key={event.id}>
+                  <Reveal delay={(index % 3) * 90} className="h-full">
+                    <EventCard event={event} index={index + upcoming.length} isPast />
+                  </Reveal>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
new file mode 100644
index 0000000..2859da9
--- /dev/null
+++ b/components/sections/Hero.tsx
@@ -0,0 +1,73 @@
+import ColombiaMap from "@/components/map/ColombiaMap";
+import Reveal from "@/components/ui/Reveal";
+import { MosaicBar } from "@/components/ui/MosaicBar";
+import { mockMapMarkers } from "@/data/mockMapMarkers";
+
+export default function Hero() {
+  return (
+    <section id="hero" className="relative overflow-hidden scroll-mt-24">
+      {/* Marca de agua tipo prompt de Python */}
+      <span
+        aria-hidden="true"
+        className="text-stroke pointer-events-none absolute -bottom-16 -left-4 hidden select-none font-mono text-[13rem] font-black leading-none lg:block"
+      >
+        &gt;&gt;&gt;
+      </span>
+
+      {/* Bloques del mosaico flotando en el canal entre columnas */}
+      <div aria-hidden="true" className="pointer-events-none absolute inset-0 hidden lg:block">
+        <span className="absolute left-[46.5%] top-24 h-3 w-3 bg-accent-red" />
+        <span className="absolute left-[44.5%] top-32 h-5 w-5 bg-python-yellow" />
+        <span className="absolute left-[45.5%] top-44 h-2.5 w-2.5 bg-accent-green" />
+      </div>
+
+      <div className="relative mx-auto grid max-w-6xl gap-14 px-4 pb-16 pt-12 sm:px-6 lg:grid-cols-12 lg:items-center lg:gap-10 lg:pb-24 lg:pt-20">
+        <Reveal className="lg:col-span-5">
+          <div>
+            <p className="flex items-center gap-3">
+              <MosaicBar />
+              <span className="text-xs font-semibold uppercase tracking-[0.35em] text-zinc-400">
+                Comunidad oficial
+              </span>
+            </p>
+
+            <h1 className="mt-7 text-5xl font-black leading-[0.98] tracking-tight text-white sm:text-6xl xl:text-7xl">
+              La comunidad oficial de{" "}
+              <span className="text-python-yellow">Python Colombia</span>
+            </h1>
+
+            <p className="mt-6 text-2xl font-bold tracking-tight text-python-blue-light sm:text-3xl">
+              ¡Aprende, comparte y crece!
+            </p>
+
+            <p className="mt-5 max-w-xl text-lg font-light leading-relaxed text-zinc-400">
+              Conecta con pythonistas de todo el país: meetups, talleres,
+              proyectos open source y una red de comunidades locales que te
+              esperan con los brazos abiertos.
+            </p>
+
+            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
+              <button
+                type="button"
+                className="bg-python-yellow px-8 py-4 text-sm font-bold uppercase tracking-[0.12em] text-night transition hover:-translate-y-0.5 hover:shadow-[6px_6px_0_0_var(--color-python-blue-light)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow motion-reduce:hover:translate-y-0"
+              >
+                Únete a la comunidad
+              </button>
+              <a
+                href="#eventos"
+                className="border-2 border-accent-green px-8 py-4 text-center text-sm font-bold uppercase tracking-[0.12em] text-accent-green transition hover:bg-accent-green hover:text-night focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-green"
+              >
+                Próximos eventos
+              </a>
+            </div>
+          </div>
+        </Reveal>
+
+        {/* El mapa sangra hacia el borde derecho para romper la grilla */}
+        <Reveal delay={150} className="lg:col-span-7 lg:-mr-10 xl:-mr-20">
+          <ColombiaMap markers={mockMapMarkers} />
+        </Reveal>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/Newsletter.tsx b/components/sections/Newsletter.tsx
new file mode 100644
index 0000000..48d919f
--- /dev/null
+++ b/components/sections/Newsletter.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import { LuLoaderCircle, LuMail } from "react-icons/lu";
+import Reveal from "@/components/ui/Reveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import { subscribeToNewsletter } from "@/lib/mock/newsletter";
+import type { NewsletterResponse, NewsletterStatus } from "@/lib/types";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const FEEDBACK_STYLES: Record<NewsletterStatus, string> = {
+  success: "bg-accent-green text-night",
+  already_subscribed: "bg-python-yellow text-night",
+  error: "bg-accent-red text-white",
+};
+
+type FormState =
+  | { kind: "idle" }
+  | { kind: "invalid" }
+  | { kind: "loading" }
+  | { kind: "feedback"; response: NewsletterResponse };
+
+export default function Newsletter() {
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<FormState>({ kind: "idle" });
+
+  const loading = state.kind === "loading";
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (loading) return;
+
+    if (!EMAIL_PATTERN.test(email.trim())) {
+      setState({ kind: "invalid" });
+      return;
+    }
+
+    setState({ kind: "loading" });
+    // Mismo contrato async que tendrá el fetch a la API real.
+    const response = await subscribeToNewsletter(email);
+    setState({ kind: "feedback", response });
+    if (response.status === "success") setEmail("");
+  }
+
+  return (
+    <section id="newsletter" className="scroll-mt-24 py-20 lg:py-32">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <Reveal>
+          <div className="grid border border-white/10 lg:grid-cols-5">
+            {/* Panel de marca en azul sólido */}
+            <div className="relative bg-python-blue p-8 sm:p-10 lg:col-span-2">
+              <SectionHeading
+                number="04"
+                eyebrow="Newsletter"
+                title="No te pierdas nada"
+                accentClass="text-python-yellow-light"
+              />
+              <div aria-hidden="true" className="mt-10 hidden gap-1.5 lg:flex">
+                <span className="h-3 w-3 bg-python-yellow" />
+                <span className="h-3 w-3 bg-python-yellow/60" />
+                <span className="h-3 w-3 bg-python-yellow/30" />
+              </div>
+            </div>
+
+            {/* Panel del formulario */}
+            <div className="bg-night-card p-8 sm:p-10 lg:col-span-3">
+              <p className="max-w-md text-lg font-light leading-relaxed text-zinc-400">
+                Recibe en tu correo los próximos eventos, noticias y novedades
+                de la comunidad. Nada de spam, lo prometemos.
+              </p>
+
+              <form onSubmit={handleSubmit} noValidate className="mt-8">
+                <div className="flex flex-col gap-3 sm:flex-row">
+                  <label htmlFor="newsletter-email" className="sr-only">
+                    Correo electrónico
+                  </label>
+                  <div className="relative flex-1">
+                    <LuMail
+                      size={18}
+                      aria-hidden="true"
+                      className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500"
+                    />
+                    <input
+                      id="newsletter-email"
+                      type="email"
+                      name="email"
+                      autoComplete="email"
+                      required
+                      placeholder="tucorreo@ejemplo.com"
+                      value={email}
+                      onChange={(event) => {
+                        setEmail(event.target.value);
+                        if (state.kind === "invalid") setState({ kind: "idle" });
+                      }}
+                      aria-invalid={state.kind === "invalid"}
+                      aria-describedby="newsletter-feedback"
+                      className={`w-full border bg-night py-3.5 pl-11 pr-4 text-base text-white placeholder:text-zinc-500 transition focus:outline-2 focus:outline-offset-2 focus:outline-python-yellow ${
+                        state.kind === "invalid"
+                          ? "border-accent-red"
+                          : "border-white/15 hover:border-white/30"
+                      }`}
+                    />
+                  </div>
+                  <button
+                    type="submit"
+                    disabled={loading}
+                    className="inline-flex items-center justify-center gap-2 bg-python-yellow px-7 py-3.5 text-sm font-bold uppercase tracking-[0.12em] text-night transition hover:-translate-y-0.5 hover:shadow-[5px_5px_0_0_var(--color-python-blue-light)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:hover:translate-y-0"
+                  >
+                    {loading && (
+                      <LuLoaderCircle size={18} className="animate-spin" aria-hidden="true" />
+                    )}
+                    {loading ? "Enviando…" : "Suscribirme"}
+                  </button>
+                </div>
+
+                {/* Región viva para anunciar el resultado a lectores de pantalla */}
+                <div id="newsletter-feedback" aria-live="polite" className="mt-4 min-h-6">
+                  {state.kind === "invalid" && (
+                    <p className="bg-accent-red px-4 py-3 text-sm font-semibold text-white">
+                      Ingresa un correo electrónico válido.
+                    </p>
+                  )}
+                  {state.kind === "feedback" && (
+                    <p
+                      className={`px-4 py-3 text-sm font-semibold ${FEEDBACK_STYLES[state.response.status]}`}
+                    >
+                      {state.response.message}
+                    </p>
+                  )}
+                </div>
+              </form>
+            </div>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}
diff --git a/components/sections/Sponsors.tsx b/components/sections/Sponsors.tsx
new file mode 100644
index 0000000..f2165ab
--- /dev/null
+++ b/components/sections/Sponsors.tsx
@@ -0,0 +1,106 @@
+import Image from "next/image";
+import { LuHandshake } from "react-icons/lu";
+import Reveal from "@/components/ui/Reveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import { mockSponsors } from "@/data/mockSponsors";
+import { CONTACT_EMAIL } from "@/lib/site";
+
+/** Cuadros de iniciales en bloques sólidos del mosaico (contraste AA). */
+const TILE_ACCENTS = [
+  "bg-accent-red text-white",
+  "bg-accent-orange text-night",
+  "bg-accent-green text-night",
+  "bg-accent-purple text-white",
+] as const;
+
+function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+export default function Sponsors() {
+  const mailto = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
+    "Quiero patrocinar a Python Colombia",
+  )}`;
+
+  return (
+    <section id="patrocinadores" className="scroll-mt-24 py-16 lg:py-20">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        {/* Cabecera asimétrica: título a la izquierda, CTA alineado abajo-derecha */}
+        <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
+          <Reveal>
+            <SectionHeading
+              number="03"
+              eyebrow="Patrocinadores"
+              title="Impulsa el talento Python en Colombia"
+              description="Tu marca frente a miles de desarrolladores en todo el país: visibilidad en eventos, meetups y canales de la comunidad, mientras apoyas el ecosistema tech local."
+              accentClass="text-accent-green"
+            />
+          </Reveal>
+
+          <Reveal delay={120} className="shrink-0">
+            <a
+              href={mailto}
+              className="inline-flex items-center gap-2 bg-accent-orange px-7 py-4 text-sm font-bold uppercase tracking-[0.12em] text-night transition hover:-translate-y-0.5 hover:shadow-[6px_6px_0_0_var(--color-python-yellow)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-orange motion-reduce:hover:translate-y-0"
+            >
+              <LuHandshake size={20} aria-hidden="true" />
+              Quiero ser patrocinador
+            </a>
+          </Reveal>
+        </div>
+
+        {mockSponsors.length > 0 ? (
+          <ul className="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+            {mockSponsors.map((sponsor, index) => (
+              <li key={sponsor.id} className="h-full">
+                <Reveal delay={(index % 4) * 80} className="h-full">
+                  <a
+                    href={sponsor.websiteUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex h-full flex-col items-center justify-center gap-3 border border-white/10 bg-night-card p-6 transition hover:-translate-y-0.5 hover:border-white/30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow motion-reduce:hover:translate-y-0"
+                  >
+                    {sponsor.logoImage ? (
+                      <Image
+                        src={sponsor.logoImage}
+                        alt={`Logo de ${sponsor.name}`}
+                        width={160}
+                        height={64}
+                        className="h-12 w-auto object-contain"
+                      />
+                    ) : (
+                      <span
+                        className={`flex h-14 w-14 items-center justify-center text-lg font-black ${TILE_ACCENTS[index % TILE_ACCENTS.length]}`}
+                        aria-hidden="true"
+                      >
+                        {initials(sponsor.name)}
+                      </span>
+                    )}
+                    <span className="text-sm font-semibold text-zinc-300">
+                      {sponsor.name}
+                    </span>
+                  </a>
+                </Reveal>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <Reveal>
+            <div className="mt-12 max-w-xl border border-dashed border-accent-orange/50 bg-night-card p-10">
+              <p className="text-xl font-bold text-white">
+                Sé el primero en apoyarnos
+              </p>
+              <p className="mt-2 text-sm font-light text-zinc-400">
+                Este espacio está reservado para las marcas que impulsan a la
+                comunidad Python en Colombia.
+              </p>
+            </div>
+          </Reveal>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/components/ui/MosaicBar.tsx b/components/ui/MosaicBar.tsx
new file mode 100644
index 0000000..f62c0ef
--- /dev/null
+++ b/components/ui/MosaicBar.tsx
@@ -0,0 +1,30 @@
+const MOSAIC_CLASSES = [
+  "bg-accent-red",
+  "bg-accent-orange",
+  "bg-python-yellow",
+  "bg-accent-green",
+  "bg-python-blue-light",
+  "bg-accent-purple",
+] as const;
+
+/** Fila de bloques sólidos del mosaico del logo (elemento gráfico recurrente). */
+export function MosaicBar({ className = "" }: { className?: string }) {
+  return (
+    <span aria-hidden="true" className={`inline-flex gap-1 ${className}`.trim()}>
+      {MOSAIC_CLASSES.map((color) => (
+        <span key={color} className={`h-2 w-2 ${color}`} />
+      ))}
+    </span>
+  );
+}
+
+/** Franja de mosaico de borde a borde (remate de navbar y footer). */
+export function MosaicStrip({ className = "" }: { className?: string }) {
+  return (
+    <div aria-hidden="true" className={`flex h-[3px] w-full ${className}`.trim()}>
+      {MOSAIC_CLASSES.map((color) => (
+        <span key={color} className={`flex-1 ${color}`} />
+      ))}
+    </div>
+  );
+}
diff --git a/components/ui/Reveal.tsx b/components/ui/Reveal.tsx
new file mode 100644
index 0000000..b28772f
--- /dev/null
+++ b/components/ui/Reveal.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface RevealProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Retardo en ms para escalonar elementos de una misma sección. */
+  delay?: number;
+}
+
+/** Animación sutil de entrada al hacer scroll (IntersectionObserver). */
+export default function Reveal({ children, className = "", delay = 0 }: RevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.15, rootMargin: "0px 0px -40px 0px" },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={`reveal ${visible ? "is-visible" : ""} ${className}`.trim()}
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/components/ui/SectionHeading.tsx b/components/ui/SectionHeading.tsx
new file mode 100644
index 0000000..f98f4db
--- /dev/null
+++ b/components/ui/SectionHeading.tsx
@@ -0,0 +1,40 @@
+import { MosaicBar } from "@/components/ui/MosaicBar";
+
+interface SectionHeadingProps {
+  /** Número editorial de la sección (ej. "01"). */
+  number: string;
+  eyebrow: string;
+  title: string;
+  description?: string;
+  /** Color del kicker (número + eyebrow). */
+  accentClass?: string;
+}
+
+export default function SectionHeading({
+  number,
+  eyebrow,
+  title,
+  description,
+  accentClass = "text-python-yellow",
+}: SectionHeadingProps) {
+  return (
+    <div className="max-w-3xl">
+      <p
+        className={`flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.35em] ${accentClass}`}
+      >
+        {/* <span className="font-mono">{number}</span> */}
+        <span aria-hidden="true" className="h-px w-10 bg-current" />
+        {eyebrow}
+      </p>
+      <h2 className="mt-5 text-4xl font-black leading-[1.02] tracking-tight text-white sm:text-5xl">
+        {title}
+      </h2>
+      <MosaicBar className="mt-6" />
+      {description && (
+        <p className="mt-5 max-w-xl text-lg font-light leading-relaxed text-zinc-400">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/data/mockCommunities.ts b/data/mockCommunities.ts
new file mode 100644
index 0000000..d5a90a7
--- /dev/null
+++ b/data/mockCommunities.ts
@@ -0,0 +1,62 @@
+import type { Community } from "@/lib/types";
+
+/**
+ * Comunidades de ejemplo para la grilla de tarjetas.
+ * Reemplazar por la API real de comunidades en una futura iteración.
+ */
+export const mockCommunities: readonly Community[] = [
+  {
+    id: "python-bogota",
+    name: "Python Bogotá",
+    city: "Bogotá",
+    description:
+      "El grupo más grande del país. Meetups mensuales con charlas de backend, datos e inteligencia artificial.",
+    coverImage: null,
+    communityUrl: "https://www.meetup.com/es/python-bogota/",
+  },
+  {
+    id: "python-medellin",
+    name: "Python Medellín",
+    city: "Medellín",
+    description:
+      "Talleres prácticos de Django, FastAPI y ciencia de datos con la energía de la comunidad paisa.",
+    coverImage: null,
+    communityUrl: "https://www.meetup.com/es/python-medellin/",
+  },
+  {
+    id: "python-cali",
+    name: "Python Cali",
+    city: "Cali",
+    description:
+      "Encuentros sobre automatización, testing y proyectos open source en el suroccidente colombiano.",
+    coverImage: null,
+    communityUrl: "https://www.meetup.com/es/python-cali/",
+  },
+  {
+    id: "python-barranquilla",
+    name: "Python Barranquilla",
+    city: "Barranquilla",
+    description:
+      "La casa de los pythonistas del Caribe: dojos de código, lightning talks y eventos híbridos.",
+    coverImage: null,
+    communityUrl: "https://www.meetup.com/es/python-barranquilla/",
+  },
+  {
+    id: "pyladies-colombia",
+    name: "PyLadies Colombia",
+    city: "Nacional",
+    description:
+      "Comunidad que impulsa la participación de mujeres en Python con mentorías, talleres y charlas.",
+    coverImage: null,
+    communityUrl: "https://www.meetup.com/es/pyladies-colombia/",
+  },
+  {
+    id: "python-bucaramanga",
+    name: "Python Bucaramanga",
+    city: "Bucaramanga",
+    description:
+      "Study groups de Python, visualización de datos y proyectos colaborativos en Santander.",
+    coverImage: null,
+    communityUrl: "https://www.meetup.com/es/python-bucaramanga/",
+  },
+] as const;
diff --git a/data/mockEvents.ts b/data/mockEvents.ts
new file mode 100644
index 0000000..4ebc082
--- /dev/null
+++ b/data/mockEvents.ts
@@ -0,0 +1,44 @@
+import type { CommunityEvent } from "@/lib/types";
+
+/**
+ * Eventos de ejemplo (con fechas futuras y una pasada para probar estados).
+ * Reemplazar por la API real de eventos (Meetup/Luma) en una futura iteración.
+ */
+export const mockEvents: readonly CommunityEvent[] = [
+  {
+    id: "pyday-bogota-2026",
+    title: "PyDay Bogotá 2026: un día completo de Python",
+    startsAt: "2026-10-17T09:00:00-05:00",
+    location: "Universidad Nacional, Bogotá",
+    mode: "Presencial",
+    coverImage: null,
+    eventUrl: "https://www.meetup.com/es/python-bogota/events/pyday-2026/",
+  },
+  {
+    id: "orionis-meetup-medellin",
+    title: "Orionis Meetup: El marco que revolucionó Python Web",
+    startsAt: "2026-09-24T18:30:00-05:00",
+    location: "Ruta N, Medellín",
+    mode: "Híbrido",
+    coverImage: null,
+    eventUrl: "https://www.meetup.com/es/python-medellin/events/orionis-framework/",
+  },
+  {
+    id: "taller-starlette-online",
+    title: "Taller: de cero a producción con Starlette",
+    startsAt: "2026-11-07T10:00:00-05:00",
+    location: "Transmisión en vivo",
+    mode: "Virtual",
+    coverImage: null,
+    eventUrl: "https://lu.ma/pythoncolombia-starlette",
+  },
+  {
+    id: "pycon-colombia-2026",
+    title: "PyCon Colombia 2026",
+    startsAt: "2026-06-12T08:00:00-05:00",
+    location: "Medellín",
+    mode: "Presencial",
+    coverImage: null,
+    eventUrl: "https://www.pycon.co/",
+  },
+] as const;
diff --git a/data/mockMapMarkers.ts b/data/mockMapMarkers.ts
new file mode 100644
index 0000000..62817bb
--- /dev/null
+++ b/data/mockMapMarkers.ts
@@ -0,0 +1,53 @@
+import type { CommunityMarker } from "@/lib/types";
+
+/**
+ * Marcadores de ejemplo para el mapa 3D del hero.
+ * Reemplazar por la API real de comunidades en una futura iteración.
+ */
+export const mockMapMarkers: readonly CommunityMarker[] = [
+  {
+    id: "bogota",
+    name: "Python Bogotá",
+    description:
+      "Meetups mensuales, charlas técnicas y espacios de networking en la capital.",
+    city: "Bogotá",
+    coordinates: { lat: 4.711, lng: -74.0721 },
+    communityUrl: "https://www.meetup.com/es/python-bogota/",
+  },
+  {
+    id: "medellin",
+    name: "Python Medellín",
+    description:
+      "Comunidad paisa enfocada en talleres prácticos, Django y ciencia de datos.",
+    city: "Medellín",
+    coordinates: { lat: 6.2442, lng: -75.5812 },
+    communityUrl: "https://www.meetup.com/es/python-medellin/",
+  },
+  {
+    id: "cali",
+    name: "Python Cali",
+    description:
+      "Encuentros sobre backend, automatización y proyectos open source del Valle.",
+    city: "Cali",
+    coordinates: { lat: 3.4516, lng: -76.532 },
+    communityUrl: "https://www.meetup.com/es/python-cali/",
+  },
+  {
+    id: "barranquilla",
+    name: "Python Barranquilla",
+    description:
+      "La comunidad del Caribe: charlas, dojos de código y eventos híbridos.",
+    city: "Barranquilla",
+    coordinates: { lat: 10.9685, lng: -74.7813 },
+    communityUrl: "https://www.meetup.com/es/python-barranquilla/",
+  },
+  {
+    id: "bucaramanga",
+    name: "Python Bucaramanga",
+    description:
+      "Grupo santandereano con study groups de Python y visualización de datos.",
+    city: "Bucaramanga",
+    coordinates: { lat: 7.1193, lng: -73.1227 },
+    communityUrl: "https://www.meetup.com/es/python-bucaramanga/",
+  },
+] as const;
diff --git a/data/mockSponsors.ts b/data/mockSponsors.ts
new file mode 100644
index 0000000..a444b68
--- /dev/null
+++ b/data/mockSponsors.ts
@@ -0,0 +1,27 @@
+import type { Sponsor } from "@/lib/types";
+
+/**
+ * Patrocinadores de ejemplo. Si el arreglo queda vacío, la sección muestra
+ * el placeholder «Sé el primero en apoyarnos».
+ * Reemplazar por la API real de patrocinadores en una futura iteración.
+ */
+export const mockSponsors: readonly Sponsor[] = [
+  {
+    id: "nube-andina",
+    name: "Nube Andina",
+    websiteUrl: "https://example.com/nube-andina",
+    logoImage: null,
+  },
+  {
+    id: "datacafe",
+    name: "DataCafé Labs",
+    websiteUrl: "https://example.com/datacafe",
+    logoImage: null,
+  },
+  {
+    id: "koders",
+    name: "Koders Co.",
+    websiteUrl: "https://example.com/koders",
+    logoImage: null,
+  },
+] as const;
diff --git a/lib/mock/newsletter.ts b/lib/mock/newsletter.ts
new file mode 100644
index 0000000..8ff5382
--- /dev/null
+++ b/lib/mock/newsletter.ts
@@ -0,0 +1,39 @@
+import type { NewsletterResponse } from "@/lib/types";
+
+/**
+ * Simula el endpoint de suscripción al newsletter con latencia artificial.
+ *
+ * El componente lo consume como si fuera un `fetch` real (async/await), de
+ * modo que la integración futura sea reemplazar el cuerpo de esta función
+ * por la llamada HTTP a la API real.
+ *
+ * Reglas deterministas para probar todos los estados de la UI:
+ * - correos que contienen "error"            -> status "error"
+ * - correos ya registrados en esta sesión    -> status "already_subscribed"
+ * - cualquier otro correo válido             -> status "success"
+ */
+const MOCK_LATENCY_MS = 900;
+
+const subscribedEmails = new Set(["hola@python.org.co"]);
+
+export async function subscribeToNewsletter(
+  email: string,
+): Promise<NewsletterResponse> {
+  await new Promise((resolve) => setTimeout(resolve, MOCK_LATENCY_MS));
+
+  const normalized = email.trim().toLowerCase();
+
+  if (normalized.includes("error")) {
+    return { status: "error", message: "Ocurrió un error, intenta de nuevo." };
+  }
+
+  if (subscribedEmails.has(normalized)) {
+    return {
+      status: "already_subscribed",
+      message: "Este correo ya está registrado.",
+    };
+  }
+
+  subscribedEmails.add(normalized);
+  return { status: "success", message: "¡Te has suscrito!" };
+}
diff --git a/lib/site.ts b/lib/site.ts
new file mode 100644
index 0000000..f9f0e76
--- /dev/null
+++ b/lib/site.ts
@@ -0,0 +1,33 @@
+/** Configuración estática del sitio: navegación, contacto y redes. */
+
+export const CONTACT_EMAIL = "colombiapython@gmail.com";
+
+export const CODE_OF_CONDUCT_URL =
+  "https://github.com/ColombiaPython/codigo-de-conducta";
+
+// TODO: cuando existan páginas propias (p. ej. /comunidades, /eventos),
+// convertir estos anchors en rutas reales de Next.js.
+export const NAV_LINKS = [
+  { label: "Comunidades", href: "#comunidades" },
+  { label: "Eventos", href: "#eventos" },
+  { label: "Patrocinadores", href: "#patrocinadores" },
+  { label: "Newsletter", href: "#newsletter" },
+] as const;
+
+export interface SocialLink {
+  id: string;
+  label: string;
+  href: string;
+}
+
+export const SOCIAL_LINKS: readonly SocialLink[] = [
+  { id: "email", label: "Email", href: `mailto:${CONTACT_EMAIL}` },
+  { id: "x", label: "X (Twitter)", href: "https://x.com/ColombiaPython" },
+  { id: "facebook", label: "Facebook", href: "https://www.facebook.com/ColombiaPython" },
+  { id: "instagram", label: "Instagram", href: "https://www.instagram.com/colombiapython/" },
+  { id: "github", label: "GitHub", href: "https://github.com/ColombiaPython" },
+  { id: "telegram", label: "Telegram", href: "https://t.me/pythoncolombia" },
+  { id: "medium", label: "Medium", href: "https://medium.com/@pythoncolombia" },
+  { id: "slack", label: "Slack", href: "https://python-colombia.slack.com/" },
+  { id: "discord", label: "Discord", href: "https://discord.gg/zhNTvcrffP" },
+] as const;
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..f5f8114
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,59 @@
+/**
+ * Contratos de datos de la landing.
+ *
+ * Hoy se alimentan de los mocks en `data/` y `lib/mock/`; cuando exista la
+ * API real, estos mismos tipos describirán sus respuestas para que el cambio
+ * sea transparente para los componentes visuales.
+ */
+
+/** Marcador de comunidad sobre el mapa 3D de Colombia. */
+export interface CommunityMarker {
+  id: string;
+  name: string;
+  description: string;
+  city: string;
+  /** Coordenadas geográficas reales (WGS84); el mapa las proyecta a su plano. */
+  coordinates: { lat: number; lng: number };
+  communityUrl: string;
+}
+
+/** Comunidad mostrada en la grilla de tarjetas. */
+export interface Community {
+  id: string;
+  name: string;
+  city: string;
+  description: string;
+  /** URL de portada; con `null` se usa un placeholder generado. */
+  coverImage: string | null;
+  communityUrl: string;
+}
+
+export type EventMode = "Presencial" | "Virtual" | "Híbrido";
+
+/** Evento estilo Meetup/Luma. */
+export interface CommunityEvent {
+  id: string;
+  title: string;
+  /** Fecha y hora de inicio en ISO 8601 (con offset de Colombia). */
+  startsAt: string;
+  location: string;
+  mode: EventMode;
+  /** URL de portada; con `null` se usa un placeholder generado. */
+  coverImage: string | null;
+  eventUrl: string;
+}
+
+export interface Sponsor {
+  id: string;
+  name: string;
+  websiteUrl: string;
+  /** URL del logo; con `null` se usa un placeholder con iniciales. */
+  logoImage: string | null;
+}
+
+export type NewsletterStatus = "success" | "already_subscribed" | "error";
+
+export interface NewsletterResponse {
+  status: NewsletterStatus;
+  message: string;
+}
diff --git a/package-lock.json b/package-lock.json
index 3e7f357..f10c896 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,16 @@
       "name": "python-colombia-web",
       "version": "0.1.0",
       "dependencies": {
+        "leaflet": "^1.9.4",
         "next": "16.2.10",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "react-icons": "^5.7.0",
+        "react-leaflet": "^5.0.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/leaflet": "^1.9.22",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1306,6 +1310,17 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1623,6 +1638,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1637,6 +1659,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.22",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.22.tgz",
+      "integrity": "sha512-h3lhECYEKDasG7LFHu+GiHqAvsgLuQvlJvVZzJDGONo3sEL+wUOqSFLnwkZlK0qVxnxbuGFW8iBlJNYs5wgndA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.19.43",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
@@ -4751,6 +4783,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5672,6 +5710,15 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5679,6 +5726,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
diff --git a/package.json b/package.json
index c010a90..547b163 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,16 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
     "next": "16.2.10",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-icons": "^5.7.0",
+    "react-leaflet": "^5.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/leaflet": "^1.9.22",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

From c0ad1b422ec55d5b135953fca2eca4b97c20c1de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raul=20Mauricio=20U=C3=B1ate=20Castro?= <runate@ccl.com.co>
Date: Tue, 8 Sep 2026 22:39:00 -0500
Subject: [PATCH 2/7] Version 1 - Consumo APIs

---
 README.md                             |   7 +
 SPEC.md                               | 492 --------------------------
 components/map/ColombiaMap.tsx        |   9 +-
 components/sections/Communities.tsx   |  27 +-
 components/sections/CommunityGrid.tsx |  32 ++
 components/sections/Events.tsx        |  10 +-
 components/sections/Hero.tsx          |   8 +-
 components/sections/Newsletter.tsx    |   3 +-
 components/sections/Sponsors.tsx      |  10 +-
 components/ui/SectionHeading.tsx      |   4 -
 data/mockCommunities.ts               |  62 ----
 data/mockEvents.ts                    |  44 ---
 data/mockMapMarkers.ts                |  53 ---
 data/mockSponsors.ts                  |  27 --
 lib/api.ts                            | 199 +++++++++++
 lib/console.ts                        |   1 +
 lib/mock/newsletter.ts                |  39 --
 lib/site.ts                           |   9 +-
 lib/types.ts                          |   5 +-
 next.config.ts                        |   6 +
 package.json                          |   2 +-
 21 files changed, 289 insertions(+), 760 deletions(-)
 delete mode 100644 SPEC.md
 create mode 100644 components/sections/CommunityGrid.tsx
 delete mode 100644 data/mockCommunities.ts
 delete mode 100644 data/mockEvents.ts
 delete mode 100644 data/mockMapMarkers.ts
 delete mode 100644 data/mockSponsors.ts
 create mode 100644 lib/api.ts
 delete mode 100644 lib/mock/newsletter.ts

diff --git a/README.md b/README.md
index a1c66eb..4389893 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,13 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+The frontend consumes the Python Colombia API from `NEXT_PUBLIC_API_BASE_URL`.
+If the variable is not defined, it defaults to `http://localhost:8000`.
+
+```bash
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 npm run dev
+```
+
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
diff --git a/SPEC.md b/SPEC.md
deleted file mode 100644
index 6dc7581..0000000
--- a/SPEC.md
+++ /dev/null
@@ -1,492 +0,0 @@
-# Arquitectura del sitio web de Python Colombia
-
-## Barra superior (Header)
-
-```
------------------------------------------------------------------------------------------
-Logo | Comunidades | Eventos | Noticias | Blog | Podcasts | Tienda | Iniciar sesión
------------------------------------------------------------------------------------------
-```
-
-* **Logo**
-
-  * Redirige siempre al Inicio.
-
-* **Tienda**
-
-  * Botón destacado (Call To Action).
-  * Puede tener un icono de carrito.
-
-* **Iniciar sesión**
-
-  * Si el usuario está autenticado:
-
-    * Mi perfil
-    * Mis publicaciones
-    * Panel Administrativo (según permisos)
-    * Cerrar sesión
-
----
-
-# Inicio (Home)
-
-La página principal debe responder inmediatamente:
-
-> ¿Qué es Python Colombia y qué está pasando actualmente?
-
-## 1. Hero
-
-Un componente principal con:
-
-* Imagen o ilustración
-* Slogan
-
-Ejemplo
-
-> La comunidad oficial de Python en Colombia.
->
-> Aprende, comparte y construye con miles de desarrolladores.
-
-Botones:
-
-* Únete a la comunidad
-* Próximos eventos
-
----
-
-## 2. Próximos eventos
-
-Mostrar los próximos eventos.
-
-Información:
-
-* Ciudad
-* Fecha
-* Lugar
-* Cupos
-* Botón "Ver evento"
-
----
-
-## 3. Comunidades
-
-Mapa de Colombia o tarjetas por ciudad.
-
-Ejemplo
-
-```
-Bogotá
-450 miembros
-
-Medellín
-280 miembros
-
-Cali
-180 miembros
-
-Barranquilla
-95 miembros
-```
-
-Cada comunidad tendrá:
-
-* Descripción
-* Organizadores
-* Próximos eventos
-* Miembros
-* Redes sociales
-
----
-
-## 4. Historia
-
-Una sección sobre:
-
-* Nacimiento de Python Colombia
-* Objetivos
-* Misión
-* Organización
-* Cómo participar
-
----
-
-## 5. Newsletter
-
-Formulario simple
-
-```
-Nombre
-
-Correo
-
-[Suscribirme]
-```
-
-Explicar:
-
-* Noticias
-* Eventos
-* Convocatorias
-* Podcast
-* Blogs destacados
-
----
-
-## 6. Últimas noticias
-
-Mostrar las últimas publicaciones.
-
-Cada tarjeta:
-
-* Imagen
-* Categoría
-* Fecha
-* Autor
-* Resumen
-* Leer más
-
----
-
-## 7. Blogs destacados
-
-Últimos artículos escritos por la comunidad.
-
-Mostrar:
-
-* Autor
-* Tiempo de lectura
-* Etiquetas
-* Likes
-* Comentarios
-
----
-
-## 8. Últimos podcasts
-
-Tarjetas con:
-
-* Invitado
-* Duración
-* Plataformas (Spotify, YouTube, etc.)
-* Escuchar
-
----
-
-## 9. Patrocinadores
-
-Empresas que apoyan la comunidad.
-
-Ejemplo:
-
-* Microsoft
-* JetBrains
-* PyCharm
-* AWS
-* Google Cloud
-
----
-
-## 10. Footer
-
-* Acerca de
-* Código de conducta
-* Contacto
-* GitHub
-* Discord
-* LinkedIn
-* YouTube
-* Política de privacidad
-
----
-
-# Comunidades
-
-Listado de comunidades por ciudad.
-
-Cada comunidad tendrá:
-
-* Banner
-* Descripción
-* Organizadores
-* Número de miembros
-* Próximos eventos
-* Historial de eventos
-* Fotos
-* Patrocinadores locales
-
----
-
-# Eventos
-
-Filtros:
-
-* Ciudad
-* Fecha
-* Tipo
-* Virtual
-* Presencial
-
-Cada evento tendrá:
-
-* Agenda
-* Speakers
-* Patrocinadores
-* Registro
-* Materiales
-* Fotografías
-* Grabaciones
-
-Separar:
-
-* Próximos eventos
-* Eventos pasados
-
----
-
-# Noticias
-
-Administradas por la célula de Newsletter.
-
-Cada noticia incluye:
-
-* Autor
-* Fecha
-* Categoría
-* Imagen
-* Contenido
-* Comentarios (opcional)
-
----
-
-# Blog
-
-Contenido generado por la comunidad.
-
-Si el usuario inicia sesión:
-
-```
-[ Publicar artículo ]
-```
-
-Flujo
-
-```
-Borrador
-      ↓
-En revisión
-      ↓
-Aprobado
-      ↓
-Publicado
-```
-
-Características:
-
-* Markdown
-* Resaltado de código
-* Imágenes
-* Etiquetas
-* Series de artículos
-* Perfil del autor
-
----
-
-# Podcasts
-
-Administrados por la célula de Podcast.
-
-Cada episodio:
-
-* Invitados
-* Resumen
-* Recursos
-* Plataformas
-* Video
-* Audio
-
----
-
-# Tienda
-
-Productos oficiales.
-
-Categorías
-
-* Camisetas
-* Hoodies
-* Gorras
-* Mugs
-* Stickers
-* Botellas
-* Cuadernos
-* Mouse pads
-
-Cada producto:
-
-* Variantes
-* Tallas
-* Inventario
-* Precio
-* Galería
-
----
-
-# Autenticación
-
-Registro mediante:
-
-* GitHub
-* Google
-* Microsoft
-* Correo electrónico
-
-Al crear la cuenta:
-
-```
-Pendiente de aprobación
-```
-
-Un moderador aprueba el acceso.
-
-Roles posibles:
-
-* Usuario
-* Autor
-* Moderador
-* Administrador
-* Super Administrador
-
----
-
-# Panel Administrativo
-
-## Dashboard
-
-* Usuarios registrados
-* Suscriptores al newsletter
-* Próximos eventos
-* Publicaciones pendientes
-* Estadísticas del sitio
-
----
-
-## Newsletter
-
-* CRUD de suscriptores
-* Importar/Exportar
-* Segmentación
-* Historial de campañas
-
----
-
-## Comunidades
-
-CRUD de:
-
-* Ciudades
-* Organizadores
-* Redes sociales
-* Información
-* Logos
-
----
-
-## Eventos
-
-CRUD completo.
-
-Además:
-
-* Registro de asistentes
-* Speakers
-* Agenda
-* Patrocinadores
-* Fotografías
-
----
-
-## Noticias
-
-CRUD completo.
-
-Incluye:
-
-* Programar publicación
-* Categorías
-* Destacadas
-
----
-
-## Blogs
-
-Flujo editorial completo.
-
-Estados:
-
-* Borrador
-* En revisión
-* Requiere cambios
-* Aprobado
-* Publicado
-* Archivado
-
----
-
-## Podcasts
-
-CRUD de episodios.
-
-Incluye:
-
-* Plataformas
-* Invitados
-* Recursos
-* Transcripción
-
----
-
-## Tienda
-
-* Productos
-* Categorías
-* Inventario
-* Pedidos
-* Descuentos
-* Cupones
-
----
-
-## Usuarios
-
-Gestión de:
-
-* Usuarios
-* Roles
-* Permisos
-* Solicitudes de acceso
-* Suspensiones
-
----
-
-## Configuración
-
-* Redes sociales
-* Logos
-* Banners
-* SEO
-* Analytics
-* Integraciones (YouTube, Spotify, GitHub, Mailchimp/Brevo, etc.)
-
-## Funcionalidades adicionales recomendadas
-
-Para convertir el sitio en el punto central de la comunidad, incluiría además:
-
-* **Calendario global** con todos los eventos de Python Colombia.
-* **Directorio de speakers**, donde los miembros puedan ofrecer charlas y talleres.
-* **Directorio de empresas patrocinadoras** y organizaciones aliadas.
-* **Página de voluntariado**, para unirse a células de trabajo (Newsletter, Podcast, Eventos, Diseño, Web, etc.).
-* **Sistema de perfiles públicos**, donde cada miembro pueda mostrar su biografía, ciudad, redes sociales y publicaciones.
-* **Página de recursos**, con enlaces a documentación, tutoriales, grabaciones de eventos y material de aprendizaje.
-* **Galería multimedia** con fotografías y videos de eventos anteriores.
-* **SEO optimizado**, con URLs amigables (`/comunidades/bogota`, `/eventos/pyday-medellin-2026`, `/blog/introduccion-a-fastapi`) y metadatos para compartir en redes sociales.
-* **Buscador global**, capaz de encontrar comunidades, eventos, noticias, blogs, podcasts y miembros desde una única barra de búsqueda.
diff --git a/components/map/ColombiaMap.tsx b/components/map/ColombiaMap.tsx
index 61b86c2..ec172f9 100644
--- a/components/map/ColombiaMap.tsx
+++ b/components/map/ColombiaMap.tsx
@@ -5,6 +5,8 @@ import { useState } from "react";
 import type { CommunityMarker } from "@/lib/types";
 import { markerColor } from "./marker-colors";
 
+const MAP_HMR_KEY = process.env.NODE_ENV === "development" ? Date.now().toString(36) : "map";
+
 const LeafletMap = dynamic(() => import("./LeafletMap"), {
   ssr: false,
   loading: () => <MapSkeleton />,
@@ -26,19 +28,20 @@ interface ColombiaMapProps {
 }
 
 /**
- * Mapa real de Colombia (Leaflet + CARTO Dark Matter) + chips de ciudades.
+ * Mapa real de Colombia (Leaflet + CARTO Dark Matter) + chips de comunidades.
  * Los chips permiten abrir cada popup con teclado y en táctil, como
  * alternativa accesible al click directo sobre el marcador.
  */
 export default function ColombiaMap({ markers }: ColombiaMapProps) {
   const [activeId, setActiveId] = useState<string | null>(null);
+  const mapKey = `${MAP_HMR_KEY}:${markers.map((marker) => marker.id).join("|")}`;
 
   return (
     <div className="w-full" role="region" aria-label="Mapa de comunidades de Python en Colombia">
       <div className="relative">
         {/* `isolate` encapsula los z-index de Leaflet para no tapar la navbar */}
         <div className="isolate h-[380px] w-full overflow-hidden border border-white/10 sm:h-[480px] lg:h-[560px]">
-          <LeafletMap markers={markers} activeId={activeId} onSelect={setActiveId} />
+          <LeafletMap key={mapKey} markers={markers} activeId={activeId} onSelect={setActiveId} />
         </div>
         {/* Bloques del mosaico anclados a las esquinas del contenedor */}
         <span aria-hidden="true" className="absolute -left-1.5 -top-1.5 h-3 w-3 bg-python-yellow" />
@@ -65,7 +68,7 @@ export default function ColombiaMap({ markers }: ColombiaMapProps) {
                   style={{ backgroundColor: markerColor(index) }}
                   aria-hidden="true"
                 />
-                {marker.city}
+                {marker.name}
               </button>
             </li>
           );
diff --git a/components/sections/Communities.tsx b/components/sections/Communities.tsx
index c96401e..931e917 100644
--- a/components/sections/Communities.tsx
+++ b/components/sections/Communities.tsx
@@ -1,7 +1,8 @@
 import Image from "next/image";
+import CommunityGrid from "@/components/sections/CommunityGrid";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
-import { mockCommunities } from "@/data/mockCommunities";
+import { getCommunities } from "@/lib/api";
 
 /** Portadas de bloque sólido (mosaico del logo) con texto de contraste AA. */
 const COVERS = [
@@ -18,24 +19,24 @@ const HOVER_SHADOWS = [
   "hover:shadow-[8px_8px_0_0_var(--color-accent-purple)]",
 ] as const;
 
-export default function Communities() {
+export default async function Communities() {
+  const communities = await getCommunities();
+
   return (
     <section id="comunidades" className="scroll-mt-24 py-24 lg:py-36">
       <div className="mx-auto max-w-6xl px-4 sm:px-6">
         <Reveal>
           <SectionHeading
-            number="01"
             eyebrow="Comunidades"
             title="Una red que crece por todo el país"
             description="Grupos locales y temáticos donde compartir, aprender y construir con Python. Encuentra el tuyo o ayúdanos a crear uno nuevo."
           />
         </Reveal>
 
-        {/* La columna central baja en desktop para romper la grilla uniforme */}
-        <ul className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:pb-10">
-          {mockCommunities.map((community, index) => (
-            <li key={community.id} className={index % 3 === 1 ? "lg:translate-y-10" : ""}>
-              <Reveal delay={(index % 3) * 90} className="h-full">
+        <CommunityGrid>
+          {communities.map((community, index) => (
+            <li key={community.id}>
+              <Reveal delay={(index % 4) * 90} className="h-full">
                 <article
                   className={`group flex h-full flex-col border border-white/10 bg-night-card transition hover:-translate-y-1 motion-reduce:hover:translate-y-0 ${HOVER_SHADOWS[index % HOVER_SHADOWS.length]}`}
                 >
@@ -70,18 +71,20 @@ export default function Communities() {
                     <p className="mt-2 flex-1 text-sm font-light leading-relaxed text-zinc-400">
                       {community.description}
                     </p>
-                    <button
-                      type="button"
+                    <a
+                      href={community.communityUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
                       className="mt-5 self-start border border-white/25 px-4 py-2 text-xs font-bold uppercase tracking-[0.12em] text-zinc-200 transition hover:bg-python-yellow/10 group-hover:border-python-yellow group-hover:text-python-yellow focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow"
                     >
                       Ver comunidad
-                    </button>
+                    </a>
                   </div>
                 </article>
               </Reveal>
             </li>
           ))}
-        </ul>
+        </CommunityGrid>
       </div>
     </section>
   );
diff --git a/components/sections/CommunityGrid.tsx b/components/sections/CommunityGrid.tsx
new file mode 100644
index 0000000..238c1be
--- /dev/null
+++ b/components/sections/CommunityGrid.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { Children, type ReactNode, useState } from "react";
+
+interface CommunityGridProps {
+  children: ReactNode;
+}
+
+const INITIAL_VISIBLE = 8;
+
+export default function CommunityGrid({ children }: CommunityGridProps) {
+  const [showAll, setShowAll] = useState(false);
+  const cards = Children.toArray(children);
+  const visibleCards = showAll ? cards : cards.slice(0, INITIAL_VISIBLE);
+
+  return (
+    <>
+      <ul className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4 lg:pb-10">
+        {visibleCards}
+      </ul>
+      {!showAll && cards.length > INITIAL_VISIBLE ? (
+        <button
+          type="button"
+          onClick={() => setShowAll(true)}
+          className="mx-auto mt-2 block border border-white/25 px-5 py-3 text-xs font-bold uppercase tracking-[0.12em] text-zinc-200 transition hover:border-python-yellow hover:bg-python-yellow/10 hover:text-python-yellow focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow"
+        >
+          Ver más
+        </button>
+      ) : null}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/components/sections/Events.tsx b/components/sections/Events.tsx
index 8f485bb..e9043ff 100644
--- a/components/sections/Events.tsx
+++ b/components/sections/Events.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import { LuCalendar, LuClock3, LuMapPin, LuArrowUpRight } from "react-icons/lu";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
-import { mockEvents } from "@/data/mockEvents";
+import { getEvents } from "@/lib/api";
 import type { CommunityEvent, EventMode } from "@/lib/types";
 
 const MODE_BADGES: Record<EventMode, string> = {
@@ -153,11 +153,12 @@ function EventCard({ event, index, isPast = false, featured = false }: EventCard
 // Snapshot al momento del build (export estático); se refresca en cada deploy.
 const BUILD_TIME = Date.now();
 
-export default function Events() {
-  const upcoming = mockEvents
+export default async function Events() {
+  const events = await getEvents();
+  const upcoming = events
     .filter((event) => new Date(event.startsAt).getTime() >= BUILD_TIME)
     .sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
-  const past = mockEvents
+  const past = events
     .filter((event) => new Date(event.startsAt).getTime() < BUILD_TIME)
     .sort((a, b) => new Date(b.startsAt).getTime() - new Date(a.startsAt).getTime());
 
@@ -169,7 +170,6 @@ export default function Events() {
       <div className="mx-auto max-w-6xl px-4 sm:px-6">
         <Reveal>
           <SectionHeading
-            number="02"
             eyebrow="Eventos"
             title="Próximos encuentros de la comunidad"
             description="Charlas, talleres y meetups presenciales y virtuales. Haz click en cualquier evento para registrarte."
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index 2859da9..cb29cbb 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -1,9 +1,11 @@
 import ColombiaMap from "@/components/map/ColombiaMap";
 import Reveal from "@/components/ui/Reveal";
 import { MosaicBar } from "@/components/ui/MosaicBar";
-import { mockMapMarkers } from "@/data/mockMapMarkers";
+import { getMapMarkers } from "@/lib/api";
+
+export default async function Hero() {
+  const markers = await getMapMarkers();
 
-export default function Hero() {
   return (
     <section id="hero" className="relative overflow-hidden scroll-mt-24">
       {/* Marca de agua tipo prompt de Python */}
@@ -65,7 +67,7 @@ export default function Hero() {
 
         {/* El mapa sangra hacia el borde derecho para romper la grilla */}
         <Reveal delay={150} className="lg:col-span-7 lg:-mr-10 xl:-mr-20">
-          <ColombiaMap markers={mockMapMarkers} />
+          <ColombiaMap markers={markers} />
         </Reveal>
       </div>
     </section>
diff --git a/components/sections/Newsletter.tsx b/components/sections/Newsletter.tsx
index 48d919f..0ef8425 100644
--- a/components/sections/Newsletter.tsx
+++ b/components/sections/Newsletter.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { LuLoaderCircle, LuMail } from "react-icons/lu";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
-import { subscribeToNewsletter } from "@/lib/mock/newsletter";
+import { subscribeToNewsletter } from "@/lib/api";
 import type { NewsletterResponse, NewsletterStatus } from "@/lib/types";
 
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -51,7 +51,6 @@ export default function Newsletter() {
             {/* Panel de marca en azul sólido */}
             <div className="relative bg-python-blue p-8 sm:p-10 lg:col-span-2">
               <SectionHeading
-                number="04"
                 eyebrow="Newsletter"
                 title="No te pierdas nada"
                 accentClass="text-python-yellow-light"
diff --git a/components/sections/Sponsors.tsx b/components/sections/Sponsors.tsx
index f2165ab..711fe2e 100644
--- a/components/sections/Sponsors.tsx
+++ b/components/sections/Sponsors.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import { LuHandshake } from "react-icons/lu";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
-import { mockSponsors } from "@/data/mockSponsors";
+import { getSponsors } from "@/lib/api";
 import { CONTACT_EMAIL } from "@/lib/site";
 
 /** Cuadros de iniciales en bloques sólidos del mosaico (contraste AA). */
@@ -21,7 +21,8 @@ function initials(name: string): string {
     .join("");
 }
 
-export default function Sponsors() {
+export default async function Sponsors() {
+  const sponsors = await getSponsors();
   const mailto = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
     "Quiero patrocinar a Python Colombia",
   )}`;
@@ -33,7 +34,6 @@ export default function Sponsors() {
         <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
           <Reveal>
             <SectionHeading
-              number="03"
               eyebrow="Patrocinadores"
               title="Impulsa el talento Python en Colombia"
               description="Tu marca frente a miles de desarrolladores en todo el país: visibilidad en eventos, meetups y canales de la comunidad, mientras apoyas el ecosistema tech local."
@@ -52,9 +52,9 @@ export default function Sponsors() {
           </Reveal>
         </div>
 
-        {mockSponsors.length > 0 ? (
+        {sponsors.length > 0 ? (
           <ul className="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
-            {mockSponsors.map((sponsor, index) => (
+            {sponsors.map((sponsor, index) => (
               <li key={sponsor.id} className="h-full">
                 <Reveal delay={(index % 4) * 80} className="h-full">
                   <a
diff --git a/components/ui/SectionHeading.tsx b/components/ui/SectionHeading.tsx
index f98f4db..513ada3 100644
--- a/components/ui/SectionHeading.tsx
+++ b/components/ui/SectionHeading.tsx
@@ -1,8 +1,6 @@
 import { MosaicBar } from "@/components/ui/MosaicBar";
 
 interface SectionHeadingProps {
-  /** Número editorial de la sección (ej. "01"). */
-  number: string;
   eyebrow: string;
   title: string;
   description?: string;
@@ -11,7 +9,6 @@ interface SectionHeadingProps {
 }
 
 export default function SectionHeading({
-  number,
   eyebrow,
   title,
   description,
@@ -22,7 +19,6 @@ export default function SectionHeading({
       <p
         className={`flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.35em] ${accentClass}`}
       >
-        {/* <span className="font-mono">{number}</span> */}
         <span aria-hidden="true" className="h-px w-10 bg-current" />
         {eyebrow}
       </p>
diff --git a/data/mockCommunities.ts b/data/mockCommunities.ts
deleted file mode 100644
index d5a90a7..0000000
--- a/data/mockCommunities.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Community } from "@/lib/types";
-
-/**
- * Comunidades de ejemplo para la grilla de tarjetas.
- * Reemplazar por la API real de comunidades en una futura iteración.
- */
-export const mockCommunities: readonly Community[] = [
-  {
-    id: "python-bogota",
-    name: "Python Bogotá",
-    city: "Bogotá",
-    description:
-      "El grupo más grande del país. Meetups mensuales con charlas de backend, datos e inteligencia artificial.",
-    coverImage: null,
-    communityUrl: "https://www.meetup.com/es/python-bogota/",
-  },
-  {
-    id: "python-medellin",
-    name: "Python Medellín",
-    city: "Medellín",
-    description:
-      "Talleres prácticos de Django, FastAPI y ciencia de datos con la energía de la comunidad paisa.",
-    coverImage: null,
-    communityUrl: "https://www.meetup.com/es/python-medellin/",
-  },
-  {
-    id: "python-cali",
-    name: "Python Cali",
-    city: "Cali",
-    description:
-      "Encuentros sobre automatización, testing y proyectos open source en el suroccidente colombiano.",
-    coverImage: null,
-    communityUrl: "https://www.meetup.com/es/python-cali/",
-  },
-  {
-    id: "python-barranquilla",
-    name: "Python Barranquilla",
-    city: "Barranquilla",
-    description:
-      "La casa de los pythonistas del Caribe: dojos de código, lightning talks y eventos híbridos.",
-    coverImage: null,
-    communityUrl: "https://www.meetup.com/es/python-barranquilla/",
-  },
-  {
-    id: "pyladies-colombia",
-    name: "PyLadies Colombia",
-    city: "Nacional",
-    description:
-      "Comunidad que impulsa la participación de mujeres en Python con mentorías, talleres y charlas.",
-    coverImage: null,
-    communityUrl: "https://www.meetup.com/es/pyladies-colombia/",
-  },
-  {
-    id: "python-bucaramanga",
-    name: "Python Bucaramanga",
-    city: "Bucaramanga",
-    description:
-      "Study groups de Python, visualización de datos y proyectos colaborativos en Santander.",
-    coverImage: null,
-    communityUrl: "https://www.meetup.com/es/python-bucaramanga/",
-  },
-] as const;
diff --git a/data/mockEvents.ts b/data/mockEvents.ts
deleted file mode 100644
index 4ebc082..0000000
--- a/data/mockEvents.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { CommunityEvent } from "@/lib/types";
-
-/**
- * Eventos de ejemplo (con fechas futuras y una pasada para probar estados).
- * Reemplazar por la API real de eventos (Meetup/Luma) en una futura iteración.
- */
-export const mockEvents: readonly CommunityEvent[] = [
-  {
-    id: "pyday-bogota-2026",
-    title: "PyDay Bogotá 2026: un día completo de Python",
-    startsAt: "2026-10-17T09:00:00-05:00",
-    location: "Universidad Nacional, Bogotá",
-    mode: "Presencial",
-    coverImage: null,
-    eventUrl: "https://www.meetup.com/es/python-bogota/events/pyday-2026/",
-  },
-  {
-    id: "orionis-meetup-medellin",
-    title: "Orionis Meetup: El marco que revolucionó Python Web",
-    startsAt: "2026-09-24T18:30:00-05:00",
-    location: "Ruta N, Medellín",
-    mode: "Híbrido",
-    coverImage: null,
-    eventUrl: "https://www.meetup.com/es/python-medellin/events/orionis-framework/",
-  },
-  {
-    id: "taller-starlette-online",
-    title: "Taller: de cero a producción con Starlette",
-    startsAt: "2026-11-07T10:00:00-05:00",
-    location: "Transmisión en vivo",
-    mode: "Virtual",
-    coverImage: null,
-    eventUrl: "https://lu.ma/pythoncolombia-starlette",
-  },
-  {
-    id: "pycon-colombia-2026",
-    title: "PyCon Colombia 2026",
-    startsAt: "2026-06-12T08:00:00-05:00",
-    location: "Medellín",
-    mode: "Presencial",
-    coverImage: null,
-    eventUrl: "https://www.pycon.co/",
-  },
-] as const;
diff --git a/data/mockMapMarkers.ts b/data/mockMapMarkers.ts
deleted file mode 100644
index 62817bb..0000000
--- a/data/mockMapMarkers.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { CommunityMarker } from "@/lib/types";
-
-/**
- * Marcadores de ejemplo para el mapa 3D del hero.
- * Reemplazar por la API real de comunidades en una futura iteración.
- */
-export const mockMapMarkers: readonly CommunityMarker[] = [
-  {
-    id: "bogota",
-    name: "Python Bogotá",
-    description:
-      "Meetups mensuales, charlas técnicas y espacios de networking en la capital.",
-    city: "Bogotá",
-    coordinates: { lat: 4.711, lng: -74.0721 },
-    communityUrl: "https://www.meetup.com/es/python-bogota/",
-  },
-  {
-    id: "medellin",
-    name: "Python Medellín",
-    description:
-      "Comunidad paisa enfocada en talleres prácticos, Django y ciencia de datos.",
-    city: "Medellín",
-    coordinates: { lat: 6.2442, lng: -75.5812 },
-    communityUrl: "https://www.meetup.com/es/python-medellin/",
-  },
-  {
-    id: "cali",
-    name: "Python Cali",
-    description:
-      "Encuentros sobre backend, automatización y proyectos open source del Valle.",
-    city: "Cali",
-    coordinates: { lat: 3.4516, lng: -76.532 },
-    communityUrl: "https://www.meetup.com/es/python-cali/",
-  },
-  {
-    id: "barranquilla",
-    name: "Python Barranquilla",
-    description:
-      "La comunidad del Caribe: charlas, dojos de código y eventos híbridos.",
-    city: "Barranquilla",
-    coordinates: { lat: 10.9685, lng: -74.7813 },
-    communityUrl: "https://www.meetup.com/es/python-barranquilla/",
-  },
-  {
-    id: "bucaramanga",
-    name: "Python Bucaramanga",
-    description:
-      "Grupo santandereano con study groups de Python y visualización de datos.",
-    city: "Bucaramanga",
-    coordinates: { lat: 7.1193, lng: -73.1227 },
-    communityUrl: "https://www.meetup.com/es/python-bucaramanga/",
-  },
-] as const;
diff --git a/data/mockSponsors.ts b/data/mockSponsors.ts
deleted file mode 100644
index a444b68..0000000
--- a/data/mockSponsors.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Sponsor } from "@/lib/types";
-
-/**
- * Patrocinadores de ejemplo. Si el arreglo queda vacío, la sección muestra
- * el placeholder «Sé el primero en apoyarnos».
- * Reemplazar por la API real de patrocinadores en una futura iteración.
- */
-export const mockSponsors: readonly Sponsor[] = [
-  {
-    id: "nube-andina",
-    name: "Nube Andina",
-    websiteUrl: "https://example.com/nube-andina",
-    logoImage: null,
-  },
-  {
-    id: "datacafe",
-    name: "DataCafé Labs",
-    websiteUrl: "https://example.com/datacafe",
-    logoImage: null,
-  },
-  {
-    id: "koders",
-    name: "Koders Co.",
-    websiteUrl: "https://example.com/koders",
-    logoImage: null,
-  },
-] as const;
diff --git a/lib/api.ts b/lib/api.ts
new file mode 100644
index 0000000..93adbe6
--- /dev/null
+++ b/lib/api.ts
@@ -0,0 +1,199 @@
+import type {
+  Community,
+  CommunityEvent,
+  CommunityMarker,
+  EventMode,
+  NewsletterResponse,
+  Sponsor,
+} from "@/lib/types";
+
+const DEFAULT_API_BASE_URL = "http://localhost:8000";
+
+export const API_BASE_URL = (
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? DEFAULT_API_BASE_URL
+).replace(/\/$/, "");
+
+type ApiRecord = Record<string, unknown>;
+
+function textValue(value: unknown, fallback = ""): string {
+  return typeof value === "string" && value.trim() ? value : fallback;
+}
+
+function nullableTextValue(value: unknown): string | null {
+  return typeof value === "string" && value.trim() ? value : null;
+}
+
+function numberValue(value: unknown, fallback = 0): number {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+
+function field(record: ApiRecord, ...names: string[]): unknown {
+  for (const name of names) {
+    if (name in record) return record[name];
+  }
+  return undefined;
+}
+
+function slugify(text: string): string {
+  return text
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+}
+
+function recordList(value: unknown): ApiRecord[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is ApiRecord => item !== null && typeof item === "object")
+    : [];
+}
+
+async function apiFetch<T>(path: string): Promise<T | null> {
+  try {
+    const response = await fetch(`${API_BASE_URL}${path}`, { cache: "force-cache" });
+    if (!response.ok) return null;
+    return (await response.json()) as T;
+  } catch (error) {
+    console.error(`API request failed: ${path}`, error);
+    return null;
+  }
+}
+
+async function apiSend<T>(path: string): Promise<T | null> {
+  try {
+    const response = await fetch(`${API_BASE_URL}${path}`, { method: "POST" });
+    if (!response.ok) return null;
+    return (await response.json()) as T;
+  } catch (error) {
+    console.error(`API request failed: ${path}`, error);
+    return null;
+  }
+}
+
+async function apiFetchFresh<T>(path: string): Promise<T | null> {
+  try {
+    const response = await fetch(`${API_BASE_URL}${path}`, { cache: "no-store" });
+    if (!response.ok) return null;
+    return (await response.json()) as T;
+  } catch (error) {
+    console.error(`API request failed: ${path}`, error);
+    return null;
+  }
+}
+
+function normalizeCommunity(record: ApiRecord): Community {
+  const name = textValue(field(record, "name", "nombre"), "Comunidad Python");
+  return {
+    id: textValue(field(record, "id", "slug"), slugify(name)),
+    name,
+    city: textValue(field(record, "city", "ciudad"), "Colombia"),
+    description: textValue(field(record, "description", "descripcion")),
+    coverImage: nullableTextValue(field(record, "coverImage", "cover_image", "cover_url", "image_url")),
+    communityUrl: textValue(field(record, "communityUrl", "community_url", "websiteUrl", "website_url", "url"), "#"),
+  };
+}
+
+function normalizeMode(value: unknown): EventMode {
+  const mode = textValue(value, "Presencial").toLowerCase();
+  if (mode.includes("virtual")) return "Virtual";
+  if (mode.includes("hibrido") || mode.includes("híbrido")) return "Híbrido";
+  return "Presencial";
+}
+
+function normalizeEvent(record: ApiRecord): CommunityEvent {
+  const title = textValue(field(record, "title", "name", "titulo", "nombre"), "Evento Python Colombia");
+  return {
+    id: textValue(field(record, "id", "slug"), slugify(title)),
+    title,
+    startsAt: textValue(field(record, "startsAt", "starts_at", "startDate", "start_date", "date", "fecha"), new Date().toISOString()),
+    location: textValue(field(record, "location", "venue", "place", "ubicacion", "lugar"), "Por anunciar"),
+    mode: normalizeMode(field(record, "mode", "modalidad")),
+    coverImage: nullableTextValue(field(record, "coverImage", "cover_image", "cover_url", "image_url")),
+    eventUrl: textValue(field(record, "eventUrl", "event_url", "registrationUrl", "registration_url", "url"), "#"),
+  };
+}
+
+function normalizeMarker(record: ApiRecord): CommunityMarker {
+  const name = textValue(field(record, "name", "nombre"), "Python Colombia");
+  const coordinates = field(record, "coordinates", "coordenadas");
+  const coordinateRecord = coordinates !== null && typeof coordinates === "object" ? coordinates as ApiRecord : {};
+
+  return {
+    id: textValue(field(record, "id", "slug"), slugify(name)),
+    name,
+    description: textValue(field(record, "description", "descripcion")),
+    city: textValue(field(record, "city", "ciudad"), "Colombia"),
+    coordinates: {
+      lat: numberValue(field(record, "lat", "latitude", "latitud") ?? field(coordinateRecord, "lat", "latitude", "latitud")),
+      lng: numberValue(field(record, "lng", "lon", "long", "longitude", "longitud") ?? field(coordinateRecord, "lng", "lon", "long", "longitude", "longitud")),
+    },
+    communityUrl: textValue(field(record, "communityUrl", "community_url", "websiteUrl", "website_url", "url"), "#"),
+  };
+}
+
+function normalizeSponsor(record: ApiRecord): Sponsor {
+  const name = textValue(field(record, "name", "nombre"), "Patrocinador");
+  return {
+    id: textValue(field(record, "id", "slug"), slugify(name)),
+    name,
+    websiteUrl: textValue(field(record, "websiteUrl", "website_url", "url"), "#"),
+    logoImage: nullableTextValue(field(record, "logoImage", "logo_image", "logo_url", "image_url")),
+  };
+}
+
+function isActiveSubscription(value: unknown): boolean {
+  const record = value !== null && typeof value === "object" ? value as ApiRecord : {};
+  return field(record, "isActive") === true;
+}
+
+export async function getCommunities(): Promise<Community[]> {
+  const data = await apiFetch<unknown>("/api/communities");
+  return recordList(data).map(normalizeCommunity);
+}
+
+export async function getEvents(): Promise<CommunityEvent[]> {
+  const data = await apiFetch<unknown>("/api/events");
+  return recordList(data).map(normalizeEvent);
+}
+
+export async function getMapMarkers(): Promise<CommunityMarker[]> {
+  const data = await apiFetch<unknown>("/api/map-markers");
+  return recordList(data).map(normalizeMarker);
+}
+
+export async function getSponsors(): Promise<Sponsor[]> {
+  const data = await apiFetch<unknown>("/api/sponsors");
+  return recordList(data).map(normalizeSponsor);
+}
+
+export async function subscribeToNewsletter(email: string): Promise<NewsletterResponse> {
+  const normalizedEmail = email.trim().toLowerCase();
+  const searchParams = new URLSearchParams({ email: normalizedEmail });
+  const subscription = await apiFetchFresh<unknown>(`/api/newsletter/subscription?${searchParams.toString()}`);
+
+  if (isActiveSubscription(subscription)) {
+    return {
+      status: "already_subscribed",
+      message: "Este correo ya está registrado en el newsletter.",
+    };
+  }
+
+  const data = await apiSend<unknown>(`/api/newsletter/subscribe?${searchParams.toString()}`);
+  if (!isActiveSubscription(data)) {
+    return {
+      status: "error",
+      message: "No pudimos procesar tu suscripción. Intenta de nuevo.",
+    };
+  }
+
+  return {
+    status: "success",
+    message: "Te has suscrito al newsletter.",
+  };
+}
diff --git a/lib/console.ts b/lib/console.ts
index 43520d7..928a64f 100644
--- a/lib/console.ts
+++ b/lib/console.ts
@@ -1,3 +1,4 @@
+/** Mensaje de consola personalizado para Python Colombia */
 export function ConsoleMessage(): void {
   if (typeof window === "undefined") return;
 
diff --git a/lib/mock/newsletter.ts b/lib/mock/newsletter.ts
deleted file mode 100644
index 8ff5382..0000000
--- a/lib/mock/newsletter.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { NewsletterResponse } from "@/lib/types";
-
-/**
- * Simula el endpoint de suscripción al newsletter con latencia artificial.
- *
- * El componente lo consume como si fuera un `fetch` real (async/await), de
- * modo que la integración futura sea reemplazar el cuerpo de esta función
- * por la llamada HTTP a la API real.
- *
- * Reglas deterministas para probar todos los estados de la UI:
- * - correos que contienen "error"            -> status "error"
- * - correos ya registrados en esta sesión    -> status "already_subscribed"
- * - cualquier otro correo válido             -> status "success"
- */
-const MOCK_LATENCY_MS = 900;
-
-const subscribedEmails = new Set(["hola@python.org.co"]);
-
-export async function subscribeToNewsletter(
-  email: string,
-): Promise<NewsletterResponse> {
-  await new Promise((resolve) => setTimeout(resolve, MOCK_LATENCY_MS));
-
-  const normalized = email.trim().toLowerCase();
-
-  if (normalized.includes("error")) {
-    return { status: "error", message: "Ocurrió un error, intenta de nuevo." };
-  }
-
-  if (subscribedEmails.has(normalized)) {
-    return {
-      status: "already_subscribed",
-      message: "Este correo ya está registrado.",
-    };
-  }
-
-  subscribedEmails.add(normalized);
-  return { status: "success", message: "¡Te has suscrito!" };
-}
diff --git a/lib/site.ts b/lib/site.ts
index f9f0e76..b0de740 100644
--- a/lib/site.ts
+++ b/lib/site.ts
@@ -1,12 +1,9 @@
 /** Configuración estática del sitio: navegación, contacto y redes. */
 
 export const CONTACT_EMAIL = "colombiapython@gmail.com";
+export const CODE_OF_CONDUCT_URL = "https://github.com/ColombiaPython/codigo-de-conducta";
 
-export const CODE_OF_CONDUCT_URL =
-  "https://github.com/ColombiaPython/codigo-de-conducta";
-
-// TODO: cuando existan páginas propias (p. ej. /comunidades, /eventos),
-// convertir estos anchors en rutas reales de Next.js.
+/** Menú de navegación del sitio */
 export const NAV_LINKS = [
   { label: "Comunidades", href: "#comunidades" },
   { label: "Eventos", href: "#eventos" },
@@ -14,12 +11,14 @@ export const NAV_LINKS = [
   { label: "Newsletter", href: "#newsletter" },
 ] as const;
 
+/** Enlaces a redes sociales del sitio */
 export interface SocialLink {
   id: string;
   label: string;
   href: string;
 }
 
+/** Lista de enlaces a redes sociales del sitio */
 export const SOCIAL_LINKS: readonly SocialLink[] = [
   { id: "email", label: "Email", href: `mailto:${CONTACT_EMAIL}` },
   { id: "x", label: "X (Twitter)", href: "https://x.com/ColombiaPython" },
diff --git a/lib/types.ts b/lib/types.ts
index f5f8114..2a38ade 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,9 +1,8 @@
 /**
  * Contratos de datos de la landing.
  *
- * Hoy se alimentan de los mocks en `data/` y `lib/mock/`; cuando exista la
- * API real, estos mismos tipos describirán sus respuestas para que el cambio
- * sea transparente para los componentes visuales.
+ * La API real puede responder con campos en snake_case o camelCase; el cliente
+ * HTTP normaliza esos datos a estos contratos antes de llegar a los componentes.
  */
 
 /** Marcador de comunidad sobre el mapa 3D de Colombia. */
diff --git a/next.config.ts b/next.config.ts
index b57c48f..876edf2 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,18 +2,24 @@ import type { NextConfig } from "next";
 
 const repoName = process.env.GITHUB_REPOSITORY?.split("/")[1];
 const basePath = process.env.GITHUB_ACTIONS && repoName ? `/${repoName}` : "";
+const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8000";
 
 const nextConfig: NextConfig = {
   output: "export",
   distDir: "dist",
   images: {
     unoptimized: true,
+    remotePatterns: [
+      { protocol: "http", hostname: "**" },
+      { protocol: "https", hostname: "**" },
+    ],
   },
   basePath,
   assetPrefix: basePath,
   trailingSlash: true,
   env: {
     NEXT_PUBLIC_BASE_PATH: basePath,
+    NEXT_PUBLIC_API_BASE_URL: apiBaseUrl,
   },
 };
 
diff --git a/package.json b/package.json
index 547b163..f441149 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "node -e \"require('fs').rmSync('dist/dev',{recursive:true,force:true})\" && next dev --webpack",
     "build": "next build",
     "start": "npx serve dist",
     "lint": "eslint"

From 253af7fabedf749e5736e5ab7fa3267a253a6653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raul=20Mauricio=20U=C3=B1ate=20Castro?= <runate@ccl.com.co>
Date: Wed, 9 Sep 2026 10:01:10 -0500
Subject: [PATCH 3/7] Version 1 - APIs consumo + Newslatter

---
 next.config.ts | 2 +-
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 876edf2..8e5c521 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 
 const repoName = process.env.GITHUB_REPOSITORY?.split("/")[1];
 const basePath = process.env.GITHUB_ACTIONS && repoName ? `/${repoName}` : "";
-const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8000";
+const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? "https://pythonco.orionis-framework.com";
 
 const nextConfig: NextConfig = {
   output: "export",
diff --git a/package.json b/package.json
index f441149..547b163 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "node -e \"require('fs').rmSync('dist/dev',{recursive:true,force:true})\" && next dev --webpack",
+    "dev": "next dev",
     "build": "next build",
     "start": "npx serve dist",
     "lint": "eslint"

From 709b1dde8e91fee9d539bcdeecec1e435359d93b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raul=20Mauricio=20U=C3=B1ate=20Castro?= <runate@ccl.com.co>
Date: Wed, 9 Sep 2026 11:22:05 -0500
Subject: [PATCH 4/7] Version 1 - APIs consumo + Newslatter

---
 components/sections/Communities.tsx | 12 ++++++++++--
 components/sections/Events.tsx      | 11 +++++++++--
 components/sections/Hero.tsx        | 12 ++++++++++--
 components/sections/Sponsors.tsx    | 12 ++++++++++--
 lib/api.ts                          |  2 +-
 5 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/components/sections/Communities.tsx b/components/sections/Communities.tsx
index 931e917..c935116 100644
--- a/components/sections/Communities.tsx
+++ b/components/sections/Communities.tsx
@@ -1,8 +1,12 @@
+"use client";
+
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import CommunityGrid from "@/components/sections/CommunityGrid";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
 import { getCommunities } from "@/lib/api";
+import type { Community } from "@/lib/types";
 
 /** Portadas de bloque sólido (mosaico del logo) con texto de contraste AA. */
 const COVERS = [
@@ -19,8 +23,12 @@ const HOVER_SHADOWS = [
   "hover:shadow-[8px_8px_0_0_var(--color-accent-purple)]",
 ] as const;
 
-export default async function Communities() {
-  const communities = await getCommunities();
+export default function Communities() {
+  const [communities, setCommunities] = useState<Community[]>([]);
+
+  useEffect(() => {
+    void getCommunities().then((data) => setCommunities(data));
+  }, []);
 
   return (
     <section id="comunidades" className="scroll-mt-24 py-24 lg:py-36">
diff --git a/components/sections/Events.tsx b/components/sections/Events.tsx
index e9043ff..47a4251 100644
--- a/components/sections/Events.tsx
+++ b/components/sections/Events.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import { LuCalendar, LuClock3, LuMapPin, LuArrowUpRight } from "react-icons/lu";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
@@ -153,8 +156,12 @@ function EventCard({ event, index, isPast = false, featured = false }: EventCard
 // Snapshot al momento del build (export estático); se refresca en cada deploy.
 const BUILD_TIME = Date.now();
 
-export default async function Events() {
-  const events = await getEvents();
+export default function Events() {
+  const [events, setEvents] = useState<CommunityEvent[]>([]);
+
+  useEffect(() => {
+    void getEvents().then((data) => setEvents(data));
+  }, []);
   const upcoming = events
     .filter((event) => new Date(event.startsAt).getTime() >= BUILD_TIME)
     .sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index cb29cbb..8bb4246 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -1,10 +1,18 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import ColombiaMap from "@/components/map/ColombiaMap";
 import Reveal from "@/components/ui/Reveal";
 import { MosaicBar } from "@/components/ui/MosaicBar";
 import { getMapMarkers } from "@/lib/api";
+import type { CommunityMarker } from "@/lib/types";
+
+export default function Hero() {
+  const [markers, setMarkers] = useState<CommunityMarker[]>([]);
 
-export default async function Hero() {
-  const markers = await getMapMarkers();
+  useEffect(() => {
+    void getMapMarkers().then((data) => setMarkers(data));
+  }, []);
 
   return (
     <section id="hero" className="relative overflow-hidden scroll-mt-24">
diff --git a/components/sections/Sponsors.tsx b/components/sections/Sponsors.tsx
index 711fe2e..3a7f5ac 100644
--- a/components/sections/Sponsors.tsx
+++ b/components/sections/Sponsors.tsx
@@ -1,9 +1,13 @@
+"use client";
+
 import Image from "next/image";
+import { useEffect, useState } from "react";
 import { LuHandshake } from "react-icons/lu";
 import Reveal from "@/components/ui/Reveal";
 import SectionHeading from "@/components/ui/SectionHeading";
 import { getSponsors } from "@/lib/api";
 import { CONTACT_EMAIL } from "@/lib/site";
+import type { Sponsor } from "@/lib/types";
 
 /** Cuadros de iniciales en bloques sólidos del mosaico (contraste AA). */
 const TILE_ACCENTS = [
@@ -21,8 +25,12 @@ function initials(name: string): string {
     .join("");
 }
 
-export default async function Sponsors() {
-  const sponsors = await getSponsors();
+export default function Sponsors() {
+  const [sponsors, setSponsors] = useState<Sponsor[]>([]);
+
+  useEffect(() => {
+    void getSponsors().then((data) => setSponsors(data));
+  }, []);
   const mailto = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
     "Quiero patrocinar a Python Colombia",
   )}`;
diff --git a/lib/api.ts b/lib/api.ts
index 93adbe6..9abfb28 100644
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -56,7 +56,7 @@ function recordList(value: unknown): ApiRecord[] {
 
 async function apiFetch<T>(path: string): Promise<T | null> {
   try {
-    const response = await fetch(`${API_BASE_URL}${path}`, { cache: "force-cache" });
+    const response = await fetch(`${API_BASE_URL}${path}`, { cache: "no-store" });
     if (!response.ok) return null;
     return (await response.json()) as T;
   } catch (error) {

From e949d41aba6785e9081b4c783febddd88833353e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raul=20Mauricio=20U=C3=B1ate=20Castro?= <runate@ccl.com.co>
Date: Wed, 9 Sep 2026 19:15:02 -0500
Subject: [PATCH 5/7] Version 1 - APIs consumo + Newslatter

---
 components/layout/Navbar.tsx     |  4 ++--
 components/map/ColombiaMap.tsx   |  3 ---
 components/sections/Hero.tsx     | 23 ++++++++++-------------
 components/sections/Sponsors.tsx |  2 +-
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
index d788e5c..3b36b55 100644
--- a/components/layout/Navbar.tsx
+++ b/components/layout/Navbar.tsx
@@ -45,11 +45,11 @@ export default function Navbar() {
     >
       <MosaicStrip />
       <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
+        {/* <a> nativo (no <Link>): fuerza una recarga completa del sitio */}
         <a
-          href="#hero"
+          href={asset("/")}
           aria-label="Python Colombia — ir al inicio"
           className="focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-python-yellow"
-          onClick={() => setOpen(false)}
         >
           <Image
             src={asset("/images/logo.png")}
diff --git a/components/map/ColombiaMap.tsx b/components/map/ColombiaMap.tsx
index ec172f9..d27ac45 100644
--- a/components/map/ColombiaMap.tsx
+++ b/components/map/ColombiaMap.tsx
@@ -43,9 +43,6 @@ export default function ColombiaMap({ markers }: ColombiaMapProps) {
         <div className="isolate h-[380px] w-full overflow-hidden border border-white/10 sm:h-[480px] lg:h-[560px]">
           <LeafletMap key={mapKey} markers={markers} activeId={activeId} onSelect={setActiveId} />
         </div>
-        {/* Bloques del mosaico anclados a las esquinas del contenedor */}
-        <span aria-hidden="true" className="absolute -left-1.5 -top-1.5 h-3 w-3 bg-python-yellow" />
-        <span aria-hidden="true" className="absolute -bottom-1.5 -right-1.5 h-3 w-3 bg-accent-red" />
       </div>
 
       <ul className="mt-3 flex flex-wrap justify-center gap-2" aria-label="Comunidades en el mapa">
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index 8bb4246..bb9b7dc 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -24,13 +24,6 @@ export default function Hero() {
         &gt;&gt;&gt;
       </span>
 
-      {/* Bloques del mosaico flotando en el canal entre columnas */}
-      <div aria-hidden="true" className="pointer-events-none absolute inset-0 hidden lg:block">
-        <span className="absolute left-[46.5%] top-24 h-3 w-3 bg-accent-red" />
-        <span className="absolute left-[44.5%] top-32 h-5 w-5 bg-python-yellow" />
-        <span className="absolute left-[45.5%] top-44 h-2.5 w-2.5 bg-accent-green" />
-      </div>
-
       <div className="relative mx-auto grid max-w-6xl gap-14 px-4 pb-16 pt-12 sm:px-6 lg:grid-cols-12 lg:items-center lg:gap-10 lg:pb-24 lg:pt-20">
         <Reveal className="lg:col-span-5">
           <div>
@@ -42,8 +35,10 @@ export default function Hero() {
             </p>
 
             <h1 className="mt-7 text-5xl font-black leading-[0.98] tracking-tight text-white sm:text-6xl xl:text-7xl">
-              La comunidad oficial de{" "}
-              <span className="text-python-yellow">Python Colombia</span>
+              La comunidad de{" "}
+              <span className="text-python-yellow">
+                Python <span className="text-white">en</span> Colombia
+              </span>
             </h1>
 
             <p className="mt-6 text-2xl font-bold tracking-tight text-python-blue-light sm:text-3xl">
@@ -57,12 +52,14 @@ export default function Hero() {
             </p>
 
             <div className="mt-10 flex flex-col gap-4 sm:flex-row">
-              <button
-                type="button"
-                className="bg-python-yellow px-8 py-4 text-sm font-bold uppercase tracking-[0.12em] text-night transition hover:-translate-y-0.5 hover:shadow-[6px_6px_0_0_var(--color-python-blue-light)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow motion-reduce:hover:translate-y-0"
+              <a
+                href="https://chat.whatsapp.com/DEW1u7kJRWhHou1hYvMrLy"
+                target="_blank"
+                rel="noreferrer"
+                className="bg-python-yellow px-8 py-4 text-center text-sm font-bold uppercase tracking-[0.12em] text-night transition hover:-translate-y-0.5 hover:shadow-[6px_6px_0_0_var(--color-python-blue-light)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-python-yellow motion-reduce:hover:translate-y-0"
               >
                 Únete a la comunidad
-              </button>
+              </a>
               <a
                 href="#eventos"
                 className="border-2 border-accent-green px-8 py-4 text-center text-sm font-bold uppercase tracking-[0.12em] text-accent-green transition hover:bg-accent-green hover:text-night focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-green"
diff --git a/components/sections/Sponsors.tsx b/components/sections/Sponsors.tsx
index 3a7f5ac..0069197 100644
--- a/components/sections/Sponsors.tsx
+++ b/components/sections/Sponsors.tsx
@@ -44,7 +44,7 @@ export default function Sponsors() {
             <SectionHeading
               eyebrow="Patrocinadores"
               title="Impulsa el talento Python en Colombia"
-              description="Tu marca frente a miles de desarrolladores en todo el país: visibilidad en eventos, meetups y canales de la comunidad, mientras apoyas el ecosistema tech local."
+              description="Tu marca frente a miles de desarrolladorxs en todo el país: visibilidad en eventos, meetups y canales de la comunidad, mientras apoyas el ecosistema tech local."
               accentClass="text-accent-green"
             />
           </Reveal>

From 889494c1c5bdbfc2e30558b4768b3182b05a5a2d Mon Sep 17 00:00:00 2001
From: "Karobot.co" <ladinokarolina@gmail.com>
Date: Fri, 11 Sep 2026 15:53:45 -0500
Subject: [PATCH 6/7] Remove basePath so assets resolve at custom domain root

The site now serves from python.org.co at the domain root instead of
colombiapython.github.io/web/, so the /web basePath prefix caused all
CSS/JS assets to 404.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 next.config.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 8e5c521..c4be9da 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,6 @@
 import type { NextConfig } from "next";
 
-const repoName = process.env.GITHUB_REPOSITORY?.split("/")[1];
-const basePath = process.env.GITHUB_ACTIONS && repoName ? `/${repoName}` : "";
+const basePath = "";
 const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? "https://pythonco.orionis-framework.com";
 
 const nextConfig: NextConfig = {

From 19a4c9a1922dcbee1cc06b7d18104c4150df414c Mon Sep 17 00:00:00 2001
From: "Karobot.co" <ladinokarolina@gmail.com>
Date: Fri, 11 Sep 2026 16:12:44 -0500
Subject: [PATCH 7/7] Hardcode metadataBase to python.org.co

Open Graph and Twitter card images were resolving against
colombiapython.github.io because metadataBase switched to the GitHub
Pages URL whenever the build ran in GitHub Actions, which is always.
The site only serves from the custom domain now, so metadataBase
should always match it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 lib/seo.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/lib/seo.ts b/lib/seo.ts
index 4c2f1fa..616ff8e 100644
--- a/lib/seo.ts
+++ b/lib/seo.ts
@@ -1,13 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { asset } from "@/lib/assets";
 
-function resolveMetadataBase(): URL {
-  if (process.env.GITHUB_ACTIONS && process.env.GITHUB_REPOSITORY) {
-    const owner = process.env.GITHUB_REPOSITORY.split("/")[0];
-    return new URL(`https://${owner}.github.io`);
-  }
-  return new URL("https://python.org.co");
-}
+const METADATA_BASE = new URL("https://python.org.co");
 
 export const viewport: Viewport = {
   width: "device-width",
@@ -17,7 +11,7 @@ export const viewport: Viewport = {
 };
 
 export const metadata: Metadata = {
-  metadataBase: resolveMetadataBase(),
+  metadataBase: METADATA_BASE,
   title: {
     default: "Python Colombia | Comunidad Oficial de Python en Colombia",
     template: "%s | Python Colombia",