Inicio · Templates
Capa 04 · Producción

Templates

Dos plantillas completas, listas para personalizar por edición. Construidas con los tokens, componentes y patrones de las capas anteriores — el sistema completo en acción. Forkéalas, cambia copy y datos, ship.

Template 01 · Landing

Event landing page

La página principal del evento. Hero con headline + metadata, banda de fecha, manifiesto, features, speakers, agenda preview, testimonial, pricing, FAQ y CTA con footer. Todo en una sola página de scroll vertical.

Archivo
templates/event-landing.html
Largo
~720 líneas HTML
Secciones
10
CTAs únicos
5 (1 orange · 1 ink · 1 outline · 2 links)
growthsummit.black-n-orange.com/gdl-2026
iframe @ 100% width · scroll independiente Abrir standalone ↗
01 Nav sticky
02 Hero split
03 Date strip
04 Manifesto
05 Features × 4
06 Speakers grid
07 Agenda preview
08 Testimonial dark
09 Pricing × 3
10 FAQ
11 CTA dark
12 Footer 4-col
Template 02 · Detalle

Speakers & Agenda detail

Página de detalle vinculada desde el landing. Tabs sticky de speakers + agenda, filtros por track, grid de 12 speakers con quote, agenda completa dividida en mañana/tarde con descripciones, y banda de descarga + CTA final.

Archivo
templates/speakers-agenda.html
Largo
~520 líneas HTML
Secciones
5
Datos
12 speakers · 9 slots de agenda
growthsummit.black-n-orange.com/gdl-2026/speakers
iframe @ 100% width · scroll independiente Abrir standalone ↗
01 Nav sticky
02 Page head
03 Tabs bar sticky
04 Filter chips
05 Speakers ×12
06 Track legend
07 Agenda AM/PM
08 Download bar
09 CTA ink
10 Footer

¿Cómo se usa esto en producción?

Cada template es un HTML independiente que enlaza css/system.css y css/components.css. Cambia copy y datos; los tokens se encargan del resto del look. Si actualizas la marca, sólo tocas :root en system.css y todo el sistema se mueve contigo.