[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="ATUALIZAR-PRODUTOS.md" # Atualizar Produtos - Imagens e Remoções ## Instruções Execute os seguintes comandos SQL no seu painel Supabase (SQL Editor): ### 1. Atualizar Camisa de Treino Preta \`\`\`sql UPDATE products SET image_url = 'https://cdn.shopify.com/s/files/1/0788/1932/8253/files/Photoroom_20260215_160949.png?v=1771182633', image_url_2 = 'https://cdn.shopify.com/s/files/1/0788/1932/8253/files/SMEVLV-94.jpg?v=1770986310', image_url_3 = 'https://cdn.shopify.com/s/files/1/0788/1932/8253/files/SMEVLV-81.jpg?v=1770986310', image_url_4 = NULL, updated_at = NOW() WHERE slug = 'camisa-treino-preta' OR name ILIKE '%Camisa de Treino Preta%'; \`\`\` ### 2. Atualizar Camiseta Oversized Off White \`\`\`sql UPDATE products SET image_url = 'https://cdn.shopify.com/s/files/1/0788/1932/8253/files/Photoroom_20260215_160858.png?v=1771182632', image_url_2 = 'https://cdn.shopify.com/s/files/1/0788/1932/8253/files/BRAN_1.jpg?v=1765476456', image_url_3 = 'https://cdn.shopify.com/s/files/1/0788/1932/8253/files/BRAN_2.jpg?v=1765476456', image_url_4 = NULL, updated_at = NOW() WHERE slug = 'camiseta-oversized-off-white' OR name ILIKE '%Camiseta Oversized Off White%'; \`\`\` ### 3. Remover/Desativar Camiseta Treino Clássica Preta \`\`\`sql UPDATE products SET is_active = FALSE, updated_at = NOW() WHERE slug = 'camiseta-treino-classica-preta' OR name ILIKE '%Camiseta Treino Clássica Preta%'; \`\`\` ## Como Executar 1. Acesse seu projeto Supabase 2. Vá em **SQL Editor** no menu lateral 3. Cole cada comando SQL acima (um de cada vez) 4. Clique em **Run** para executar 5. Verifique se as atualizações foram aplicadas com sucesso ## Verificar Resultados Para confirmar que as atualizações foram feitas: \`\`\`sql SELECT name, slug, image_url, image_url_2, image_url_3, is_active FROM products WHERE slug IN ('camisa-treino-preta', 'camiseta-oversized-off-white', 'camiseta-treino-classica-preta') OR name ILIKE '%Camisa de Treino Preta%' OR name ILIKE '%Camiseta Oversized Off White%' OR name ILIKE '%Camiseta Treino Clássica Preta%'; \`\`\` ## Observações - A Camiseta Treino Clássica Preta será desativada (`is_active = FALSE`), não deletada - Produtos desativados não aparecem na listagem de produtos disponíveis - As imagens são armazenadas como URLs do Shopify CDN [V0_FILE]markdown:file="LEIA-ME-IMPORTANTE.md" # ⚠️ IMPORTANTE - Execute a Migração do Banco de Dados ## O sistema de pagamento ASAAS está implementado, mas faltam colunas no banco de dados. ### Execute este SQL no Supabase AGORA: 1. Acesse o painel do Supabase: https://supabase.com/dashboard 2. Vá em SQL Editor 3. Cole e execute o script abaixo: \`\`\`sql -- Adicionar colunas do ASAAS à tabela orders ALTER TABLE orders ADD COLUMN IF NOT EXISTS asaas_payment_id TEXT; ALTER TABLE orders ADD COLUMN IF NOT EXISTS asaas_customer_id TEXT; ALTER TABLE orders ADD COLUMN IF NOT EXISTS shipping_cost DECIMAL(10,2) DEFAULT 0; -- Criar índices para melhor performance CREATE INDEX IF NOT EXISTS idx_orders_asaas_payment ON orders(asaas_payment_id); CREATE INDEX IF NOT EXISTS idx_orders_asaas_customer ON orders(asaas_customer_id); -- Comentários COMMENT ON COLUMN orders.asaas_payment_id IS 'ID do pagamento no ASAAS'; COMMENT ON COLUMN orders.asaas_customer_id IS 'ID do cliente no ASAAS'; COMMENT ON COLUMN orders.shipping_cost IS 'Custo de envio (R$ 25,00 se delivery, R$ 0,00 se pickup)'; \`\`\` ### Depois de executar: 1. Os pedidos serão salvos com os IDs do ASAAS automaticamente 2. O histórico de pagamentos ficará vinculado 3. O custo de envio será registrado corretamente ### Status atual: ❌ Sistema funcionando mas sem salvar IDs do ASAAS ✅ Pagamentos PIX e Cartão funcionando ✅ CEP automático funcionando ✅ Checkout completo implementado **Execute o SQL acima para completar a integração!** [V0_FILE]markdown:file="PRODUCT-CATALOG-GUIDE.md" # Prompt para v0.dev - Implementação do Sistema de Pedidos Somma Club Copie e cole este prompt completo no v0.dev para implementar o sistema de pedidos integrado com Shopify Headless. --- ## PROMPT COMPLETO PARA v0.dev \`\`\` Você vai implementar um sistema completo de pedidos para o Somma Club integrado com Shopify Headless. ## CONTEXTO GERAL - Página existente: "pedidos" (já existe no site) - Stack: React + TypeScript + TailwindCSS (v0.dev padrão) - APIs: Shopify Storefront API + Customer Account API - Backend: FastAPI (Python) - será criado separadamente - Autenticação: OAuth 2.0 com JWT ## ARQUITETURA DO FRONTEND O frontend será dividido em 3 áreas principais: 1. **Área Pública (sem autenticação)** - Catálogo de produtos - Carrinho de compras - Checkout (redirecionamento para Shopify) 2. **Área Autenticada (com login)** - Meu Perfil - Meus Pedidos - Histórico de Compras 3. **Componentes Compartilhados** - Header com botão de login/logout - Carrinho flutuante - Notificações ## CONFIGURAÇÃO INICIAL Crie as seguintes variáveis de ambiente no .env.local: \`\`\` VITE_API_BASE_URL=http://localhost:8000/api VITE_SHOPIFY_STORE_URL=seu-loja.myshopify.com VITE_SHOPIFY_STOREFRONT_TOKEN=7fc5ffa4282f8d5d6662d95e271c4a3d \`\`\` ## ESTRUTURA DE PASTAS \`\`\` src/ ├── components/ │ ├── auth/ │ │ ├── LoginButton.tsx │ │ ├── LogoutButton.tsx │ │ └── AuthGuard.tsx │ ├── products/ │ │ ├── ProductCatalog.tsx │ │ ├── ProductCard.tsx │ │ └── ProductDetails.tsx │ ├── cart/ │ │ ├── CartSidebar.tsx │ │ ├── CartItem.tsx │ │ └── CartSummary.tsx │ ├── orders/ │ │ ├── OrderHistory.tsx │ │ ├── OrderCard.tsx │ │ └── OrderDetails.tsx │ └── profile/ │ ├── ProfilePage.tsx │ ├── AddressManager.tsx │ └── PersonalInfo.tsx ├── hooks/ │ ├── useAuth.ts │ ├── useCart.ts │ ├── useProducts.ts │ └── useOrders.ts ├── services/ │ ├── api.ts │ ├── shopify.ts │ └── auth.ts ├── types/ │ ├── auth.ts │ ├── product.ts │ ├── cart.ts │ └── order.ts ├── context/ │ ├── AuthContext.tsx │ └── CartContext.tsx └── pages/ ├── Pedidos.tsx (página principal) ├── ProductPage.tsx ├── ProfilePage.tsx └── OrdersPage.tsx \`\`\` ## COMPONENTES PRINCIPAIS A CRIAR ### 1. AuthContext e useAuth Hook - Gerenciar estado de autenticação (usuário, token JWT) - Funções: login(), logout(), refreshToken() - Armazenar token no localStorage ### 2. CartContext e useCart Hook - Gerenciar estado do carrinho - Funções: addItem(), removeItem(), updateQuantity(), clearCart() - Sincronizar com backend ### 3. ProductCatalog Component - Listar produtos do Shopify - Paginação - Filtros (preço, disponibilidade) - Adicionar ao carrinho - Responsivo (mobile-first) ### 4. CartSidebar Component - Exibir itens do carrinho - Atualizar quantidades - Remover itens - Mostrar totais - Botão "Ir para Checkout" - Aviso: "Retirada em 30 dias após o pagamento" ### 5. LoginButton Component - Redirecionar para /api/auth/oauth/authorize - Mostrar loading durante autenticação - Tratar erros ### 6. ProfilePage Component - Exibir dados do cliente (nome, email, telefone) - Editar informações pessoais - Gerenciar endereços (CRUD) - Sincronizar com Shopify ### 7. OrderHistory Component - Listar pedidos do cliente - Filtrar por status - Mostrar detalhes de cada pedido - Data de retirada destacada - Status do pedido com cores ### 8. OrderDetails Component - Exibir pedido completo - Itens do pedido - Totais - Data de retirada - Opção de cancelar (se aplicável) ## FLUXO DE AUTENTICAÇÃO 1. Usuário clica em "Login" 2. Redireciona para: `${API_BASE_URL}/auth/oauth/authorize` 3. Backend retorna URL de autorização da Shopify 4. Usuário faz login na Shopify 5. Shopify redireciona para: `/auth/callback?code=XXX&state=YYY` 6. Frontend captura o callback e envia para backend 7. Backend troca código por token e retorna JWT 8. Frontend armazena JWT no localStorage 9. Usuário autenticado pode acessar área privada ## FLUXO DE COMPRA 1. **Navegação Anônima** - Usuário navega produtos (Storefront API) - Adiciona itens ao carrinho 2. **Checkout** - Clica em "Ir para Checkout" - Sistema verifica autenticação - Se não autenticado: redireciona para login - Se autenticado: pré-preenche dados do perfil 3. **Pagamento** - Redireciona para checkoutUrl da Shopify - Cliente faz pagamento 4. **Confirmação** - Shopify envia webhook para backend - Backend cria pedido local - Calcula data de retirada (30 dias) - Envia email de confirmação - Cliente vê pedido em "Meus Pedidos" ## ESTILOS E DESIGN - Use TailwindCSS com tema consistente ao site existente - Cores principais: Defina conforme identidade do Somma Club - Componentes responsivos (mobile-first) - Ícones: Use react-icons ou lucide-react - Animações suaves com Tailwind transitions ## TRATAMENTO DE ERROS - Mostrar mensagens de erro amigáveis - Toast notifications para ações (sucesso, erro, aviso) - Fallback para quando API está indisponível - Retry automático para requisições que falharam ## PERFORMANCE - Lazy loading de componentes - Paginação de produtos (12 por página) - Cache de dados do cliente - Debounce em buscas - Otimizar imagens de produtos ## SEGURANÇA - Armazenar JWT no localStorage (ou sessionStorage) - Validar token antes de requisições autenticadas - Renovar token automaticamente antes de expirar - Limpar dados ao fazer logout - Não expor dados sensíveis no console ## PÁGINA PRINCIPAL (Pedidos) A página "pedidos" deve conter: 1. **Header** - Logo do Somma Club - Menu de navegação - Carrinho (ícone com contador) - Botão de Login/Perfil 2. **Conteúdo Principal** - Se não autenticado: Mostrar catálogo de produtos - Se autenticado: Abas para "Catálogo" e "Meus Pedidos" 3. **Sidebar do Carrinho** - Flutuante ou colapsável - Exibir itens - Resumo de totais - Botão checkout 4. **Footer** - Informações de contato - Links úteis - Políticas ## EXEMPLO DE ESTRUTURA DE COMPONENTE \`\`\`typescript // components/products/ProductCatalog.tsx import React, { useState, useEffect } from 'react'; import { useProducts } from '@/hooks/useProducts'; import { useCart } from '@/hooks/useCart'; import ProductCard from './ProductCard'; export default function ProductCatalog() { const { products, loading, error, page, setPage } = useProducts(); const { addItem } = useCart(); if (loading) return

Carregando...

; if (error) return

Erro ao carregar produtos

; return (

Produtos Somma Club

{products.map(product => ( ))}

{/* Paginação */}

Página {page}

); } \`\`\` ## DEPENDÊNCIAS RECOMENDADAS \`\`\`json { "dependencies": { "axios": "^1.6.0", "react-icons": "^4.11.0", "lucide-react": "^0.263.0", "zustand": "^4.4.0", "react-hot-toast": "^2.4.1" } } \`\`\` ## PRÓXIMOS PASSOS APÓS IMPLEMENTAÇÃO 1. Testar fluxo de login com OAuth 2. Testar adição de itens ao carrinho 3. Testar checkout e redirecionamento para Shopify 4. Configurar webhooks no backend 5. Testar recebimento de pedidos 6. Implementar sincronização de dados ## NOTAS IMPORTANTES - O backend (FastAPI) deve estar rodando em http://localhost:8000 - Os tokens da Shopify estão configurados como variáveis de ambiente - A página deve respeitar o design existente do seu site - Todos os dados sensíveis devem ser gerenciados pelo backend - Implemente loading states e error boundaries em todos os componentes --- Comece implementando os hooks (useAuth, useCart, useProducts) e os contextos. Depois, crie os componentes principais (ProductCatalog, CartSidebar, LoginButton). Por fim, integre tudo na página "Pedidos". \`\`\` --- ## COMO USAR ESTE PROMPT 1. **Copie o prompt completo acima** (a seção entre os três backticks) 2. **Acesse v0.dev** e crie um novo projeto ou abra o projeto existente 3. **Cole o prompt** na caixa de entrada do v0.dev 4. **Aguarde a geração** dos componentes e arquivos 5. **Revise e ajuste** conforme necessário ## DICAS PARA MELHOR RESULTADO - Se o v0.dev gerar tudo de uma vez, você pode pedir para gerar componentes específicos separadamente - Peça para criar os hooks primeiro, depois os componentes - Solicite ajustes de design conforme a identidade visual do Somma Club - Teste cada componente individualmente antes de integrar ## PRÓXIMAS ETAPAS APÓS v0.dev 1. **Criar o Backend (FastAPI)** usando o guia de implementação fornecido 2. **Conectar Frontend ao Backend** atualizando as URLs de API 3. **Configurar Webhooks da Shopify** no admin da sua loja 4. **Testar Fluxo Completo** de login, compra e sincronização 5. **Deploy em Produção** (Vercel para frontend, seu servidor para backend) --- **Versão**: 1.0 **Data**: 16 de fevereiro de 2026 **Pronto para usar no v0.dev** [V0_FILE]markdown:file="README.md" # Somma Club Hub Oficial *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/somma-running-clubs-projects/hub-somma) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/JivecrniQf5) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/somma-running-clubs-projects/hub-somma](https://vercel.com/somma-running-clubs-projects/hub-somma)** ## Build your app Continue building your app on: **[https://v0.app/chat/JivecrniQf5](https://v0.app/chat/JivecrniQf5)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]markdown:file="SETUP-GOOGLE-SHEETS.md" ## Instruções de Integração com Google Sheets Você já configurou o Google Apps Script Web App. Agora precisa adicionar as URLs nas variáveis de ambiente do projeto. ### Dados que você forneceu: - **URL do Google Apps Script:** `https://script.google.com/macros/s/AKfycbyIEcQ--PYPb5L_-hJpVUFFUCxgqc2jvMuIgn48-mZQrYW7JTZSJLk4leWCQjEgp8U/exec` - **Aba de destino:** `Check-in` ### Variáveis de Ambiente a Configurar Acesse a seção **Vars** no painel v0 e adicione: \`\`\` NEXT_PUBLIC_GOOGLE_SCRIPT_URL=https://script.google.com/macros/s/AKfycbyIEcQ--PYPb5L_-hJpVUFFUCxgqc2jvMuIgn48-mZQrYW7JTZSJLk4leWCQjEgp8U/exec GOOGLE_SCRIPT_URL=https://script.google.com/macros/s/AKfycbyIEcQ--PYPb5L_-hJpVUFFUCxgqc2jvMuIgn48-mZQrYW7JTZSJLk4leWCQjEgp8U/exec \`\`\` ### O que acontece agora: 1. ✅ Usuário acessa `/check-in` e preenche o formulário (nome, telefone, CPF) 2. ✅ Dados salvos no **Supabase** (tabelas `members` e `checkins`) 3. ✅ Dados sincronizados em tempo real com **Google Sheets** (aba "Check-in") 4. ✅ Usuário vê página de obrigado confirmando o check-in 5. ✅ CPF exibido na página de confirmação ### Campos que serão sincronizados com Google Sheets: - **Nome Completo** → Coluna A - **Número de Telefone** → Coluna B - **CPF** → Coluna C - **Data** → Coluna D ### Próximos passos: 1. Adicione as variáveis de ambiente nas Vars 2. Teste fazendo um check-in em `/check-in` 3. Verifique se os dados aparecem na sua planilha "Check-in" 4. Após o SQL ser executado no Supabase, os dados também estarão no banco de dados [V0_FILE]markdown:file="SETUP-PEDIDOS.md" # Setup do Sistema de Pedidos Somma Club ## ✅ Tabelas Já Existentes O sistema foi configurado para usar as tabelas existentes no seu Supabase: - **categories** - Categorias de produtos - **products** - Produtos da loja - **product_sizes** - Tamanhos/variações dos produtos - **orders** - Pedidos dos clientes - **order_items** - Itens dos pedidos - **customers** - Clientes cadastrados ## 🎯 O Que Foi Implementado ### Backend (APIs) 1. **GET /api/products** - Busca produtos ativos com categorias e tamanhos - Retorna: `{ products: Product[] }` 2. **POST /api/orders** - Cria novo pedido com itens - Body: `{ name, phone, email?, items[] }` - Retorna: `{ success: true, order: { id, order_number, total } }` 3. **GET /api/orders?phone=X** - Busca pedidos por telefone - Retorna: `{ orders: Order[] }` ### Frontend 1. **Página /pedidos** - Catálogo de produtos com imagens - Seleção de tamanhos (quando disponível) - Carrinho de compras flutuante - Checkout com formulário - Confirmação de pedido 2. **Navegação** - Botão de pedidos no menu lateral (desktop e mobile) - Ícone de sacola de compras ## 🚀 Como Usar ### Para os Membros 1. Acessar a página `/pedidos` 2. Navegar pelos produtos disponíveis 3. Selecionar tamanho (se aplicável) 4. Adicionar produtos ao carrinho 5. Clicar em "Finalizar Pedido" 6. Preencher nome, telefone e email (opcional) 7. Confirmar o pedido ### Fluxo do Pedido 1. Pedido criado com `status: "pending"` 2. Pedido vinculado ao cliente (se email fornecido) 3. Itens salvos com nome do produto e tamanho 4. Número do pedido gerado: `SOMMA-{timestamp}{random}` ## 📊 Estrutura de Dados ### Produto no Banco \`\`\`typescript { id: string name: string description: string price: number image_url: string category_id: string is_active: boolean stock: number display_order: number sizes: [ { id: string size: string price_adjustment: number stock: number } ] } \`\`\` ### Pedido no Banco \`\`\`typescript { id: string order_number: string // SOMMA-XXXXXXXXXX customer_name: string customer_email: string? customer_phone: string customer_id: string? subtotal: number total: number status: "pending" | "processing" | "completed" | "cancelled" payment_status: "pending" | "paid" | "refunded" delivery_type: "pickup" | "delivery" created_at: timestamp } \`\`\` ### Item do Pedido \`\`\`typescript { id: string order_id: string product_id: string product_name: string product_size: string? quantity: number unit_price: number total_price: number } \`\`\` ## 🎨 Design - Tipografia: Bebas Neue (títulos) + Mono (textos) - Cores: Sistema de tokens do Somma Club - Layout: Grid responsivo mobile-first - Animações: Transições suaves ao hover - Carrinho flutuante (desktop) e botão header (mobile) ## 🔐 Segurança - RLS (Row Level Security) já ativado nas tabelas - Service Role Key usado nas APIs - Validação de dados no backend - Sanitização de inputs no frontend ## 📝 Próximos Passos (Opcionais) 1. Adicionar filtros por categoria 2. Implementar busca de produtos 3. Adicionar histórico de pedidos por telefone 4. Integrar sistema de pagamento 5. Notificações por email/WhatsApp 6. Painel admin para gerenciar pedidos 7. Sistema de estoque em tempo real ## 💡 Notas Importantes - Os produtos devem ter `is_active: true` para aparecer - O `display_order` controla a ordem de exibição - Tamanhos com `stock: 0` podem ser ocultados no futuro - O email é opcional no checkout - Clientes são criados automaticamente se fornecerem email [V0_FILE]markdown:file="SETUP-SUPABASE.md" # Setup Supabase para QR Code Check-in ## Passo a Passo ### 1. Acessar o Supabase Dashboard 1. Vá para [supabase.com](https://supabase.com) 2. Faça login e selecione seu projeto ### 2. Criar a Tabela `checkins` 1. No menu lateral, clique em **SQL Editor** 2. Clique em **New Query** 3. Copie todo o conteúdo do arquivo `/scripts/create-checkins-table.sql` 4. Cole no editor SQL 5. Clique em **Run** (ou pressione Ctrl+Enter) ### 3. Verificar se a Tabela foi Criada 1. No menu lateral, clique em **Table Editor** 2. Você deverá ver a tabela `checkins` na lista 3. A tabela deve ter os seguintes campos: - `id` (UUID, Primary Key) - `code` (VARCHAR, Unique) - `event_name` (VARCHAR) - `event_date` (VARCHAR) - `event_time` (VARCHAR) - `name` (VARCHAR) - `email` (VARCHAR) - `phone` (VARCHAR) - `validated` (BOOLEAN) - `validated_at` (TIMESTAMP) - `created_at` (TIMESTAMP) ### 4. Configurar Row Level Security (RLS) - Opcional Se quiser proteger os dados com RLS: \`\`\`sql -- Habilitar RLS ALTER TABLE checkins ENABLE ROW LEVEL SECURITY; -- Permitir inserção pública (check-in) CREATE POLICY "Allow public insert" ON checkins FOR INSERT TO anon WITH CHECK (true); -- Permitir leitura pública por código (validação) CREATE POLICY "Allow public read by code" ON checkins FOR SELECT TO anon USING (true); -- Permitir update público para validação CREATE POLICY "Allow public update for validation" ON checkins FOR UPDATE TO anon USING (true) WITH CHECK (true); \`\`\` ### 5. Testar Após criar a tabela, teste fazendo um check-in em: - `/check-in` - Para fazer check-in e gerar QR Code - `/validar?qr=CODIGO` - Para validar o QR Code ## Estrutura do SQL O arquivo SQL cria: - Tabela `checkins` com todos os campos necessários - Índice em `code` para busca rápida - Índice em `email` para consultas por usuário ## Troubleshooting ### Erro: "Could not find the table 'public.checkins'" - A tabela não foi criada. Execute o SQL novamente no SQL Editor. ### Erro: "permission denied for table checkins" - Configure as políticas RLS acima ou desabilite RLS temporariamente. ### QR Code não aparece após check-in - Verifique se a API `/api/checkin` está retornando o campo `qrCode`. - Abra o Console do navegador (F12) e veja os logs de erro. [V0_FILE]typescript:file="app/api/cep/route.ts" import { NextResponse } from "next/server" export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const cep = searchParams.get("cep") if (!cep) { return NextResponse.json({ error: "CEP não fornecido" }, { status: 400 }) } const cleanCep = cep.replace(/\D/g, "") if (cleanCep.length !== 8) { return NextResponse.json({ error: "CEP inválido" }, { status: 400 }) } const response = await fetch(`https://brasilapi.com.br/api/cep/v2/${cleanCep}`) if (!response.ok) { return NextResponse.json({ error: "CEP não encontrado" }, { status: 404 }) } const data = await response.json() return NextResponse.json({ cep: data.cep, street: data.street, neighborhood: data.neighborhood, city: data.city, state: data.state, }) } catch (error) { console.error("[v0] CEP API error:", error) return NextResponse.json({ error: "Erro ao buscar CEP" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/checkin/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! function formatCpf(cpf: string): string { const clean = cpf.replace(/\D/g, "") return clean.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4") } function isDeadlinePassed(deadline: string): boolean { if (!deadline) return false const [datePart, timePart] = deadline.split(" ") const [day, month, year] = datePart.split("/") const [hours, minutes] = (timePart || "00:00").split(":") const deadlineDate = new Date( parseInt(year), parseInt(month) - 1, parseInt(day), parseInt(hours), parseInt(minutes) ) return new Date() > deadlineDate } export async function POST(request: NextRequest) { try { const body = await request.json() const { name, phone, cpf, event, deadline } = body if (!name || !phone || !cpf || !event) { return NextResponse.json({ error: "Campos obrigatórios faltando" }, { status: 400 }) } // Valida deadline if (deadline && isDeadlinePassed(deadline)) { return NextResponse.json( { error: "Check-in encerrado", message: "O período de check-in para este evento foi encerrado." }, { status: 403 } ) } const supabase = createClient(supabaseUrl, supabaseServiceKey) const formattedCpf = formatCpf(cpf) const now = new Date().toISOString() // 1. Upsert na tabela members (CPF único por pessoa) const { error: memberError } = await supabase .from("members") .upsert( { cpf: formattedCpf, name, phone, join_date: now }, { onConflict: "cpf", ignoreDuplicates: false } ) if (memberError) { return NextResponse.json( { error: "Erro ao registrar membro", details: memberError.message }, { status: 500 } ) } // 2. Inserir check-in na tabela checkins const { error: checkinError } = await supabase .from("checkins") .insert([{ nome: name, telefone: phone, cpf: formattedCpf, nome_do_evento: event, validated: false }]) if (checkinError) { return NextResponse.json( { error: "Erro ao registrar check-in", details: checkinError.message }, { status: 500 } ) } return NextResponse.json({ success: true }) } catch (error) { return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/consultar-checkin/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export async function POST(request: NextRequest) { try { const body = await request.json() const { cpf } = body if (!cpf) { return NextResponse.json({ error: "CPF é obrigatório" }, { status: 400 }) } const supabase = createClient(supabaseUrl, supabaseServiceKey) // Clean CPF - remove all non-digits const cleanCpf = cpf.replace(/\D/g, "") // Format CPF as XXX.XXX.XXX-XX const formattedCpf = cleanCpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4") // Search for CPF in both clean and formatted versions const { data: checkins, error } = await supabase .from("checkins") .select("*") .or(`cpf.eq.${cleanCpf},cpf.eq.${formattedCpf}`) if (error) { console.error("[v0] Query error:", error) return NextResponse.json({ error: "Erro ao buscar check-in." }, { status: 500 }) } if (!checkins || checkins.length === 0) { return NextResponse.json({ error: "CPF não encontrado." }, { status: 404 }) } // Get the first check-in const checkin = checkins[0] // Return check-in data from checkins table return NextResponse.json({ success: true, checkin: { id: checkin.id, nome: checkin.nome, telefone: checkin.telefone, cpf: checkin.cpf, pelotao: checkin.pelotao, data_do_evento: checkin.data_do_evento, }, }) } catch (error) { console.error("[v0] Server error:", error) return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/coupons/validate/route.ts" import { NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export async function POST(request: Request) { try { const { code, orderTotal } = await request.json() if (!code) { return NextResponse.json({ error: "Coupon code is required" }, { status: 400 }) } const supabase = createClient(supabaseUrl, supabaseKey) // Fetch coupon const { data: coupon, error: couponError } = await supabase .from("coupons") .select("*") .eq("code", code.toUpperCase()) .eq("is_active", true) .single() if (couponError || !coupon) { console.log("[v0] Coupon not found:", code) return NextResponse.json({ error: "Cupom inválido ou expirado" }, { status: 404 }) } // Validate date const now = new Date() if (coupon.valid_from && new Date(coupon.valid_from) > now) { return NextResponse.json({ error: "Este cupom ainda não está disponível" }, { status: 400 }) } if (coupon.valid_until && new Date(coupon.valid_until) < now) { return NextResponse.json({ error: "Este cupom expirou" }, { status: 400 }) } // Validate usage limit if (coupon.usage_limit && coupon.used_count >= coupon.usage_limit) { return NextResponse.json({ error: "Este cupom atingiu o limite de uso" }, { status: 400 }) } // Validate minimum purchase if (coupon.min_purchase_amount && orderTotal < coupon.min_purchase_amount) { return NextResponse.json({ error: `Valor mínimo de compra: R$ ${coupon.min_purchase_amount.toFixed(2)}`, }, { status: 400 }) } // Calculate discount let discountAmount = 0 if (coupon.discount_type === "percentage") { discountAmount = (orderTotal * coupon.discount_value) / 100 if (coupon.max_discount_amount && discountAmount > coupon.max_discount_amount) { discountAmount = coupon.max_discount_amount } } else { discountAmount = coupon.discount_value } // Ensure discount doesn't exceed order total discountAmount = Math.min(discountAmount, orderTotal) console.log("[v0] Coupon validated:", { code, type: coupon.discount_type, value: coupon.discount_value, discountAmount, }) return NextResponse.json({ valid: true, coupon: { id: coupon.id, code: coupon.code, discount_type: coupon.discount_type, discount_value: coupon.discount_value, discount_amount: discountAmount, }, }) } catch (error) { console.error("[v0] Coupon validation error:", error) return NextResponse.json({ error: "Erro ao validar cupom" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/operator/login/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" import { cookies } from "next/headers" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export async function POST(request: NextRequest) { try { const body = await request.json() const { cpf } = body if (!cpf) { return NextResponse.json({ error: "CPF é obrigatório" }, { status: 400 }) } // Remove formatting from CPF for comparison const cleanCpf = cpf.replace(/\D/g, "") // Format CPF as XXX.XXX.XXX-XX to match database format const formattedCpf = cleanCpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4") console.log("[v0] Attempting login with CPF - Clean:", cleanCpf, "Formatted:", formattedCpf) // Create Supabase client const supabase = createClient(supabaseUrl, supabaseServiceKey) // Check if CPF exists in dados_insiders table - try both formats const { data: insider, error } = await supabase .from("dados_insiders") .select("id, nome, cpf") .or(`cpf.eq.${formattedCpf},cpf.eq.${cleanCpf}`) .maybeSingle() if (error) { console.error("[v0] Database error:", error) return NextResponse.json({ error: "Erro ao validar CPF" }, { status: 500 }) } if (!insider) { console.log("[v0] CPF not found in dados_insiders - tried:", formattedCpf, cleanCpf) return NextResponse.json({ error: "CPF não autorizado" }, { status: 401 }) } console.log("[v0] Insider found:", insider.nome) // Create session token const sessionToken = Buffer.from( JSON.stringify({ operatorId: insider.id, cpf: cleanCpf, name: insider.nome, exp: Date.now() + 8 * 60 * 60 * 1000, // 8 hours }) ).toString("base64") // Set cookie const cookieStore = await cookies() cookieStore.set("operator_session", sessionToken, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 8 * 60 * 60, // 8 hours }) return NextResponse.json({ success: true, operator: { id: insider.id, name: insider.nome, cpf: cleanCpf, }, }) } catch (error) { console.error("[v0] Login error:", error) return NextResponse.json({ error: "Erro ao fazer login" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/operator/logout/route.ts" import { NextResponse } from "next/server" import { cookies } from "next/headers" export async function POST() { try { const cookieStore = await cookies() cookieStore.delete("operator_session") return NextResponse.json({ success: true }) } catch (error) { console.error("[v0] Logout error:", error) return NextResponse.json({ error: "Erro ao fazer logout" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/operator/session/route.ts" import { NextResponse } from "next/server" import { cookies } from "next/headers" export async function GET() { try { const cookieStore = await cookies() const sessionCookie = cookieStore.get("operator_session") if (!sessionCookie) { return NextResponse.json({ authenticated: false }, { status: 401 }) } // Decode and validate session const session = JSON.parse(Buffer.from(sessionCookie.value, "base64").toString()) // Check if expired if (session.exp < Date.now()) { cookieStore.delete("operator_session") return NextResponse.json({ authenticated: false, error: "Sessão expirada" }, { status: 401 }) } return NextResponse.json({ authenticated: true, operator: { id: session.operatorId, name: session.name, cpf: session.cpf, }, }) } catch (error) { console.error("[v0] Session check error:", error) return NextResponse.json({ authenticated: false }, { status: 401 }) } } [V0_FILE]typescript:file="app/api/orders/route.ts" import { createClient } from "@supabase/supabase-js" import { NextResponse } from "next/server" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY! function generateOrderNumber(): string { const timestamp = Date.now().toString().slice(-8) const random = Math.floor(Math.random() * 1000).toString().padStart(3, "0") return `SOMMA-${timestamp}${random}` } export async function POST(request: Request) { try { const body = await request.json() const { name, phone, email, items, deliveryType, shippingCost, couponCode, discountAmount } = body if (!name || !phone || !items || items.length === 0) { return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } const supabase = createClient(supabaseUrl, supabaseKey) // Calculate total from items (price already included) const subtotal = items.reduce((sum: number, item: any) => { return sum + item.unit_price * item.quantity }, 0) const shipping = shippingCost || 0 const discount = discountAmount || 0 const total = subtotal + shipping - discount // Gerar número do pedido const orderNumber = generateOrderNumber() // Criar ou buscar cliente se email fornecido let customerId = null if (email) { const { data: existingCustomer } = await supabase .from("customers") .select("id") .eq("email", email) .maybeSingle() if (existingCustomer) { customerId = existingCustomer.id } else { const { data: newCustomer } = await supabase .from("customers") .insert({ name, email, phone, }) .select("id") .maybeSingle() if (newCustomer) customerId = newCustomer.id } } // Create order const orderData: any = { order_number: orderNumber, customer_name: name, customer_email: email || null, customer_phone: phone, customer_id: customerId, subtotal, total, status: "pending", payment_status: "pending", delivery_type: deliveryType || "pickup", } // Add optional fields if (couponCode) orderData.coupon_code = couponCode if (discount > 0) orderData.discount_amount = discount const { data: order, error: orderError } = await supabase .from("orders") .insert(orderData) .select() .single() if (orderError) { console.error("[v0] Error creating order:", orderError) return NextResponse.json({ error: "Failed to create order" }, { status: 500 }) } // Create order items with product names const orderItems = items.map((item: any) => ({ order_id: order.id, product_id: item.product_id, product_name: item.product_name, product_size: item.size || null, quantity: item.quantity, unit_price: item.unit_price, total_price: item.unit_price * item.quantity, })) const { error: itemsError } = await supabase.from("order_items").insert(orderItems) if (itemsError) { console.error("[v0] Error creating order items:", itemsError) await supabase.from("orders").delete().eq("id", order.id) return NextResponse.json({ error: "Failed to create order items" }, { status: 500 }) } return NextResponse.json({ success: true, order: { id: order.id, order_number: orderNumber, total, }, }) } catch (error) { console.error("[v0] Orders API error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const phone = searchParams.get("phone") if (!phone) { return NextResponse.json({ error: "Phone number required" }, { status: 400 }) } const supabase = createClient(supabaseUrl, supabaseKey) const { data: orders, error } = await supabase .from("orders") .select( ` *, order_items ( *, products (*) ) `, ) .eq("customer_phone", phone) .order("created_at", { ascending: false }) if (error) { console.error("[v0] Error fetching orders:", error) return NextResponse.json({ error: "Failed to fetch orders" }, { status: 500 }) } return NextResponse.json(orders) } catch (error) { console.error("[v0] Orders GET API error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/parceiro/login/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" import { cookies } from "next/headers" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export async function POST(request: NextRequest) { try { const body = await request.json() const { codigo } = body if (!codigo) { return NextResponse.json({ error: "Código é obrigatório" }, { status: 400 }) } const cleanCodigo = codigo.trim().toUpperCase() console.log("[v0] Attempting partner login with code:", cleanCodigo) // Create Supabase client const supabase = createClient(supabaseUrl, supabaseServiceKey) // Check if code exists and is active const { data: partner, error } = await supabase .from("codigo_parceiro") .select("id, codigo, nome_parceiro") .eq("codigo", cleanCodigo) .eq("ativo", true) .maybeSingle() if (error) { console.error("[v0] Database error:", error) return NextResponse.json({ error: "Erro ao validar código" }, { status: 500 }) } if (!partner) { console.log("[v0] Code not found or inactive:", cleanCodigo) return NextResponse.json({ error: "Código inválido ou inativo" }, { status: 401 }) } console.log("[v0] Partner found:", partner.nome_parceiro) // Update last access await supabase .from("codigo_parceiro") .update({ last_access: new Date().toISOString() }) .eq("id", partner.id) // Create session token const sessionToken = Buffer.from( JSON.stringify({ partnerId: partner.id, codigo: cleanCodigo, nome: partner.nome_parceiro, exp: Date.now() + 24 * 60 * 60 * 1000, // 24 hours }) ).toString("base64") // Set cookie const cookieStore = await cookies() cookieStore.set("partner_session", sessionToken, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "strict", maxAge: 24 * 60 * 60, // 24 hours }) return NextResponse.json({ success: true, partner: { id: partner.id, nome: partner.nome_parceiro, codigo: cleanCodigo, }, }) } catch (error) { console.error("[v0] Login error:", error) return NextResponse.json({ error: "Erro ao fazer login" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/parceiro/logout/route.ts" import { NextResponse } from "next/server" import { cookies } from "next/headers" export async function POST() { const cookieStore = await cookies() cookieStore.delete("partner_session") return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/parceiro/stats/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" import { cookies } from "next/headers" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export async function GET(request: NextRequest) { try { // Check session const cookieStore = await cookies() const sessionCookie = cookieStore.get("partner_session") if (!sessionCookie) { return NextResponse.json({ error: "Não autenticado" }, { status: 401 }) } try { const session = JSON.parse(Buffer.from(sessionCookie.value, "base64").toString()) if (session.exp < Date.now()) { return NextResponse.json({ error: "Sessão expirada" }, { status: 401 }) } } catch { return NextResponse.json({ error: "Sessão inválida" }, { status: 401 }) } // Create Supabase client const supabase = createClient(supabaseUrl, supabaseServiceKey) const EVENT_NAME = "Somma Club" const EVENT_DATE = "07/03/2026" // Get all checkins to calculate stats const { data: allCheckins, error: checkinsError } = await supabase .from("checkins") .select("*") .eq("nome_do_evento", EVENT_NAME) if (checkinsError) { console.error("[v0] Error fetching checkins:", checkinsError) return NextResponse.json({ error: "Erro ao buscar dados" }, { status: 500 }) } const totalCheckins = allCheckins?.length || 0 const totalValidated = allCheckins?.filter(c => c.validated === true).length || 0 const totalPending = totalCheckins - totalValidated // Build sexo breakdown const sexoBreakdown: { [key: string]: number } = {} allCheckins?.forEach((row) => { const s = row.sexo || "Não informado" sexoBreakdown[s] = (sexoBreakdown[s] || 0) + 1 }) // Build pelotão breakdown const pelotaoBreakdown: { [key: string]: number } = {} allCheckins?.forEach((row) => { const p = row.pelotao || "Não informado" pelotaoBreakdown[p] = (pelotaoBreakdown[p] || 0) + 1 }) return NextResponse.json({ success: true, stats: { totalCheckins: totalCheckins || 0, totalValidated: totalValidated || 0, totalPending, eventName: `Check-in ${EVENT_NAME}`, eventDate: EVENT_DATE, sexo: sexoBreakdown, pelotao: pelotaoBreakdown, }, }) } catch (error) { console.error("[v0] Stats error:", error) return NextResponse.json({ error: "Erro ao buscar estatísticas" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/products/route.ts" import { NextResponse } from "next/server" import { getAllProducts } from "@/lib/shopify" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY! // Check if Shopify is properly configured const isShopifyConfigured = () => { const storeUrl = process.env.SHOPIFY_STORE_URL const token = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN return storeUrl && token && storeUrl.includes('.myshopify.com') } export async function GET() { try { // Try Shopify first if properly configured if (isShopifyConfigured()) { console.log("[v0] Using Shopify as product source") try { const shopifyProducts = await getAllProducts() // Transform Shopify products to match our interface const products = shopifyProducts.map((product: any) => ({ id: product.id, name: product.title, slug: product.handle, description: product.description, price: parseFloat(product.priceRange.minVariantPrice.amount), image_url: product.images.edges[0]?.node.url || null, image_url_2: product.images.edges[1]?.node.url || null, image_url_3: product.images.edges[2]?.node.url || null, image_url_4: product.images.edges[3]?.node.url || null, category: product.productType ? { name: product.productType, slug: product.productType.toLowerCase().replace(/\s+/g, '-') } : null, sizes: product.variants.edges.map((variant: any) => ({ id: variant.node.id, size: variant.node.title, price_adjustment: parseFloat(variant.node.price.amount) - parseFloat(product.priceRange.minVariantPrice.amount), stock: variant.node.quantityAvailable || 0 })), is_active: product.availableForSale, stock: product.totalInventory || 0 })) return NextResponse.json({ products }) } catch (shopifyError) { console.error("[v0] Shopify fetch failed, falling back to Supabase:", shopifyError) } } else { console.log("[v0] Shopify not configured (SHOPIFY_STORE_URL must be in format: your-store.myshopify.com)") } // Fallback to Supabase console.log("[v0] Using Supabase as product source") const supabase = createClient(supabaseUrl, supabaseKey) const { data: products, error } = await supabase .from("products") .select(` *, category:categories(name, slug), sizes:product_sizes(*) `) .eq("is_active", true) .order("display_order", { ascending: true }) if (error) { console.error("[v0] Error fetching products from Supabase:", error) return NextResponse.json({ error: "Failed to fetch products" }, { status: 500 }) } return NextResponse.json({ products: products || [] }) } catch (error) { console.error("[v0] Products API error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/shopify/checkout/route.ts" import { NextResponse } from "next/server" import { createCheckout, updateCheckout } from "@/lib/shopify" export async function POST(request: Request) { try { const body = await request.json() const { id, quantity, lineItems } = body let checkout if (lineItems) { // Update existing checkout checkout = await updateCheckout(id, lineItems) } else { // Create new checkout checkout = await createCheckout(id, quantity) } return NextResponse.json({ checkout }) } catch (error) { console.error("[v0] Error creating/updating Shopify checkout:", error) return NextResponse.json( { error: "Failed to process checkout" }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/shopify/product/[handle]/route.ts" import { NextResponse } from "next/server" import { getProduct } from "@/lib/shopify" export async function GET( request: Request, { params }: { params: { handle: string } } ) { try { const product = await getProduct(params.handle) return NextResponse.json({ product }) } catch (error) { console.error("[v0] Error fetching Shopify product:", error) return NextResponse.json( { error: "Failed to fetch product" }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/shopify/products/route.ts" import { NextResponse } from "next/server" import { getAllProducts } from "@/lib/shopify" export async function GET() { try { const products = await getAllProducts() return NextResponse.json({ products }) } catch (error) { console.error("[v0] Error fetching Shopify products:", error) return NextResponse.json( { error: "Failed to fetch products" }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/validate-checkin/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" import { cookies } from "next/headers" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! // Validate operator session async function validateOperatorSession(request: NextRequest) { try { const cookieStore = await cookies() const sessionCookie = cookieStore.get("operator_session") if (!sessionCookie) { return null } const session = JSON.parse(Buffer.from(sessionCookie.value, "base64").toString()) if (session.exp < Date.now()) { return null } return session } catch (error) { console.error("[v0] Session validation error:", error) return null } } export async function POST(request: NextRequest) { try { // Validate operator session const session = await validateOperatorSession(request) if (!session) { return NextResponse.json({ error: "Sessão inválida ou expirada" }, { status: 401 }) } const body = await request.json() const { cpf } = body if (!cpf) { return NextResponse.json({ error: "CPF é obrigatório" }, { status: 400 }) } // Create Supabase client const supabase = createClient(supabaseUrl, supabaseServiceKey) // Formata CPF para buscar na tabela checkins const cleanCpf = cpf.replace(/\D/g, "") const formattedCpf = cleanCpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4") // Busca o check-in do CPF const { data, error } = await supabase .from("checkins") .select("*") .or(`cpf.eq.${formattedCpf},cpf.eq.${cleanCpf}`) .maybeSingle() if (error) { console.error("[v0] Database error:", error) return NextResponse.json({ success: false, message: "Erro ao buscar check-in." }, { status: 500 }) } if (!data) { return NextResponse.json( { success: false, message: "CPF não encontrado.", }, { status: 404 } ) } // Marca como validado const { error: updateError } = await supabase .from("checkins") .update({ validated: true }) .eq("id", data.id) if (updateError) { console.error("[v0] Update error:", updateError) return NextResponse.json({ error: "Erro ao validar check-in" }, { status: 500 }) } return NextResponse.json({ success: true, message: "Check-in validado. Pulseira liberada.", name: data.nome, }) } catch (error) { console.error("[v0] Validation error:", error) return NextResponse.json({ error: "Erro ao validar check-in" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/validate/route.ts" import { NextRequest, NextResponse } from "next/server" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! export async function POST(request: NextRequest) { try { const body = await request.json() const { qrCode } = body if (!qrCode) { return NextResponse.json({ error: "QR Code não fornecido" }, { status: 400 }) } const supabase = createClient(supabaseUrl, supabaseServiceKey) // Find check-in by QR code const { data: checkIn, error: fetchError } = await supabase .from("checkins") .select("*") .eq("qr_code", qrCode) .single() if (fetchError || !checkIn) { return NextResponse.json({ error: "QR Code inválido" }, { status: 404 }) } if (checkIn.validated) { return NextResponse.json({ success: true, alreadyValidated: true, checkIn, }) } // Mark as validated const { data: updatedCheckIn, error: updateError } = await supabase .from("checkins") .update({ validated: true, validated_at: new Date().toISOString(), }) .eq("qr_code", qrCode) .select() .single() if (updateError) { console.error("[v0] Validation error:", updateError) return NextResponse.json({ error: "Erro ao validar check-in" }, { status: 500 }) } return NextResponse.json({ success: true, alreadyValidated: false, checkIn: updatedCheckIn, }) } catch (error) { console.error("[v0] Validate error:", error) return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 }) } } export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const qrCode = searchParams.get("qr") if (!qrCode) { return NextResponse.json({ error: "QR Code não fornecido" }, { status: 400 }) } const supabase = createClient(supabaseUrl, supabaseServiceKey) const { data: checkIn, error } = await supabase .from("checkins") .select("*") .eq("qr_code", qrCode) .single() if (error || !checkIn) { return NextResponse.json({ error: "QR Code inválido" }, { status: 404 }) } return NextResponse.json({ success: true, checkIn, }) } catch (error) { console.error("[v0] Get validation error:", error) return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/carnaval/page.tsx" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { MapPin, Clock, Calendar, ArrowRight, ChevronDown, CalendarPlus } from "lucide-react" import { cn } from "@/lib/utils" const schedule = [ { time: "07:00", activity: "Abertura + Aquecimento", description: "Concentre-se e prepare o corpo para o corre." }, { time: "07:15", activity: "Largada da Corrida", description: "Percurso no Parque da Cidade com a galera." }, { time: "08:00", activity: "Cafe da Manha - Big Box", description: "Mega cafe da manha para recarregar as energias." }, { time: "08:30", activity: "Fit Dance com Academia Evolve e DJ Judson", description: "A Academia Evolve comanda a pista com muito FitDance ao som de DJ Judson." }, { time: "09:00", activity: "Banda Misturadinho", description: "Pagode ao vivo para fechar o treino em clima de carnaval." }, { time: "09:30", activity: "Atividades + Surpresas", description: "Experiencias que so quem estiver la vai viver." }, { time: "12:00", activity: "Encerramento", description: "Ate o proximo Somma!" }, ] const partners = [ { name: "Red Bull", description: "Estrutura completa e energetico liberado do inicio ao fim." }, { name: "Academia Evolve", description: "FitDance para aquecer geral." }, { name: "Big Box", description: "Mega cafe da manha para recarregar as energias." }, { name: "Liquidz", description: "Marca presenca completando a experiencia." }, ] export default function CarnavalPage() { const router = useRouter() const [expandedItem, setExpandedItem] = useState(null) const handleAddToCalendar = () => { const title = encodeURIComponent("Carnaval Somma Club") const details = encodeURIComponent( "No dia 14/02, das 07h as 12h, o Somma vira ponto de encontro para quem gosta de correr, treinar e curtir o clima de carnaval do jeito certo.\n\nProgramacao:\n07:00 - Abertura + Aquecimento\n07:15 - Largada da Corrida\n08:00 - Cafe da Manha (Big Box)\n08:30 - FitDance com DJ Judson\n09:00 - Banda Misturadinho\n09:30 - Atividades + Surpresas\n12:00 - Encerramento" ) const location = encodeURIComponent("Estacionamento 8, Parque da Cidade - Brasília") const startDate = "20260214T100000Z" const endDate = "20260214T150000Z" const googleCalendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${startDate}/${endDate}&details=${details}&location=${location}` window.open(googleCalendarUrl, "_blank") } const handleCheckin = () => { const params = new URLSearchParams({ event: "Carnaval Somma Club", date: "14/02/2026", time: "07:00", }) router.push(`/check-in?${params.toString()}`) } return (

