Stack: Next.js 16 (App Router) · React 19 · TypeScript 5 · Tailwind CSS v4 · Firebase Firestore · Brevo · Framer Motion 12 · Vercel.
El punto de partida
Certific-Arte es el programa de la Fundación Cultural Ramiro Arana dentro del Programa Nacional de Concertación Cultural del Ministerio de las Culturas (registro C4450-2026): una ruta formativa gratuita y 100% virtual que prepara a artistas y gestores culturales, muchos de saber empírico y ancestral, para certificar sus competencias laborales ante el SENA. El sitio anterior corría en WordPress y no daba para lo que exigía la convocatoria: captar hasta 100 artistas por cohorte con un formulario que cumpliera el estándar PNCC completo y la Ley 1581 de Habeas Data. Escribimos primero los copys estructurales del sitio, alineados con la formulación oficial del proyecto, y luego migramos toda la plataforma a Next.js.
Inscripciones que no se pierden
La decisión central fue redundancia deliberada en la captura. Firestore actúa como primera línea con reglas write-only validadas en la regla misma: consentimiento obligatorio, regex de email y lectura denegada desde el cliente. Luego una API hace upsert del contacto en Brevo (listas de inscritos y newsletter según consentimiento) y dispara el correo transaccional de confirmación con la marca del programa. Si Brevo falla, el dato ya quedó guardado. Sumamos rate limit de 5 solicitudes por minuto por IP y normalización de teléfonos colombianos a E.164 para que el upsert nunca se rompa.
El formulario cubre el set completo de campos PNCC: 7 tipos de documento (incluidos PEP y PPT), pertenencia étnica, discapacidad, departamento y municipio con data de Colombia, zona urbana o rural, disciplina y niveles de formación que incluyen las opciones Empírico/autodidacta y Saberes ancestrales. Doble consentimiento: Habeas Data obligatorio y marketing opcional.
Un sitio, dos temporadas
Una sola bandera (TEMPORADA_ABIERTA) reconfigura todo el sitio. Con convocatoria abierta, el hero muestra carrusel y cuenta regresiva y los CTAs empujan al formulario. Cerrada, los CTAs redirigen a la galería, el formulario se bloquea en UI y API (403) y queda una captura de solo correo que alimenta la lista de la próxima convocatoria. Las fechas viven en un único objeto que alimenta countdown, franja de datos y correo de confirmación, y todo el contenido está centralizado en un archivo de datos para que la Fundación edite textos sin tocar componentes.
La galería como prueba pública
Los 13 artistas certificados de la cohorte 2026 tienen perfil propio generado por SSG: retrato, lectura curatorial en 5 secciones, archivo visual con 87 obras en webp dimensionadas para evitar CLS y descarga del portafolio completo. También publicamos la ruta de certificación como línea de tiempo interactiva: 5 módulos con fechas, evidencias ponderadas y las rúbricas completas en acordeón. El sitio funciona hoy como constancia pública verificable del resultado del programa, consultable por instituciones y jurados.
Detalles de producción
- Doble build desde el mismo código: standalone para Vercel con APIs y export estático para cPanel donde el formulario degrada a mailto:.
- SEO de migración: trailingSlash para preservar los backlinks del WordPress anterior, sitemap con los 13 perfiles, metadata es_CO y página 404 propia.
- Motion con criterio: sistema Framer Motion con entradas al scroll y una línea de tiempo que se dibuja al avanzar; todo respeta prefers-reduced-motion.
- Identidad cálida y cultural: crema y petróleo profundo con acentos ámbar y cian, tipografía display propia y la franja decorativa de 5 colores del arcoíris de las artes.
- Reporting operativo: export automatizado de inscritos desde Brevo a Excel con formato de marca, filtros y detección de registros de prueba.
Resultado
La ruta de 5 módulos corrió del 11 al 27 de junio de 2026 en Google Classroom y cerró con 13 artistas y gestores culturales certificados, cada uno con su perfil público en la galería. El sitio opera hoy en modo archivo: constancia verificable del resultado del programa y captura de correos para la próxima cohorte, en producción en certificarte.fundacionramiroarana.org.
