Announcement Bar Premium
Todas as variantes com técnicas de psicologia de conversão
1. Free Shipping
Valor + ThresholdPsicologia: Incentiva aumentar o carrinho para atingir o valor mínimo
FRETE GRÁTISacima de R$ 150
Aproveite→2. Discount
Urgência + ExclusividadePsicologia: Cria senso de oportunidade única para novos clientes
1ª compra15% OFF
3. Launch
Novidade + ValorPsicologia: Desperta curiosidade e posiciona como inovador
Calculadoradose em 30s
Testar→4. Social Proof
FOMO + ValidaçãoPsicologia: Valida decisão através de números reais
+2.847 gramadosSeja o próximo
Ver soluções→5. Rotating ✨
Máxima ExposiçãoPsicologia: Variedade mantém atenção, progress bar indica tempo
FRETE GRÁTISacima de R$ 150
Aproveite→💡 Observe a progress bar na parte inferior - alterna a cada 6 segundos
Características Premium
✨ Animações
- • Shimmer background sutil
- • Icon pulse suave
- • Highlight scale (1 → 1.05 → 1)
- • CTA hover com scale
- • Progress bar linear
🎯 Interatividade
- • Fechável com X (salva preferência)
- • LocalStorage integrado
- • Hover states em todos elementos
- • Responsive mobile/desktop
- • Auto-rotate opcional
♿ Acessibilidade
- • ARIA labels completos
- • Navegação por teclado
- • Contraste WCAG AA
- • Prefers-reduced-motion
- • Semantic HTML
📊 Conversão
- • Escassez (oferta limitada)
- • Urgência (tempo/ação)
- • Valor (benefício claro)
- • Prova social (números)
- • CTA direto
Como Usar
// Importar a variante desejada
import { FreeShippingBar } from '@/components/layout'
// Usar no layout ou página
<FreeShippingBar />
Atualmente usando RotatingAnnouncementBar no layout principal