{/* Hero */}

{/* Logo do evento */}

14/02/2026 07h - 12h

O Somma vira ponto de encontro para quem gosta de correr, treinar e curtir o clima de carnaval do jeito certo. Energia alta, treino, musica e experiencias que so o Somma entrega.

Estacionamento 8, Parque da Cidade - Brasília

{/* Scroll indicator */}

{/* Descricao */}

Sobre o Evento

Nao e so um evento, e uma experiencia.

No dia 14/02, das 07h as 12h, o Somma vira ponto de encontro para quem gosta de correr, treinar e curtir o clima de carnaval do jeito certo. Energia alta, treino, musica e experiencias que so o Somma entrega.

Teremos Red Bull com estrutura completa e energetico liberado para manter o ritmo do inicio ao fim. A Academia Evolve chega com muito FitDance para aquecer geral. O Big Box assina um mega cafe da manha para recarregar as energias. A Liquidiz marca presenca completando a experiencia.

As 08h30, DJ Judson comanda o FitDance ate 09h. Na sequencia, Banda de Pagode Misturadinho para fechar o treino em clima de carnaval. E ainda tem mais. Surpresas que so quem estiver la vai viver.

Marque na agenda. O Carnaval do Somma nao e so um evento, e uma experiencia.

{/* Programacao */}

