Stack: Next.js 16 (App Router) · React 19 · TypeScript 5 · Tailwind CSS v4 · Firebase Firestore · Brevo · Framer Motion 12 · Vercel.
The starting point
Certific-Arte is the program run by Fundación Cultural Ramiro Arana within the Ministry of Cultures' National Cultural Concertation Program (registration C4450-2026): a free, 100% virtual training track that prepares artists and cultural managers, many with empirical and ancestral knowledge, to certify their professional competencies with SENA. The previous site ran on WordPress and could not handle what the call for applications required: capturing up to 100 artists per cohort with a form that met the full PNCC standard and Colombia's Law 1581 on Habeas Data. We first wrote the site's structural copy, aligned with the project's official formulation, and then migrated the entire platform to Next.js.
Enrollments that don't get lost
The core decision was deliberate redundancy in data capture. Firestore acts as the first line of defense with write-only rules validated in the rule itself: mandatory consent, email regex, and read access denied from the client. Then an API upserts the contact in Brevo (enrollee and newsletter lists based on consent) and triggers the branded transactional confirmation email. If Brevo fails, the data is already saved. We added a rate limit of 5 requests per minute per IP and normalization of Colombian phone numbers to E.164 so the upsert never breaks.
The form covers the full set of PNCC fields: 7 document types (including PEP and PPT), ethnic self-identification, disability, department and municipality with Colombia data, urban or rural zone, discipline, and education levels that include the Empirical/self-taught and Ancestral knowledge options. Dual consent: mandatory Habeas Data and optional marketing.
One site, two seasons
A single flag (TEMPORADA_ABIERTA) reconfigures the entire site. With enrollment open, the hero shows a carousel and countdown and the CTAs push toward the form. When closed, the CTAs redirect to the gallery, the form locks at both the UI and API level (403), and an email-only capture remains to feed the list for the next call for applications. The dates live in a single object that feeds the countdown, the data strip, and the confirmation email, and all content is centralized in a data file so the Foundation can edit copy without touching components.
The gallery as public proof
The 13 certified artists from the 2026 cohort each have their own SSG-generated profile: portrait, a 5-section curatorial reading, a visual archive with 87 webp artworks sized to avoid CLS, and a full portfolio download. We also published the certification path as an interactive timeline: 5 modules with dates, weighted evidence, and the complete rubrics in an accordion. The site now works as verifiable public proof of the program's outcome, available for institutions and juries to review.
Production details
- Dual build from the same codebase: standalone for Vercel with APIs, and a static export for cPanel where the form degrades to mailto:.
- Migration SEO: trailingSlash to preserve backlinks from the previous WordPress site, a sitemap with the 13 profiles, es_CO metadata, and a custom 404 page.
- Purposeful motion: a Framer Motion system with scroll-triggered entrances and a timeline that draws itself as you scroll; everything respects prefers-reduced-motion.
- Warm, cultural identity: cream and deep teal with amber and cyan accents, a custom display typeface, and the 5-color decorative stripe from the arts rainbow.
- Operational reporting: automated export of enrollees from Brevo to Excel with brand formatting, filters, and test-record detection.
Result
The 5-module track ran from June 11 to 27, 2026 on Google Classroom and closed with 13 certified artists and cultural managers, each with a public profile in the gallery. The site now operates in archive mode: verifiable proof of the program's outcome and email capture for the next cohort, live at certificarte.fundacionramiroarana.org.
