lp-kairo
Landing page do Kairo — sistema pessoal de evolução. Funil de vendas de produção, pronto para deploy na Vercel.
Stack
| Camada | Tecnologia |
|---|
| Framework | Next.js 15 (App Router, RSC, Turbopack em dev) |
| Estilos | Tailwind CSS v4 com @theme tokens |
| Animação | Framer Motion (scroll reveal, stagger, layout) |
| Smooth scroll | Lenis |
| i18n | next-intl (pt / en / es / de) |
| Fontes | Lora (serif), Inter (sans), Noto Serif JP (kanji) — via next/font |
| Auth | Supabase (@supabase/ssr) — gate de login pré-checkout, OTP por e-mail |
| Checkout | Stripe Checkout Session via rota server-side /api/checkout |
| Analytics | @vercel/analytics + @vercel/speed-insights |
| Deploy | Vercel |
Setup
cp .env.example .env.local
npm install
npm run dev # http://localhost:3000
Scripts
npm run dev # dev server (turbopack)
npm run build # build de produção
npm run start # serve o build
npm run lint # eslint
npm run typecheck # tsc --noEmit
Estrutura
src/
├─ app/
│ ├─ layout.tsx # html root + fontes + analytics
│ ├─ globals.css # design tokens Kairo (washi / sumi)
│ ├─ sitemap.ts # sitemap multi-locale
│ ├─ robots.ts
│ ├─ opengraph-image.tsx # OG dinâmica em edge runtime
│ ├─ api/checkout/route.ts # cria a Stripe Checkout Session (server-side)
│ └─ [locale]/
│ ├─ layout.tsx # provider next-intl + JSON-LD
│ ├─ page.tsx # composição das seções
│ ├─ sucesso/ # retorno do checkout (noindex)
│ ├─ suporte/ # vídeo do app + guia + exclusão de conta + contato
│ ├─ termos/ · privacidade/
│ └─ not-found.tsx
├─ components/
│ ├─ Header.tsx # nav sticky com blur, menu mobile
│ ├─ Footer.tsx # 4 colunas + lang switcher
│ ├─ LangSwitcher.tsx
│ ├─ SmoothScroll.tsx # Lenis
│ ├─ Reveal.tsx # wrappers Framer Motion
│ ├─ Button.tsx
│ ├─ Logo.tsx # KAIRO + kanji 回路
│ ├─ Enso.tsx # círculo ensō animado
│ ├─ PhoneFrame.tsx # mockup de iPhone
│ ├─ PhonePreviews.tsx # mini-réplicas das telas do app
│ ├─ CheckoutButton.tsx # CTA "Assinar" + modal de login OTP
│ ├─ AppStoreButtons.tsx
│ └─ sections/
│ ├─ Hero.tsx # 回路 + wordmark + dual CTA + métricas
│ ├─ Intro.tsx
│ ├─ Pilares.tsx # Mentor / Dôjo / Jardim / Carta
│ ├─ Silencio.tsx # 4 modos de pausa
│ ├─ Como.tsx # 4 passos
│ ├─ Depoimentos.tsx # marquee infinito
│ ├─ Comparar.tsx # tabela Free × Premium
│ ├─ Pricing.tsx # toggle mensal/anual com layoutId
│ ├─ Faq.tsx # accordion com altura animada
│ └─ CtaFinal.tsx
├─ i18n/
│ ├─ routing.ts # locales: pt (default), en, es, de
│ ├─ navigation.ts
│ └─ request.ts
├─ messages/
│ ├─ pt.json
│ ├─ en.json
│ ├─ es.json
│ └─ de.json
├─ middleware.ts # next-intl middleware
└─ lib/
├─ utils.ts # cn, siteConfig, localeCurrency
└─ supabase/ # clients @supabase/ssr (browser + server)
Design system
Espelha o KC / KT do app Flutter (C:\dev\kairo\lib\core\kairo_tema.dart).
| Token | Valor (dark) | Valor (light) |
|---|
--color-bg | #1c1e20 sumi | #f7f4eb washi |
--color-fg | #e5e3dc | #1e1e1e |
--color-fg-soft | #8a8e93 | #766e65 |
--color-accent | #d4a373 cobre iluminado | #c28b63 cobre |
--color-card | #24272a | #efebe0 |
--color-line | #2a2a2a | #e5e1d6 |
O tema default é dark (sumi). Para alternar para light, adicione data-theme="light" ao <html>.
i18n
Locales: pt (default, sem prefixo de URL), en, es, de. Strings ficam em src/messages/{locale}.json. URLs canônicas:
/ → pt-BR/en, /es, /de → demais idiomas
Hreflang/alternates configurados em [locale]/layout.tsx > generateMetadata.
Checkout & Auth (doc 07 do kairos)
Fluxo: CTA "Assinar" → sem sessão Supabase, abre login por código OTP no
e-mail → POST /api/checkout cria a Checkout Session (trial de 7 dias,
moeda do locale) → Stripe → /sucesso. O desbloqueio do premium acontece no
Edge Function stripe-webhook (repo kairos), que resolve o usuário via
customer.metadata.supabase_user_id gravado aqui no checkout.
Identidade: quem assina na web é o mesmo auth.users do app Flutter
(provider email). O app usa e-mail+senha; a LP usa OTP do mesmo provider —
a conta é uma só. Requisitos no Supabase Dashboard:
- Auth → Email habilitado (já é, por causa do app).
- Email Templates → Magic Link: incluir
{{ .Token }} no corpo para o
e-mail trazer o código de 6 dígitos que verifyOtp(type: 'email') espera.
Price IDs e STRIPE_SECRET_KEY são server-side (sem NEXT_PUBLIC),
resolvidos em src/app/api/checkout/route.ts. Setup completo dos consoles
(produto, 6 prices, webhook): kairos/docs/08-guia-consoles-luis.md.
Deploy (Vercel)
vercel link (ou conecte o repo no dashboard)- Defina em Environment Variables (ver
.env.example):
NEXT_PUBLIC_SITE_URL=https://thekairo.appNEXT_PUBLIC_APP_STORE_URL=... (link real quando publicado)NEXT_PUBLIC_PLAY_STORE_URL=...NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEYSTRIPE_SECRET_KEY + 6 × STRIPE_PRICE_<MOEDA>_<PERÍODO>
vercel --prod — ou push no branch principal.
OG image é gerada em edge runtime (/opengraph-image); analytics e speed insights ligam automaticamente.
Suporte (/suporte)
Central de ajuda: vídeo do app, guia completo (12 seções), exclusão de conta,
problemas comuns e contato. Todo o texto vive no namespace suporte dos
messages (blocos no mesmo formato das páginas legais) e descreve o
comportamento real do app kairos — ao mudar o app, revise o guia.
- Vídeo: coloque o arquivo em
public/videos/kairo-demo.mp4 (H.264,
720x1536, com +faststart) e, se quiser, um poster em
public/videos/kairo-demo.jpg. A página confere no build se o arquivo
existe; sem ele, mostra um aviso de "em breve" no lugar do player.
O player usa a proporção 720x1536. A gravação do Android (1080x2400) tem
uma faixa preta no topo, que sai no corte:
ffmpeg -i gravacao.mp4 -vf "crop=1080:2304:0:96,scale=720:-2" -c:v libx264 -crf 23 -pix_fmt yuv420p -c:a aac -movflags +faststart kairo-demo.mp4.
- Âncoras usadas fora do site (não renomear):
#video (declaração de
serviço em primeiro plano no Play Console) e #excluir-conta (URL de
exclusão de conta da Segurança dos dados).
TODO antes do go-live
