Contenido de aterrizaje y sobrescrituras de branding

Audience

Este artículo es para operadores de la plataforma GCM. Los administradores de iglesia deberían ver el artículo de branding del Constructor de sitios web — esa página es para su sitio público, esta es para el sitio de marketing de GCM en geniuschurchmanager.com.

Las pestañas Landing y Branding juntas controlan cómo se ve la plataforma para un visitante completamente nuevo: la página de aterrizaje de marketing, la pantalla de inicio de sesión, el favicon en la pestaña de su navegador, el logo en el menú lateral de cada espacio de trabajo con sesión iniciada, la imagen de Open Graph cuando alguien comparte un enlace en Slack. Todo esto vive en dos tablas, se edita desde dos pestañas y se aplica a toda la plataforma en el instante en que guardas.

Dos pestañas, un propósito

• Landing (/platform/landing) edita el texto e imágenes por idioma que se renderizan en la página de aterrizaje de marketing. Almacenadas como sobrescrituras en landing_page_content; cae a los valores i18n por defecto incorporados al paquete cuando no existe sobrescritura.
• Branding (/platform/branding) edita todo lo demás: nombre de la plataforma, eslogan, logo, favicon, empresa del pie de página, correo de soporte, colores del tema, enlaces sociales, el interruptor de Tour guiado. Almacenado en la tabla plana clave-valor platform_settings.

Las dos pestañas comparten una biblioteca de medios, delimitada a la ruta de almacenamiento Supabase uploads/platform/. Las imágenes subidas para la página de aterrizaje (platform/landing/) también son visibles para la pestaña Branding (platform/branding/) y la pestaña PWA (platform/pwa/), y viceversa — elige una vez, reutiliza en cualquier lugar.

Sobrescrituras de contenido de aterrizaje

La pestaña Landing lista nueve secciones de la página de marketing, cada una como un acordeón:

1. Hero Section — la parte superior. Insignia, titular, subtitular, CTA, enlace "ver precios", ilustración opcional.
2. Social Proof Bar — la franja debajo del hero ("Confiado por 200+ iglesias").
3. Problem Section — bloque narrativo. Titular, descripción, cita, autor de la cita, ilustración.
4. Features Grid — seis capacidades del producto con título + descripción cada una.
5. Scripture Interlude — versículo + referencia.
6. How It Works — explicación de tres pasos.
7. More Features — lista con viñetas. El campo items es un elemento por línea.
8. Pricing Preview — bloque de adelanto.
9. Final CTA — banner de cierre.

Un desplegable de idioma en la cabecera de la tarjeta cambia entre English, Español, Français, Português. Cada idioma es un conjunto separado de sobrescrituras; cambiar no pierde las ediciones no guardadas en el idioma original (el estado por idioma es independiente).

Cómo funciona el prellenado

Cada entrada de texto está prellenada con el texto efectivo actual, no la sobrescritura. Eso significa:

• Si no existe sobrescritura, la entrada muestra el valor i18n por defecto de src/i18n/locales/{en,es,fr,pt}.json.
• Si existe una sobrescritura, la entrada muestra el valor de la sobrescritura.
• La insignia de estado te dice cuál: overridden (morado) o unsaved (ámbar).

De esta manera, cuando ajustas el titular de "Conoce a tu rebaño" a "Conoce mejor a tu rebaño", no tienes que volver a escribir toda la cadena — editas el texto visible y el sistema detecta el diff. Vaciar el campo y guardar es la forma canónica de restablecer al valor i18n por defecto; la fila se elimina de landing_page_content para que el texto del paquete se muestre.

Guardando

Tres alcances de guardado:

• Guardar a nivel de campo — aparece junto a un campo una vez que tienes ediciones. Persiste solo ese campo.
• Guardar a nivel de sección — aparece en la parte superior de una sección de acordeón cuando alguno de sus campos está sucio. Persiste todos los campos sucios en esa sección en un único upsert.
• Restablecer a nivel de sección — aparece cuando alguno de los campos de la sección está sobrescrito. Elimina esas filas para que vuelvan los valores i18n por defecto.

