Hero v4 — above-the-fold split, single image, no slider

public/index.html

@@ -51,80 +51,60 @@
     nav .btn { padding: 10px 20px; font-size: 0.875rem; }
 
     /* ── HERO ── */
-    .hero { padding-top: 64px; background: #fff; }
+    .hero {
-
+      padding-top: 64px;
-    /* Image strip — full viewport width, no text over it */
+      height: 100vh;
-    .hero-img-strip {
+      min-height: 600px;
-      position: relative;
+      display: grid;
-      width: 100%;
+      grid-template-columns: 42% 58%;
-      height: 68vh;
+      background: #fff;
-      min-height: 400px;
-      max-height: 700px;
       overflow: hidden;
     }
-    .hero-img {
+    /* Left copy panel */
-      position: absolute; inset: 0;
+    .hero-left {
-      width: 100%; height: 100%;
+      display: flex; flex-direction: column; justify-content: center;
-      object-fit: cover; object-position: center 25%;
+      padding: 48px 48px 48px 5vw;
-      opacity: 0; transition: opacity 1.3s ease-in-out;
+      gap: 0;
-    }
-    .hero-img.active { opacity: 1; }
-
-    /* Dots inside strip, bottom-right, subtle */
-    .hero-dots {
-      position: absolute; bottom: 16px; right: 20px;
-      display: flex; gap: 6px; z-index: 5;
-    }
-    .hero-dot {
-      width: 7px; height: 7px; border-radius: 50%;
-      background: rgba(255,255,255,0.45); cursor: pointer; transition: all 0.3s;
-      border: 1px solid rgba(255,255,255,0.3);
-    }
-    .hero-dot.active { background: #fff; width: 20px; border-radius: 4px; }
-
-    /* Copy block — sits below the image on white */
-    .hero-copy {
-      max-width: 860px;
-      margin: 0 auto;
-      padding: 56px 24px 64px;
-      display: grid;
-      grid-template-columns: 1fr auto;
-      gap: 40px;
-      align-items: start;
-    }
-    .hero-copy-left { }
-    .hero-copy-right {
-      display: flex; flex-direction: column; gap: 12px;
-      padding-top: 8px; min-width: 220px;
     }
     .hero-badge {
       display: inline-flex; align-items: center; gap: 8px;
-      padding: 6px 14px; border-radius: 100px;
+      padding: 5px 13px; border-radius: 100px;
       background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.3);
-      font-size: 0.75rem; font-weight: 600; color: var(--accent);
+      font-size: 0.72rem; font-weight: 600; color: var(--accent);
       margin-bottom: 20px; width: fit-content;
     }
     .hero-badge::before { content: '✦'; }
     .hero h1 {
-      font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800;
+      font-size: clamp(1.9rem, 2.6vw, 3rem); font-weight: 800;
-      line-height: 1.1; letter-spacing: -0.03em;
+      line-height: 1.12; letter-spacing: -0.03em;
       margin-bottom: 16px; color: var(--text);
     }
     .hero h1 em { font-style: normal; color: var(--accent); }
     .hero-sub {
-      font-size: 1rem; color: var(--muted);
+      font-size: 0.95rem; color: var(--muted);
-      line-height: 1.75; max-width: 540px;
+      line-height: 1.75; margin-bottom: 28px;
     }
+    .hero-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; max-width: 240px; }
     .trust-strip {
-      display: flex; flex-wrap: wrap; gap: 6px 20px;
+      display: flex; flex-wrap: wrap; gap: 4px 16px;
-      font-size: 0.78rem; color: var(--dim); font-weight: 500;
+      font-size: 0.73rem; color: var(--dim); font-weight: 500;
-      padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border);
+      padding-top: 24px; border-top: 1px solid var(--border);
     }
-    .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.45rem; vertical-align: middle; }
+    .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.4rem; vertical-align: middle; }
-    @media (max-width: 700px) {
+    /* Right image panel */
-      .hero-copy { grid-template-columns: 1fr; }
+    .hero-right {
-      .hero-copy-right { flex-direction: row; flex-wrap: wrap; }
+      position: relative; overflow: hidden;
-      .hero-img-strip { height: 55vw; min-height: 260px; }
+    }
+    .hero-right img {
+      width: 100%; height: 100%;
+      object-fit: cover; object-position: center 20%;
+      display: block;
+    }
+    @media (max-width: 860px) {
+      .hero { grid-template-columns: 1fr; height: auto; }
+      .hero-right { height: 56vw; min-height: 260px; }
+      .hero-left { padding: 40px 24px 36px; }
+      .hero-ctas { flex-direction: row; max-width: none; }
     }
 
     /* ── STATS BAR ── */
@@ -285,21 +265,15 @@
 
 <!-- ── HERO ── -->
 <section class="hero">
-  <!-- Full-width image strip — no text over it -->
+  <!-- Left: all copy, above the fold -->
-  <div class="hero-img-strip">
+  <div class="hero-left">
-    <img class="hero-img active" src="img/hero-human.jpg"        alt="Confident clinic owner, Dubai">
-    <img class="hero-img"        src="img/doctor-consult.jpg"    alt="Doctor giving full attention">
-    <img class="hero-img"        src="img/receptionist-human.jpg" alt="Calm, unhurried reception">
-    <img class="hero-img"        src="img/patient-human.jpg"     alt="Patient leaving happy">
-    <div class="hero-dots" id="heroDots"></div>
-  </div>
-
-  <!-- Copy block below the image -->
-  <div class="hero-copy">
-    <div class="hero-copy-left">
     <div class="hero-badge">Free Forever — No Credit Card</div>
-      <h1>Run Your GCC Clinic on <em>WhatsApp</em> — Reminders, Leads &amp; Follow-Ups, Automated.</h1>
+    <h1>Your GCC Clinic, Running on <em>WhatsApp</em> — Reminders, Leads &amp; Follow-Ups, Automated.</h1>
-      <p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open. Built for clinics in Dubai, Abu Dhabi, Riyadh and Jeddah.</p>
+    <p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp messages — the ones your patients actually open. Zero setup cost. Free forever.</p>
+    <div class="hero-ctas">
+      <a href="#start" class="btn btn-primary">Start Free →</a>
+      <a href="#features" class="btn btn-ghost">See How It Works ↓</a>
+    </div>
     <div class="trust-strip">
       <span>🇦🇪 Dubai</span>
       <span>Abu Dhabi</span>
@@ -307,10 +281,9 @@
       <span>Jeddah</span>
     </div>
   </div>
-    <div class="hero-copy-right">
+  <!-- Right: single strong image, full height -->
-      <a href="#start" class="btn btn-primary">Start Free →</a>
+  <div class="hero-right">
-      <a href="#features" class="btn btn-ghost">See How It Works ↓</a>
+    <img src="img/hero-human.jpg" alt="Clinic owner in control, Dubai">
-    </div>
   </div>
 </section>
 
@@ -665,29 +638,7 @@
   initSlider('photoSlider', 'photoPrev', 'photoNext', 'photoDots');
   initSlider('testiSlider', 'testiPrev', 'testiNext', 'testiDots');
 
-  // ── Hero image crossfade + dots ──
-  (function() {
-    const imgs = document.querySelectorAll('#heroSlider .hero-img');
-    const dotsEl = document.getElementById('heroDots');
-    let idx = 0;
 
-    imgs.forEach((_, i) => {
-      const d = document.createElement('div');
-      d.className = 'hero-dot' + (i === 0 ? ' active' : '');
-      d.addEventListener('click', () => goTo(i));
-      dotsEl.appendChild(d);
-    });
-
-    function goTo(i) {
-      imgs[idx].classList.remove('active');
-      dotsEl.children[idx].classList.remove('active');
-      idx = i;
-      imgs[idx].classList.add('active');
-      dotsEl.children[idx].classList.add('active');
-    }
-
-    setInterval(() => goTo((idx + 1) % imgs.length), 4000);
-  })();
 </script>
 </body>
 </html>