Démo en direct : https://estatex-realestate.netlify.app/

La plupart des modèles immobiliers ressemblent à un tableur avec des photos : une grille de cartes, une étiquette de prix, un bouton « contacter l'agent », répétés cent fois. ESTATEX abandonne ce format de catalogue. Il est construit autour d'une seule idée : une maison doit être un lieu dont on se souvient, pas un article devant lequel on fait défiler. Chaque écran, du hero plein écran à la galerie défilante pièce par pièce sur la page d'un bien, est rythmé et composé comme une double page de magazine, si bien qu'une annonce à 2 millions de dollars (ou toute l'image d'une agence de prestige) paraît soignée et haut de gamme plutôt que générique et standardisée. Si vous avez déjà ouvert un site immobilier sans rien ressentir, voici la solution.

La page d'accueil s'ouvre sur un hero cinématographique, puis enchaîne avec un bien à la une, un sélecteur de catégories « Explorer par ressenti » avec des transitions directionnelles au survol, une grille éditoriale asymétrique de biens, une section sur la philosophie de la marque, une présentation des agents et un appel à l'action final : un véritable récit, pas un empilement de widgets. La page de la collection de biens propose recherche et filtres en direct avec pagination fluide et favoris enregistrés, de sorte que la navigation reste réactive même si tout s'exécute côté client. La pièce maîtresse est la page de détail du bien : une galerie architecturale pilotée par le défilement qui parcourt chaque pièce au fil du scroll, associée à un plan interactif, une carte du quartier, une section des équipements, un profil d'agent et un appel à l'action de contact. Des pages dédiées aux emplacements, aux agents, à propos et au contact complètent le site, toutes partageant le même système de design, et chaque état est géré avec soin (résultats de recherche vides, aucun favori enregistré, une page 404 personnalisée), pas seulement le cas idéal.

Rien ici n'exige de toucher à un backend. Tout le contenu (biens, agents, emplacements, catégories) se trouve dans de simples fichiers de données typés sous src/data/, ce qui fait qu'ajouter une annonce ou changer la biographie d'un agent est un simple copier-coller, et non une intégration de CMS. Les images passent par un simple générateur d'URL qui fonctionne avec Unsplash dès l'installation ou avec vos propres photos hébergées. Les couleurs, les polices et les durées d'animation sont des design tokens centralisés : restyler tout le site (couleur d'accentuation, typographie, sensation de mouvement) revient à modifier quelques fichiers, et non à fouiller des centaines de composants. Un guide client complet explique pas à pas comment modifier les textes, images, la navigation, les couleurs, les polices, les animations, les formulaires et l'image de marque.

Conçu avec Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, Framer Motion, GSAP avec ScrollTrigger, défilement fluide Lenis, Leaflet avec les tuiles gratuites d'OpenStreetMap, et React Hook Form avec validation Zod. Le formulaire de contact est entièrement validé, avec des états de chargement et de succès, prêt à être relié au backend de formulaires de votre choix. Entièrement responsive du grand écran de bureau au mobile, avec toutes les animations respectant prefers-reduced-motion, un balisage sémantique et une navigation compatible clavier partout, et des métadonnées SEO (Open Graph, sitemap, robots.txt) déjà en place. Ce que vous obtenez : le code source Next.js complet, le guide client et une licence pour un seul projet permettant de déployer un site en ligne, prêt à être déployé sur Netlify ou Vercel sans aucune configuration de serveur.