quikcue/clinera-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Omair Saleh
2026-03-13 20:55:30 +08:00
parent d9067dc87f
commit c466b94b2d
14 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+35 -5
View File
@@ -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>