Prompt Completo: Sistema de Vendas de Dinâmicas para Células## Visão Geral do ProjetoCrie um sistema completo de vendas online para "Dinâmicas para Células" - um produto digital cristão com mais de 26 dinâmicas organizadas por categorias. O sistema deve incluir landing page mobile-first, checkout PIX, área de produtos estilo Netflix, e integração com banco de dados.## ️ Estrutura do Projeto### 1. Landing Page Mobile-First (app/page.tsx)- Design: Gradiente roxo/azul, visual moderno e responsivo- Hero Section: Título impactante, imagem de célula, CTA verde destacado- Botões principais:- "Compre agora por R$ 1,99" (verde, gradiente, efeito hover)- "Já comprei - Acessar produtos" (outline, modal de login)- Seções: Benefícios, depoimentos, garantia, footer com contato- Tracking: Facebook Pixel integrado para eventos de conversão### 2. Sistema de Checkout PIX (components/pix-checkout.tsx)- Formulário: Apenas email (usado como nome no pagamento)- Order Bumps: 3 produtos extras com checkboxes- Templates WhatsApp (R$ 5,90)- Guia Liderança (R$ 7,90)- Planos de Estudos (R$ 9,90)- Pagamento PIX:- Timer de 5 minutos- Código PIX para copiar (área destacada)- Instruções passo a passo- Polling automático para verificar pagamento- Integração: API Woovi para geração de cobrança PIX### 3. Área de Produtos Netflix-Style (app/obrigado/page.tsx)- Layout: Cards organizados por categoria, grid responsivo- 26+ Dinâmicas: Quebra-gelo, Comunhão, Reflexão, Jogos Espirituais, Oração, Louvor- Categorias Premium: Jogos, Oração, Louvor (R$ 5,00 cada)- Produtos Extras: Templates WhatsApp, Guia Liderança, Planos de Estudos- Modais: Visualização completa de cada dinâmica com instruções detalhadas- Grupo WhatsApp: Comunidade exclusiva (R$ 10,00)### 4. Sistema de Login (components/login-modal.tsx)- Verificação: Busca email no banco de dados- Feedback: Mensagem clara se email não encontrado- Redirecionamento: Para área de produtos se email válido- Fallback: Opção de comprar se não tem acesso## Banco de Dados (Supabase)### Tabelas Principais:sql-- Tabela de compras dos usuáriosCREATE TABLE user_purchases ( id UUID PRIMARY KEY, email VARCHAR(255) NOT NULL, name VARCHAR(255) NOT NULL, products JSONB NOT NULL DEFAULT '[]', total_paid DECIMAL(10,2) NOT NULL DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW());-- Tabela de itens individuaisCREATE TABLE purchase_items ( id UUID PRIMARY KEY, user_email VARCHAR(255) NOT NULL, product_id VARCHAR(100) NOT NULL, product_name VARCHAR(255) NOT NULL, price DECIMAL(10,2) NOT NULL, purchased_at TIMESTAMP WITH TIME ZONE DEFAULT NOW());### Sistema de Fallback:- LocalStorage: Para quando Supabase não disponível- Email de teste: teste@gmail.com com todos os produtos- Dados mock: Para desenvolvimento e testes## Componentes Especiais### 1. Dinâmica Modal (components/dinamica-modal.tsx)- Layout: Header colorido, conteúdo organizado- Seções: Objetivo, versículo, materiais, desenvolvimento, reflexão, oração- Design: Cards coloridos por categoria, badges de dificuldade- Responsivo: Funciona bem em mobile e desktop### 2. Checkout Premium (components/premium-checkout.tsx)- Categorias: Compra individual de categorias premium- Fluxo: Confirmação → Pagamento PIX → Sucesso- Integração: Mesmo sistema de pagamento do checkout principal### 3. Notificação Social Proof (components/social-proof-notification.tsx)- Aparição: Após 3 segundos, some em 8 segundos- Contador: Dinâmico, incrementa automaticamente- Design: Card flutuante, animação suave## Integrações Técnicas### 1. API Woovi (PIX)typescript// Configuração da APIconst WOOVI_API_URL = "https://api.woovi.com/api/v1"const WOOVI_TOKEN = "seu_token_aqui"// Funções principais- createWooviCharge(): Criar cobrança PIX- checkChargeStatus(): Verificar status do pagamento- calculateTotal(): Calcular valor total com produtos extras### 2. Server Actions (app/actions.ts)typescript// Actions principais- createPixCharge(): Criar cobrança normal- createPremiumPixCharge(): Criar cobrança premium- processPurchaseComplete(): Processar compra finalizada### 3. Webhook (app/api/webhook/woovi/route.ts)- Endpoint: /api/webhook/woovi- Eventos: OPENPIX:CHARGE_COMPLETED- Processamento: Automático ao confirmar pagamento- Produtos: Determinação baseada no valor pago## Recursos Mobile-First### Design Responsivo:- Grid: 2 colunas mobile, 3-4 desktop- Botões: Tamanho adequado para touch- Texto: Tamanhos otimizados para leitura mobile- Imagens: Otimizadas e responsivas### UX Otimizada:- Checkout: Processo simplificado, poucos campos- Navegação: Intuitiva e rápida- Loading: Estados de carregamento claros- Feedback: Mensagens de sucesso/erro visíveis## Dados de Conteúdo### 26+ Dinâmicas Organizadas:- Quebra-Gelo: 8 dinâmicas (Nomes, Objetos, Emoji, etc.)- Comunhão: 6 dinâmicas (Talentos, Apoio, História, etc.)- Reflexão: 4 dinâmicas (Perdão, Espelhos, Sementes, etc.)- Jogos Espirituais: 4 dinâmicas (Fé, Construção, Tesouro, etc.)- Oração: 2 dinâmicas (Círculo, Mapa)- Louvor: 2 dinâmicas (Salmo, Natureza)### Conteúdo Extra:- 50+ Templates WhatsApp: 6 categorias de mensagens- Guia Liderança: 10 capítulos completos- 12 Planos de Estudos: Estudos bíblicos semanais## Funcionalidades Avançadas### 1. Sistema de Acesso:- Verificação: Por email no banco de dados- Controle: Produtos liberados por compra- Vitalício: Acesso permanente aos produtos### 2. Tracking e Analytics:- Facebook Pixel: PageView, InitiateCheckout, Purchase- Eventos: Rastreamento completo do funil- Conversões: Dados para otimização de campanhas### 3. Sistema de Teste:- Email especial: teste@gmail.com- Dados mock: Para desenvolvimento- Simulação: Pagamentos e webhooks## Estilo Visual### Cores Principais:- Verde: #10B981 (CTAs e sucesso)- Roxo/Azul: Gradientes para headers- Cinza: Tons neutros para texto- Laranja: Produtos premium e alertas### Tipografia:- Títulos: Font-bold, tamanhos responsivos- Texto: Legível em mobile, hierarquia clara- CTAs: Font-black para destaque### Componentes UI:- Shadcn/ui: Biblioteca de componentes- Tailwind: Classes utilitárias- Lucide: Ícones consistentes## Estrutura de Arquivos Sugeridaplaintextapp/├── page.tsx (Landing page)├── obrigado/page.tsx (Área de produtos)├── sucesso/page.tsx (Página de sucesso)├── actions.ts (Server actions)├── layout.tsx (Layout principal)├── globals.css (Estilos globais)└── api/webhook/woovi/route.ts (Webhook)components/├── pix-checkout.tsx (Checkout principal)├── premium-checkout.tsx (Checkout premium)├── login-modal.tsx (Modal de login)├── dinamica-modal.tsx (Modal das dinâmicas)├── netflix-style-content.tsx (Grid de produtos)├── social-proof-notification.tsx (Notificação)├── error-boundary.tsx (Tratamento de erros)└── loading-fallback.tsx (Loading states)lib/├── database.ts (Funções do banco)├── woovi.ts (Integração PIX)├── supabase.ts (Cliente Supabase)└── dinamicas-data.ts (Dados das dinâmicas)scripts/├── create-tables.sql (Criação das tabelas)└── add-test-user.sql (Usuário de teste)## Variáveis de Ambiente NecessáriasplaintextNEXT_PUBLIC_SUPABASE_URL=sua_url_supabaseNEXT_PUBLIC_SUPABASE_ANON_KEY=sua_chave_anonimaSUPABASE_SERVICE_ROLE_KEY=sua_chave_service_role## Pontos de Atenção1. Mobile-First: Todo design pensado para mobile primeiro2. Performance: Componentes otimizados, lazy loading3. SEO: Meta tags e estrutura semântica4. Acessibilidade: ARIA labels e navegação por teclado5. Segurança: Validação de dados e sanitização6. Fallbacks: Sistema funciona mesmo sem Supabase7. Testes: Email de teste para desenvolvimento8. Tracking: Facebook Pixel para métricasEste prompt contém toda a estrutura e detalhes necessários para recriar o sistema completo em outra conta do v0. Cada componente tem sua função específica e o sistema é robusto com fallbacks e tratamento de erros.Vou te mandar a copy aqui para você fazer, para você usar de baseada. " Você tá prestes a transformar suas aulas de catequese com dinâmicas criativas, leves e com base na fé cristã!Elas despertam atenção, risos e participação até nas turmas mais dispersas.Confio tanto no material que vou te mandar tudo agora no WhatsApp, e você só contribui depois, combinado? ❤️✅ Mais de 62 Dinâmicas para Catequese Infantil✅ Material em PDF, simples, direto e pronto pra aplicar✅ Acesso vitalício✅ Suporte direto comigo no WhatsApp"