iachat/docs/superpowers/plans/2026-04-14-reserva-1001-fase-5-polish-visual.md

Reserva 1001 — Fase 5: Polish visual

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development

Goal: Transformar a página pública num produto premium com animações, carrossel, skeletons e micro-interações. A base funcional está toda pronta (fases 1-4); esta fase é exclusivamente sobre percepção de qualidade.

Tech stack adicional: framer-motion (já instalado) · animejs (já instalado) · canvas-confetti (instalar) · embla-carousel-react (instalar — pro carrossel de fotos)

Spec: docs/superpowers/specs/2026-04-13-reserva-1001-design.md seção 10 Fases anteriores: 1, 2, 3, 3.5, 4 completas

---

Escopo

✅ Entra nesta fase

1. Hero section no topo da página pública com reveal escalonado (framer-motion)
2. Carrossel de fotos substitui o grid atual — com swipe, indicadores, lightbox em tela cheia
3. Stagger entrance nas opções de categoria/unidade quando muda a marca (framer-motion staggerChildren)
4. Price pulse — animação de escala quando o preço recalcula (anime.js)
5. QR code glow — borda animada pulsando na tela de checkout (CSS + motion)
6. Skeleton screens em vez de spinners no form e galeria
7. SuccessScreen upgrade — confetti + check SVG desenhado com anime.js
8. Micro-interactions em botões (hover scale, subtle glow)
9. AnimatePresence pras transições entre etapas (form → checkout → success)

❌ Fora de escopo

• Mudanças de layout (ex: hero "parallax" com scroll) — só reveal
• Mudança de fontes/cores (é editável no admin)
• Mexer em lógica de negócio

---

Tasks

Task 1: Hero section com reveal

Files:

• Create: src/components/reservation/HeroSection.tsx
• Modify: src/pages/ReservationPage.tsx (usa HeroSection no topo)

Cria um hero mais impactante: stagger entrance dos elementos (subtítulo → título → tagline) com motion.div e variants. Timeline: 0ms subtítulo, 200ms título, 400ms tagline.

Task 2: Carrossel de fotos com lightbox

Files:

• Install: pnpm add embla-carousel-react
• Modify: src/components/reservation/ImageGallery.tsx (substitui grid por carrossel)

Swipe horizontal, dots indicadores, autoplay 4s (pausa no hover). Click numa foto abre lightbox em tela cheia (overlay escuro + <img> centralizado + botão X + ←/→ pra navegar + ESC pra fechar).

Task 3: Stagger entrance nos selects de categoria/unidade

Files:

• Modify: src/components/reservation/StayDetailsStep.tsx

Quando a marca muda e as unidades/categorias re-renderizam, cada <option> (ou melhor, cada card visual de opção se virar custom dropdown) aparece com delay escalonado. Usar AnimatePresence + motion.li com initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} e delay por índice.

Como o HTML <select> não anima filhos, vou fazer um chip group por baixo do select mostrando as opções selecionáveis com hover state animado. O select mantido pra acessibilidade.

Task 4: Price pulse quando recalcula

Files:

• Modify: src/components/reservation/PriceSummary.tsx

useEffect que dispara anime({ targets: ref.current, scale: [1, 1.08, 1], duration: 400 }) toda vez que totalCents muda. Ref no <div> principal.

Task 5: QR code glow animation

Files:

• Modify: src/components/checkout/PixCheckout.tsx

Animação CSS infinita na borda do container do QR code: @keyframes alternando box-shadow entre 0 0 30px rgba(201,169,97,0.4) e 0 0 60px rgba(201,169,97,0.7). Usar via classe ou motion.div com animate={{ boxShadow: [...] }} loop.

Task 6: Skeleton screens

Files:

• Create: src/components/ui/skeleton.tsx
• Modify: src/components/reservation/StayDetailsStep.tsx, ImageGallery.tsx, PriceSummary.tsx (mostram skeleton quando dados estão carregando)

Skeleton reutilizável com shimmer animado (CSS keyframes). Cada componente que hoje mostra "Carregando..." ganha um skeleton com o formato do conteúdo final.

Task 7: SuccessScreen upgrade

Files:

• Install: pnpm add canvas-confetti @types/canvas-confetti

• Modify: src/components/checkout/SuccessScreen.tsx

• Confetti burst com cores da paleta do tenant (champagne + rose-gold + emerald)

• Check SVG desenhado com anime.js (stroke-dashoffset 0 → 1)

• Texto com reveal escalonado

Task 8: Micro-interactions em botões

Files:

• Modify: src/components/ui/button.tsx

Adiciona hover:scale-[1.02] ao primary/secondary (já tem), e subtle hover:glow-champagne animado. Adiciona active:scale-[0.98] pra tactile feedback.

Task 9: AnimatePresence entre fases do ReservationFlow

Files:

• Modify: src/components/reservation/ReservationFlow.tsx

Envolve o conteúdo de cada fase (form/checkout/success) com <AnimatePresence mode="wait"> e <motion.div key={phase} initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} /> — slide + fade suave na transição.

---

Validação

Ao final, tudo deve continuar passando:

pnpm typecheck
pnpm lint
pnpm test
pnpm build

Testes existentes continuam no verde. Novos testes não são obrigatórios (polish visual é difícil de testar automaticamente — QA visual manual).

Critério de conclusão

• Hero aparece com stagger no boot
• Fotos viram carrossel swipable + lightbox
• Selecionar uma nova marca faz as opções "entrarem" em escalado
• Preço pulsa quando recalcula
• QR code tem glow pulsante
• Skeletons aparecem no lugar de "Carregando..."
• Tela de sucesso com confetti + check animado
• Transições entre etapas com slide suave
• Build < 700 KB (meta de não estourar com as libs novas)