Mandate

Sobre Este Template

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.

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.

Características

• 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
• Where We Work — cuatro bloques de región foto/texto alternados con conteo de pueblos no alcanzados
• How We Send — encabezado sticky con proceso de cuatro pasos: Discern, Prepare, Send, Sustain
• Página Give — tres niveles de donación mensual, estadísticas de transparencia y formulario con encabezado sticky
• Página Go — proceso de envío, acordeón de FAQ con <details> nativo y formulario de consulta para candidatos
• Página de contacto con selector de motivo para enrutar cada consulta al equipo correcto
• Cursor personalizado — punto instantáneo más un anillo con lerp en rAF que se expande sobre links y botones mediante event delegation
• Barra de progreso de scroll superior escalada directamente con el valor progress del evento scroll de Lenis
• Smooth scroll con Lenis + View Transitions, matando tweens de GSAP y ScrollTriggers en astro:before-preparation
• Reveals con IntersectionObserver que saltan las islands sin hidratar y se re-enganchan en astro:hydrate — sin hydration mismatch
• 22 fotografías documentales — las del hero, CTA y regiones optimizadas a WebP con getImage(), TypeScript estricto con noUncheckedIndexedAccess

Despliegue