From 1d83a1bfcdc2d5eec5e5b020c8ecf92264fabf97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Math=C3=ABo=20SALAVIN--MOURA?= Date: Fri, 12 Dec 2025 19:58:37 +0100 Subject: [PATCH] Upload files to "/" --- index.html | 305 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 102 ++++++++++++++++++ style.css | 200 +++++++++++++++++++++++++++++++++++ 3 files changed, 607 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..23dbfc5 --- /dev/null +++ b/index.html @@ -0,0 +1,305 @@ + + + + + + ImmersiHome — Visites VR Immobilières + + + + + + + + + + + +
+ + +
+
+ +
+

Visitez votre futur logement
comme si vous y étiez.

+ +

+ ImmersiHome révolutionne l’immobilier : explorez appartements, maisons et locaux + en immersion grâce à notre casque VR et notre plateforme intelligente. +

+ +
+ + Voir les tarifs +
+ +
    +
  • ✔ Pour agences & promoteurs
    • +
  • ✔ Scans 3D HD & navigation 360°
    • +
  • ✔ Réduction des visites inutiles
    • +
+
+ +
+
+ Visite VR ImmersiHome +
+ +
+
+ Casque ImmersiHome + Casque ImmersiHome +
+ +
+ +
+
+
+ +
+
+ + +
+
+

Fonctionnalités clés

+ +
+

Scans 3D HD

Modélisation fidèle des volumes et textures.

+

Navigation 360° & Mesures

Déplacement libre, mesures instantanées.

+

Aménagement Virtuel

Testez meubles et couleurs en quelques clics.

+
+
+
+ + +
+
+
+

Une solution pensée pour le marché immobilier

+

Pour agences, promoteurs et particuliers : réduisez les visites inutiles et augmentez le taux de conversion.

+ +
    +
  • Plug & Play : casque livré configuré + onboarding.
    • +
  • Intégration : export facile vers SeLoger, LeBonCoin et sites d'agences.
    • +
  • Analytics : suivi des visites & points d’intérêt.
    • +
+ + Demander un devis +
+ +
+

Cas d'usage

+
    +
  1. Showroom VR en vitrine pour attirer des prospects
    2. +
  2. Ventes sur plan immersives pour promoteurs
    3. +
  3. Tri rapide des biens pour les particuliers
    4. +
+
+
+
+ + +
+
+

Tarifs & offres

+

Formules adaptées aux particuliers, pros et agences.

+ +
+
+

Découverte

+
19€/mois
+

Accès à la plateforme — 3 visites/mois

+ Commander +
+ +
+

Pro

+
79€/mois
+

Accès illimité + casque en location — analytics

+ Commander +
+ +
+

Agence

+
149€/mois
+

Pack 5 casques — interface multi-utilisateurs

+ Commander +
+
+
+
+ + +
+
+

Avis & témoignages

+
+
+ « Grâce à ImmersiHome, nous avons divisé par 3 le nombre de visites inutiles. » + — Agence Dupont +
+
+ « Vente sur plan accélérée : les clients comprennent mieux l'espace. » + — Promoteur Nova +
+
+
+
+ + +
+
+

Qui sommes-nous ?

+

Équipe tech & immobilier — CV imprimables en HTML/PDF.

+ +
+

Mathëo Salavin-Moura

Co-fondateur — Produit

Voir CV
+

Jordan Aristil

Co-fondateur — Business

Voir CV
+

Kelyan Pierre-Louis

Co-fondateur — Tech

Voir CV
+

Evan Gilloppé

Designer 3D & VR

Voir CV
+
+
+
+ + +
+
+

FAQ & Storytelling

+
+
Comment se passe le scan 3D ?

Nous scannons le bien en 30–60 minutes selon la surface et livrons la visite sous 48h.

+
Le casque est-il fourni ?

Oui pour les formules Pro et Agence — location possible autrement.

+
+ +
+

Notre mission

+

Rendre les visites plus intelligentes, réduire les déplacements et améliorer la transparence.

+
+
+
+ + +
+
+
+

Contact & Démo

+

Remplissez le formulaire — réponse sous 48h.

