Demo Section
Sección completa "Así funciona Nidus". Compone el título de sección, el stepper animado DemoStep, un CTA de acceso anticipado, un mockup de la plataforma con borde dorado y un caption con ícono de verificación. Todos los textos y la imagen son sobreescribibles via props.
Variante por defecto
Todos los textos y la imagen son los defaults del diseño Nidus.
Así funciona Nidus
Carga de documentación
El propietario carga la obra y la documentación.
Revisión
El arquitecto revisa, aprueba o solicita correcciones para iniciar la obra.
Control de obra
Portería controla ingresos. Arquitecto realiza inspecciones y administracion controla el proceso.
Registro del proceso
Todo queda registrado por propiedad automáticamente.
Carga de documentación
El propietario carga la obra y la documentación.
Revisión
El arquitecto revisa, aprueba o solicita correcciones para iniciar la obra.
Control de obra
Portería controla ingresos. Arquitecto realiza inspecciones y administracion controla el proceso.
Registro del proceso
Todo queda registrado por propiedad automáticamente.
Todo el historial de la obra, en un solo lugar.
Copy personalizado
Todos los textos son sobreescribibles sin cambiar la estructura visual.
Descubrí cómo funciona
Carga de documentación
El propietario carga la obra y la documentación.
Revisión
El arquitecto revisa, aprueba o solicita correcciones para iniciar la obra.
Control de obra
Portería controla ingresos. Arquitecto realiza inspecciones y administracion controla el proceso.
Registro del proceso
Todo queda registrado por propiedad automáticamente.
Carga de documentación
El propietario carga la obra y la documentación.
Revisión
El arquitecto revisa, aprueba o solicita correcciones para iniciar la obra.
Control de obra
Portería controla ingresos. Arquitecto realiza inspecciones y administracion controla el proceso.
Registro del proceso
Todo queda registrado por propiedad automáticamente.
Toda la información de tu barrio, organizada y accesible.
Props — DemoSection
| Prop | Tipo | Default |
|---|---|---|
| headline | string | "Así funciona Nidus" |
| ctaLabel | string | "Unirme al acceso anticipado" |
| ctaHref | string | "/acceso-anticipado" |
| mockupUrl | string | MOCKUP_URL (Firebase Storage) |
| mockupAlt | string | "Vista de la plataforma Nidus…" |
| caption | string | "Todo el historial de la obra, en un solo lugar." |
| onCtaClick | () => void | undefined |
| className | string | undefined |
Uso básico
import { DemoSection } from '@repo/ui';
// Con defaults (recomendado para la landing)
<DemoSection />
// Con copy personalizado
<DemoSection
headline="Descubrí cómo funciona"
ctaLabel="Solicitar demo privada"
ctaHref="/demo"
caption="Toda la información de tu barrio, organizada y accesible."
/>
// Con callback de CTA (recomendado — scroll + tracking)
// Ver hook useCtaClick en apps/landing/hooks/use-cta-click.tsx
<DemoSection onCtaClick={demoSectionCtaClick} />