componente · @solu30/ui-kit/display

CasosSectionTemplate

Sección de casos de uso para landings: carrusel de tarjetas con mockup, problema y solución.

Seguir leyendo — 1 párrafo más

Reusable "Casos de uso" / portfolio section for SolaaS landing pages. Renders a scrollable carousel of case cards with mockup, badge, problem/solution layout. Pass mockupComponents to override per-case visual mockups. Defaults to GenericDashboardMockup.

1 sitio de import en 1 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon

La pieza, con lugar de pantalla

Cargando el espécimen…

export function CasosSectionSpecimen() {
  return (
    <Stage label="CasosSectionTemplate · sección entera, con el mockup genérico de fábrica" tall wide>
      {/* Contenida como AppLayout en navigation.tsx: sin el marco y la altura
          fija se come el lienzo entero —medido: 1476px de alto, con la sección
          desbordando por arriba y 800px de vacío abajo— porque está hecha para
          ocupar una pantalla, no una celda de galería. */}
      <BrowserFrame productName="martinpavon" className="w-full">
        <div className="h-[660px] overflow-y-auto overflow-x-hidden">
          <CasosSectionTemplate
            labels={{
              title: 'Lo que ya está andando',
              subtitle: 'Tres verticales del ecosistema, construidos con estas mismas piezas.',
            }}
            cases={CASOS}
          />
        </div>
      </BrowserFrame>
    </Stage>
  )
}

De specimens/display.tsx · CasosSectionSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { CasosSectionTemplate } from '@solu30/ui-kit/display'

Props

5 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
labels	sí	`CasosSectionLabels`	—
cases	sí	`CasoItem[]`	—
caseUrls	opcional	`Record<string, string>`	—
caseColors	opcional	`CasoColor[]`	Per-case accent colors. Cycles through CASE_COLORS if omitted or shorter than cases.
mockupComponents	opcional	`React__default.ComponentType<MockupProps>[]`	Per-case mockup components. Receives accent + accentLight props. Falls back to GenericDashboardMockup.

Ejemplo del paquete

<CasosSectionTemplate
  labels={{ title: 'Lo que ya hicimos', subtitle: 'Negocios que hoy trabajan sin Excel.', ctaLabel: 'Ver sitio' }}
  cases={t.casos.items}
  caseUrls={CASE_URLS}
  mockupComponents={[GestorSalonMockup, DietalyMockup, CharterPanelMockup]}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.