Los guardados invalidan dos cachés de consulta: landing-content-admin (esta pestaña) y landing-content (la página de marketing en vivo). El cambio aparece en geniuschurchmanager.com en el siguiente render.

Campos de imagen

Los campos de imagen (hero_image, problem_image, cta_image) usan el StorageMediaLibraryDialog compartido. Haz clic en Elegir / subir para abrir el selector, que te permite subir un nuevo archivo o elegir uno existente de uploads/platform/landing/, uploads/platform/branding/ o uploads/platform/pwa/.

El selector almacena la ruta, no la URL — resolveStorageUrl la convierte en una URL pública en tiempo de render, así que si mueves el bucket más tarde las referencias siguen funcionando. Una pequeña miniatura de vista previa y un enlace "Ver tamaño completo" están junto a la entrada.

Rutas de almacenamiento, no URLs

Pegar una URL https://... completa en un campo de imagen funciona para la vista previa pero omite el resolvedor de URL a nivel de plataforma. Futuras migraciones de bucket lo romperán. Siempre elige de la biblioteca.

Pestaña Branding

La pestaña Branding está organizada en cinco secciones:

1. Identidad de la plataforma

• Nombre de la plataforma — mostrado en la página de inicio de sesión y el título de la pestaña del navegador.
• Eslogan / Subtítulo — mostrado debajo del nombre de la plataforma en la página de inicio de sesión.
• Logo — cuadrado. Recomendado 512x512 PNG o SVG. El selector se delimita a uploads/platform/branding/.
• Favicon — cuadrado pequeño. Recomendado 32x32 o 64x64 ICO/PNG.
• Empresa del pie de página / URL / correo de soporte / año de copyright — usado en el pie de página de marketing y en correos transaccionales.

2. Colores y tema

Tres selectores de color (primario, secundario, acento), cada uno con una entrada hex en vivo y una fila de muestra de Vista Previa en Vivo en la parte inferior de la tarjeta. Los cambios se aplican globalmente vía variables CSS — afectan al sitio de marketing y a la capa con sesión iniciada.

3. Marketing y SEO

Título / subtítulo / CTA / enlace de CTA del hero, más la URL de la imagen OG y la meta descripción (limitada a 160 caracteres con un contador en vivo). Estos son los valores por defecto de toda la plataforma; la sobrescritura del hero de la pestaña Landing les gana cuando está presente.

4. Enlaces sociales

URLs de Facebook, Instagram, Twitter / X, YouTube, TikTok. Los campos vacíos se ocultan en el pie de página renderizado.

5. Interruptores de característica

Actualmente uno: Tour guiado. Cuando está encendido, los nuevos usuarios obtienen un asistente de tour paso a paso en el primer inicio de sesión. El interruptor escribe en ambos platform_settings.guided_tour_enabled y platform_config.guided_tour_enabled para mantener las dos fuentes de verdad alineadas; si la escritura espejo falla, el interruptor revierte y un toast te lo dice.

El botón "Guardar todo"

Las ediciones de branding no guardan por campo — se acumulan en el estado local hasta que presionas Guardar toda la configuración de branding en la parte inferior. Guardar:

1. Hace upsert de cada fila cambiada en platform_settings con el nuevo valor y un updated_at fresco.
2. Invalida la caché platform_branding_settings.
3. Llama a refetchBranding() en el BrandingContext para que el menú lateral, la cabecera y los colores del tema en la página se actualicen sin una recarga dura.

Si el guardado falla a mitad de camino, el estado local se preserva para que puedas reintentar — la página no se restablece.

Qué cambios se auditan

Las ediciones de branding y aterrizaje escriben a platform_audit_log con acciones branding_settings_saved y landing_content_updated respectivamente. Los valores antes / después se capturan en metadatos, por lo que una futura pregunta "quién cambió la copia del hero hace tres semanas" tiene una respuesta limpia en el registro de auditoría.