Componentes
Onboarding
Fluxo de boas-vindas em 3 slides + tela final de ação. Ilustração animada, título, subtítulo, dots de progresso e navegação por botões.
Visão geral
Clique em "Próximo" para navegar entre os slides
Anatomia
Ilustração animada
Área flex-1 com ilustração centrada. Slide 1: vinyl girando. Slide 2: botão + flutuando. Slide 3: avatares.
Título
font-size:22px font-weight:700 color:#f5f5f5 line-height:1.2. Máx 2 linhas.
Subtítulo
font-size:14px color:#888 line-height:1.5. Complementa o título com uma frase curta.
Dots de progresso
Ativo: w-5 h-1.5 bg-[#C8F53C]. Inativo: w-1.5 h-1.5 bg-[#333]. border-radius:3px. Transition 0.3s.
Botão de navegação
Próximo: bg-[#C8F53C] text-[#0f0f0f]. Voltar: bg-[#1a1a1a] text-[#f5f5f5]. Ambos border-radius:14px py-3.5 font-semibold.
Link Pular
color:#888 font-size:13px · alinhado à direita · pula direto para a tela final.
Conteúdo dos slides
| Slide | Ilustração | Título | Subtítulo |
|---|---|---|---|
| 1 | Vinyl girando (SVG lime) | Bem-vindo ao Spinlist | Seu acervo de vinil, sempre com você. |
| 2 | Botão + flutuando + estrelas | Registre e avalie sua coleção | Adicione discos, dê sua nota e deixe uma review. |
| 3 | 3 avatares em círculos | Conecte-se com outros colecionadores | Veja o que seus amigos estão ouvindo e descobrindo. |
| Final | — | Como quer começar? | 3 opções de ação |
Do / Don't
Bem-vindo ao Spinlist
Seu acervo de vinil, sempre com você.
Feature nova!
Veja as novidades desta versão do app.
Specs
| Propriedade | Valor |
|---|---|
| Dot ativo largura | 20px |
| Dot ativo cor | #C8F53C |
| Dot inativo tamanho | 6×6px |
| Dot inativo cor | #333 |
| Dot altura | 6px |
| Botão Próximo bg | #C8F53C |
| Botão Próximo color | #0f0f0f |
| Botão Voltar bg | #1a1a1a |
| Botão Voltar color | #f5f5f5 |
| border-radius botões | 14px |
| padding botões | 14px |
| font-weight botões | 700 (Próximo), 600 (Voltar) |