Skip to content

Commit 52c7eb3

Browse files
AtlasNexusTechAtlasNexusTech
committed
feat: add animated Seydi property demo
1 parent e03f95d commit 52c7eb3

4 files changed

Lines changed: 636 additions & 0 deletions

File tree

‎demo-seydi-animee/index.html‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!doctype html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
7+
<meta name="referrer" content="strict-origin-when-cross-origin">
8+
<meta http-equiv="X-Content-Type-Options" content="nosniff">
9+
<title>Sélection privée animée — Seydi Dieng | Démo confidentielle</title>
10+
<meta name="description" content="Démonstration confidentielle d’une expérience immobilière digitale personnalisée pour Seydi Dieng.">
11+
<link rel="canonical" href="https://atlasnexus.tech/demo-seydi-animee/">
12+
<link rel="icon" type="image/png" href="/favicon.png">
13+
<link rel="stylesheet" href="../demo-seydi/styles.css?v=1">
14+
<link rel="stylesheet" href="motion.css?v=1">
15+
</head>
16+
<body class="motion-page">
17+
<div class="motion-progress" aria-hidden="true"><span></span></div>
18+
<div class="motion-ambient" aria-hidden="true"><i></i><i></i><i></i></div>
19+
<a class="skip-link" href="#contenu">Aller au contenu</a>
20+
<div class="confidential-bar" role="status">
21+
<span>Prototype privé</span>
22+
<strong>DÉMO CONFIDENTIELLE</strong>
23+
<span>Document non contractuel</span>
24+
</div>
25+
26+
<header class="site-header">
27+
<a class="brand" href="/" aria-label="Atlas Nexus — accueil">
28+
<img src="/atlas-logo.png?v=20260527" alt="" width="52" height="52">
29+
<span><strong>Atlas Nexus</strong><small>Expérience digitale immobilière</small></span>
30+
</a>
31+
<a class="header-contact" href="tel:+337****2435">Échanger avec Seydi</a>
32+
</header>
33+
34+
<main id="contenu">
35+
<section class="intro wrap motion-hero" data-motion-hero aria-labelledby="intro-title">
36+
<div class="intro-copy">
37+
<p class="eyebrow kinetic-kicker">Sélection immobilière personnalisée · version animée</p>
38+
<h1 id="intro-title"><span class="title-line">Deux maisons.</span><br><em class="title-line">Une visite qui commence ici.</em></h1>
39+
<p class="lede">Une présentation digitale claire et immersive pour comparer les essentiels, explorer chaque espace et préparer une visite avec votre conseiller.</p>
40+
<div class="intro-actions" data-reveal>
41+
<a class="button primary" href="#biens">Découvrir les biens</a>
42+
<a class="button ghost" href="tel:+337****2435">07 46 32 24 35</a>
43+
</div>
44+
</div>
45+
<aside class="advisor-card" aria-label="Votre conseiller immobilier">
46+
<span class="advisor-kicker">Votre conseiller</span>
47+
<div class="advisor-monogram" aria-hidden="true">SD</div>
48+
<h2>Seydi Dieng</h2>
49+
<p>Conseiller en immobilier<br>Sixième Avenue Évry</p>
50+
<a href="mailto:evry@sixiemeavenue.com?subject=Demande%20d'information%20immobili%C3%A8re">evry@sixiemeavenue.com</a>
51+
</aside>
52+
<a class="scroll-cue" href="#biens" aria-label="Faire défiler vers les biens"><span></span>Explorer</a>
53+
</section>
54+
55+
<section id="biens" class="property property-light" data-motion-section aria-labelledby="saint-germain-title">
56+
<div class="wrap">
57+
<div class="property-heading" data-reveal>
58+
<div>
59+
<p class="eyebrow">Réf. 4361-SD · Saint-Germain-lès-Corbeil</p>
60+
<h2 id="saint-germain-title">Maison familiale avec jardin</h2>
61+
<p class="property-subtitle">Un intérieur traversant, deux terrasses et un environnement calme à proximité des commodités.</p>
62+
</div>
63+
<div class="price"><span>Prix de présentation</span><strong>265 000 €</strong><small>Honoraires à la charge du vendeur</small></div>
64+
</div>
65+
66+
<div class="facts" data-reveal aria-label="Caractéristiques principales">
67+
<div><strong>83 m²</strong><span>habitables</span></div>
68+
<div><strong>4</strong><span>pièces</span></div>
69+
<div><strong>3</strong><span>chambres</span></div>
70+
<div><strong>151 m²</strong><span>de terrain</span></div>
71+
<div><strong>2</strong><span>terrasses</span></div>
72+
</div>
73+
74+
<button class="photo-button hero-photo" data-parallax type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-01.webp" data-caption="Maison familiale — jardin et entrée à Saint-Germain-lès-Corbeil">
75+
<img class="property-photo" src="../demo-seydi/assets/saint-germain-01.webp" width="1023" height="681" loading="eager" fetchpriority="high" alt="Jardin paysager et entrée de la maison familiale à Saint-Germain-lès-Corbeil">
76+
<span>Voir les 13 photos</span>
77+
</button>
78+
79+
<div class="property-body" data-reveal>
80+
<div class="description">
81+
<p class="eyebrow">Le bien en quelques mots</p>
82+
<h3>Lumineuse, entretenue et prête à vivre</h3>
83+
<p>Cette maison Kaufman &amp; Broad de type Ondine propose un séjour traversant avec cuisine ouverte aménagée et équipée. Deux terrasses prolongent l’espace de vie, dont une exposition sud-ouest avec jardin.</p>
84+
<p>À l’étage : trois chambres, une salle de bains avec WC et des combles aménageables. La toiture a été révisée en 2021, le ballon d’eau chaude date de 2024 et l’installation électrique a été refaite.</p>
85+
<ul class="feature-list">
86+
<li>Jardin clos d’environ 110 m²</li>
87+
<li>Deux terrasses et stationnements extérieurs</li>
88+
<li>Double vitrage PVC et volets aluminium</li>
89+
<li>Cellier, rangements, abri et chalet de jardin</li>
90+
</ul>
91+
</div>
92+
<aside class="energy-card">
93+
<p class="eyebrow">Performance énergétique</p>
94+
<div class="energy-row"><span class="energy d">D</span><div><strong>206 kWh/m²/an</strong><small>Énergie primaire</small></div></div>
95+
<div class="energy-row"><span class="energy b">B</span><div><strong>8 kg CO₂/m²/an</strong><small>Émissions de gaz à effet de serre</small></div></div>
96+
<p class="energy-cost">Dépenses annuelles estimées : <strong>1 610 € à 2 190 €</strong></p>
97+
</aside>
98+
</div>
99+
100+
<div class="gallery" data-stagger aria-label="Galerie de la maison à Saint-Germain-lès-Corbeil">
101+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-02.webp" data-caption="Terrasse et jardin"><img class="property-photo" src="../demo-seydi/assets/saint-germain-02.webp" width="1023" height="681" loading="lazy" alt="Terrasse avec table en bois et jardin bordé de haies"></button>
102+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-03.webp" data-caption="Façade côté jardin"><img class="property-photo" src="../demo-seydi/assets/saint-germain-03.webp" width="1023" height="681" loading="lazy" alt="Façade arrière de la maison et jardin arboré"></button>
103+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-04.webp" data-caption="Séjour ouvert aménagé"><img class="property-photo" src="../demo-seydi/assets/saint-germain-04.webp" width="1023" height="681" loading="lazy" alt="Séjour traversant aménagé avec cuisine ouverte"></button>
104+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-05.webp" data-caption="Séjour et espace repas"><img class="property-photo" src="../demo-seydi/assets/saint-germain-05.webp" width="1023" height="681" loading="lazy" alt="Séjour avec canapé, table basse et espace repas"></button>
105+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-06.webp" data-caption="Séjour non meublé"><img class="property-photo" src="../demo-seydi/assets/saint-germain-06.webp" width="1023" height="681" loading="lazy" alt="Séjour lumineux non meublé avec cuisine ouverte"></button>
106+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-07.webp" data-caption="Cuisine équipée"><img class="property-photo" src="../demo-seydi/assets/saint-germain-07.webp" width="1023" height="681" loading="lazy" alt="Cuisine blanche équipée vue depuis le plan de travail"></button>
107+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-08.webp" data-caption="Cuisine ouverte"><img class="property-photo" src="../demo-seydi/assets/saint-germain-08.webp" width="1023" height="681" loading="lazy" alt="Cuisine ouverte blanche avec fenêtre et rangements"></button>
108+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-09.webp" data-caption="Première chambre"><img class="property-photo" src="../demo-seydi/assets/saint-germain-09.webp" width="1023" height="681" loading="lazy" alt="Chambre d’enfant avec mur bleu et parquet clair"></button>
109+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-10.webp" data-caption="Deuxième chambre"><img class="property-photo" src="../demo-seydi/assets/saint-germain-10.webp" width="1023" height="681" loading="lazy" alt="Chambre avec parquet, bibliothèque et fenêtre"></button>
110+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-11.webp" data-caption="Troisième chambre"><img class="property-photo" src="../demo-seydi/assets/saint-germain-11.webp" width="1023" height="681" loading="lazy" alt="Chambre principale avec lit double et rideaux rouges"></button>
111+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-12.webp" data-caption="Salle de bains"><img class="property-photo" src="../demo-seydi/assets/saint-germain-12.webp" width="1023" height="681" loading="lazy" alt="Salle de bains avec meuble vasque, WC et baignoire"></button>
112+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/saint-germain-13.webp" data-caption="Palier"><img class="property-photo" src="../demo-seydi/assets/saint-germain-13.webp" width="1023" height="681" loading="lazy" alt="Palier à l’étage desservant les chambres"></button>
113+
</div>
114+
</div>
115+
</section>
116+
117+
<section class="property property-dark" data-motion-section aria-labelledby="corbeil-title">
118+
<div class="wrap">
119+
<div class="property-heading" data-reveal>
120+
<div>
121+
<p class="eyebrow">Exclusivité · Réf. 4057-TF · Corbeil-Essonnes</p>
122+
<h2 id="corbeil-title">Maison de ville proche du RER D</h2>
123+
<p class="property-subtitle">Une cour privative, un séjour généreux et un accès rapide aux transports et aux grands axes.</p>
124+
</div>
125+
<div class="price"><span>Prix de présentation</span><strong>179 900 €</strong><small>Honoraires à la charge du vendeur</small></div>
126+
</div>
127+
128+
<div class="facts" data-reveal aria-label="Caractéristiques principales">
129+
<div><strong>69,76 m²</strong><span>habitables</span></div>
130+
<div><strong>3</strong><span>pièces</span></div>
131+
<div><strong>2</strong><span>chambres</span></div>
132+
<div><strong>59 m²</strong><span>de terrain</span></div>
133+
<div><strong>650 m</strong><span>du RER D</span></div>
134+
</div>
135+
136+
<button class="photo-button hero-photo" data-parallax type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-01.webp" data-caption="Maison de ville avec cour à Corbeil-Essonnes">
137+
<img class="property-photo" src="../demo-seydi/assets/corbeil-01.webp" width="1023" height="682" loading="eager" alt="Cour pavée et façade de la maison de ville à Corbeil-Essonnes">
138+
<span>Voir les 8 photos</span>
139+
</button>
140+
141+
<div class="property-body" data-reveal>
142+
<div class="description">
143+
<p class="eyebrow">Le bien en quelques mots</p>
144+
<h3>Une maison compacte et bien connectée</h3>
145+
<p>Cette maison de ville propose un séjour de 32,51 m² avec cuisine ouverte équipée, une salle d’eau avec WC et deux chambres à l’étage. Sa cour permet le stationnement d’un véhicule.</p>
146+
<p>La gare Essonnes–Robinson du RER D se situe à environ 650 mètres à pied. L’accès à l’A6 et aux axes principaux facilite également les déplacements en voiture.</p>
147+
<ul class="feature-list">
148+
<li>Cour privative avec stationnement</li>
149+
<li>Séjour et cuisine ouverte de plus de 32 m²</li>
150+
<li>Deux chambres à l’étage</li>
151+
<li>Fenêtres bois double vitrage</li>
152+
</ul>
153+
</div>
154+
<aside class="energy-card warning">
155+
<p class="eyebrow">Performance énergétique</p>
156+
<div class="energy-row"><span class="energy f">F</span><div><strong>348 kWh/m²/an</strong><small>Énergie primaire</small></div></div>
157+
<div class="energy-row"><span class="energy c">C</span><div><strong>14 kg CO₂/m²/an</strong><small>Émissions de gaz à effet de serre</small></div></div>
158+
<p class="energy-cost"><strong>Logement à consommation énergétique excessive.</strong><br>Dépenses annuelles estimées : 1 700 € à 2 310 €.</p>
159+
</aside>
160+
</div>
161+
162+
<div class="gallery gallery-eight" data-stagger aria-label="Galerie de la maison à Corbeil-Essonnes">
163+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-02.webp" data-caption="Séjour et salle à manger"><img class="property-photo" src="../demo-seydi/assets/corbeil-02.webp" width="1023" height="682" loading="lazy" alt="Séjour carrelé avec salle à manger et cuisine ouverte"></button>
164+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-03.webp" data-caption="Pièce de vie"><img class="property-photo" src="../demo-seydi/assets/corbeil-03.webp" width="1023" height="682" loading="lazy" alt="Pièce de vie avec escalier et espace repas"></button>
165+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-04.webp" data-caption="Cuisine équipée"><img class="property-photo" src="../demo-seydi/assets/corbeil-04.webp" width="1023" height="682" loading="lazy" alt="Cuisine équipée verte et blanche avec plan de travail"></button>
166+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-05.webp" data-caption="Cuisine ouverte"><img class="property-photo" src="../demo-seydi/assets/corbeil-05.webp" width="1023" height="682" loading="lazy" alt="Cuisine ouverte avec comptoir et porte sur la cour"></button>
167+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-06.webp" data-caption="Première chambre"><img class="property-photo" src="../demo-seydi/assets/corbeil-06.webp" width="1023" height="682" loading="lazy" alt="Chambre mansardée avec lit double et rangements bas"></button>
168+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-07.webp" data-caption="Deuxième chambre"><img class="property-photo" src="../demo-seydi/assets/corbeil-07.webp" width="1023" height="682" loading="lazy" alt="Seconde chambre mansardée avec fenêtre de toit"></button>
169+
<button class="photo-button" type="button" data-lightbox data-src="../demo-seydi/assets/corbeil-08.webp" data-caption="Salle d’eau"><img class="property-photo" src="../demo-seydi/assets/corbeil-08.webp" width="1023" height="682" loading="lazy" alt="Salle d’eau avec douche, meuble vasque et WC"></button>
170+
</div>
171+
</div>
172+
</section>
173+
174+
<section class="contact-section" data-motion-section>
175+
<div class="wrap contact-card" data-reveal>
176+
<div>
177+
<p class="eyebrow">Une question, une visite ?</p>
178+
<h2>Parlons de votre projet.</h2>
179+
<p>Seydi vous accompagne pour approfondir un bien, vérifier les informations et organiser une visite.</p>
180+
</div>
181+
<div class="contact-actions">
182+
<a class="button primary" href="tel:+337****2435">Appeler Seydi</a>
183+
<a class="button ghost" href="mailto:evry@sixiemeavenue.com?subject=Demande%20de%20visite">Envoyer un e-mail</a>
184+
</div>
185+
</div>
186+
</section>
187+
</main>
188+
189+
<footer>
190+
<div class="wrap footer-grid">
191+
<div><strong>Seydi Dieng</strong><br>Sixième Avenue Évry · 01 84 18 11 11</div>
192+
<div>Les informations sur les risques auxquels ces biens sont exposés sont disponibles sur <a href="https://www.georisques.gouv.fr/" rel="noopener noreferrer">Géorisques</a>.</div>
193+
<div><strong>Document non contractuel.</strong> Démonstration confidentielle réalisée à partir des éléments fournis. Prix et informations à confirmer auprès du conseiller.</div>
194+
</div>
195+
</footer>
196+
197+
<dialog class="lightbox" aria-label="Visionneuse de photos">
198+
<button class="lightbox-close" type="button" aria-label="Fermer la visionneuse">×</button>
199+
<button class="lightbox-nav lightbox-prev" type="button" aria-label="Photo précédente">‹</button>
200+
<figure><img src="" alt=""><figcaption></figcaption></figure>
201+
<button class="lightbox-nav lightbox-next" type="button" aria-label="Photo suivante">›</button>
202+
</dialog>
203+
204+
<script src="../demo-seydi/script.js?v=1" defer></script>
205+
<script src="motion.js?v=1" defer></script>
206+
</body>
207+
</html>

0 commit comments

Comments
 (0)