Initial Screen

El componente Initial Screen es un patrón que ayuda a los usuarios a entender qué deben hacer o qué debe suceder para comenzar a usar una funcionalidad o servicio. Combina componentes clave de la interfaz de usuario, como call to action, imágenes y texto informativo para guiar a los usuarios hacia una interacción específica. Se recomienda para el onboarding a un nuevo producto o servicio donde aún no hay información, y el usuario necesita realizar una acción o simplemente esperar a que se cumpla una condición.

import React from "react";
import { InitialScreen } from "@nimbus-ds/patterns";
import { BagIcon, FireIcon, TagIcon, TiendanubeIcon } from "@nimbus-ds/icons";
import { Button } from "@nimbus-ds/components";


const Example: React.FC = () => (
  <InitialScreen>
    <InitialScreen.Hero
      subtitle="META"
      title="¡Vendé más con Instagram y Facebook!"
      bullets={[
        <InitialScreen.Bullet
          icon={<FireIcon />}
          text="Integración gratis y rápida"
        />,
        <InitialScreen.Bullet
          icon={<BagIcon />}
          text="Sincronización de catálogo en tiempo real"
        />,
        <InitialScreen.Bullet
          icon={<TagIcon />}
          text="Creación y seguimiento de campañas"
        />,
        <InitialScreen.Bullet
          icon={<TiendanubeIcon />}
          text="Medición de conversiones con API y píxel de Meta"
        />,
      ]}
      actions={<Button appearance="primary">Conectar cuenta</Button>}
      image={
        <img
          src="https://d26lpennugtm8s.cloudfront.net/assets/common/img/empty-screens/empty-orders.png"
          alt="NuvemChatView"
          width="100%"
        />
      }
    />
  </InitialScreen>
);

export default Example;

Instala el componente via terminal.

npm install @nimbus-ds/initial-screen

Se pueden pasar propiedades adicionales al componente <InitialScreen>. Revisa la documentación del div para ver la lista de props aceptadas por el componente <InitialScreen>.