From 69f0b124bbea317c23ce501cab3ee83488ed223a Mon Sep 17 00:00:00 2001
From: Rodribm10 <rodrigobm10@me.com>
Date: Tue, 14 Apr 2026 22:05:19 -0300
Subject: [PATCH] docs: plano Fase 5 - polish visual (hero, carrossel,
 skeletons, confetti)

---
 ...04-14-reserva-1001-fase-5-polish-visual.md | 133 ++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-14-reserva-1001-fase-5-polish-visual.md

diff --git a/docs/superpowers/plans/2026-04-14-reserva-1001-fase-5-polish-visual.md b/docs/superpowers/plans/2026-04-14-reserva-1001-fase-5-polish-visual.md
new file mode 100644
index 000000000..111645cb0
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-14-reserva-1001-fase-5-polish-visual.md
@@ -0,0 +1,133 @@
+# 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:
+```bash
+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)