Waar het product voor bedoeld is
Help potentiële kopers een vastgoedportefeuille te begrijpen, individuele ontwikkelingen te verkennen en een onderzoek in te stellen met nuttige context.
Voor wie het bedoeld is
Mensen die woningen en commercieel vastgoed in Tétouan en Cabo Negro verkennen, plus het team dat hun vragen ontvangt.
De productervaring
Het portfolio leidt tot verschillende ontwikkelingservaringen. Bezoekers kunnen galerijen en een op monumenten gebaseerd masterplan inspecteren, woonvoorkeuren selecteren en die context in contact brengen. Franse en Engelse routes bedienen dezelfde onderliggende portefeuille.
De technologie achter de ervaring
Gedeelde inhoud en routing ondersteunen het fundament van de site, terwijl afzonderlijke campagnecomponenten elke hoofdontwikkeling zijn eigen samenstelling geven. Responsieve media en on-demandfilms beheersen het visuele gewicht. Validatie, gegevens over privéonderzoek en ontvangstbewijzen ondersteunen de contactstroom; omleidingen en metagegevens verbinden het opnieuw opbouwen met bekende oudere URL's.
Een vastgoedportfolio opgebouwd als een samenhangende digitale ervaring.
Meer dan een visuele vernieuwing
De opdracht voor Moussa Real Estate was een volledige herbouw, gevormd door zes maanden planning. De site moet het bedrijf introduceren, ontwikkelingen onderscheiden en kopers van interesse naar een nuttige aanvraag begeleiden. Een nieuwe homepage volstaat niet: content, navigatie, vastgoedpresentatie, media en aanvraagverwerking moeten samenwerken.
De lokale herbouw omvat 16 pagina’s in Frans en Engels: 32 combinaties van pagina en taal. De scope bevat home, portfolio, zeven ontwikkelingen, bedrijfsinformatie, contact, commerciële ruimtes, virtuele bezoeken en beleidspagina’s. Dat vraagt om samenhang, met ruimte voor het eigen karakter van de hoofdprojecten.
Eén basis, verschillende vastgoedervaringen
De architectuur maakt gebruik van Next.js, React en TypeScript, met gedeelde site-inhoud en afzonderlijke campagnesamenstellingen. Metropolis, River Residences en L’Olivier hebben verschillende kleur-, hiërarchie-, lay-out- en bewegingsbehandelingen. De Amina-ontwikkelingen blijven toegankelijk via het gedeelde portfolio en gaan niet verloren achter de vlaggenschipcampagnes.
Door de gedeelde inhoud te scheiden van de campagnepresentatie kan de site een samenhangende navigatie- en taalstructuur behouden, terwijl elke ontwikkeling een specifieker visueel verhaal krijgt. Het inhoudsmodel bevat projectfeiten, tweetalige teksten en contactgegevens; campagnemodules bepalen de hoofdstukken en interacties die elke pagina anders maken.
Taalbeheer hoort bij die basis. Frans behoudt de basis-URL’s en Engels gebruikt /en. Arabisch wacht op gecontroleerde content. De site ondersteunt zo de gedocumenteerde talen zonder een ongecontroleerde vertaling als afgeronde klantervaring te presenteren.
Interactief verkennen
Metropolis bevat een geïllustreerd masterplan met selecteerbare oriëntatiepunten en een uitgebreide viewer. Bezoekers kunnen het beeld inspecteren via zoom-, pan- en reset-knoppen, terwijl mobiele gebruikers daaronder grote oriëntatieknoppen hebben. Het masterplan is een architectonische rasterillustratie met interactieve navigatie, geen orbiteerbaar 3D-model of een gecertificeerd onderzoek.
De galerij van River beschouwt navigatie als onderdeel van de browserervaring. Als u een afbeelding selecteert, wordt de genummerde URL-status bijgewerkt, herstelt de actie Terug de vorige afbeelding en sluit Escape het dialoogvenster. Dat verandert een galerij van een geïsoleerde overlay in een reis die voorspelbaar opnieuw kan worden bezocht en genavigeerd.
Deze interacties moeten ook toegankelijk blijven. De gedocumenteerde controles omvatten het sluiten van galerijen met het toetsenbord, focusterugkeer en het kiezen van herkenningspunten op mobiel. Zo werkt de ervaring met verschillende invoermethoden en schermformaten.
Van interesse naar een gerichte aanvraag
De contactreis brengt context voort. Via een woningvoorkeurcontrole kan de geselecteerde bebouwing en slaapkamervoorkeur in het aanvraagformulier worden opgenomen, waardoor de bezoeker minder hoeft uit te leggen. Directe telefoon-, e-mail- en WhatsApp-alternatieven blijven naast het formulier beschikbaar.
Het formulier valideert gegevens in de browser en op de server, slaat een privérecord op en geeft een ontvangstbevestiging. De lokale build bevat een alleen-lezen aanvraaginbox buiten publieke bestanden. Tijdens de gedocumenteerde controles is een gemarkeerde testaanvraag verstuurd en in die inbox gecontroleerd.
Dit ontvangstmechanisme werkt lokaal. Automatische e-mail en een live CRM-koppeling worden niet als afgeronde integraties gepresenteerd. Productie vereist blijvende privéopslag en de juiste configuratie. De studie onderscheidt geïmplementeerde aanvraagverwerking van nog te koppelen diensten.
Media, snelheid en animatie
Het vertellen van vastgoedverhalen is afhankelijk van groot beeldmateriaal en film, dus de levering van activa is vanaf het begin een technische zorg. De herbouw maakt gebruik van responsieve afbeeldingsderivaten, expliciete afbeeldingsafmetingen, laden met prioriteit voor heldenafbeeldingen en lui laden voor secundaire media. Films worden op verzoek geladen en de mobiele startpagina begint met een stilstaand portret in plaats van automatisch een achtergrondfilm te laden.
De implementatie maakt ook gebruik van zelfgehoste typografie, fallbacks met verminderde beweging en een animatielus die wordt afgesloten door zichtbaarheid. De bedoeling is om de sfeer van de ontwikkeling te behouden zonder dat elk apparaat elk beeld in één keer downloadt en animeert.
Het lokale Lighthouse-rapport van 17 september toont mobiele prestatiescores van 88 tot 93 op vier representatieve pagina’s, zonder gemeten layoutverschuiving. Dit zijn historische laboratoriummetingen, geen actuele gebruikersdata of garanties voor productiesnelheid. Het rapport noemt ook verbeterkansen voor mobiel laden en beeldcompressie.
De website vernieuwen met behoud van URL’s
Het migratiewerk wijst bekende oude paden en WordPress-pagina-ID's toe aan vervangende bestemmingen. Franse en Engelse pagina's hebben canonieke URL's en taalalternatieven, naast metadata, sociale kaarten, gestructureerde gegevens, een sitemap en robots. Onbekende routes retourneren een correct 404-antwoord.
De geregistreerde omleidingscontroles hebben betrekking op zes verouderde paden en een representatieve WordPress-ID. Dit is een gedefinieerd migratieoppervlak, geen bewering dat elke historische inkomende URL is ontdekt. Voor een productiemigratie is nog steeds echt verkeer of Search Console-exports nodig om extra aliassen te identificeren en een controle na de implementatie van de canonieke host en omleidingen.
Ontwikkelproces en controlemomenten
Zes maanden planning bepaalden de richting. De implementatie vertaalt die naar contentorganisatie, gedeelde routes, ontwikkelingsspecifieke pagina’s, interactieve verkenning, aanvragen en migratie. Visuele verfijning en techniek worden samen in de browser beoordeeld: elke pagina moet ook vertaald, op mobiel en met het toetsenbord helder werken. De zes maanden gaan over planning, niet over een gemeten programmeerduur.
Het QA-record van 17 september meldt dat het de productie- en TypeScript-controles, twee onderzoekstests en een HTTP-sweep heeft doorstaan die 32 pagina's, 68 items en zeven representatieve omleidingen omvat. De belangrijkste projectpagina's werden beoordeeld over negen viewportbreedtes van 320 tot 1920 pixels. Een inzending van 18 september documenteert verdere validatie van het herontwerp van de campagne. Dit zijn gedateerde verificatiecontrolepunten, geen gereconstrueerde startdatum of totale bouwduur.
De hier beschreven geleverde omvang is de lokale herbouw. Publieke implementatie, echte CRM-integratie, testen van fysieke apparaten en veld-Core Web Vitals vielen buiten de voltooide controles die in die rapporten werden gedocumenteerd. Door die grenzen duidelijk te houden, wordt het ontwikkelingsverhaal bruikbaarder: het laat zien wat er is gebouwd, wat is getest en wat tot de volgende releasefase behoort.
