Hero v3 — stacked editorial: full-width image strip + copy below on white
This commit is contained in:
+74
-62
@@ -51,69 +51,80 @@
|
||||
nav .btn { padding: 10px 20px; font-size: 0.875rem; }
|
||||
|
||||
/* ── HERO ── */
|
||||
.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;
|
||||
.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;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.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);
|
||||
margin-bottom: 36px; line-height: 1.75; max-width: 440px;
|
||||
font-size: 1rem; color: var(--muted);
|
||||
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 */
|
||||
.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; }
|
||||
@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; }
|
||||
}
|
||||
|
||||
/* ── STATS BAR ── */
|
||||
@@ -274,31 +285,32 @@
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section class="hero">
|
||||
<!-- Left: copy -->
|
||||
<div class="hero-left">
|
||||
<div class="hero-badge">Free Forever — No Credit Card</div>
|
||||
<h1>Run Your GCC Clinic on <em>WhatsApp</em> — Reminders, Leads & 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 GCC clinics. Free forever.</p>
|
||||
<div class="hero-ctas">
|
||||
<a href="#start" class="btn btn-primary">Start Free — No Credit Card</a>
|
||||
<!-- Full-width image strip — no text over it -->
|
||||
<div class="hero-img-strip">
|
||||
<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 & 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user