Mandate
Plantilla dark-cinema para misiones con hero pinneado que separa la palabra GO al hacer scroll
- Plantilla
- Mandate
- Sector
- Missions Nonprofit
- Año
- 2025
- Hecho con
- Astro 5, React 19, Tailwind CSS v4
- Páginas
- 9
Mandate es una plantilla dark-cinema para organizaciones misioneras, ONGs cristianas y agencias de envío. Nueve páginas cubren la narrativa del home, una página About con línea de tiempo institucional, páginas de conversión Go y Give, contacto, un roster de misioneros con perfiles individuales y un blog de historias de campo. El hero pinnea una sola palabra, GO, y separa las dos letras con el scroll mientras un overlay casi negro se disuelve y deja ver la fotografía documental que hay detrás. Seis perfiles de misioneros vienen en JSON con listas de peticiones de oración; cinco despachos de campo vienen en Markdown con autor, campo y tiempo de lectura. Las demás secciones incluyen estadísticas de pueblos no alcanzados con cita bíblica destacada, un proceso de envío de cuatro pasos y bloques de región alternados. Naranja ember sobre casi negro, Bricolage Grotesque con Source Serif 4, cursor personalizado, smooth scroll con Lenis y View Transitions en todo el sitio.
Qué incluye
- 9 páginas, Inicio, About, Go, Give, Contacto, índice de Misioneros, perfil de Misionero, índice de Historias, artículo de Historia
- Hero kinético GO, un timeline de ScrollTrigger con scrub empuja la G y la O a los bordes opuestos (xPercent ±100) mientras el overlay baja de 0.96 a 0 de opacidad
- 2 colecciones de contenido, 6 perfiles de misioneros en JSON y 5 historias de campo en Markdown
- Páginas de detalle de misionero con años de servicio, campo, país, biografía y lista de peticiones de oración
- Sección Field Dispatches, una historia destacada más una grilla, cada una con autor, campo, tags y tiempo de lectura
- “The Unfinished Task”, tres estadísticas destacadas (7,000+ / 3.2B / 41%) cerradas con una cita bíblica
La firma
La home abre con un frame sticky a pantalla completa que contiene una sola palabra: GO, en hasta 16rem. Un timeline de GSAP ScrollTrigger con scrub lleva la G al borde izquierdo y la O al derecho (xPercent ±100) mientras un overlay casi negro pasa de 0.96 de opacidad a cero, de modo que la fotografía documental se revela por el hueco que se abre entre las letras. Al 45% del timeline la tagline sube dentro de ese hueco. Se lee como un title card de cine, no como un hero section.
Verlo en vivo
La demo es pública: https://fpsjago.github.io/mandate-template/. 9 páginas, hecha con Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.