LançadoDesenvolvimento web2026

Site Mining Hair

Design e desenvolvimento full-stack de um site de salão em operação. Uma interface guiada por fotografias combina layouts responsivos, galerias animadas e um sistema de conteúdo editável feito com Next.js.

Trabalho para cliente
Site em operação

Experiência do produto

Projetamos e desenvolvemos o site oficial da Mining Hair, agora em operação. A tela inicial usa fotografia de largura total, tipografia marcante e navegação compartilhada. Next.js e React organizam as páginas; Tailwind CSS fornece layouts dimensionados à tela, elementos em camadas e tipografia que se adapta à tela. As capturas abaixo mostram a implementação da apresentação, galeria em movimento, arquivo de imagens e cena interativa de avaliações.

Seção Sobre: retrato, tipografia em camadas e layout fixo — Sobre — Next.js Image exibe o retrato, enquanto Tailwind CSS combina uma área fixa na tela, texto em camadas e tamanhos de fonte responsivos. A imagem e o texto se movem pela seção conforme o visitante rola a página.

Seção Gallery Snippets com cartões de fotos em movimento horizontal — Gallery Snippets — GSAP move faixas duplicadas de cartões em um ciclo contínuo e recalcula a distância quando o layout muda. Transições CSS trocam a foto de cada cartão ao passar o mouse ou receber foco do teclado; selecionar um cartão abre sua categoria de galeria.

Site Mining Hair: grade da galeria e navegação por categorias — Galeria — React gerencia a seleção de categorias e carrega imagens em páginas de 12. Tailwind CSS organiza a grade responsiva, e Next.js Image trabalha com marcadores de carregamento e transições ao passar o mouse.

Seção de avaliações Street Notes com panorama ilustrado e controles de personagens — Street Notes — Uma área de visualização fixa por CSS mantém a cena ilustrada em vista. Imagens de fundo em camadas e botões de personagens formam a interface, com controles para trocar de rua, mover-se pela cena e abrir avaliações.

O que você pode fazer

Início e Sobre: tipografia responsiva, fotografias em camadas e layouts de seções fixas.
Gallery Snippets: ciclo GSAP, transições de imagens e links para galerias filtradas.
Galeria: filtros por categoria, carregamento paginado e grade responsiva de imagens.
Street Notes: panorama ilustrado com botões de personagens e navegação pela cena.
Gerenciamento de conteúdo: edição de texto na própria página, upload de imagens e armazenamento no servidor.

Como funciona

O servidor prepara o conteúdo principal para a renderização inicial e o compartilha com o estado de conteúdo do cliente. Solicitações de edição passam por uma API do servidor, e Prisma persiste o conteúdo das seções em PostgreSQL. Redis armazena resultados de leitura em cache; salvar uma seção invalida o cache relacionado para que as leituras seguintes usem o conteúdo atualizado.

Privacidade e modelo de operação local

A navegação pública e a edição de conteúdo têm responsabilidades separadas. Os controles de edição aparecem no modo administrador, e a API de gravação também verifica a sessão administrativa. A entrega inclui o design para visitantes e o fluxo de conteúdo do operador.

Estado do lançamento

O site está em operação em mininghair.com. As imagens mostradas aqui são capturas do site em funcionamento. Este estudo de caso aborda implementação, arquitetura e design do site.