Hero v3 — stacked editorial: full-width image strip + copy below on white

public/index.html

@@ -51,69 +51,80 @@
     nav .btn { padding: 10px 20px; font-size: 0.875rem; }
 
     /* ── HERO ── */
-    .hero {
+    .hero { padding-top: 64px; background: #fff; }
-      padding-top: 64px;
+
-      min-height: calc(100vh - 64px);
+    /* Image strip — full viewport width, no text over it */
-      display: grid;
+    .hero-img-strip {
-      grid-template-columns: 1fr 1fr;
+      position: relative;
-    }
+      width: 100%;
-    .hero-left {
+      height: 68vh;
-      display: flex; flex-direction: column; justify-content: center;
+      min-height: 400px;
-      padding: 72px 56px 72px 48px;
+      max-height: 700px;
-      background: #fff;
+      overflow: hidden;
-    }
-    .hero-right {
-      position: relative; overflow: hidden;
-    }
-    .hero-slider {
-      position: absolute; inset: 0;
     }
     .hero-img {
       position: absolute; inset: 0;
       width: 100%; height: 100%;
-      object-fit: cover; object-position: center;
+      object-fit: cover; object-position: center 25%;
-      opacity: 0; transition: opacity 1.2s ease-in-out;
+      opacity: 0; transition: opacity 1.3s ease-in-out;
     }
     .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;
       background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.3);
       font-size: 0.75rem; font-weight: 600; color: var(--accent);
-      margin-bottom: 24px; width: fit-content;
+      margin-bottom: 20px; width: fit-content;
     }
     .hero-badge::before { content: '✦'; }
     .hero h1 {
-      font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800;
+      font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800;
       line-height: 1.1; letter-spacing: -0.03em;
-      margin-bottom: 20px; color: var(--text);
+      margin-bottom: 16px; color: var(--text);
     }
     .hero h1 em { font-style: normal; color: var(--accent); }
     .hero-sub {
-      font-size: 1.05rem; color: var(--muted);
+      font-size: 1rem; color: var(--muted);
-      margin-bottom: 36px; line-height: 1.75; max-width: 440px;
+      line-height: 1.75; max-width: 540px;
     }
-    .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
     .trust-strip {
       display: flex; flex-wrap: wrap; gap: 6px 20px;
       font-size: 0.78rem; color: var(--dim); font-weight: 500;
-      padding-top: 32px; border-top: 1px solid var(--border);
+      padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border);
     }
     .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.45rem; vertical-align: middle; }
-    /* Slider dots on image panel */
+    @media (max-width: 700px) {
-    .hero-dots {
+      .hero-copy { grid-template-columns: 1fr; }
-      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
+      .hero-copy-right { flex-direction: row; flex-wrap: wrap; }
-      display: flex; gap: 6px; z-index: 5;
+      .hero-img-strip { height: 55vw; min-height: 260px; }
-    }
-    .hero-dot {
-      width: 8px; height: 8px; border-radius: 50%;
-      background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s;
-    }
-    .hero-dot.active { background: #fff; width: 22px; border-radius: 4px; }
-    @media (max-width: 900px) {
-      .hero { grid-template-columns: 1fr; min-height: auto; }
-      .hero-right { height: 55vw; min-height: 280px; position: relative; }
-      .hero-left { padding: 48px 24px; }
     }
 
     /* ── STATS BAR ── */
@@ -274,31 +285,32 @@
 
 <!-- ── HERO ── -->
 <section class="hero">
-  <!-- Left: copy -->
+  <!-- Full-width image strip — no text over it -->
-  <div class="hero-left">
+  <div class="hero-img-strip">
-    <div class="hero-badge">Free Forever — No Credit Card</div>
+    <img class="hero-img active" src="img/hero-human.jpg"        alt="Confident clinic owner, Dubai">
-    <h1>Run Your GCC Clinic on <em>WhatsApp</em> — Reminders, Leads &amp; Follow-Ups, Automated.</h1>
+    <img class="hero-img"        src="img/doctor-consult.jpg"    alt="Doctor giving full attention">
-    <p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open. Built for GCC clinics. Free forever.</p>
+    <img class="hero-img"        src="img/receptionist-human.jpg" alt="Calm, unhurried reception">
-    <div class="hero-ctas">
+    <img class="hero-img"        src="img/patient-human.jpg"     alt="Patient leaving happy">
-      <a href="#start" class="btn btn-primary">Start Free — No Credit Card</a>
+    <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>
+      <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>
+      <div class="trust-strip">
+        <span>🇦🇪 Dubai</span>
+        <span>Abu Dhabi</span>
+        <span>🇸🇦 Riyadh</span>
+        <span>Jeddah</span>
+      </div>
+    </div>
+    <div class="hero-copy-right">
+      <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>
-      <span>🇸🇦 Riyadh</span>
-      <span>Jeddah</span>
-    </div>
-  </div>
-  <!-- Right: sliding photos -->
-  <div class="hero-right">
-    <div class="hero-slider" id="heroSlider">
-      <img class="hero-img active" src="img/hero-human.jpg" alt="Confident clinic owner">
-      <img class="hero-img" src="img/doctor-consult.jpg" alt="Doctor in consultation">
-      <img class="hero-img" src="img/receptionist-human.jpg" alt="Receptionist calm and in control">
-      <img class="hero-img" src="img/patient-human.jpg" alt="Patient feeling cared for">
-    </div>
-    <div class="hero-dots" id="heroDots"></div>
   </div>
 </section>