Template Northbound: site de estúdio com portal do cliente
Template Northbound: site de estúdio com portal do cliente
O Northbound é o modelo de estúdio de branding da galeria do Zugo: um site institucional em várias seções, com serviços, trabalhos e processo, somado a um portal privado que mostra fases do projeto, entregas, mensagens e faturas. Clonar não custa nada, e cada mudança depois disso é um pedido no chat de 3 créditos.
O que vem com o template Northbound?
São dois produtos em um arquivo só. O visitante vê um site longo organizado em capítulos numerados. O cliente entra e cai em um lugar completamente diferente.
| Superfície | O que ela contém |
|---|---|
| Abertura | Frase de posicionamento, ano e cidade, três nomes de cliente e quatro números de destaque |
| 01 Serviços | Quatro cartões de serviço, cada um com um argumento curto e três etiquetas de capacidade |
| 02 Trabalhos | Seis projetos com categoria, cliente e ano |
| 03 Processo | Quatro fases com intervalo de semanas e uma citação sobre tomar posição |
| Contato | Um fechamento honesto sobre agenda limitada, com e-mail direto |
| Entrada do cliente | E-mail corporativo e senha, opção de link mágico, depoimento e projetos ativos |
| Portal | Trilha de fases com progresso, entregas, mensagens, cronograma de faturas e conta |
A metade institucional tem ponto de vista, o que é mais raro do que parece em modelo de estúdio. Os serviços são argumentados em vez de listados, o processo diz o que acontece em cada par de semanas, e o fechamento avisa que o estúdio aceita poucos projetos por trimestre. Isso é peça de venda, não enchimento, e vale adaptar em vez de apagar.
A metade do portal cobre a parte chata de tocar trabalho de cliente: onde o projeto está, o que já foi aprovado, o que espera revisão e o que já foi faturado. Um número de progresso fica no topo e um botão de aprovação empurra o projeto para a fase seguinte.
O que o portal do cliente faz de verdade?
Mais do que parece em uma captura de tela e menos do que um sistema de produção. A navegação entre visão geral, entregas, mensagens, conta e faturas funciona. Filtrar entregas por pronto, em revisão e pendente funciona. Publicar no fio de mensagens funciona, e aprovar a fase atual avança a trilha.
Nada disso sobrevive a um recarregamento. O portal guarda o estado na memória da sessão, então atualizar a página devolve tudo ao projeto original do modelo. A tela de entrada é igual: mostra como entrar se parece, sem conferir a senha de ninguém e sem separar o projeto de um cliente do de outro.
É aqui que mora a decisão sobre o modelo. Como demonstração para mostrar a um cliente em potencial, ou como referência de desenho para um portal que você vai encomendar, ele é útil hoje. Como portal ao vivo, em que três clientes veem cada um só o seu projeto, ele precisa de contas e banco de dados reais pelo conector do Supabase. O que isso envolve está detalhado em a IA consegue criar um login.
Existe um meio-termo que funciona bem na prática: manter o portal como visão de um cliente só, publicar um link reservado por projeto e atualizar por chat quando a fase mudar. Não escala além de alguns clientes, mas para um estúdio com quatro contratos ganha de uma planilha.
Para quem o Northbound foi feito?
Estúdios que vendem trabalho pensado ao longo de semanas e querem que o site defenda isso. Branding e identidade são o caso óbvio, mas o mesmo formato serve para escritórios de arquitetura, consultorias de produto, produtoras de vídeo e agências de comunicação. Qualquer negócio com processo nomeado e poucos contratos grandes se acomoda bem aqui.
Serve mal onde a venda é rápida e transacional. Um negócio de serviço que vende uma visita a preço fixo não precisa de trilha de fases nem cronograma de faturas, e uma seção de processo de quatro semanas soa absurda diante de um corte de cabelo ou uma troca de óleo. Esses casos querem agendamento e preço logo na primeira dobra.
Vale citar uma adaptação que muda pouquíssimo: trocando o vocabulário, o mesmo modelo vira o site de um consultor autônomo. Serviços viram pacotes, trabalhos viram estudos de caso e o portal vira um painel de um cliente só. A versão geral desse raciocínio está em como criar um site de agência com IA, e quem quer só a vitrine visual, sem portal, encontra outra pegada no template Noire.
Quais números e nomes precisam sair?
Todos, e este modelo tem mais fatos inventados que a média. A abertura carrega quatro números: identidades entregues, duração média de contrato, gente sênior por projeto e capital levantado por clientes depois de uma reformulação de marca. Cada um deles é texto de demonstração sobre um estúdio que não existe.
O mesmo vale para os seis projetos da seção de trabalhos, os nomes de cliente da abertura, o depoimento da tela de entrada e o contrato inteiro que está semeado no portal, com datas, entregas e valores de fatura. Deixar qualquer parte disso no ar significa publicar uma afirmação sobre trabalho que você não fez.
Trocar tudo é uma edição focada se você trouxer os valores reais junto. Escreva o pedido como lista: seu ano de fundação, sua cidade, sua contagem real de projetos, seu prazo típico e as seis peças que quer mostrar com cliente, categoria e ano. Pedido vago produz substituição vaga, e aí você paga por uma segunda passada.
Duas omissões fáceis: o e-mail aparece na seção de contato e também no rodapé, e o título da aba do navegador continua com o nome do estúdio fictício até você pedir. Os dois aparecem justamente onde um estranho olha primeiro.
Como transformar no site do seu estúdio?
Trabalhe de dentro para fora, porque o texto determina o layout que fica, e estilizar uma seção que depois será apagada é dinheiro gasto duas vezes.
- Troque identidade e alegações. Nome do estúdio, posicionamento, cidade, ano de fundação, os quatro números e a linha de direitos do rodapé.
- Reescreva os quatro serviços. Mantenha o tom argumentado e as três etiquetas por cartão, troque o conteúdo pelo que você vende de verdade.
- Carregue trabalho real. Seis projetos com cliente, disciplina e ano, na ordem em que você quer que um prospecto leia.
- Ajuste o processo. Suas fases e seu prazo real. Se você trabalha em duas fases e não em quatro, diga isso e deixe a seção encolher.
- Decida o destino do portal. Manter como demonstração, cortar de vez ou assumir o trabalho de colocar contas reais por cima.
- Estilo por último, depois publique. O projeto ganha um endereço no formato
seuestudio.zugo.run, com domínio próprio em cima nos planos pagos.
Formule cada pedido como uma mudança concreta. "Deixe a seção de trabalhos mais forte" e "mostre quatro projetos em vez de seis e coloque o nome do cliente acima do título do projeto" custam os mesmos 3 créditos, e só o segundo pode ser conferido.
Quanto custa o trabalho em créditos?
Clonar é grátis, então nada é cobrado até você começar a editar. Um site de estúdio com conteúdo real costuma fechar em cinco ou seis edições, mais se você reconstruir o portal.
| Ação | Custo |
|---|---|
| Clonar o modelo em um projeto novo | Sem custo, não chama a IA |
| Uma edição no chat | 3 créditos |
| Construção a partir de uma descrição | 6 créditos |
| Plataforma multipágina | 12 créditos nas três primeiras páginas, depois 3 por página |
| Modo Hi-Fi | O dobro: 6 por edição e 12 por construção |
O plano gratuito dá 5 créditos. O Pro custa $25 por mês com 200 créditos, cerca de 66 edições ou aproximadamente 16 plataformas multipágina. O Business custa $99 por mês com 800 créditos, o que importa se você produz sites para clientes em vez de um site para si mesmo.
Toda construção roda em sandbox antes da entrega, e a que não abre não é entregue. Uma mudança simples volta em cerca de um minuto, e uma reconstrução multipágina inteira leva alguns minutos. Isso protege de página quebrada, não de página que funciona e mesmo assim erra a sua intenção.
O que o Northbound não vai fazer?
Não é um sistema de gestão de clientes de saída. Vários clientes com entradas separadas, faturas de verdade e cobrança pedem Supabase para contas e dados e Stripe para dinheiro. Os dois são conectores oficiais e os dois são trabalho real.
Regra de negócio complexa chega em várias edições. Cadeias de aprovação, permissão por cliente ou lembrete automático quando uma entrega fica parada se descrevem por etapas e se verificam uma de cada vez, não saem de um prompt comprido.
O Zugo não substitui um time de desenvolvimento em um produto complexo. Um site de estúdio com portal de demonstração está bem dentro do que um construtor por chat resolve. Um portal atendendo cinquenta clientes com contratos e repasses uma hora vai querer engenheiros, e a exportação para o GitHub existe para que você entregue o código quando esse dia chegar.
Como testar se ele serve para você?
Abra a galeria em zugo.dev, clone o Northbound e gaste a primeira edição nos seus quatro serviços. No instante em que a sua oferta real estiver dentro do layout, você vai saber se a casca está argumentando a seu favor ou contra você.