🧩 Biblioteca de Componentes
Componentes reutilizáveis documentados com estados e especificações
1. Botões
Variantes: Primary, Secondary, Outline. Estados: Default, Hover, Disabled.
Preview
Especificações
Padding: 12px 24px (py-3 px-6)
Font: Poppins SemiBold 16px
Border Radius: 8px (--radius-btn)
Transição: all 300ms ease
Sombra: shadow-sm (default), sem sombra (outline)
2. Campos de Entrada
Estados: Normal, Focus, Error, Disabled. Com label e helper text.
Preview
Estado: Normal
Estado: Focus
A senha precisa ter no mínimo 8 caracteres
Estado: Disabled
Especificações
Padding: 12px 16px (py-3 px-4)
Font: Poppins Regular 16px
Border: 1px solid #D1D5DB (normal), 2px solid primary (focus), 2px solid error (error)
Border Radius: 8px (--radius-btn)
Focus Ring: ring-2 ring-primary/30
Helper text: 12px, cor contextual (gray, primary, error)
3. Cards
Venue Card e Service Card — componentes chave da plataforma.
Preview — Venue Card
Espaço Jardim das Flores
📍 Recife, PE
A partir de R$ 8.000
Studio Momento Perfeito
📍 Olinda, PE
A partir de R$ 2.500
Especificações
Border Radius: 12px (--radius-card)
Shadow: --shadow-card (0 2px 8px rgba(0,0,0,0.08))
Hover Shadow: shadow-lg
Image: height 192px (h-48), object-cover
Padding (body): 20px (p-5)
Tags: pill radius, bg primary/10 ou secondary/10
Transição: all 300ms ease
4. Navegação
Header com brand, links, autenticação condicional e menu mobile.
Preview — Header
Especificações
Altura: ~64px
Background: white, shadow-sm no scroll
Brand: gradiente primary→secondary, pill, ícone ✦
Links: Poppins Medium 14px, text-light, hover:text-primary
Link ativo: text-primary, font-semibold
CTA Planejar: text-secondary, ícone sparkle ✨
Mobile: menu hamburger com slide-in overlay
5. Chat Bubble — Celi (Componente Livre)
Bolhas de conversa da assistente IA Celi — usadas na página "Planejar Evento".
Preview
Olá! Sou a Celi, sua assistente de eventos! 🎉 Como posso ajudar hoje?
14:32Quero organizar uma festa de 15 anos para 200 pessoas em Recife!
14:33Que incrível! 👑 Encontrei 3 espaços perfeitos para uma festa de 15 anos com 200 convidados em Recife. Vou te mostrar as melhores opções!
14:33Floating Action Button (FAB)
FAB — Falar com a Celi
Fixo no canto inferior direito (bottom-6 right-6)
Especificações
Avatar Celi: 32px, gradiente primary→secondary, ícone ✦
Bolha Celi: bg-white, shadow-card, rounded-card com rounded-tl-none
Bolha Usuário: bg-secondary, text-white, rounded-card com rounded-tr-none
Texto: 14px Regular, markdown renderizado (bold, links, listas)
Timestamp: 12px, text-gray-400 (Celi) ou text-white/60 (user)
FAB: 56px (w-14 h-14), gradiente, shadow-lg, hover:scale(1.1), fixed bottom-6 right-6
Max-width bolha: ~320px (max-w-sm)