Wireframe Template · Página de Servicio — Brownza Group

Wireframe Template · Página de Servicio — Brownza Group

v1.0 · Desktop 1400px · Plantilla reutilizable × 4 servicios · Digital Sea Mx
CTA / Burgundy primario
Placeholder contenido
Placeholder heading
Imagen / media
Entregable / check
Anotación UX
Breadcrumb con Schema.org BreadcrumbList para SEO. Ayuda a Google a entender jerarquía.
Servicio · [Categoría regulatoria]
Agenda una consulta →
Descargar brochure
Hero compacto (más corto que onepage main).
Eyebrow: categoría regulatoria (ej. "Servicio · CNBV supervisado").
H1: nombre del servicio claro (ej. "Constitución de SOFOM E.N.R.").
Subcopy: promesa en 2 líneas.
CTAs: Primary "Agenda consulta" · Secondary "Descargar brochure PDF".
Mini-metrics: Tiempo estimado · # constituciones · Casos exitosos.
¿Qué es este servicio?
Split 50/50. Explicación clara del servicio en 2-3 párrafos + gráfico/ilustración.
Responder: ¿Qué es? ¿Para quién aplica? ¿Qué marco legal lo rige?
SEO: incluir keywords "constitución SOFOM", "autorización CNBV", etc.
¿Qué incluye el servicio?
Grid 3×2 de 6 entregables concretos. Cada card: check verde + título + 1-2 líneas.
Sugeridos para SOFOM: Plan de negocios · Manuales (PLD/FT, crédito, cobranza) · Acta constitutiva · Autorización CNBV · Registros SAT · Capacitación.
Flexibilidad: puede ser 4, 6, 8 cards según alcance del servicio.
¿Cómo trabajamos?
01
02
03
04
05
Timeline horizontal con 5 pasos numerados conectados por línea.
Fases típicas: Diagnóstico → Estructura legal → Documentación → Solicitud autoridad → Autorización y operación.
Mobile: vertical stack con línea vertical en lugar de horizontal.
Por qué Brownza
SVG
SVG
SVG
SVG
SVG
SVG
Grid 3×2 de 6 beneficios diferenciadores. Icono + título + 2-3 líneas.
Ejemplos: Experiencia CNBV · Red de aliados · Acompañamiento end-to-end · Plantillas propias · Capacitación post-constitución · Soporte continuo.
Marco regulatorio
Supervisa
Marco legal
Registro
Capital mín.
Split 50/50. Izq: marco legal + requisitos (lista). Der: 4 badges informativos.
Badges típicos: "Supervisa: CNBV" · "Marco: LGOAAC" · "Registro: SHCP" · "Capital mín: $X MDP".
Refuerza autoridad y transparencia regulatoria.
Preguntas frecuentes
+
+
+
+
+
Acordeón de 5-7 preguntas. Solo 1 abierta por defecto (la más común).
SEO: marcar con Schema.org FAQPage para ganar rich snippets en Google.
Preguntas sugeridas: ¿Cuánto tiempo toma? · ¿Qué documentos necesito? · ¿Capital mínimo? · ¿Diferencia vs. X? · ¿Qué pasa después?
Caso de éxito
Opcional — incluir si hay caso real documentado.
Estructura: imagen + headline del caso + 3-4 líneas de contexto + 3 métricas de resultado.
Si no hay caso: ocultar sección o reemplazar con testimonio específico del servicio.
¿Listo para empezar?
Agenda una consulta →
WhatsApp directo
Respuesta < 24 hrs hábiles
Fondo burgundy. Copy persuasivo a la izq + 2 botones apilados a la derecha.
CTAs: "Agenda consulta" (lleva al form del onepage con servicio pre-seleccionado) · "WhatsApp directo" (link wa.me con mensaje pre-poblado).
Prueba social: micro-copy "Respuesta < 24 hrs" reduce fricción.
Cross-sell. Mostrar los otros 3 servicios de Brownza (excluir el actual).
Objetivo: capturar visitantes que no convierten en este servicio pero podrían interesar otro.
Auto-excluir el servicio actual de la página.
Footer idéntico al onepage — consistencia cross-page. Col 2 cambia "Navegación" por "Servicios" para listar los 4 servicios.
📅 Agenda consulta

Comportamiento Responsive — Página de Servicio

  • ≥1280pxDesktop. Hero split 55/45. Entregables 3×2. Proceso horizontal. Beneficios 3×2. Relacionados 3×1.
  • 1024-1279pxLaptop. Container max 960px. Hero mantiene split pero reduce imagen a 40%. Timeline 5 pasos se conserva.
  • 768-1023pxTablet. Hero → columna (copy arriba). Entregables 2×3. Proceso vertical (línea vertical en vez de horizontal). Beneficios 2×3. Relacionados 2+1.
  • ≤767pxMobile. Todo 1 columna. Timeline completamente vertical con steps apilados. FAQ siempre accesible. Breadcrumb colapsa a "← Volver a Servicios". FAB visible.
  • SEOURLs: /servicios/operadora-de-fondos · /servicios/entidades-financieras · /servicios/servicios-especializados · /servicios/seguros-membresias
  • a11yBreadcrumb con aria-label="breadcrumb" · FAQ acordeón con aria-expanded y aria-controls · Timeline con aria-current="step" en paso activo · Skip link al inicio.