Programacao

O que vai rolar

{schedule.map((item, index) => ( ))}

{/* Parceiros */}

Parceiros

Quem faz acontecer

{partners.map((partner, index) => (

{partner.name}

{partner.description}

))}

{/* CTA Final */}

Bora somar?

As inscricoes para o Carnaval Somma Club foram encerradas. Nos vemos no dia 14/02!

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/check-in/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/check-in/page.tsx" "use client" import { useState, useEffect, Suspense } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { CheckCircle2, XCircle, ArrowRight, Loader2, Lock } from "lucide-react" import { cn } from "@/lib/utils" function CheckInContent() { const router = useRouter() const searchParams = useSearchParams() const eventTitle = searchParams.get("event") || "Evento" const eventDate = searchParams.get("date") || "" const eventTime = searchParams.get("time") || "" const deadlineParam = searchParams.get("deadline") || "" // Verifica se o deadline foi atingido const isDeadlinePassed = () => { if (!deadlineParam) return false // Parse deadline format: "06/03/2026 20:00" const [datePart, timePart] = deadlineParam.split(" ") const [day, month, year] = datePart.split("/") const [hours, minutes] = timePart?.split(":") || ["00", "00"] const deadlineDate = new Date( parseInt(year), parseInt(month) - 1, parseInt(day), parseInt(hours), parseInt(minutes) ) const now = new Date() return now > deadlineDate } // Check-in está bloqueado se passed deadline const [isCheckInOpen] = useState(!isDeadlinePassed()) const [step, setStep] = useState(1) const [formData, setFormData] = useState({ nomeCompleto: "", telefone: "", cpf: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [phoneStatus, setPhoneStatus] = useState<"idle" | "valid" | "invalid">("idle") const [cpfStatus, setCpfStatus] = useState<"idle" | "valid" | "invalid">("idle") const [message, setMessage] = useState<{ type: "success" | "error" | "info" title: string description: string show: boolean }>({ type: "info", title: "", description: "", show: false }) const validateCPF = (cpf: string): boolean => { const numbers = cpf.replace(/\D/g, "") // Aceita CPF com 11 dígitos (validação simplificada) return numbers.length === 11 } const validatePhone = (phone: string): boolean => { const numbers = phone.replace(/\D/g, "") return numbers.length === 11 } const formatCPF = (value: string) => { const numbers = value.replace(/\D/g, "") return numbers .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d{1,2})/, "$1-$2") .replace(/(-\d{2})\d+?$/, "$1") } const formatPhone = (value: string) => { const numbers = value.replace(/\D/g, "") return numbers .replace(/(\d{2})(\d)/, "($1) $2") .replace(/(\d{5})(\d)/, "$1-$2") .replace(/(-\d{4})\d+?$/, "$1") } const handleNext = () => { if (step === 1 && formData.nomeCompleto) { setStep(2) } else if (step === 2 && phoneStatus === "valid") { setStep(3) } } const handleSubmit = async () => { if (isSubmitting) return // Prevent double submission setIsSubmitting(true) setStep(4) // Move to step 4 immediately to prevent any regression console.log("[v0] Submitting check-in with CPF:", formData.cpf) try { const response = await fetch("/api/checkin", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: formData.nomeCompleto, phone: formData.telefone, cpf: formData.cpf, event: eventTitle, deadline: deadlineParam, }), }) const data = await response.json() if (data.success) { setIsSubmitting(false) setStep(4) } else if (data.error === "Check-in encerrado") { setIsSubmitting(false) setStep(4) setMessage({ type: "error", title: "Check-in Encerrado", description: data.message || "O período de check-in para este evento foi encerrado.", show: true, }) } else if (data.error === "Tabela não configurada") { setIsSubmitting(false) setStep(3) // Go back to CPF if error setMessage({ type: "error", title: "Erro de Configuração", description: "A tabela do banco de dados ainda não foi criada.\n\n" + "Por favor, execute o SQL do arquivo /scripts/create-checkins-table.sql no Supabase SQL Editor.", show: true, }) } else { setIsSubmitting(false) setStep(3) // Go back to CPF if error setMessage({ type: "error", title: "Erro ao realizar check-in", description: data.message || "Por favor, tente novamente em instantes.", show: true, }) setTimeout(() => { setMessage((prev) => ({ ...prev, show: false })) }, 4000) } } catch (error) { setIsSubmitting(false) setStep(3) // Go back to CPF if error alert("Erro ao fazer check-in. Verifique sua conexão e tente novamente.") } } useEffect(() => { if (step === 2 && formData.telefone) { const numbers = formData.telefone.replace(/\D/g, "") if (numbers.length === 11) { setPhoneStatus(validatePhone(formData.telefone) ? "valid" : "invalid") } else { setPhoneStatus("idle") } } }, [formData.telefone, step]) useEffect(() => { if (step === 3 && formData.cpf) { const numbers = formData.cpf.replace(/\D/g, "") if (numbers.length === 11) { setCpfStatus(validateCPF(formData.cpf) ? "valid" : "invalid") } else { setCpfStatus("idle") } } }, [formData.cpf, step]) // Check-in permanently open if (isSubmitting) { return (

