Universo da marca organizado
Marca, produtos e publicações, conteúdos e iniciativas reunidos em uma navegação que faz sentido para quem chega pela primeira vez.
1Proposta comercial · 2026
Proposta para o novo site da
PassatemposUm site contemporâneo que organiza todo o universo da marca em um só lugar, forte no mobile, rápido e com autonomia total de edição para o time da Coquetel.
- Para
- Thadeu Cupello
- Marca
- Coquetel Passatempos
- Grupo
- Grupo Ediouro
- Por
- Matilab
- Data
- Setembro de 2026
HORIZONTAL
O que entendemos do projeto
A Coquetel é uma das marcas de passatempos mais queridas do Brasil, com décadas de história e um catálogo enorme. Hoje falta um endereço digital à altura disso: um lugar que apresente a marca com clareza, organize os produtos e conteúdos, e dê ao time liberdade para atualizar tudo sem depender de programação.
Lemos o briefing como um pedido por estrutura e autonomia. O site precisa ser bonito e claro, mas antes de tudo precisa ser um sistema: fácil de navegar para o público e fácil de manter para a equipe. É assim que a gente pensou cada decisão desta proposta.
Autonomia real via CMS
A equipe cria e edita páginas, produtos e posts direto em um painel simples, sem abrir chamado e sem esperar por desenvolvedor.
Mobile em primeiro lugar
A maior parte do público chega pelo celular. O projeto nasce mobile-first e é validado nessa tela antes de qualquer outra.
Performance como padrão
Carregamento rápido e Core Web Vitals no verde. Site leve retém mais gente e ainda favorece o ranqueamento.
SEO e analytics de verdade
Estrutura pensada para busca desde o primeiro dia, com GA4 e eventos configurados para você enxergar o que acontece.
LGPD sem dor de cabeça
Banner de consentimento, gestão de cookies e política de privacidade em conformidade, prontos no go-live.
VERTICAL
Como vamos criar
Nosso processo é dividido em quatro fases encadeadas. Cada fase entrega algo concreto e aprovável, então você acompanha o projeto ganhando forma em vez de esperar até o final para ver resultado.
01Semanas 1 a 3
Descoberta e UX
Imersão na marca e no público, arquitetura de informação, mapa do site e wireframes navegáveis. Aqui a gente define o esqueleto e alinha antes de desenhar.
- Arquitetura de informação
- Wireframes
- Fluxos de navegação
02Semanas 3 a 6
UI Design e Design System
Direção visual, telas finais e um design system com componentes reutilizáveis. A identidade fica consistente e pronta para crescer com a marca.
- Direção de arte
- Telas finais
- Design system
03Semanas 5 a 10
Desenvolvimento e CMS
Front-end em Next.js, integração com o CMS e modelagem de conteúdo. Tudo o que aparece na tela vira campo editável no painel.
- Front-end Next.js
- Modelagem no CMS
- Integrações
04Semanas 9 a 12
Testes e Go-live
Testes cross-browser e mobile, ajustes de performance, SEO técnico, treinamento da equipe e publicação. Entramos no ar com a casa em ordem.
- QA e performance
- Treinamento
- Publicação
HORIZONTAL
A arquitetura do site
Sete páginas que cobrem todo o universo da Coquetel, do institucional ao editorial. Pensadas para o público encontrar o que quer em poucos cliques e para a marca ter espaço de contar sua história.
Home
A porta de entrada. Apresenta o universo da marca e conduz o visitante para produtos, conteúdos e iniciativas.
História e Sobre
A trajetória da Coquetel contada com orgulho: origem, marcos e o lugar da marca na cultura brasileira.
Produtos e Publicações
Catálogo de revistas, livros e coleções, filtrável e sempre atualizado pela equipe via CMS.
Conteúdos e Blog
Dicas, curiosidades e bastidores dos passatempos. O motor de SEO e de relacionamento com o público.
Iniciativas e Projetos
Espaço para campanhas, parcerias e projetos especiais que mostram a marca em movimento.
Onde encontrar
Bancas e pontos de venda, com orientação clara de onde comprar cada publicação.
Contato e Imprensa
Canal direto para o público, para parceiros comerciais e para a imprensa, com materiais de apoio.
VERTICAL
Tecnologia e CMS
Escolhemos uma base moderna e comprovada, usada por marcas de grande porte no mundo todo. Em linguagem clara: um site rápido, seguro, bom de busca e que a sua equipe edita sozinha.
01Front-end
Next.js
O framework React que entrega páginas rápidas e ótimas para SEO. É a base de sites de empresas como Nike e Notion.
02Interface
Tailwind CSS
Estilização eficiente que garante consistência visual e um código enxuto, fácil de manter e evoluir.
03CMS headless
Sanity
O painel onde sua equipe edita tudo: páginas, produtos, blog e imagens. Autonomia total, sem depender de dev.
04Hospedagem
Vercel
Infraestrutura global que publica cada alteração em segundos, com escala automática e alta disponibilidade.
Por que essa escolha
Velocidade
Conteúdo entregue de servidores próximos do usuário, com páginas que abrem quase instantaneamente.
SEO forte
Renderização otimizada para o Google, com metadados dinâmicos e estrutura amigável para busca.
Escalabilidade
A base aguenta picos de acesso sem cair e cresce junto com novas seções e volume de conteúdo.
Edição sem dev
Publicar uma revista nova ou um post é questão de minutos no painel, sem tocar em código.
HORIZONTAL
O que está incluído
Um pacote completo, do primeiro rascunho ao suporte depois da estreia. Nada de surpresa: tudo o que o site precisa para nascer redondo está aqui.
UX e UI completo
Wireframes, protótipo navegável e design system pronto para escalar.
Desenvolvimento front-end
Interface construída em Next.js, componentizada e performática.
Integração do CMS
Modelagem e configuração do Sanity para edição autônoma de todo o conteúdo.
SEO técnico
Meta tags dinâmicas, sitemap, dados estruturados schema.org e URLs limpas.
LGPD
Banner de consentimento, gestão de cookies e política de privacidade.
Testes cross-browser
Validação em navegadores e dispositivos, do desktop ao celular.
Core Web Vitals
Otimização de carregamento e estabilidade visual dentro das metas do Google.
Treinamento da equipe
Capacitação prática para o time editar e publicar com confiança.
Suporte pós-lançamento
De 30 a 90 dias de acompanhamento, conforme o pacote, para ajustes e dúvidas.
VERTICAL
Cronograma
De 8 a 12 semanas, conforme o pacote escolhido e o volume de conteúdo. As fases se sobrepõem em parte, então o projeto anda em ritmo constante.
Duração total
8 a 12 semanas
01Descoberta e UX
Semanas 1 a 302UI e Design System
Semanas 3 a 603Desenvolvimento e CMS
Semanas 5 a 1004Testes e Go-live
Semanas 9 a 12HORIZONTAL
Investimento
Três formas de começar. Elas se diferenciam pelo número de páginas, pela presença de blog e módulo interativo, e pelo tempo de suporte incluso.
Essencial
O site institucional no ar, com autonomia de edição.
R$9.900
Valor do projeto, 50% na entrada e 50% no go-live.
- Páginas
- Até 5
- Blog
- Não
- SEO para IA (GEO)
- Não
- Módulo interativo
- Não
- Suporte incluso
- 30 dias
- Site institucional de até 5 páginas
- CMS para editar todo o conteúdo
- SEO base (meta tags e sitemap)
- LGPD e consentimento
- Treinamento no CMS
Completo
A recomendação para a Coquetel: universo completo e editorial forte.
R$15.000
Valor do projeto, 50% na entrada e 50% no go-live.
- Páginas
- Até 8
- Blog
- Sim, com SEO
- SEO para IA (GEO)
- Sim
- Módulo interativo
- Não
- Suporte incluso
- 60 dias
- Tudo do Essencial
- Até 8 páginas do universo da marca
- Blog e conteúdos com SEO editorial
- Otimização para buscas com IA (GEO): ChatGPT, Perplexity e AI Overviews
- Design system robusto
- 60 dias de suporte incluso
Premium
A experiência completa, com passatempo interativo e animações avançadas.
R$22.000
Valor do projeto, 50% na entrada e 50% no go-live.
- Páginas
- 8 ou mais
- Blog
- Sim, com SEO
- SEO para IA (GEO)
- Sim
- Módulo interativo
- Sim
- Suporte incluso
- 90 dias
- Tudo do Completo
- Módulo interativo (passatempo ou quiz online)
- Integrações extras
- Animações avançadas
- 90 dias de suporte com prioridade
- Entrada
- 50% para iniciar
- Saldo
- 50% no go-live
- Suporte incluso
- 30 a 90 dias, por pacote
- Prazo de entrega
- 8 a 12 semanas
Custos mensais recorrentes
Depois da estreia, os custos fixos são baixos e transparentes. Você paga só o que o projeto realmente usa.
R$ 700/mês
OpcionalManutenção Matilab
Atualizações, pequenos ajustes, monitoramento e suporte prioritário depois do período incluso.
US$ 25/mês
aprox. R$ 140/mêsBanco de dados Supabase
Plano Pro para os recursos dinâmicos, como o módulo interativo do Premium. Começa no plano gratuito e só sobe quando o uso crescer.
Grátis para começar
Planos gratuitosHospedagem Vercel e CMS Sanity
Os planos gratuitos atendem o lançamento. Upgrades só quando o tráfego ou o volume de conteúdo pedirem.
VERTICAL
Por que a Matilab
Somos um estúdio de web design e desenvolvimento que trata cada projeto como um produto: bonito por fora, sólido por dentro e fácil de manter depois que entregamos.
Design editorial
Layouts com personalidade e hierarquia clara. Sua marca não vira mais um template genérico.
Foco em performance
Otimização obsessiva de velocidade e Core Web Vitals. Site rápido é experiência melhor e mais busca.
CMS editável de verdade
Modelamos o painel pensando em quem edita todo dia. Autonomia sem depender da gente.
Código proprietário Next.js
Nada de construtor fechado. O site é seu, em uma base moderna que qualquer time pode evoluir.
Atendimento próximo
Interlocução direta com quem faz. Poucos projetos por vez, atenção real do começo ao fim.
★
Projetos no ar
Alguns sites que projetamos e desenvolvemos. Clique para abrir cada um e conferir ao vivo.
HORIZONTAL
Próximos passos
O melhor jeito de avançar é conversar. Vamos marcar um briefing detalhado para entender prioridades, prazos e conteúdo, e transformar esta proposta em um plano com data.
01
Agendamos uma conversa de briefing detalhado.
02
Fechamos escopo, pacote e cronograma final.
03
Iniciamos a Descoberta com 50% de entrada.
Vamos tirar o novo site da Coquetel do papel?
Escolha o canal que preferir. Respondemos rápido e já chegamos com boas perguntas para o briefing.
- 55 11 99264-4010
- contato@matilab.com.br