10 human-centred images + crossfade hero slider + 8-slide photo gallery

public/index.html

@@ -52,7 +52,9 @@
 
     /* ── HERO ── */
     .hero { padding-top: 64px; position: relative; overflow: hidden; }
-    .hero-img { width: 100%; height: 88vh; min-height: 520px; max-height: 820px; object-fit: cover; object-position: center 20%; display: block; }
+    .hero-slider { position: relative; width: 100%; height: 88vh; min-height: 520px; max-height: 820px; }
+    .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0; transition: opacity 1.2s ease-in-out; }
+    .hero-img.active { opacity: 1; }
     .hero-overlay {
       position: absolute; inset: 0;
       background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100%);
@@ -241,9 +243,14 @@
   </div>
 </nav>
 
-<!-- ── HERO ── -->
+<!-- ── HERO SLIDER ── -->
 <section class="hero">
-  <img class="hero-img" src="img/hero-human.jpg" alt="Clinic owner running her practice with confidence">
+  <div class="hero-slider" id="heroSlider">
+    <img class="hero-img active" src="img/hero-confident.jpg" alt="Confident clinic owner">
+    <img class="hero-img" src="img/hero-candid.jpg" alt="Clinic in action">
+    <img class="hero-img" src="img/hero-receptionist.jpg" alt="Receptionist managing patients">
+    <img class="hero-img" src="img/clinic-interior.jpg" alt="Modern GCC clinic interior">
+  </div>
   <div class="hero-overlay"></div>
   <div class="hero-content">
     <div class="hero-badge">Free Forever — No Credit Card</div>
@@ -284,7 +291,7 @@
   <div class="wrap">
     <div class="split-grid">
       <div class="split-img fade">
-        <img src="img/receptionist-human.jpg" alt="Calm, unhurried clinic receptionist">
+        <img src="img/hero-receptionist.jpg" alt="Calm, unhurried clinic receptionist">
       </div>
       <div class="split-body fade">
         <div class="eyebrow">The Problem</div>
@@ -348,13 +355,25 @@
         <div class="slide-caption">The reminder they actually see — on the app they're already using.</div>
       </div>
       <div class="slide">
-        <img src="img/receptionist-human.jpg" alt="Receptionist smiling and unhurried">
+        <img src="img/hero-receptionist.jpg" alt="Receptionist smiling and unhurried">
         <div class="slide-caption">No missed calls. No stressed front desk. Just care.</div>
       </div>
       <div class="slide">
         <img src="img/doctor-consult.jpg" alt="Doctor in undivided consultation">
         <div class="slide-caption">Full attention. Every appointment.</div>
       </div>
+      <div class="slide">
+        <img src="img/social-candid.jpg" alt="Candid clinic moment">
+        <div class="slide-caption">Real moments. Real care. Every day.</div>
+      </div>
+      <div class="slide">
+        <img src="img/team-editorial.jpg" alt="Healthcare team working together">
+        <div class="slide-caption">A team that works together, wins together.</div>
+      </div>
+      <div class="slide">
+        <img src="img/clinic-interior.jpg" alt="Modern bright clinic">
+        <div class="slide-caption">The clinic your patients deserve.</div>
+      </div>
     </div>
   </div>
   <div class="wrap">
@@ -593,6 +612,17 @@
 
   initSlider('photoSlider', 'photoPrev', 'photoNext', 'photoDots');
   initSlider('testiSlider', 'testiPrev', 'testiNext', 'testiDots');
+
+  // ── Hero image crossfade ──
+  (function() {
+    const imgs = document.querySelectorAll('#heroSlider .hero-img');
+    let idx = 0;
+    setInterval(() => {
+      imgs[idx].classList.remove('active');
+      idx = (idx + 1) % imgs.length;
+      imgs[idx].classList.add('active');
+    }, 4000);
+  })();
 </script>
 </body>
 </html>