Case · Rock & Cia
Rock & Cia: do site anterior ao de 2026, e o social que segue publicando.
Três entregas encadeadas: o site anterior, a reconstrução de 2026 em React e Vite com mais de vinte páginas geradas a partir dos dados, e a operação de conteúdo que segue publicando. Site e conteúdo não são frentes paralelas — são o que sustenta a mesma presença digital.
Site de 2026 no ar
Module 01
O que foi entregue, em quatro telas.
Module 02
O ponto de partida existe, e está guardado.
A versão anterior saiu do ar quando o site de 2026 subiu. O que sobrou dela é uma captura de arquivo do período de 2021 a 2024. Em vez de esconder o começo, ele fica aqui: é o que dá tamanho ao que veio depois.
O que a versão anterior tinha
- Chamada de abertura: Liberte a música que habita em você.
- Seis cards de curso: violão, guitarra e ukulele; violino; baixo; bateria; canto; piano e teclado.
- Uma grade com seis players sob o título Vídeos dos Professores.
- Bloco Quem somos? com o selo de 35 anos e a linha Há mais de 35 anos ensinando.
- Galeria filtrável com cerca de 28 fotos, separadas por eventos, bateria, guitarra, baixo e canto.
- Uma única menção ao estúdio, no fim da página: Venha aprender ou gravar no nosso estúdio especializado!
- Contato com formulário e mapa.
O selo dizia 35 anos. O site que o substituiu diz 38. É o intervalo entre as duas entregas, escrito pela própria escola nas duas capas.
Module 03
Duas operações no mesmo endereço, sem virar dois sites.
A escola e o estúdio dividem o mesmo prédio e disputam a mesma página inicial. A solução foi um alternador no topo — e a decisão de gerar as páginas internas a partir dos dados, não à mão.
Um alternador que troca a página inteira
O controle Escola/Estúdio fica no topo e não muda só o texto: troca o conteúdo, o fundo, o vídeo e a chamada de ação, com transição animada entre os dois estados. Quem procura aula e quem procura gravação chegam ao mesmo endereço e veem páginas diferentes.
Mais de 20 páginas geradas a partir dos dados
Dez cursos e dez professores viram páginas próprias, geradas a partir da mesma lista de dados — ninguém montou página por página. Cada professor tem card com link para o Instagram dele. Não é um tema pronto com o conteúdo trocado.
Publicado como arquivo estático
A aplicação é React com Vite, mas o que vai para o servidor é o resultado do build: arquivos estáticos, sem CMS por trás. O cabeçalho do servidor registra a publicação em 2 de setembro de 2026.
10
cards de curso publicados na versão de 2026
10
cards de professor, cada um com link para o perfil pessoal
20+
páginas geradas a partir dos dados, sem escrever uma a uma
3
abas no player da área de estúdio
O restante do que está no ar: vídeo em MP4 hospedado no próprio site, contadores animados nos números da escola, botões de WhatsApp com a mensagem já preenchida e SEO trabalhado página a página. Esse último item é o motivo de as rotas existirem: cada curso e cada professor viram uma página que pode ser encontrada por quem procura aquele instrumento — o site é infraestrutura de presença digital, não vitrine. Como esse tipo de site é construído está em criação de sites.
Module 04
O que mudou de uma versão para a outra, item por item.
À esquerda, o que a versão anterior tinha. À direita, o que o site de 2026 pôs no lugar.
| Item | Versão anterior | Versão de 2026 |
|---|---|---|
| Plataforma | WordPress | React e Vite, entregues como build estático |
| Estrutura | Cursos, professores, galeria e contato na mesma rolagem | Mais de 20 rotas, com roteamento no cliente |
| Cursos | 6 cards | 10 cards |
| Professores | Grade com 6 players de vídeo | 10 cards, cada um com link para o Instagram do professor |
| Escola e estúdio | Uma chamada no fim da página convidando a gravar no estúdio | Alternador no topo que troca conteúdo, fundo, vídeo e chamada |
| Vídeo | Players incorporados na seção de professores | MP4 hospedado no próprio site, no topo |
| Contato | Formulário e mapa no rodapé da página | Botões de WhatsApp com mensagem já preenchida |
| Selo de tempo de casa | Número solto no topo | Selo com frase completa, atualizado na virada |
A frase de abertura do site novo — Aqui você não decora teoria. Você toca. — é da escola. O trabalho foi dar a ela um lugar onde coubesse: o topo da página, em tipo grande.
Iniciar projeto
Seu site ainda representa o negócio que você tem hoje?
Aqui a resposta foi refazer, e depois continuar publicando — porque site parado não mantém marca nenhuma sendo encontrada. O escopo se monta a partir do que já existe: presença, conteúdo, site, ou os três juntos. O preço sai da proposta, não de tabela pronta.
A entrega não terminou quando o site subiu.
O perfil da escola continua publicando, e as peças não são anúncio de matrícula: o assunto é o efeito da música sobre quem toca. A linha editorial é conceitual, não promocional.
Linha editorial
Peças publicadas
O ciclo se fecha
O site é entrega com data de fim; a presença não. O conteúdo mantém a escola aparecendo entre uma matrícula e outra e manda quem chega para o endereço que a casa construiu — o ciclo se fecha ali. Site e conteúdo não são frentes paralelas: são o que sustenta a presença digital da escola. Como a operação mensal funciona está em gestão de redes sociais; outro projeto com esse mesmo desenho de relacionamento longo é o da Unimed Capivari, e os demais estão em trabalhos.