From 50d34c0fe330380498365b2f3c05d9a1782c9af5 Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Fri, 13 Mar 2026 21:02:59 +0800 Subject: [PATCH] =?UTF-8?q?New=20hero=20layout=20=E2=80=94=20split=20left?= =?UTF-8?q?=20copy=20/=20right=20photo=20slider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 127 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 88 insertions(+), 39 deletions(-) diff --git a/public/index.html b/public/index.html index 9171115..556d1b4 100644 --- a/public/index.html +++ b/public/index.html @@ -51,41 +51,70 @@ nav .btn { padding: 10px 20px; font-size: 0.875rem; } /* ── HERO ── */ - .hero { padding-top: 64px; position: relative; overflow: hidden; } - .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 { + .hero { + padding-top: 64px; + min-height: calc(100vh - 64px); + display: grid; + grid-template-columns: 1fr 1fr; + } + .hero-left { + display: flex; flex-direction: column; justify-content: center; + padding: 72px 56px 72px 48px; + background: #fff; + } + .hero-right { + position: relative; overflow: hidden; + } + .hero-slider { 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%); } - .hero-content { - position: absolute; bottom: 0; left: 0; right: 0; - padding: 60px 24px 64px; - text-align: center; color: #fff; + .hero-img { + position: absolute; inset: 0; + width: 100%; height: 100%; + object-fit: cover; object-position: center; + opacity: 0; transition: opacity 1.2s ease-in-out; } + .hero-img.active { opacity: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; - padding: 6px 16px; border-radius: 100px; - background: rgba(0,184,173,0.25); border: 1px solid rgba(0,184,173,0.5); - font-size: 0.78rem; font-weight: 600; color: #7ffff9; - margin-bottom: 20px; backdrop-filter: blur(4px); + 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; } .hero-badge::before { content: '✦'; } .hero h1 { - font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; + font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; - max-width: 860px; margin: 0 auto 20px; color: #fff; - text-shadow: 0 2px 20px rgba(0,0,0,0.3); + margin-bottom: 20px; color: var(--text); } - .hero h1 em { font-style: normal; color: #5ffaf3; } + .hero h1 em { font-style: normal; color: var(--accent); } .hero-sub { - font-size: 1.1rem; color: rgba(255,255,255,0.82); - max-width: 540px; margin: 0 auto 36px; line-height: 1.7; + font-size: 1.05rem; color: var(--muted); + margin-bottom: 36px; line-height: 1.75; max-width: 440px; + } + .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); } - .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 36px; } - .trust-strip { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 500; } .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.45rem; vertical-align: middle; } + /* Slider dots on image panel */ + .hero-dots { + position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); + display: flex; gap: 6px; z-index: 5; + } + .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 ── */ .stats-bar { background: var(--text); padding: 40px 0; } @@ -243,27 +272,34 @@ - +
-
- Confident clinic owner - Clinic in action - Receptionist managing patients - Modern GCC clinic interior -
-
-
+ +
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.

+

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 GCC clinics. Free forever.

Start Free — No Credit Card - See How It Works ↓ + See How It Works ↓
- 🇦🇪 DubaiAbu Dhabi🇸🇦 RiyadhJeddah + 🇦🇪 Dubai + Abu Dhabi + 🇸🇦 Riyadh + Jeddah
+ +
+
+ Confident clinic owner + Doctor in consultation + Receptionist calm and in control + Patient feeling cared for +
+
+
@@ -617,15 +653,28 @@ initSlider('photoSlider', 'photoPrev', 'photoNext', 'photoDots'); initSlider('testiSlider', 'testiPrev', 'testiNext', 'testiDots'); - // ── Hero image crossfade ── + // ── Hero image crossfade + dots ── (function() { const imgs = document.querySelectorAll('#heroSlider .hero-img'); + const dotsEl = document.getElementById('heroDots'); let idx = 0; - setInterval(() => { + + 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'); - idx = (idx + 1) % imgs.length; + dotsEl.children[idx].classList.remove('active'); + idx = i; imgs[idx].classList.add('active'); - }, 4000); + dotsEl.children[idx].classList.add('active'); + } + + setInterval(() => goTo((idx + 1) % imgs.length), 4000); })();