Para qué sirve el producto
Ayude a los posibles compradores a comprender una cartera de propiedades, explorar desarrollos individuales y realizar consultas con un contexto útil.
A quién va dirigido
Personas explorando residencias y propiedades comerciales en Tetuán y Cabo Negro, además del equipo que recibe sus consultas.
La experiencia del producto
La cartera conduce a distintas experiencias de desarrollo. Los visitantes pueden inspeccionar galerías y un plan maestro basado en monumentos, seleccionar preferencias de residencia y poner en contacto ese contexto. Las rutas francesa e inglesa sirven a la misma cartera subyacente.
La tecnología detrás de la experiencia
El contenido compartido y el enrutamiento respaldan la base del sitio, mientras que los componentes de campaña separados le dan a cada desarrollo principal su propia composición. Los medios responsivos y las películas bajo demanda gestionan el peso visual. La validación, los registros de consultas privadas y los recibos respaldan el flujo de contacto; los redireccionamientos y los metadatos conectan la reconstrucción con URL heredadas conocidas.
Una cartera inmobiliaria convertida en una experiencia digital conectada.
Más allá de un cambio visual
El encargo de Moussa Real Estate fue una renovación completa, definida tras seis meses de planificación. El sitio debe presentar la empresa, diferenciar sus promociones y llevar al comprador del interés a una consulta útil. No basta con una nueva portada: contenido, navegación, inmuebles, medios y gestión de consultas deben funcionar juntos.
La reconstrucción local documenta 16 páginas en francés e inglés: 32 combinaciones de página e idioma. Incluye inicio, cartera, siete promociones, empresa, contacto, locales comerciales, visitas virtuales y páginas legales. Esta amplitud exige coherencia, sin quitar a las promociones principales su carácter propio.
Una base común, experiencias inmobiliarias distintas
La arquitectura utiliza Next.js, React y TypeScript, con contenido de sitio compartido y composiciones de campaña separadas. Metropolis, River Residences y L'Olivier tienen distintos tratamientos de color, jerarquía, diseño y movimiento. Los desarrollos de Amina siguen siendo accesibles a través de la cartera compartida en lugar de perderse detrás de las campañas emblemáticas.
Separar el contenido compartido de la presentación de la campaña permite que el sitio mantenga una navegación y una estructura de lenguaje coherentes, al mismo tiempo que brinda a cada desarrollo una historia visual más específica. El modelo de contenido contiene datos del proyecto, copia bilingüe y detalles de contacto; Los módulos de campaña controlan los capítulos y las interacciones que hacen que cada página sea diferente.
La gestión de idiomas forma parte de esta base. El francés conserva las URL raíz y el inglés usa /en. El árabe espera contenido revisado. Así, el sitio ofrece los idiomas documentados sin presentar una traducción sin revisar como una experiencia terminada.
Una exploración interactiva
Metropolis incluye un plan maestro ilustrado con puntos de referencia seleccionables y un visor ampliado. Los visitantes pueden inspeccionar la imagen mediante controles de zoom, panorámica y reinicio, mientras que los usuarios de dispositivos móviles tienen grandes botones de referencia debajo. El plan maestro es una ilustración arquitectónica rasterizada con navegación interactiva, no un modelo 3D orbitable ni un estudio certificado.
La galería de River trata la navegación como parte de la experiencia del navegador. Al seleccionar una imagen se actualiza el estado de la URL numerada, la acción Atrás restaura la imagen anterior y Escape cierra el cuadro de diálogo. Eso convierte una galería de una superposición aislada en un viaje que se puede volver a visitar y navegar de manera predecible.
Estas interacciones también deben ser accesibles. Las comprobaciones documentadas cubren el cierre de galerías con teclado, la recuperación del foco y la selección de puntos en móvil. Estos detalles permiten usar la experiencia con distintos métodos de entrada y tamaños de pantalla.
Del interés a una consulta con contexto
El viaje de contacto lleva el contexto hacia adelante. Un control de preferencia de residencia puede enviar el desarrollo seleccionado y la preferencia de dormitorio al formulario de consulta, reduciendo la cantidad que el visitante tiene que explicar nuevamente. Las alternativas de teléfono directo, correo electrónico y WhatsApp siguen disponibles junto con el formulario.
El formulario valida los datos en cliente y servidor, guarda un registro privado y devuelve un acuse de recibo. La versión local incluye un buzón de consultas de solo lectura, fuera de los recursos públicos. Durante las verificaciones documentadas se envió y comprobó una consulta identificada como prueba.
Este mecanismo de recepción funciona localmente. El correo automático y una conexión real con CRM no se presentan como integraciones completadas. La puesta en producción requiere almacenamiento privado persistente y configuración adecuada. El estudio distingue lo implementado de los servicios pendientes.
Medios, velocidad y animación
La narración de propiedades se basa en imágenes y películas de gran tamaño, por lo que la entrega de activos es una preocupación de ingeniería desde el principio. La reconstrucción utiliza derivados de imágenes responsivos, dimensiones de imagen explícitas, carga prioritaria para imágenes destacadas y carga diferida para medios secundarios. Las películas se cargan a pedido y la página de inicio móvil comienza con un retrato en lugar de cargar automáticamente una película de fondo.
La implementación también utiliza tipografía autohospedada, respaldos de movimiento reducido y un bucle de animación controlado por la visibilidad. La intención es preservar la atmósfera del desarrollo sin tener que descargar cada dispositivo y animar todas las imágenes a la vez.
El informe Lighthouse local del 17 de septiembre registra puntuaciones móviles de 88 a 93 en cuatro páginas representativas, sin desplazamiento de diseño medido. Son datos históricos de laboratorio, no mediciones actuales de usuarios ni garantías de velocidad en producción. También identifica mejoras pendientes en carga móvil y compresión de imágenes.
Renovar el sitio conservando sus URL
El trabajo de migración asigna rutas heredadas conocidas e ID de páginas de WordPress a destinos de reemplazo. Las páginas en francés e inglés tienen URL canónicas y idiomas alternativos, además de metadatos, tarjetas sociales, datos estructurados, un mapa del sitio y manejo de robots. Las rutas desconocidas devuelven una respuesta 404 adecuada.
Las comprobaciones de redireccionamiento registradas cubren seis rutas heredadas y una ID representativa de WordPress. Esta es una superficie de migración definida, no una afirmación de que se hayan descubierto todas las URL entrantes históricas. Una migración de producción aún necesita tráfico real o exportaciones de Search Console para identificar alias adicionales y una verificación posterior a la implementación del host canónico y las redirecciones.
Proceso de desarrollo y verificaciones
Seis meses de planificación definieron la dirección del sitio. La implementación la lleva a contenidos, rutas compartidas, páginas por promoción, exploración interactiva, consultas y migración. Diseño y pruebas se encuentran en el navegador: cada página debe comunicar bien, traducirse, adaptarse al móvil y funcionar con teclado. Los seis meses corresponden a planificación, no a una duración de programación medida.
El registro de control de calidad del 17 de septiembre informa que pasó las comprobaciones de producción y TypeScript, dos pruebas de consulta y un barrido HTTP que cubre 32 páginas, 68 activos y siete redirecciones representativas. Las páginas principales del proyecto se revisaron en nueve anchos de ventana gráfica de 320 a 1920 píxeles. Una entrada del 18 de septiembre documenta una mayor validación del rediseño de la campaña. Estos son puntos de verificación de verificación con fecha, no una fecha de inicio reconstruida ni una duración total de la construcción.
El alcance entregado que se describe aquí es la reconstrucción local. La implementación pública, la integración real de CRM, las pruebas de dispositivos físicos y los Core Web Vitals de campo quedaron fuera de las comprobaciones completadas documentadas en esos informes. Mantener esos límites claros hace que la historia del desarrollo sea más útil: muestra qué se construyó, qué se probó y qué pertenece a la siguiente etapa de lanzamiento.
