Initial Screen
A Initial Screen é um padrão que ajuda os usuários a entender o que precisam fazer ou o que precisa acontecer para começar a usar um recurso ou serviço. Combina componentes-chave da interface do usuário, como chamadas para ação, imagens e texto informativo para orientar os usuários em direção a uma interação específica. É recomendado para integrar um novo produto ou serviço onde ainda não há informações e o usuário precisa executar uma ação ou simplesmente esperar que uma condição seja atendida.
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;Instale o componente via terminal.
npm install @nimbus-ds/initial-screenPropriedades adicionais podem ser passadas para o componente <InitialScreen>. Consulte a documentação div para obter a lista de propriedades aceitas pelo componente <InitialScreen>.