Crie um projeto web responsivo de alta fidelidade chamado **Culturize — Agenda Cultural**, desenvolvido como protótipo de um sistema para TCC de Desenvolvimento de Sistemas. O objetivo do Culturize é centralizar e divulgar eventos culturais de uma cidade, permitindo que visitantes consultem a agenda cultural, usuários cadastrados possam cadastrar eventos e administradores possam analisar, aprovar, editar e excluir eventos. O projeto deve representar um sistema real, com diferentes níveis de acesso e telas específicas para visitante, usuário autenticado e administrador. ================================================== 1. IDENTIDADE DO PROJETO ================================================== Nome: **Culturize** Slogan sugerido: **"A cultura da sua cidade em um só lugar."** Conceito: Uma plataforma digital para facilitar o acesso da população à programação cultural do município e ampliar a divulgação de eventos e iniciativas culturais. A interface deve transmitir: * Cultura * Comunidade * Descoberta * Criatividade * Modernidade * Organização * Acessibilidade Não utilizar estética infantil. ================================================== 2. IDENTIDADE VISUAL ==================== Utilizar obrigatoriamente a seguinte paleta: Verde claro: #CDDFA1 Laranja: #F6853F Vinho escuro: #721122 Magenta: #AD2A44 Amarelo: #FFEE86 Utilizar o **#721122** como uma das principais cores de textos, títulos e elementos institucionais. Utilizar o **#F6853F** e **#AD2A44** para botões, chamadas para ação, destaques e elementos interativos. Utilizar **#CDDFA1** e **#FFEE86** para fundos, cards, elementos decorativos e destaques suaves. Utilizar fundo neutro claro, como branco ou creme muito suave, para evitar excesso de cores. Criar uma identidade visual consistente em todas as telas. Estilo: * Moderno * Profissional * Jovem * Cultural * Elegante * Intuitivo * Responsivo * Limpo * Visualmente atrativo Utilizar tipografia moderna, legível e acessível. Utilizar cards com bordas levemente arredondadas, sombras suaves, ícones minimalistas e imagens relacionadas à cultura. ================================================== 3. PERFIS DE ACESSO =================== O sistema possui três atores: ### VISITANTE Pode acessar o sistema sem possuir cadastro. Pode: * Visualizar eventos * Listar eventos * Filtrar eventos * Ordenar eventos * Visualizar detalhes dos eventos Não pode: * Cadastrar eventos * Aprovar eventos * Editar eventos * Excluir eventos * Acessar estatísticas administrativas ### USUÁRIO Usuário cadastrado e autenticado. Pode: * Realizar login * Cadastrar eventos * Fazer upload de imagem para seus eventos * Acessar a agenda normalmente Não pode: * Aprovar eventos * Editar eventos já cadastrados como administrador * Excluir eventos * Acessar estatísticas administrativas ### ADMINISTRADOR Possui acesso às funcionalidades administrativas. Pode: * Visualizar eventos cadastrados * Aprovar eventos * Recusar eventos * Editar eventos * Excluir eventos * Gerenciar categorias * Visualizar estatísticas ================================================== 4. NAVEGAÇÃO PRINCIPAL ====================== Criar uma navbar responsiva. Logo: **Culturize** Menu: * Início * Eventos * Categorias * Sobre No lado direito: **Entrar** **Cadastrar-se** Quando o usuário estiver autenticado, substituir os botões por: * Meu perfil * Cadastrar evento * Sair Quando for administrador, disponibilizar: * Painel administrativo No mobile, transformar a navbar em menu hambúrguer. ================================================== 5. TELA — HOME ============== Criar uma página inicial visualmente forte. Hero section: Título: **"A cultura da sua cidade em um só lugar."** Subtítulo: "Descubra eventos, experiências e iniciativas culturais perto de você." Adicionar uma barra de pesquisa grande: **"Busque por eventos, locais ou categorias..."** Adicionar botão: **"Buscar"** Abaixo, criar atalhos: * Todos os eventos * Hoje * Esta semana * Gratuitos Criar seção: **"Próximos eventos"** Exibir cards de eventos. Cada card deve mostrar: * Imagem * Categoria * Título * Data * Horário * Local * Preço ou "Gratuito" * Botão "Ver detalhes" Mostrar somente eventos aprovados e futuros. Criar seção: **"Explore por categoria"** Categorias: * Música * Teatro * Dança * Cinema * Artes * Literatura * Gastronomia * Festas * Workshops * Outros Criar seção: **"Descubra o que está acontecendo na cidade"** Com uma chamada visual para explorar todos os eventos. Finalizar com footer contendo: * Culturize * Sobre * Contato * Termos de uso * Política de privacidade ================================================== 6. TELA — LISTAGEM DE EVENTOS ============================= Criar a página: **"Agenda Cultural"** Descrição: "Encontre eventos culturais, escolha uma categoria, data ou local e descubra o que acontece na cidade." Criar campo de pesquisa. Criar filtros: **Categoria** * Todas * Música * Teatro * Dança * Cinema * Artes * Literatura * Gastronomia * Festas * Workshops **Data** * Hoje * Amanhã * Esta semana * Este mês * Escolher data **Local** Campo para selecionar ou pesquisar local. Criar ordenação: **Ordenar por** * Mais próximos * Menor preço * Relevância Exibir eventos em grid. Cada evento deve possuir: * Imagem * Categoria * Título * Data * Horário * Local * Preço * Botão "Ver detalhes" A listagem pública deve mostrar apenas eventos: **Aprovados + futuros** Eventos passados não devem aparecer na listagem pública. Criar estado vazio: **"Nenhum evento encontrado."** Com sugestão: "Experimente alterar seus filtros ou pesquisar por outra categoria." ================================================== 7. TELA — DETALHES DO EVENTO ============================ Criar uma página individual para o evento. Exibir: Imagem principal. Categoria. Título do evento. Descrição completa. Data. Horário. Nome do local. Rua. Número. Bairro. Cidade. CEP. Preço. Classificação, caso aplicável. Criar um bloco visual: **"Quando?"** Data e horário. Outro bloco: **"Onde?"** Nome do local e endereço. Se o evento possuir ingresso, mostrar: **"Comprar ingresso"** Esse botão deve representar um link externo para o site responsável pela venda dos ingressos. Não criar sistema próprio de compra de ingressos. Registrar visualmente que o clique no botão gera uma métrica administrativa. Se o evento for gratuito, mostrar: **"Entrada gratuita"** ================================================== 8. TELA — LOGIN =============== Título: **"Bem-vindo ao Culturize!"** Campos: E-mail Senha Botão: **"Entrar"** Links: "Esqueci minha senha" "Ainda não tenho uma conta" "Cadastre-se" Criar mensagens de erro para: * E-mail inválido * Senha incorreta * Campos obrigatórios ================================================== 9. TELA — CADASTRO DE USUÁRIO ============================= Título: **"Crie sua conta"** Campos obrigatórios: Nome completo E-mail Senha Confirmar senha Botão: **"Criar conta"** Regras visuais: * Nome completo obrigatório * E-mail obrigatório e válido * E-mail deve ser único * Senha obrigatória * Confirmar senha Criar mensagens de validação. Exemplo: **"Este e-mail já está cadastrado."** Após cadastro bem-sucedido: **"Conta criada com sucesso!"** ================================================== 10. TELA — CADASTRO DE EVENTO ============================= Criar uma tela/formulário para usuários autenticados cadastrarem eventos. Título: **"Cadastrar novo evento"** Campos: ### Informações do evento Título do evento * Descrição * Categoria * Data * Horário * Preço * Imagem * ### Local do evento Nome do local * Rua * Número * Bairro * Cidade * CEP * ### Ingressos Link para ingressos, quando aplicável. Adicionar indicação: "* Campos obrigatórios" Preço deve aceitar somente valores numéricos positivos. Caso seja gratuito, disponibilizar opção: ☐ Evento gratuito Ao marcar gratuito, mostrar: **"Gratuito"** Não permitir preço negativo. Criar upload de imagem. Formatos aceitos: JPG e PNG Tamanho máximo: **5 MB** Criar feedback caso o arquivo seja inválido. Botão: **"Enviar evento para aprovação"** Ao enviar: Mostrar mensagem: **"Evento enviado com sucesso e está aguardando aprovação da administração."** O evento deve possuir visualmente o status: **Pendente** ================================================== 11. TELA — MEUS EVENTOS ======================= Criar uma área para o usuário acompanhar os eventos que cadastrou. Título: **"Meus eventos"** Mostrar tabela ou cards com: * Evento * Data * Categoria * Local * Status Status possíveis: 🟡 Pendente 🟢 Aprovado 🔴 Recusado Criar opção de visualizar o evento. Usuário comum não deve possuir botões de aprovação ou exclusão administrativa. ================================================== 12. PAINEL ADMINISTRATIVO ========================= Criar uma área administrativa completamente diferente da interface pública. Utilizar sidebar lateral. Menu: * Dashboard * Eventos * Aprovações * Categorias * Usuários * Estatísticas * Sair ================================================== 13. DASHBOARD ADMINISTRATIVO ============================ Título: **"Painel Administrativo"** Criar cards com indicadores: **Eventos cadastrados** **Eventos pendentes** **Eventos aprovados** **Usuários cadastrados** Criar gráficos. Gráfico: **Eventos por categoria** Mostrar quantidade de eventos em cada categoria. Outro gráfico: **Eventos ao longo do tempo** Criar seção: **"Eventos aguardando aprovação"** Mostrar os eventos pendentes mais recentes. ================================================== 14. TELA — APROVAÇÃO DE EVENTOS =============================== Título: **"Eventos pendentes"** Mostrar lista/tabela: * Imagem * Título * Categoria * Data * Local * Usuário responsável * Status Criar botão: **"Analisar"** Ao clicar, abrir página ou modal com todos os dados do evento. Botões: **"Aprovar evento"** **"Recusar evento"** Caso recusado, permitir informar o motivo. Após aprovação: Status: **Aprovado** Após recusa: Status: **Recusado** Somente administradores possuem acesso a essas ações. ================================================== 15. TELA — GERENCIAMENTO DE EVENTOS =================================== Criar tabela administrativa com todos os eventos. Colunas: * ID * Título * Categoria * Data * Local * Status * Ações Ações: * Visualizar * Editar * Excluir Criar filtros administrativos: * Todos * Pendentes * Aprovados * Recusados * Eventos passados O ID deve aparecer como identificador único do evento. Criar confirmação antes de excluir: **"Tem certeza que deseja excluir este evento?"** Botões: "Cancelar" "Excluir" ================================================== 16. TELA — EDITAR EVENTO ======================== Criar formulário semelhante ao cadastro. Permitir ao administrador alterar: * Título * Descrição * Data * Horário * Categoria * Preço * Imagem * Local * Endereço * Link de ingresso Botão: **"Salvar alterações"** Mostrar mensagem: **"Evento atualizado com sucesso."** Caso uma alteração significativa exija nova validação, mostrar: **"As alterações foram enviadas para nova aprovação."** ================================================== 17. TELA — CATEGORIAS ADMINISTRATIVAS ===================================== Criar tela para gerenciamento das categorias. Mostrar categorias existentes: * Música * Teatro * Dança * Cinema * Artes * Literatura * Gastronomia * Festas * Workshops Permitir ao administrador: * Adicionar categoria * Editar categoria * Excluir categoria A categoria deve ser obrigatória no cadastro de eventos. ================================================== 18. TELA — ESTATÍSTICAS ======================= Criar painel de métricas administrativas. Título: **"Estatísticas"** Mostrar: * Número total de eventos * Eventos por categoria * Eventos aprovados * Eventos pendentes * Eventos recusados * Número de usuários * Cliques em links de ingressos Criar gráficos visualmente claros. Exemplo: Gráfico de barras: **Eventos por categoria** Gráfico: **Cliques em ingressos** Gráfico: **Eventos cadastrados por período** As estatísticas devem parecer dados reais, mas são apenas dados demonstrativos do protótipo. ================================================== 19. TELA — PERFIL ================= Criar página de perfil para usuário autenticado. Mostrar: * Nome completo * E-mail * Cidade Opções: * Editar perfil * Alterar senha * Meus eventos * Sair ================================================== 20. ESTADOS DO SISTEMA ====================== Criar estados visuais para melhorar o protótipo. ### Carregamento Mostrar skeleton/loading durante carregamento de eventos. ### Nenhum resultado "Não encontramos eventos para os filtros selecionados." ### Evento pendente Badge amarelo: **Pendente** ### Evento aprovado Badge verde: **Aprovado** ### Evento recusado Badge vermelho: **Recusado** ### Sucesso Mostrar notificações de sucesso após: * Cadastro * Login * Cadastro de evento * Aprovação * Edição * Exclusão ### Erro Mostrar mensagens claras e específicas. ================================================== 21. REGRAS IMPORTANTES DO SISTEMA ================================= Representar visualmente as seguintes regras: 1. Cada evento possui um ID único gerado automaticamente. 2. O local deve possuir: Nome do local, rua, número, bairro, cidade e CEP. 3. Nome, e-mail e senha são obrigatórios no cadastro de usuário. 4. Não permitir e-mails duplicados. 5. Eventos devem possuir categoria obrigatória. 6. Não permitir eventos duplicados com o mesmo: Título + data + horário + local. 7. Preço não pode ser negativo. 8. Eventos gratuitos devem aparecer como: **Gratuito** 9. Apenas administradores podem: Aprovar, editar e excluir eventos. 10. Listagens públicas devem apresentar somente eventos futuros aprovados. 11. Imagens devem ser JPG ou PNG e possuir no máximo 5 MB. 12. Eventos recusados não devem aparecer na agenda pública. 13. Eventos passados devem ficar disponíveis apenas no ambiente administrativo/histórico. ================================================== 22. RESPONSIVIDADE ================== Criar versão responsiva para: Desktop Tablet Smartphone No smartphone: * Navbar em menu hambúrguer * Cards em uma coluna * Filtros empilhados * Formulários adaptados * Dashboard administrativo adaptado * Tabelas com rolagem horizontal ou versão em cards ================================================== 23. EXPERIÊNCIA E ACESSIBILIDADE ================================ Priorizar: * Contraste adequado * Tipografia legível * Botões claramente identificáveis * Campos obrigatórios destacados * Feedback imediato * Navegação intuitiva * Hierarquia visual * Responsividade * Estados de hover * Estados de foco * Mensagens de erro claras ================================================== 24. PROTÓTIPO INTERATIVO ======================== Conectar as telas através dos botões e menus. Fluxo do visitante: HOME → EVENTOS → FILTROS → DETALHES DO EVENTO Fluxo do usuário: HOME → CADASTRO → LOGIN → CADASTRAR EVENTO → UPLOAD DE IMAGEM → ENVIAR → EVENTO PENDENTE → MEUS EVENTOS Fluxo do administrador: LOGIN → PAINEL ADMINISTRATIVO → EVENTOS PENDENTES → ANALISAR → APROVAR/RECUSAR → GERENCIAR EVENTOS → EDITAR/EXCLUIR → ESTATÍSTICAS ================================================== 25. OBJETIVO FINAL DO DESIGN ============================ O resultado deve parecer um sistema real de agenda cultural municipal, desenvolvido profissionalmente. Não criar apenas uma landing page. Criar as páginas internas, formulários, dashboard, tabelas, filtros, estados e fluxos necessários para representar os requisitos funcionais e casos de uso do sistema. O protótipo deve ser adequado para apresentação de TCC, permitindo que a equipe demonstre claramente como cada ator utiliza o sistema. A interface deve equilibrar **identidade cultural, modernidade, simplicidade e profissionalismo**, utilizando a paleta oficial do Culturize em todas as telas. Os principais casos de uso que devem ser representados no protótipo são: UC01 — Cadastrar Usuário UC02 — Realizar Login UC03 — Cadastrar Evento UC04 — Upload de Imagem do Evento UC05 — Aprovar Evento UC06 — Editar Evento UC07 — Excluir Evento UC08 — Listar Eventos UC09 — Filtrar Eventos UC10 — Ordenar Eventos UC11 — Visualizar Detalhes do Evento UC12 — Registrar Estatísticas