Verificando com nosso sistema...

Aguarde enquanto processamos suas informações

{eventTitle}

{eventDate} às {eventTime}

) } if (step === 4) { return (

Check-in confirmado!

Seus dados foram registrados com sucesso.

{eventTitle}

{eventDate} às {eventTime}

Acesse o evento com seu CPF:

{formData.cpf}

Seus dados foram sincronizados com a planilha de check-ins.

) } // Tela de check-in encerrado if (!isCheckInOpen) { return (

Check-in Encerrado

O período de check-in para este evento foi encerrado.

{eventTitle && eventTitle !== "Evento" && (

{eventTitle}

{eventDate && (

{eventDate}{eventTime && ` às ${eventTime}`}

)}

) } return (

{/* Message Modal */} {message.show && (

{message.type === "success" ? (

) : (

)}

{message.title}

{message.description}

)} {/* Progress dots */}

{[1, 2, 3].map((s) => (

))}

{/* Content */}

{/* Step 1 - Nome */} {step === 1 && (

Passo 1 de 3

Como você se chama?

Vamos começar com o básico

setFormData({ ...formData, nomeCompleto: e.target.value })} placeholder="Digite seu nome completo" autoComplete="name" autoFocus className="h-16 text-lg bg-card border-2 border-border focus:border-accent rounded-xl px-6" />

)} {/* Step 2 - Telefone */} {step === 2 && (

Passo 2 de 3

Qual seu telefone?

Para mantermos contato com você

setFormData({ ...formData, telefone: formatPhone(e.target.value) })} placeholder="(00) 00000-0000" autoComplete="tel" inputMode="numeric" maxLength={15} autoFocus className={cn( "h-16 text-lg bg-card border-2 rounded-xl px-6 pr-14", phoneStatus === "valid" && "border-green-500", phoneStatus === "invalid" && "border-red-500", phoneStatus === "idle" && "border-border focus:border-accent" )} /> {phoneStatus === "valid" && ( )} {phoneStatus === "invalid" && ( )}

{phoneStatus === "valid" && (

Telefone válido

)}

)} {/* Step 3 - CPF */} {step === 3 && (

Passo 3 de 3 · Final

E seu CPF?

Para validar sua identidade

setFormData({ ...formData, cpf: formatCPF(e.target.value) })} placeholder="000.000.000-00" inputMode="numeric" maxLength={14} autoFocus className={cn( "h-16 text-lg bg-card border-2 rounded-xl px-6 pr-14", cpfStatus === "valid" && "border-green-500", cpfStatus === "invalid" && "border-red-500", cpfStatus === "idle" && "border-border focus:border-accent" )} /> {cpfStatus === "valid" && ( )} {cpfStatus === "invalid" && ( )}

{cpfStatus === "valid" && (

CPF válido

)} {cpfStatus === "invalid" && (

CPF inválido. Verifique os dígitos

)}

{/* Info do evento - footer */}

Check-in para {eventTitle} · {eventDate} às {eventTime}

) } function Loading() { return (

Carregando...

) } export default function CheckInPage() { return ( }> ) } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Custom editorial design tokens - monochrome with orange accent */ :root { --background: oklch(0.08 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.85 0 0); --muted: oklch(0.25 0 0); --muted-foreground: oklch(0.55 0 0); --accent: oklch(0.7 0.2 45); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.25 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.7 0.2 45); --radius: 0rem; --sidebar: oklch(0.1 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.7 0.2 45); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.7 0.2 45); } @theme inline { /* Updated font-sans and font-mono to use IBM Plex */ --font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", sans-serif; --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace; --font-display: "Bebas Neue", "Bebas Neue Fallback", sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } html { overflow-x: hidden; max-width: 100vw; /* Apply scrollbar styles to html element */ scrollbar-width: thin; scrollbar-color: hsl(0, 0%, 24%) hsl(0, 0%, 8%); /* Better mobile scrolling */ -webkit-overflow-scrolling: touch; } body { @apply bg-background text-foreground; overflow-x: hidden; max-width: 100vw; scrollbar-width: thin; scrollbar-color: hsl(0, 0%, 24%) hsl(0, 0%, 8%); /* Disable text size adjustment on mobile */ -webkit-text-size-adjust: 100%; } /* Webkit scrollbar styling for html and body */ html::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: hsl(0, 0%, 8%); } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: hsl(0, 0%, 24%); border-radius: 0px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 32%); } } /* Hide scrollbar utility for horizontal scroll sections */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Custom noise texture overlay */ .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; /* Reduce opacity on mobile for better performance */ opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } @media (min-width: 768px) { .noise-overlay { opacity: 0.03; } } /* Grid background pattern */ .grid-bg { background-image: linear-gradient(to right, oklch(0.2 0 0) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.2 0 0) 1px, transparent 1px); /* Responsive grid size */ background-size: 40px 40px; } @media (min-width: 640px) { .grid-bg { background-size: 50px 50px; } } @media (min-width: 768px) { .grid-bg { background-size: 60px 60px; } } /* Custom selection color */ ::selection { background: oklch(0.7 0.2 45); color: oklch(0.08 0 0); } /* Smooth scroll behavior */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Touch action optimization for mobile */ button, a { touch-action: manipulation; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata, Viewport } from "next" import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google" import Script from "next/script" import { Analytics } from "@vercel/analytics/next" import { SmoothScroll } from "@/components/smooth-scroll" import "./globals.css" const ibmPlexSans = IBM_Plex_Sans({ weight: ["400", "500", "600", "700"], subsets: ["latin"], variable: "--font-ibm-plex-sans", display: "swap", }) const ibmPlexMono = IBM_Plex_Mono({ weight: ["400", "500"], subsets: ["latin"], variable: "--font-ibm-plex-mono", display: "swap", }) export const metadata: Metadata = { title: "Eventos e Parceiros Somma Club", description: "Bem-vindo ao nosso hub de eventos, ativações e benefícios para quem somma. O SOMMA é mais que um clube de corrida, é uma comunidade que acredita no poder da união e da constância.", generator: "v0.app", applicationName: "Eventos e Parceiros Somma Club", keywords: ["corrida", "running", "comunidade", "eventos", "somma", "brasília", "fitness"], authors: [{ name: "Somma Club" }], creator: "Somma Club", publisher: "Somma Club", formatDetection: { email: false, address: false, telephone: false, }, metadataBase: new URL("https://sommaclub.com.br"), openGraph: { title: "Eventos e Parceiros Somma Club", description: "Bem-vindo ao nosso hub de eventos, ativações e benefícios para quem somma.", url: "https://sommaclub.com.br", siteName: "Eventos e Parceiros Somma Club", locale: "pt_BR", type: "website", }, twitter: { card: "summary_large_image", title: "Eventos e Parceiros Somma Club", description: "Bem-vindo ao nosso hub de eventos, ativações e benefícios para quem somma.", }, icons: { icon: "https://cdn.shopify.com/s/files/1/0788/1932/8253/files/Favicon_Somma_club.svg?v=1769679872", apple: "https://cdn.shopify.com/s/files/1/0788/1932/8253/files/Favicon_Somma_club.svg?v=1769679872", }, manifest: "/manifest.json", } export const viewport: Viewport = { width: "device-width", initialScale: 1, maximumScale: 5, userScalable: true, themeColor: [ { media: "(prefers-color-scheme: light)", color: "#ffffff" }, { media: "(prefers-color-scheme: dark)", color: "#141414" }, ], } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {/* Google Tag Manager */} {/* End Google Tag Manager */} {/* Google Tag Manager (noscript) */}

{/* End Google Tag Manager (noscript) */}

{children} ) } [V0_FILE]typescriptreact:file="app/operador/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Shield, Loader2, Home } from "lucide-react" export default function OperadorLoginPage() { const router = useRouter() const [cpf, setCpf] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") // Check if already logged in useEffect(() => { const checkSession = async () => { try { const response = await fetch("/api/operator/session") const data = await response.json() if (data.authenticated) { router.push("/operador/validar") } } catch (error) { console.log("[v0] Not authenticated") } } checkSession() }, [router]) const formatCpf = (value: string) => { const numbers = value.replace(/\D/g, "") if (numbers.length <= 11) { return numbers .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d{1,2})$/, "$1-$2") } return value } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError("") const cleanCpf = cpf.replace(/\D/g, "") if (cleanCpf.length !== 11) { setError("CPF inválido") return } setIsLoading(true) try { const response = await fetch("/api/operator/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cpf: cleanCpf }), }) const data = await response.json() if (data.success) { router.push("/operador/validar") } else { setError(data.error || "CPF não autorizado") } } catch (error) { console.error("[v0] Login error:", error) setError("Erro ao fazer login. Tente novamente.") } finally { setIsLoading(false) } } return (

