QUINTA DOS ESPIGUEIROS
Um website em cinco idiomas para uma propriedade privada no Douro, escrito quase todo à mão: cerca de 5.900 linhas de código próprio e apenas duas dependências.
Visitar website↗
A MIRAE construiu o website da Quinta dos Espigueiros praticamente do zero: cinco idiomas servidos por um motor de tradução próprio, cinco casas com galeria e registo AL, carrosséis feitos à mão e pedido de reserva direto, tudo com apenas duas dependências no projeto.
O briefing
A Quinta dos Espigueiros é uma propriedade privada à beira do Douro, com cinco casas para receber. O site tinha de as apresentar uma a uma, com área, capacidade, comodidades e o número de registo AL de cada uma, e de falar a língua de quem chega de fora.
O modelo é de pedido, não de compra: sem checkout nem calendário de disponibilidade, o visitante envia um pedido de reserva de nove campos ou liga diretamente, e a equipa responde. Uma decisão que respeita o caráter reservado da propriedade.
Abordagem de design
Cinco casas, cinco galerias
Cada casa tem a sua ficha e a sua galeria: 47 fotografias distribuídas por cinco lightboxes feitos de raiz, com setas, dots, navegação por teclado e bloqueio de scroll. Ao lado, área, quartos, capacidade, comodidades e o registo AL, como manda a lei portuguesa.
Acessível em cada detalhe
HTML semântico, hierarquia de títulos coerente, aria-label em todos os controlos por ícone, tabs com os papéis certos, foco visível e teclado a funcionar em cada cartão: o site é navegável por quem não usa rato.
Desenvolvimento
Duas dependências, e mais nada
O projeto tem apenas react e react-dom: sem bibliotecas de UI, de animação, de carrossel, de traduções ou de formulários. Cerca de 5.900 linhas de código próprio, doze componentes e treze folhas de estilo, tudo escrito à medida do sítio.
Cinco idiomas, motor próprio
Português, inglês, francês, neerlandês e espanhol, servidos por um motor de tradução escrito em cerca de 47 linhas: contexto de React, chaves por notação de ponto, preferência guardada e idioma do documento sempre atualizado. São cerca de 810 linhas de tradução, com as descrições completas das casas.
Carrosséis feitos à medida
Cada carrossel tem a lógica do seu lugar: o hero roda quatro imagens, os testemunhos mudam a cada oito segundos com contador e proteção contra duplo clique, e a galeria geral arrasta-se com o rato ou o dedo, com barra de progresso proporcional.
Pedir reserva, ou ligar
Um formulário de pedido com nove campos, com estados de envio e sucesso e um email formatado em tabela para a equipa, e um botão de reserva que abre telefone e WhatsApp, reutilizado em cinco pontos do site a partir de um único componente.
Continua a explorar o nosso trabalho
Diga-nos o que está a construir
Fale-nos dos seus objetivos e respondemos em 24 horas com um âmbito claro e os próximos passos.