Para que serve o produto
Ajude os potenciais compradores a compreender um portefólio de imóveis, a explorar empreendimentos individuais e a fazer uma consulta com contexto útil.
A quem se destina
Pessoas que exploram residências e imóveis comerciais em Tétouan e Cabo Negro, além da equipa que recebe as suas dúvidas.
A experiência do produto
O portefólio leva a experiências de desenvolvimento distintas. Os visitantes podem inspecionar galerias e um plano diretor baseado em pontos de referência, selecionar as preferências de residência e colocar este contexto em contacto. As rotas francesas e inglesas servem o mesmo portfólio subjacente.
A tecnologia por trás da experiência
O conteúdo e o encaminhamento partilhados sustentam a base do website, enquanto os componentes de campanha separados dão a cada desenvolvimento principal a sua própria composição. Os meios responsivos e os filmes sob demanda gerem o peso visual. A validação, os registos de consultas privadas e os recibos apoiam o fluxo de contacto; redireccionamentos e metadados ligam a reconstrução a URLs legados conhecidos.
Um portefólio imobiliário transformado numa experiência digital coerente.
Para além de um novo visual
O projeto Moussa Real Estate previa uma reformulação completa, definida por seis meses de planeamento. O site deve apresentar a empresa, distinguir os empreendimentos e levar o comprador do interesse a um pedido útil. Uma nova página inicial não basta: conteúdo, navegação, imóveis, multimédia e tratamento dos pedidos devem funcionar em conjunto.
A reconstrução local documenta 16 páginas em francês e inglês: 32 combinações de página e idioma. Inclui início, portefólio, sete empreendimentos, empresa, contacto, espaços comerciais, visitas virtuais e páginas legais. Esta dimensão exige coerência, mantendo o caráter próprio dos principais projetos.
Uma base comum, experiências imobiliárias distintas
A arquitetura utiliza Next.js, React e TypeScript, com conteúdo de site partilhado e composições de campanhas separadas. Metropolis, River Residences e L’Olivier têm cores, hierarquia, layout e tratamentos de movimento distintos. Os desenvolvimentos da Amina continuam acessíveis através do portefólio partilhado, em vez de se perderem nas campanhas emblemáticas.
Separar o conteúdo partilhado da apresentação da campanha permite que o website mantenha uma navegação coerente e uma estrutura linguística, ao mesmo tempo que confere a cada desenvolvimento uma história visual mais específica. O modelo de conteúdo contém factos do projeto, cópia bilingue e dados de contacto; módulos de campanha controlam os capítulos e as interações que tornam cada página diferente.
A gestão de idiomas faz parte da base. O francês mantém os URL principais e o inglês usa /en. O árabe aguarda conteúdo revisto. O site oferece assim os idiomas documentados sem apresentar uma tradução não revista como experiência concluída.
Explorar de forma interativa
Metropolis inclui um masterplan ilustrado com pontos de referência selecionáveis e um visualizador expandido. Os visitantes podem inspecionar a imagem através dos controlos de zoom, panorâmica e reposição, enquanto os utilizadores móveis têm grandes botões de referência por baixo. O masterplan é uma ilustração arquitetónica raster com navegação interativa, não um modelo 3D orbitável ou um levantamento certificado.
A galeria de River trata a navegação como parte da experiência do browser. A seleção de uma imagem atualiza o estado do URL numerado, a ação Voltar restaura a imagem anterior e Escape fecha a caixa de diálogo. Isto transforma uma galeria de uma sobreposição isolada numa viagem que pode ser revisitada e navegada de forma previsível.
Estas interações também devem ser acessíveis. As verificações documentadas abrangem o fecho das galerias pelo teclado, o regresso do foco e a seleção de pontos de referência no telemóvel. Estes detalhes permitem usar a experiência com diferentes métodos de entrada e dimensões de ecrã.
Do interesse a um pedido com contexto
A jornada de contacto leva o contexto para a frente. Um controlo de preferência de residência pode enviar o empreendimento selecionado e a preferência de quarto para o formulário de consulta, reduzindo a quantidade de explicações que o visitante precisa de explicar novamente. As alternativas diretas de telefone, e-mail e WhatsApp permanecem disponíveis juntamente com o formulário.
O formulário valida os dados no navegador e no servidor, guarda um registo privado e devolve uma confirmação. A versão local inclui uma caixa de pedidos só de leitura, fora dos ficheiros públicos. Durante as verificações documentadas foi enviado e confirmado um pedido identificado como teste.
Este mecanismo de receção funciona localmente. E-mail automático e ligação real a CRM não são apresentados como integrações concluídas. A produção exige armazenamento privado persistente e configuração adequada. O estudo distingue o tratamento implementado dos serviços ainda por ligar.
Multimédia, velocidade e animação
A narrativa de propriedades depende de grandes imagens e filmes, pelo que a entrega de ativos é uma preocupação de engenharia desde o início. A reconstrução utiliza imagens derivadas responsivas, dimensões de imagem explícitas, carregamento prioritário para imagens principais e carregamento lento para suportes secundários. Os filmes são carregados a pedido e a página inicial do telemóvel começa com um retrato, em vez de carregar automaticamente um filme de fundo.
A implementação também utiliza tipografia auto-hospedada, substitutos de movimento reduzido e um loop de animação controlado pela visibilidade. A intenção é preservar a atmosfera do empreendimento sem fazer o download de todos os dispositivos e animar todos os visuais de uma só vez.
O relatório Lighthouse local de 17 de setembro regista pontuações móveis de 88 a 93 em quatro páginas representativas, sem alterações de disposição medidas. São resultados históricos de laboratório, não dados atuais de utilizadores nem garantias de velocidade em produção. O relatório identifica também melhorias no carregamento móvel e na compressão de imagens.
Renovar o site preservando os URL
O trabalho de migração mapeia caminhos legados conhecidos e IDs de páginas do WordPress para destinos de substituição. As páginas em francês e inglês têm URLs canónicos e línguas alternativas, bem como metadados, cartões sociais, dados estruturados, mapa do site e manipulação de robôs. As rotas desconhecidas devolvem uma resposta 404 adequada.
As verificações de redireccionamento registadas cobrem seis caminhos legados e um ID representativo do WordPress. Esta é uma superfície de migração definida, não uma afirmação de que todos os URLs de entrada históricos foram descobertos. Uma migração de produção ainda precisa de tráfego real ou exportações do Search Console para identificar aliases adicionais e uma verificação pós-implantação do host canónico e dos redireccionamentos.
Processo de desenvolvimento e verificações
Seis meses de planeamento definiram a direção. A implementação traduz essa direção em conteúdos, rotas comuns, páginas por empreendimento, exploração interativa, pedidos e migração. Design e verificações técnicas encontram-se no navegador: cada página deve funcionar traduzida, no telemóvel e com teclado. Os seis meses referem-se ao planeamento, não a uma duração de programação medida.
O registo de controlo de qualidade de 17 de setembro reporta a aprovação nas verificações de produção e TypeScript, dois testes de consulta e uma verificação HTTP que abrange 32 páginas, 68 ativos e sete redireccionamentos representativos. As páginas principais do projeto foram revistas em nove larguras de janela de visualização de 320 a 1920 pixels. Uma entrada de 18 de setembro documenta uma validação adicional do redesenho da campanha. Estes são pontos de verificação datados, não uma data de início reconstruída ou a duração total da construção.
O âmbito entregue aqui descrito é a reconstrução local. A implantação pública, a integração real de CRM, os testes de dispositivos físicos e os Core Web Vitals de campo estavam fora das verificações concluídas documentadas nestes relatórios. Manter estes limites claros torna a história de desenvolvimento mais útil: mostra o que foi construído, o que foi testado e o que pertence à próxima fase de lançamento.