{/* Home Button */}

{/* Logo */}

Área do Operador

Acesso restrito para equipe do evento

Apenas operadores autorizados podem acessar este sistema

) } [V0_FILE]typescriptreact:file="app/operador/validar/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { KeyboardIcon, Loader2, LogOut, CheckCircle2, XCircle, Search } from "lucide-react" import { cn } from "@/lib/utils" type ValidationMode = "menu" | "cpf" | "consultar" type ValidationResult = { type: "success" | "error" | "duplicate" message: string name?: string } type CheckinData = { id: string nome: string telefone: string cpf: string pelotao?: string data_do_evento?: string } export default function ValidarPage() { const router = useRouter() const [mode, setMode] = useState("menu") const [operator, setOperator] = useState<{ name: string; cpf: string } | null>(null) const [cpf, setCpf] = useState("") const [isLoading, setIsLoading] = useState(false) const [result, setResult] = useState(null) const [validatedCpf, setValidatedCpf] = useState("") const [checkinData, setCheckinData] = useState(null) useEffect(() => { const checkSession = async () => { try { const response = await fetch("/api/operator/session") const data = await response.json() if (!data.authenticated) { router.push("/operador") } else { setOperator(data.operator) } } catch (error) { router.push("/operador") } } checkSession() }, [router]) const handleLogout = async () => { await fetch("/api/operator/logout", { method: "POST" }) router.push("/operador") } const formatCpf = (value: string) => { const numbers = value.replace(/\D/g, "") if (numbers.length <= 11) { return numbers .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d{1,2})$/, "$1-$2") } return value } const handleCpfValidation = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setResult(null) const cleanCpf = cpf.replace(/\D/g, "") try { const response = await fetch("/api/validate-checkin", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cpf: cleanCpf }), }) const data = await response.json() if (data.success) { setResult({ type: "success", message: data.message, name: data.name, }) setValidatedCpf(cleanCpf) setCpf("") setTimeout(() => { setResult(null) setValidatedCpf("") setMode("menu") }, 3000) } else if (data.duplicate) { setResult({ type: "duplicate", message: data.message, }) } else { setResult({ type: "error", message: data.message, }) } } catch (error) { console.error("[v0] Validation error:", error) setResult({ type: "error", message: "Erro ao validar. Tente novamente.", }) } finally { setIsLoading(false) } } const handleConsultar = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setCheckinData(null) setResult(null) const cleanCpf = cpf.replace(/\D/g, "") try { const response = await fetch("/api/consultar-checkin", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cpf: cleanCpf }), }) const data = await response.json() if (data.success && data.checkin) { setCheckinData(data.checkin) } else { setResult({ type: "error", message: data.error || "CPF não encontrado.", }) } } catch (error) { console.error("[v0] Consulta error:", error) setResult({ type: "error", message: "Erro ao consultar. Tente novamente.", }) } finally { setIsLoading(false) } } if (!operator) { return (

) } return (

{/* Header */}

Operador Somma Club

Operador: {operator.name}

{/* Main Content */}

{mode === "menu" && (

Validação de Check-in

Escolha o método de validação

)} {mode === "cpf" && (

Validar por CPF

Digite o CPF do participante

{result && (

{result.type === "success" && } {result.type === "error" && }

{result.name && (

{result.name}

{validatedCpf && (

CPF: {validatedCpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4")}

)}

{result.message}

)}

)} {mode === "consultar" && (

Consultar CPF

Digite o CPF para visualizar os dados

{checkinData && (

Dados do Check-in

Nome: {checkinData.nome}

CPF: {checkinData.cpf}

Telefone: {checkinData.telefone}

{checkinData.pelotao && (

Pelotão: {checkinData.pelotao}

)} {checkinData.data_do_evento && (

Data do Evento: {checkinData.data_do_evento}

)}

)} {result && (

{result.message}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { HeroSection } from "@/components/hero-section" import { WorkSection } from "@/components/work-section" import { PrinciplesSection } from "@/components/principles-section" import { ColophonSection } from "@/components/colophon-section" import { SideNav } from "@/components/side-nav" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/parceiro/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2, Users, CheckCircle2, Clock, TrendingUp, LogOut } from "lucide-react" import { cn } from "@/lib/utils" export default function ParceiroPage() { const router = useRouter() const [isLoggedIn, setIsLoggedIn] = useState(false) const [isLoading, setIsLoading] = useState(true) const [isSubmitting, setIsSubmitting] = useState(false) const [codigo, setCodigo] = useState("") const [error, setError] = useState("") const [stats, setStats] = useState<{ totalCheckins: number totalValidated: number totalPending: number eventName: string eventDate: string sexo: { [key: string]: number } pelotao: { [key: string]: number } } | null>(null) const [partnerName, setPartnerName] = useState("") useEffect(() => { checkSession() }, []) const checkSession = async () => { try { const response = await fetch("/api/parceiro/stats") if (response.ok) { const data = await response.json() setStats(data.stats) setIsLoggedIn(true) } } catch (error) { console.error("[v0] Session check error:", error) } finally { setIsLoading(false) } } const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setError("") setIsSubmitting(true) try { const response = await fetch("/api/parceiro/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ codigo }), }) const data = await response.json() if (data.success) { setPartnerName(data.partner.nome) setIsLoggedIn(true) // Fetch stats await checkSession() } else { setError(data.error || "Código inválido") } } catch (error) { console.error("[v0] Login error:", error) setError("Erro ao fazer login. Tente novamente.") } finally { setIsSubmitting(false) } } const handleLogout = async () => { try { await fetch("/api/parceiro/logout", { method: "POST" }) setIsLoggedIn(false) setStats(null) setCodigo("") setPartnerName("") } catch (error) { console.error("[v0] Logout error:", error) } } if (isLoading) { return (

) } if (!isLoggedIn) { return (

{/* Logo */}

Parceiro Somma Club

Acesse com seu código de liberação

) } return (

{/* Header */}

Dashboard Parceiro

{partnerName || "Parceiro Somma Club"}

{/* Event Info */} {stats && (

{stats.eventName}

{stats.eventDate}

)} {/* Stats Grid */} {stats && (

{/* Total Check-ins */}

Total Confirmados

{stats.totalCheckins}

{/* Validated */}

Validados

{stats.totalValidated}

{/* Pending */}

Pendentes

{stats.totalPending}

)} {/* Percentage */} {stats && stats.totalCheckins > 0 && (

Taxa de Validação

{Math.round((stats.totalValidated / stats.totalCheckins) * 100)}%

)} {/* Sexo Breakdown */} {stats && Object.keys(stats.sexo).length > 0 && (

Distribuição por Sexo

{Object.entries(stats.sexo).map(([sexo, count]) => (

{sexo || "Não informado"}

{count}

))}

)} {/* Pelotão Breakdown */} {stats && Object.keys(stats.pelotao).length > 0 && (

Distribuição por Pelotão

{Object.entries(stats.pelotao).map(([pelotao, count]) => (

{pelotao || "Não informado"}

{count}

))}

)}

) } [V0_FILE]typescriptreact:file="app/pedidos/[slug]/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ShoppingCart, ArrowLeft } from "lucide-react" import Link from "next/link" interface ProductSize { id: string size: string price_adjustment: number stock: number } interface Product { id: string name: string slug: string description: string price: number image_url: string | null image_url_2: string | null image_url_3: string | null image_url_4: string | null category: { name: string slug: string } | null sizes: ProductSize[] is_active: boolean stock: number } export default function ProductDetailPage({ params }: { params: { slug: string } }) { const router = useRouter() const [product, setProduct] = useState(null) const [loading, setLoading] = useState(true) const [selectedSize, setSelectedSize] = useState(null) const [selectedImageIndex, setSelectedImageIndex] = useState(0) useEffect(() => { fetchProduct() }, [params.slug]) const fetchProduct = async () => { try { const response = await fetch("/api/products") if (response.ok) { const data = await response.json() const foundProduct = data.products.find((p: Product) => p.slug === params.slug) if (foundProduct) { setProduct(foundProduct) if (foundProduct.sizes && foundProduct.sizes.length > 0) { setSelectedSize(foundProduct.sizes[0]) } } } } catch (error) { console.error("[v0] Error fetching product:", error) } finally { setLoading(false) } } const handleAddToCart = () => { if (!product) return const cartItem = { product, selectedSize, quantity: 1, } // Salvar no localStorage para persistir entre páginas const existingCart = localStorage.getItem("somma-cart") const cart = existingCart ? JSON.parse(existingCart) : [] cart.push(cartItem) localStorage.setItem("somma-cart", JSON.stringify(cart)) // Redirecionar para checkout router.push("/pedidos/checkout") } if (loading) { return (

) } if (!product) { return (

Produto não encontrado

) } const images = [ product.image_url, product.image_url_2, product.image_url_3, product.image_url_4, ].filter(Boolean) as string[] const finalPrice = product.price + (selectedSize?.price_adjustment || 0) return (

{/* Header */}

Voltar

Detalhes do Produto

{/* Images Section */}

{/* Main Image */}

{/* Thumbnail Gallery */} {images.length > 1 && (

{images.map((img, idx) => ( ))}

)}

{/* Product Info Section */}

{product.category && ( {product.category.name} )}

{product.name}

R$ {finalPrice.toFixed(2)}

{product.description}

{/* Size Selection */} {product.sizes && product.sizes.length > 0 && (

Selecione o tamanho

{product.sizes.map((size) => ( ))}

)} {/* Important Notice */}

⚠️ Informação Importante

O pedido é processado para retirada em até 30 dias após a confirmação do pagamento.

{/* Add to Cart Button */}

) } [V0_FILE]typescriptreact:file="app/pedidos/page.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Loader2, Package, X, ShoppingBag, Check } from "lucide-react" import Link from "next/link" declare global { interface Window { ShopifyBuy: any } } interface ProductSize { id: string size: string price_adjustment: number stock: number } interface Product { id: string name: string slug: string description: string price: number image_url: string | null image_url_2: string | null image_url_3: string | null image_url_4: string | null category: { name: string slug: string } | null sizes: ProductSize[] is_active: boolean stock: number } export default function PedidosPage() { const [products, setProducts] = useState([]) const [loading, setLoading] = useState(false) const [submitting, setSubmitting] = useState(false) const [showOrderModal, setShowOrderModal] = useState(false) const [selectedProduct, setSelectedProduct] = useState(null) const [selectedSize, setSelectedSize] = useState(null) const [quantity, setQuantity] = useState(1) const [formData, setFormData] = useState({ name: "", phone: "", email: "", }) const [copiedCoupon, setCopiedCoupon] = useState(null) const handleCopyCoupon = (coupon: string) => { navigator.clipboard.writeText(coupon) setCopiedCoupon(coupon) setTimeout(() => setCopiedCoupon(null), 2000) } useEffect(() => { const loadShopifyBuyButton = () => { const scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js' if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { initShopify() } else { loadScript() } } else { loadScript() } function loadScript() { const script = document.createElement('script') script.async = true script.src = scriptURL ;(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script) script.onload = initShopify } function initShopify() { const client = window.ShopifyBuy.buildClient({ domain: 'sfjsua-je.myshopify.com', storefrontAccessToken: 'be109ec7c08d0fe58b02c31dda8b16be', }) window.ShopifyBuy.UI.onReady(client).then((ui: any) => { ui.createComponent('collection', { id: '463145369853', node: document.getElementById('collection-component-1771936947875'), moneyFormat: 'R%24%20%7B%7Bamount_with_comma_separator%7D%7D', options: { product: { styles: { product: { '@media (min-width: 601px)': { 'max-width': 'calc(25% - 20px)', 'margin-left': '20px', 'margin-bottom': '50px', width: 'calc(25% - 20px)', }, img: { height: 'calc(100% - 15px)', position: 'absolute', left: '0', right: '0', top: '0', }, imgWrapper: { 'padding-top': 'calc(75% + 15px)', position: 'relative', height: '0', }, }, title: { 'font-family': 'Open Sans, sans-serif', 'font-weight': 'normal', 'font-size': '17px', color: '#fb4c00', }, button: { 'font-family': 'Open Sans, sans-serif', ':hover': { 'background-color': '#e24400', }, 'background-color': '#fb4c00', ':focus': { 'background-color': '#e24400', }, 'border-radius': '14px', }, price: { color: '#fb4c00', }, compareAt: { color: '#fb4c00', }, unitPrice: { color: '#fb4c00', }, }, buttonDestination: 'modal', contents: { options: false, }, text: { button: 'Ver mais', }, googleFonts: ['Open Sans'], }, productSet: { styles: { products: { '@media (min-width: 601px)': { 'margin-left': '-20px', }, }, }, }, modalProduct: { contents: { img: false, imgWithCarousel: true, button: false, buttonWithQuantity: true, }, styles: { product: { '@media (min-width: 601px)': { 'max-width': '100%', 'margin-left': '0px', 'margin-bottom': '0px', }, }, button: { 'font-family': 'Open Sans, sans-serif', ':hover': { 'background-color': '#e24400', }, 'background-color': '#fb4c00', ':focus': { 'background-color': '#e24400', }, 'border-radius': '14px', }, title: { 'font-family': 'Helvetica Neue, sans-serif', 'font-weight': 'bold', 'font-size': '26px', color: '#4c4c4c', }, price: { 'font-family': 'Helvetica Neue, sans-serif', 'font-weight': 'normal', 'font-size': '18px', color: '#4c4c4c', }, compareAt: { 'font-family': 'Helvetica Neue, sans-serif', 'font-weight': 'normal', 'font-size': '15.299999999999999px', color: '#4c4c4c', }, unitPrice: { 'font-family': 'Helvetica Neue, sans-serif', 'font-weight': 'normal', 'font-size': '15.299999999999999px', color: '#4c4c4c', }, }, googleFonts: ['Open Sans'], text: { button: 'Colocar no carrinho', }, }, option: {}, cart: { styles: { button: { 'font-family': 'Open Sans, sans-serif', ':hover': { 'background-color': '#e24400', }, 'background-color': '#fb4c00', ':focus': { 'background-color': '#e24400', }, 'border-radius': '14px', }, title: { color: '#000000', }, header: { color: '#000000', }, lineItems: { color: '#000000', }, subtotalText: { color: '#000000', }, subtotal: { color: '#000000', }, notice: { color: '#000000', }, currency: { color: '#000000', }, close: { color: '#000000', ':hover': { color: '#000000', }, }, empty: { color: '#000000', }, noteDescription: { color: '#000000', }, discountText: { color: '#000000', }, discountIcon: { fill: '#000000', }, discountAmount: { color: '#000000', }, }, text: { title: 'Carrinho Somma Club', total: 'Subtotal', empty: 'Seu carrinho está vazio.', notice: 'Os códigos de frete e desconto são adicionados na finalização da compra.', button: 'Fazer pedido', }, googleFonts: ['Open Sans'], }, toggle: { styles: { toggle: { 'font-family': 'Open Sans, sans-serif', 'background-color': '#fb4c00', ':hover': { 'background-color': '#e24400', }, ':focus': { 'background-color': '#e24400', }, }, }, googleFonts: ['Open Sans'], }, lineItem: { styles: { variantTitle: { color: '#000000', }, title: { color: '#000000', }, price: { color: '#000000', }, fullPrice: { color: '#000000', }, discount: { color: '#000000', }, discountIcon: { fill: '#000000', }, quantity: { color: '#000000', }, quantityIncrement: { color: '#000000', 'border-color': '#000000', }, quantityDecrement: { color: '#000000', 'border-color': '#000000', }, quantityInput: { color: '#000000', 'border-color': '#000000', }, }, }, }, }) }) } } loadShopifyBuyButton() fetchProducts() }, []) const fetchProducts = async () => { try { const response = await fetch("/api/products") if (response.ok) { const data = await response.json() setProducts(data.products || []) } } catch (error) { console.error("[v0] Error fetching products:", error) } finally { setLoading(false) } } const openOrderModal = (product: Product, size: ProductSize | null = null) => { setSelectedProduct(product) setSelectedSize(size) setQuantity(1) setShowOrderModal(true) } const getTotal = () => { if (!selectedProduct) return 0 const basePrice = selectedProduct.price const sizeAdjustment = selectedSize?.price_adjustment || 0 return (basePrice + sizeAdjustment) * quantity } const handleSubmitOrder = async (e: React.FormEvent) => { e.preventDefault() if (!selectedProduct) return setSubmitting(true) try { const basePrice = selectedProduct.price const sizeAdjustment = selectedSize?.price_adjustment || 0 const unitPrice = basePrice + sizeAdjustment const items = [{ product_id: selectedProduct.id, product_name: selectedProduct.name, size: selectedSize?.size || null, quantity: quantity, unit_price: unitPrice, }] const response = await fetch("/api/orders", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: formData.name, phone: formData.phone, email: formData.email || null, items, }), }) if (response.ok) { alert("Pedido confirmado! Entraremos em contato pelo telefone cadastrado.") setShowOrderModal(false) setSelectedProduct(null) setSelectedSize(null) setQuantity(1) setFormData({ name: "", phone: "", email: "" }) } } catch (error) { console.error("[v0] Error submitting order:", error) } finally { setSubmitting(false) } } if (loading) { return (

) } return ( <>

{/* Info Blocks */}

{/* Informação Importante */}

Informação Importante

Os pedidos realizados nesta plataforma serão entregues em aproximadamente 30 dias após a confirmação do pagamento. Obrigado pela compreensão

{/* Opções de Entrega */}

Opções de Entrega

Na finalização da compra, você poderá escolher entre retirada presencial ou opção de frete.

Retirada Presencial: Todos os sábados a partir das 07:00 no ponto de encontro do Somma, Estacionamento 10 do Parque da Cidade, Brasília/DF.

{/* Promoção */}

Ganhe até 20% de desconto

{/* PEDIDO10 */}

Com PEDIDO10, você garante 10% de desconto em qualquer compra.

{/* PEDIDO15 */}

Se escolher duas peças ou mais, aplique PEDIDO15 e receba 15% de desconto automaticamente.

{/* PEDIDO20 */}

Utilize PEDIDO20 e ganhe 20% de desconto ao comprar a partir de três peças.

{/* PEDIDO15 */}

Se escolher duas peças ou mais, aplique PEDIDO15 e receba 15% de desconto automaticamente.

{/* PEDIDO20 */}

Utilize PEDIDO20 e ganhe 20% de desconto ao comprar a partir de três peças.

Quanto maior o seu pedido, maior o seu benefício. Escolha seu cupom, finalize a compra e aproveite.

{showOrderModal && selectedProduct && (

{ if (e.target === e.currentTarget) { setShowOrderModal(false) setSelectedProduct(null) setSelectedSize(null) setQuantity(1) } }} >

Fazer Pedido

{selectedProduct.image_url && (

)}

{selectedProduct.name}

{selectedProduct.description}

{selectedProduct.sizes && selectedProduct.sizes.length > 0 && (

Tamanho

{selectedProduct.sizes.map((size) => ( ))}

)}

Quantidade

setQuantity(Math.max(1, parseInt(e.target.value) || 1))} className="w-20 text-center font-mono" />

Total

R$ {getTotal().toFixed(2)}

Nome Completo setFormData({ ...formData, name: e.target.value })} required className="font-mono text-sm" placeholder="Seu nome" />

Telefone setFormData({ ...formData, phone: e.target.value })} required className="font-mono text-sm" placeholder="(00) 00000-0000" />

Email (opcional) setFormData({ ...formData, email: e.target.value })} className="font-mono text-sm" placeholder="seu@email.com" />

)} ) } [V0_FILE]typescriptreact:file="app/validar/page.tsx" "use client" import { useState, useEffect, Suspense } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { CheckCircle2, XCircle, Loader2, User, Calendar, Clock, Sparkles } from "lucide-react" function ValidarContent() { const router = useRouter() const searchParams = useSearchParams() const qrCode = searchParams.get("qr") const [status, setStatus] = useState<"loading" | "success" | "already-validated" | "error">("loading") const [checkIn, setCheckIn] = useState(null) useEffect(() => { if (!qrCode) { setStatus("error") return } const validateQR = async () => { try { const response = await fetch("/api/validate", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ qrCode }), }) const data = await response.json() if (data.success) { setCheckIn(data.checkIn) if (data.alreadyValidated) { setStatus("already-validated") } else { setStatus("success") } } else { setStatus("error") } } catch (error) { console.error("[v0] Validation error:", error) setStatus("error") } } validateQR() }, [qrCode]) if (status === "loading") { return (

Validando QR Code...

Aguarde enquanto verificamos suas informações

) } if (status === "error") { return (

QR Code Inválido

Este código não foi encontrado no sistema

) } if (status === "already-validated") { return (

Já Validado

Este QR Code já foi utilizado anteriormente

{checkIn && (

Participante

{checkIn.name}

Evento

{checkIn.event}

{checkIn.event_date} às {checkIn.event_time}

Validado em

{new Date(checkIn.validated_at).toLocaleString("pt-BR")}

)}

) } // Success - newly validated return (

