diff --git a/public/index.html b/public/index.html index f29db5b..e529f17 100644 --- a/public/index.html +++ b/public/index.html @@ -51,80 +51,60 @@ nav .btn { padding: 10px 20px; font-size: 0.875rem; } /* ── HERO ── */ - .hero { padding-top: 64px; background: #fff; } - - /* Image strip — full viewport width, no text over it */ - .hero-img-strip { - position: relative; - width: 100%; - height: 68vh; - min-height: 400px; - max-height: 700px; + .hero { + padding-top: 64px; + height: 100vh; + min-height: 600px; + display: grid; + grid-template-columns: 42% 58%; + background: #fff; overflow: hidden; } - .hero-img { - position: absolute; inset: 0; - width: 100%; height: 100%; - object-fit: cover; object-position: center 25%; - 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; + /* Left copy panel */ + .hero-left { + display: flex; flex-direction: column; justify-content: center; + padding: 48px 48px 48px 5vw; + gap: 0; } .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; - line-height: 1.1; letter-spacing: -0.03em; + font-size: clamp(1.9rem, 2.6vw, 3rem); font-weight: 800; + 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); - line-height: 1.75; max-width: 540px; + font-size: 0.95rem; color: var(--muted); + 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; - font-size: 0.78rem; color: var(--dim); font-weight: 500; - padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border); + display: flex; flex-wrap: wrap; gap: 4px 16px; + font-size: 0.73rem; color: var(--dim); font-weight: 500; + padding-top: 24px; border-top: 1px solid var(--border); } - .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.45rem; vertical-align: middle; } - @media (max-width: 700px) { - .hero-copy { grid-template-columns: 1fr; } - .hero-copy-right { flex-direction: row; flex-wrap: wrap; } - .hero-img-strip { height: 55vw; min-height: 260px; } + .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.4rem; vertical-align: middle; } + /* Right image panel */ + .hero-right { + position: relative; overflow: hidden; + } + .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,32 +265,25 @@
- -
- Confident clinic owner, Dubai - Doctor giving full attention - Calm, unhurried reception - Patient leaving happy -
-
- - -
-
-
Free Forever — No Credit Card
-

Run Your GCC Clinic on WhatsApp — Reminders, Leads & Follow-Ups, Automated.

-

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.

-
- 🇦🇪 Dubai - Abu Dhabi - 🇸🇦 Riyadh - Jeddah -
-
-
+ +
+
Free Forever — No Credit Card
+

Your GCC Clinic, Running on WhatsApp — Reminders, Leads & Follow-Ups, Automated.

+

Every other clinic software sends reminders. Clinera sends WhatsApp messages — the ones your patients actually open. Zero setup cost. Free forever.

+
Start Free → See How It Works ↓
+
+ 🇦🇪 Dubai + Abu Dhabi + 🇸🇦 Riyadh + Jeddah +
+
+ +
+ Clinic owner in control, Dubai
@@ -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); - })();