Announcement Bar Premium

Todas as variantes com técnicas de psicologia de conversão

1. Free Shipping

Valor + Threshold

Psicologia: Incentiva aumentar o carrinho para atingir o valor mínimo

2. Discount

Urgência + Exclusividade

Psicologia: Cria senso de oportunidade única para novos clientes

3. Launch

Novidade + Valor

Psicologia: Desperta curiosidade e posiciona como inovador

4. Social Proof

FOMO + Validação

Psicologia: Valida decisão através de números reais

5. Rotating ✨

Máxima Exposição

Psicologia: Variedade mantém atenção, progress bar indica tempo

💡 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