Presença Confirmada!

Check-in validado com sucesso

{checkIn && (

Participante

{checkIn.name}

Evento

{checkIn.event}

{checkIn.event_date} às {checkIn.event_time}

Bem-vindo(a) ao evento! 🎉

)}

) } function Loading() { return (

Carregando...

) } export default function ValidarPage() { return ( }> ) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/animated-noise.tsx" "use client" import { useEffect, useRef } from "react" interface AnimatedNoiseProps { opacity?: number className?: string } export function AnimatedNoise({ opacity = 0.05, className }: AnimatedNoiseProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number let frame = 0 const resize = () => { canvas.width = canvas.offsetWidth / 2 canvas.height = canvas.offsetHeight / 2 } const generateNoise = () => { const imageData = ctx.createImageData(canvas.width, canvas.height) const data = imageData.data for (let i = 0; i < data.length; i += 4) { const value = Math.random() * 255 data[i] = value // R data[i + 1] = value // G data[i + 2] = value // B data[i + 3] = 255 // A } ctx.putImageData(imageData, 0, 0) } const animate = () => { frame++ // Update noise every 2 frames for performance while still looking animated if (frame % 2 === 0) { generateNoise() } animationId = requestAnimationFrame(animate) } resize() window.addEventListener("resize", resize) animate() return () => { window.removeEventListener("resize", resize) cancelAnimationFrame(animationId) } }, []) return (

Produtos Somma Club

Nao e so um evento, e uma experiencia.

O que vai rolar

Quem faz acontecer

{partner.name}

Bora somar?

Verificando com nosso sistema...

Check-in confirmado!

Check-in Encerrado

{message.title}

Como você se chama?

Qual seu telefone?

E seu CPF?

Validar por CPF

Consultar CPF

{product.name}

Informação Importante

Opções de Entrega

Ganhe até 20% de desconto

Fazer Pedido

{selectedProduct.name}

Validando QR Code...

QR Code Inválido

Já Validado

Presença Confirmada!

SAIBA MAIS

Sobre o Somma

Loja Somma

Redes Sociais

Contato

{characters.map((char, index) => ( {displayChars[index] || (char === " " ? "\u00A0" : "")} ))}

Bem-vindo ao nosso hub de eventos, ativações e benefícios para quem somma.

BENEFÍCIOS E PARCEIROS SOMMA

{principle.titleParts.map((part, i) => part.highlight ? ( {part.text} ) : ( {part.text} ), )}

{signal.title}

Próximos eventos

{signals[0].title}

Check-in

PRÓXIMOS EVENTOS

{experiment.title}