Dashboard SaaS em Next.js com Fluxo de Onboarding

1. Configure o Next.js e o shadcn 2. Adicione uma autenticação simples do Supabase com uma página de cadastro e login 3. Configure o frontend de acordo com o seguinte prompt: <prompt de frontend> <resumo_titulo> Crie componentes detalhados com estes requisitos: 1. Use a diretiva 'use client' para componentes do lado do cliente 2. Estilize com classes utilitárias do Tailwind CSS para design responsivo 3. Use Lucide React para ícones (do pacote lucide-react). NÃO use outras bibliotecas de UI, a menos que solicitado 4. Use fotos de banco de imagens de https://t.co/kmBMYKBzp0 quando apropriado, apenas URLs válidos que você sabe que existem 5. Configure os remotePatterns de imagem no next.config.js para habilitar fotos de banco de imagens de https://t.co/kmBMYKBzp0 6. Crie a página raiz layout.tsx que envolva os itens de navegação necessários em todas as páginas 7. IMPLEMENTE obrigatoriamente os itens de navegação em seus devidos lugares, ou seja, barra lateral esquerda, cabeçalho superior 8. Implemente com precisão os layouts de grade necessários 9. Siga as práticas de importação adequadas: - Use aliases de caminho @/ - Mantenha as importações de componentes organizadas - Atualize o src/app/page.tsx atual com novo código abrangente - Não esqueça o tratamento da rota raiz (page.tsx) - Você DEVE concluir todo o prompt antes de parar Dashboard SaaS Moderno com Fluxo de Integração </resumo_titulo> <análise_de_imagem> 1. Elementos de Navegação: - Barra lateral esquerda com: Dashboard, Conteúdo, Comunidade, Marketing, Analytics, Vendas, Loja - Navegação secundária inferior com: Configurações, Ajuda - Seção de perfil do usuário no topo da barra lateral 2. Componentes de Layout: - Largura da barra lateral: 240px - Área de conteúdo principal: largura flexível - Contêineres de cartão: ~500px de largura - Espaçamento: 24px (consistente em todo o layout) - Contêiner responsivo com margens de 32px 3. Seções de Conteúdo: - Cabeçalho de boas-vindas com saudação ao usuário - Lista de verificação de integração (4 etapas) - Cartão de agendamento de videochamada - Cartão de pré-visualização do construtor de páginas - Indicadores de progresso para tarefas concluídas 4. Controles Interativos: - Itens da lista de verificação com estados de conclusão - Botões primários "Agendar horário" e "Experimentar" - Links de texto "Saiba mais" - Itens do menu de navegação com estados de hover - Controles do editor de rich text no construtor de páginas 5. Cores: - Azul primário: #0066FF (botões) - Cinza de fundo: #F5F5F7 - Texto escuro: #1A1A1A - Verde de sucesso: #34C759 - Cores de destaque para avatares 6. Estrutura de Grade/Layout: - Layout de coluna única para o conteúdo principal - Espaço de 24px entre cartões - Contêineres de largura flexível - Sistema de grade de cartões com cantos arredondados (12px) </análise_de_imagem> <planejamento_de_desenvolvimento> 1. Estrutura do Projeto: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. Recursos Principais: - Sistema de lista de verificação de integração - Agendamento de videochamadas - Interface do construtor de páginas - Rastreamento de progresso - Dashboard do usuário 3. Gerenciamento de Estado: ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. Rotas: ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. Arquitetura de Componentes: - DashboardLayout (pai) - OnboardingCard (recurso) - VideoCallCard (recurso) - PageBuilderPreview (recurso) - NavigationMenu (compartilhado) - ActionButton (compartilhado) 6. Breakpoints Responsivos: ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </planejamento_de_desenvolvimento> </prompt de frontend> 4. Configure a estrutura de páginas de acordo com o seguinte prompt <prompt de estrutura de páginas> Estrutura de rotas do Next.js com base nos itens do menu de navegação (excluindo a rota principal). Certifique-se de envolver todas as rotas com o componente: Rotas: - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help Implementações de Página: /dashboard: Propósito Principal: Fornecer visão geral das principais métricas e acesso rápido às funções principais Componentes Principais - Grade de cartões de estatísticas - Feed de atividades recentes - Botões de ação rápida - Gráficos de desempenho - Notificações de tarefas Estrutura de Layout - Layout baseado em grade com sistema de 12 colunas - Cartões responsivos que se empilham no mobile - Cabeçalho fixo com métricas principais /content: Propósito Principal: Gerenciar e organizar todos os ativos de conteúdo Componentes Principais - Lista de conteúdo /alternância de visualização em grade - Sistema de busca e filtro - Editor de conteúdo - Biblioteca de mídia - Histórico de versões Estrutura de Layout: - Visualização dividida com navegação lateral - Área de conteúdo principal com rolagem infinita - Sobreposições modais para edição /community: Propósito Principal: Gerenciar interações de usuários e recursos da comunidade Componentes Principais - Diretório de membros - Fóruns de discussão - Ferramentas de moderação - Denúncias de usuários - Registros de atividades Estrutura de Layout - Layout de três colunas - Barra lateral recolhível - Área de conteúdo principal rolável /marketing: Propósito Principal: Gerenciamento de campanhas e ferramentas de marketing Componentes Principais - Criador de campanhas - Construtor de modelos de e-mail - Dashboard de analytics - Segmentos de público - Ferramentas de teste A/B Estrutura de Layout - Interface com abas - Visualização dividida para edição - Painel de pré-visualização /analytics: Propósito Principal: Visualização de dados e relatórios Componentes Principais - Gráficos interativos - Construtor de relatórios personalizados - Ferramentas de exportação de dados - Comparações de métricas - Seletor de intervalo de datas Estrutura de Layout - Gráficos de largura total - Cabeçalho de filtros fixo - Tabelas de dados responsivas /sales: Propósito Principal: Pipeline de vendas e gerenciamento de pedidos Componentes Principais - Dashboard de pedidos - Perfis de clientes - Gerador de faturas - Processamento de pagamentos - Relatórios de vendas Estrutura de Layout - Visualização de quadro Kanban - Opção de visualização em lista - Painel de detalhes /storefront: Propósito Principal: Gerenciamento da loja de e-commerce Componentes Principais - Gerenciador de produtos - Controle de inventário - Personalizador da loja - Atendimento de pedidos - Configuração de envio Estrutura de Layout - Layout de produtos baseado em grade - Barra lateral de edição rápida - Modo de pré-visualização /settings: Propósito Principal: Configuração do sistema e preferências do usuário Componentes Principais - Configurações da conta - Preferências do sistema - Configuração de integrações - Gerenciamento de usuários - Configurações de segurança Estrutura de Layout - Painéis de configurações categorizados - Layouts baseados em formulários - Modais de confirmação /help: Propósito Principal: Documentação de suporte e assistência Componentes Principais - Pesquisar documentação - Seção de FAQ - Contato com suporte - Vídeos tutoriais - Base de conhecimento Estrutura de Layout - Barra lateral pesquisável - Visualização de artigos - Painel de links rápidos Layouts: AdminLayout: - Rotas aplicáveis: Todas exceto /help - Componentes principais - Barra de navegação superior - Navegação na barra lateral - Menu de perfil do usuário - Notificações - Breadcrumbs - Comportamento responsivo - Barra lateral recolhível no mobile - Menu suspenso para navegação em telas pequenas - Largura de conteúdo ajustável HelpLayout - Rotas aplicáveis: /help - Componentes principais - Barra lateral de documentação - Barra de pesquisa - Widget de chat de suporte - Botão de voltar ao admin - Comportamento responsivo - Largura total no mobile - Botão de ação flutuante para suporte - Seções recolhíveis </prompt de estrutura de páginas>