+ +
+
+ + +
+ + + + + + + +
+ + +
+ +
+
+ + +
+
+ +
+ + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d093e4a --- /dev/null +++ b/script.js @@ -0,0 +1,102 @@ +// ---------- MOBILE MENU TOGGLE ---------- +const burger = document.getElementById('burger'); +const nav = document.querySelector('.nav'); +burger && burger.addEventListener('click', () => { + const opened = burger.getAttribute('aria-expanded') === 'true'; + burger.setAttribute('aria-expanded', String(!opened)); + nav.classList.toggle('open'); +}); + +// ---------- SMOOTH SCROLL ---------- +document.querySelectorAll('a[href^="#"], button[data-scroll]').forEach(el => { + el.addEventListener('click', function(e){ + const selector = this.getAttribute('href') || this.dataset.scroll; + if(!selector) return; + const target = document.querySelector(selector); + if(target){ + e.preventDefault(); + target.scrollIntoView({behavior:'smooth', block:'start'}); + } + }); +}); + +// ---------- TO TOP BUTTON ---------- +const toTop = document.getElementById('toTop'); +window.addEventListener('scroll', () => { + toTop.style.display = window.scrollY > 400 ? 'block' : 'none'; +}); +toTop && toTop.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'})); + +// ---------- CONTACT FORM (SIMULATION) ---------- +const contactForm = document.getElementById('contactForm'); +contactForm && contactForm.addEventListener('submit', e => { + e.preventDefault(); + alert('Merci — votre demande a été enregistrée (simulation). Nous vous contacterons sous 48h.'); + contactForm.reset(); +}); + +// ---------- MAILTO QUICK SEND ---------- +const mailtoBtn = document.getElementById('mailtoBtn'); +mailtoBtn && mailtoBtn.addEventListener('click', () => { + const name = encodeURIComponent(document.getElementById('name')?.value || '—'); + const email = encodeURIComponent(document.getElementById('email')?.value || '—'); + const phone = encodeURIComponent(document.getElementById('phone')?.value || '—'); + const message = encodeURIComponent(document.getElementById('message')?.value || '—'); + const subject = encodeURIComponent('Demande ImmersiHome — ' + name); + const body = encodeURIComponent(`Nom: ${name}\nEmail: ${email}\nTél: ${phone}\n\n${message}`); + window.location.href = `mailto:contact@immersihome.example?subject=${subject}&body=${body}`; +}); + +// ---------- NEWSLETTER SIMULATION ---------- +const nl = document.getElementById('newsletterForm'); +nl && nl.addEventListener('submit', (e) => { + e.preventDefault(); + alert('Merci — vous êtes inscrit(e) à la newsletter (simulation).'); + nl.reset(); +}); + +// ---------- VIDEO MODAL ---------- +const openVideoBtn = document.getElementById('openVideoBtn'); +const videoModal = document.getElementById('videoModal'); +const modalClose = document.getElementById('modalClose'); +const modalBackdrop = document.getElementById('modalBackdrop'); +const modalVideo = document.getElementById('modalVideo'); + +let lastFocusedBtn = null; // Pour restaurer le focus après fermeture + +function openModal(){ + if(!videoModal) return; + lastFocusedBtn = document.activeElement; + videoModal.classList.add('open'); + videoModal.setAttribute('aria-hidden','false'); + modalClose.focus(); // focus sur bouton close + if(modalVideo){ modalVideo.currentTime = 0; modalVideo.play(); } +} +function closeModal(){ + if(!videoModal) return; + videoModal.classList.remove('open'); + videoModal.setAttribute('aria-hidden','true'); + if(modalVideo){ modalVideo.pause(); modalVideo.currentTime = 0; } + lastFocusedBtn && lastFocusedBtn.focus(); // restaurer focus +} + +openVideoBtn && openVideoBtn.addEventListener('click', openModal); +modalClose && modalClose.addEventListener('click', closeModal); +modalBackdrop && modalBackdrop.addEventListener('click', closeModal); + +// ---------- ACCESSIBILITY: CLOSE ESC ---------- +document.addEventListener('keydown', (e) => { + if(e.key === 'Escape') closeModal(); +}); + +// ---------- OPTIONAL: TRAP FOCUS INSIDE MODAL ---------- +document.addEventListener('keydown', (e) => { + if(!videoModal.classList.contains('open')) return; + if(e.key === 'Tab'){ + const focusable = videoModal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); + const first = focusable[0]; + const last = focusable[focusable.length -1]; + if(e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); } + else if(!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); } + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..112d43b --- /dev/null +++ b/style.css @@ -0,0 +1,200 @@ +/* ========================= + ImmersiHome — Apple style (optimisé) + ========================= */ + +/* ----- Variables ----- */ +:root{ + --bg: #fbfdff; + --text: #0b1220; + --muted: #6b7280; + --accent: #0ea5e9; + --black: #0b1220; + --card: #ffffff; + --glass: rgba(255,255,255,0.6); + --shadow: 0 10px 30px rgba(2,6,23,0.06); + --dark-text: #e6f6ff; + --dark-bg: #0b1220; +} + +/* ----- Reset & Base ----- */ +*{box-sizing:border-box;margin:0;padding:0} +html,body{height:100%} +body{ + font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + background: linear-gradient(180deg, var(--bg) 0%, #f3f7fb 100%); + color:var(--text); + line-height:1.5; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; +} +.container{max-width:1180px;margin:0 auto;padding:28px} +a{color:inherit;text-decoration:none} + +/* ----- HEADER ----- */ +.site-header{ + position:sticky;top:0;z-index:60; + backdrop-filter: blur(6px); + background: rgba(255,255,255,0.7); + border-bottom:1px solid rgba(15,23,36,0.04); +} +.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;max-width:1180px;margin:0 auto;padding:14px 28px} +.brand{display:flex;align-items:center;gap:12px} +.logo{width:46px;height:46px;object-fit:contain;border-radius:8px} +.brand-name{font-weight:700;font-size:18px;color:var(--text)} +.nav ul{list-style:none;display:flex;gap:18px;align-items:center} +.nav a{color:var(--text);padding:8px 10px;border-radius:8px;transition:0.2s} +.nav a:hover{background:#f1f5f9} +.header-actions{display:flex;align-items:center;gap:12px} +.btn-ghost{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:8px 12px;border-radius:10px} + +/* burger */ +.burger{display:none;background:none;border:0;cursor:pointer} +.burger span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;transition:0.2s} + +/* ----- HERO ----- */ +.apple-hero{padding:110px 0 60px} +.hero-inner-apple{display:grid;grid-template-columns:1fr 540px;gap:64px;align-items:center} +.apple-title{font-size:48px;line-height:1.02;font-weight:800;color:var(--black);margin-bottom:18px} +.apple-title .accent{color:var(--accent)} +.apple-sub{font-size:18px;color:var(--muted);max-width:560px;margin-bottom:28px} +.hero-ctas-apple{display:flex;gap:14px} + +/* ----- Buttons ----- */ +.btn{ + display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:700;cursor:pointer; + transition: transform 0.2s, box-shadow 0.2s; +} +.btn.apple-primary, .btn.primary{background:var(--black);color:#fff;border:0} +.btn.apple-primary:hover, .btn.primary:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.12);} +.btn.apple-secondary, .btn.outline{background:transparent;border:1px solid rgba(15,23,36,0.06);color:var(--black)} +.btn.apple-secondary:hover, .btn.outline:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.08);} + +.trust{display:flex;gap:20px;color:var(--muted);margin-top:18px;list-style:none} + +/* hero media */ +.hero-media-apple{display:flex;flex-direction:column;gap:26px} +.apple-main-image img{width:100%;height:380px;object-fit:cover;border-radius:18px;box-shadow:0 30px 70px rgba(2,6,23,0.06)} +.apple-media-row{display:flex;gap:18px;align-items:center} +.apple-mini{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--muted)} +.apple-mini img{width:76px;height:76px;object-fit:cover;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.06)} +.apple-video-wrapper{flex:1} +.apple-video{width:100%;height:110px;border-radius:12px;object-fit:cover;box-shadow:0 18px 40px rgba(2,6,23,0.06)} + +/* ----- SECTIONS ----- */ +.section{padding:64px 0} +.section h2{font-size:28px;margin-bottom:12px} +.section .lead{color:var(--muted);margin-bottom:20px} + +/* grid helpers */ +.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} +.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px} +@media (max-width:980px){ .hero-inner-apple{grid-template-columns:1fr} .grid-3{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} } + +/* features */ +.feature{background:var(--card);padding:20px;border-radius:12px;box-shadow:var(--shadow)} +.feature h3{margin-bottom:8px} + +/* dark section */ +.section.dark{background:linear-gradient(180deg,var(--dark-bg) 0%, #08101a 100%);color:var(--dark-text);border-radius:12px;padding:48px} +.section.dark .lead{color:rgba(255,255,255,0.8)} + +/* FAQ & Story */ +.section.dark details, +.section.dark details summary, +.section.dark details p, +.section.dark .story, +.section.dark .story h3, +.section.dark .story p { + color: var(--dark-text); +} +.section.dark details { + background: rgba(255,255,255,0.05); + padding:4px 8px; + border-radius:8px; + margin-bottom:10px; +} +.section.dark details summary { + cursor: pointer; + font-weight:600; + padding:8px 12px; + border-radius:8px; +} +.section.dark details p { padding:6px 12px 10px; } + +/* pricing */ +.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px} +.price-card{background:linear-gradient(180deg,#fff,#fbfdff);padding:22px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.05);text-align:center;transition: transform 0.2s} +.price-card.featured{transform:scale(1.02);border:1px solid rgba(14,165,233,0.08)} +.price{font-size:28px;font-weight:800;margin:12px 0;color:var(--text)} +@media (max-width:980px){ .pricing-grid{grid-template-columns:1fr} } + +/* testimonials */ +.testimonials{ + display:grid; + grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); + gap:24px; + margin-top:20px; +} +.testimonials blockquote{ + background: rgba(14,165,233,0.05); + border-left: 4px solid var(--accent); + padding:20px; + border-radius:12px; + box-shadow:0 10px 30px rgba(2,6,23,0.06); + font-style: italic; + color:#0b1220; +} +.testimonials blockquote cite{ + display:block; + margin-top:10px; + font-style: normal; + font-weight:600; + color: var(--muted); +} + +/* team */ +.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px} +.member{background:var(--card);padding:14px;border-radius:12px;text-align:center} +.member img{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:10px} +.cv-link{display:inline-block;margin-top:8px;color:var(--accent)} +@media (max-width:980px){ .team-grid{grid-template-columns:repeat(2,1fr)} } +@media (max-width:600px){ .team-grid{grid-template-columns:1fr} } + +/* contact */ +.contact-form input, .contact-form textarea, .contact-form select{width:100%;padding:12px;border-radius:10px;border:1px solid #e6eef6;margin-bottom:10px} +.form-actions{display:flex;gap:10px} +.contact-card{background:var(--card);padding:14px;border-radius:12px;margin-bottom:14px} +.newsletter input{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6;margin-top:8px} + +/* footer */ +.site-footer{background:#071026;padding:28px;color:#cfe7ff;margin-top:28px;border-radius:8px} +.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px} +.f-logo{width:36px} + +/* to top */ +#toTop{position:fixed;right:18px;bottom:18px;background:var(--accent);color:#fff;border:0;padding:10px 12px;border-radius:10px;display:none;cursor:pointer;z-index:80} + +/* modal (video) */ +.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:200} +.modal.open{display:flex} +.modal-backdrop{position:absolute;inset:0;background:rgba(3,6,23,0.6)} +.modal-content{position:relative;max-width:980px;width:94%;z-index:210;outline:none;} +.modal-video-wrap{background:transparent;padding:0;border-radius:12px} +.modal-content video{width:100%;height:auto;border-radius:12px;box-shadow:0 40px 120px rgba(2,6,23,0.6)} +.modal-close{position:absolute;right:-10px;top:-10px;background:#fff;border-radius:50%;border:0;padding:8px 10px;box-shadow:0 8px 20px rgba(0,0,0,0.1);cursor:pointer;} + +/* focus */ +.modal-close:focus, +.btn:focus, +.nav a:focus, +.burger:focus {outline:2px solid var(--accent);outline-offset:2px} + +/* responsive */ +@media (max-width:720px){ + .nav{display:none} + .burger{display:block} + .apple-title{font-size:28px} + .apple-video{height:90px} + .apple-main-image img{height:220px} + .grid-3{grid-template-columns:1fr} +}