Site para uma marca de aluguel de roupas de luxo, com coleções feminina e masculina, página de coleção alimentada por pastas de imagens e formulário que monta a mensagem de atendimento no WhatsApp.
Papel
Desenvolvimento do site
Organização e período
Março de 2026
Plataformas
Web (desktop e celular) · Área restrita de gestão da coleção
Página inicial
01 / Contexto
História e problema
Para quem
Pessoas que procuram alugar roupas de alto padrão para casamentos e eventos, com atendimento personalizado por agendamento.
Problema
A marca tinha um site em WordPress e precisava de uma apresentação mais alinhada ao posicionamento de luxo, com a coleção fácil de atualizar e um caminho curto até o atendimento, que acontece pelo WhatsApp.
28/03/2026
Versão inicial com seções Para elas, Para eles, galeria, como funciona, contato, página de coleção e área restrita.
02 / Papel
Minha responsabilidade
Liderança e direção
Defini o formulário de contato sem backend, que transforma os dados do evento em uma mensagem pronta no WhatsApp.
Defini a coleção baseada em pastas de imagens com metadados opcionais, para dispensar banco de dados.
Execução técnica direta
Estruturei o site em Next.js 16 (App Router), React 19, TypeScript e Tailwind CSS 4, com componentes por seção.
Implementei a página de coleção, que lê as categorias e imagens do disco e usa um JSON ao lado de cada foto para nome e descrição.
Implementei a área restrita com sessão criptografada (iron-session) para enviar e remover peças da coleção.
Configurei o proxy reverso no nginx para o domínio da marca.
03 / Arquitetura
Arquitetura documentada
Aplicação Next.js com App Router, sem banco de dados. A coleção é derivada da estrutura de pastas de imagens; o contato não envia dados a servidor, apenas abre o WhatsApp com a mensagem montada no navegador.
Arquitetura do site da Via Manzoni
Visitante
Navegador
WhatsApp
Next.js 16
Página inicial
Coleção
Área restrita
Conteúdo
Pastas por categoria
JSON por peça
Conexões
O navegador carrega as páginas servidas pelo Next.js.
A página de coleção lê as pastas de imagens e os metadados de cada peça.
O formulário de contato abre o WhatsApp com a mensagem preenchida.
Camadas e tecnologias
Frontend
Next.js 16.2 com App Router, React 19.2, TypeScript, Tailwind CSS 4 e estilos inline nos componentes. Rotas públicas: página inicial (Hero, Para elas, Para eles, Galeria, Como funciona, Contato) e página de coleção com agrupamento por categoria.
Conteúdo
A coleção é lida da estrutura de pastas: cada pasta é uma categoria e cada imagem (JPG, PNG ou WebP) é uma peça, com nome e descrição opcionais em arquivo de dados ao lado.
SEO e desempenho
Título, descrição e palavras-chave pela Metadata API, lang pt-BR e título próprio na página de coleção. Imagens das seções principais com next/image; fontes Playfair Display e Inter por importação do Google Fonts no CSS. Sem Open Graph, sitemap ou dados estruturados.
Implantação
nginx como proxy reverso para o processo Next.js no domínio da marca, no servidor próprio.
04 / Decisões
Decisões técnicas e compromissos
01
Formulário que gera mensagem no WhatsApp
Problema
O atendimento da marca acontece pelo WhatsApp, e um formulário tradicional exigiria backend, armazenamento de dados pessoais e resposta por outro canal.
Decisão
Coletar nome, tipo de evento, data e mensagem no navegador e abrir o WhatsApp com o texto já montado.
Motivo
Leva o visitante direto ao canal em que a venda acontece, sem guardar dados no servidor.
Compromisso
Não há registro dos pedidos no site; se o visitante não enviar a mensagem no WhatsApp, o contato se perde.
02
Coleção derivada do sistema de arquivos
Problema
A coleção muda com frequência e precisava ser mantida sem banco de dados.
Decisão
Usar pastas como categorias e arquivos de imagem como peças, com JSON opcional ao lado de cada foto.
Motivo
A estrutura é simples de entender e funciona tanto com cópia manual quanto com a área restrita de upload.
Compromisso
O conteúdo fica preso ao disco do servidor, sem histórico, e a ordem das peças depende do nome dos arquivos.
05 / Funcionamento
Fluxo e modelo
Pedido de atendimento pelo formulário (dados fictícios)
A visitante preenche nome Maria, evento Casamento, data 12/12 e uma mensagem curta.
Ao enviar, o navegador monta o texto com os quatro campos e o codifica para URL.
Uma nova aba abre o WhatsApp da marca com a mensagem pronta para envio.
06 / Evidências
Resultados e próximos passos
Resultados e evidências
Próximos passos
Os rótulos do formulário não estão associados aos campos o que prejudica leitores de tela. Próximo passo: associar rótulos e campos.
Próximo passo: Open Graph, sitemap, robots.txt e HTTPS na configuração do servidor.
