Premium redesign — marquee, monumental stats, numbered steps, Harry Dry copy v2
This commit is contained in:
+265
-86
@@ -3,15 +3,15 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Clinera — Your Patients Are on WhatsApp. Your Reminders Should Be Too.</title>
|
<title>Clinera — You're Already Sending WhatsApp Reminders. Stop Doing It By Hand.</title>
|
||||||
<meta name="description" content="Your no-show rate is high because email reminders don't work. Clinera sends WhatsApp messages — the ones patients actually open. Free forever for GCC clinics.">
|
<meta name="description" content="Your clinic already uses WhatsApp for reminders — manually. Clinera automates every message, every follow-up, every rebooking nudge. Free forever for GCC clinics.">
|
||||||
<meta property="og:title" content="Clinera — WhatsApp Reminders That Actually Convert">
|
<meta property="og:title" content="Clinera — Automate the WhatsApp Reminders You Already Send">
|
||||||
<meta property="og:description" content="98% open rate. Sent automatically. No-shows drop the first week. Free forever for GCC clinics.">
|
<meta property="og:description" content="98% open rate. Sent automatically. No-shows drop the first week. Free forever for GCC clinics.">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:url" content="https://clinera.quikcue.com">
|
<meta property="og:url" content="https://clinera.quikcue.com">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg: #ffffff;
|
--bg: #ffffff;
|
||||||
@@ -21,6 +21,7 @@
|
|||||||
--accent-dk: #009990;
|
--accent-dk: #009990;
|
||||||
--accent-bg: #e6faf9;
|
--accent-bg: #e6faf9;
|
||||||
--text: #0f1117;
|
--text: #0f1117;
|
||||||
|
--navy: #07111f;
|
||||||
--muted: #6b7280;
|
--muted: #6b7280;
|
||||||
--dim: #9ca3af;
|
--dim: #9ca3af;
|
||||||
--font: 'Inter', -apple-system, sans-serif;
|
--font: 'Inter', -apple-system, sans-serif;
|
||||||
@@ -46,7 +47,7 @@
|
|||||||
/* NAV */
|
/* NAV */
|
||||||
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
|
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
|
||||||
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
|
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
|
||||||
.logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); }
|
.logo { font-weight: 900; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--text); }
|
||||||
.logo span { color: var(--accent); }
|
.logo span { color: var(--accent); }
|
||||||
nav .btn { padding: 10px 20px; font-size: 0.875rem; }
|
nav .btn { padding: 10px 20px; font-size: 0.875rem; }
|
||||||
|
|
||||||
@@ -61,13 +62,12 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
/* Soft teal blob — top left, very subtle */
|
|
||||||
.hero::before {
|
.hero::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20%; left: -10%;
|
top: -20%; left: -10%;
|
||||||
width: 50%; height: 100%;
|
width: 50%; height: 100%;
|
||||||
background: radial-gradient(ellipse at 30% 40%, rgba(0,184,173,0.07) 0%, transparent 60%);
|
background: radial-gradient(ellipse at 30% 40%, rgba(0,184,173,0.05) 0%, transparent 60%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.hero-left {
|
.hero-left {
|
||||||
@@ -80,18 +80,21 @@
|
|||||||
padding: 5px 14px; border-radius: 100px;
|
padding: 5px 14px; border-radius: 100px;
|
||||||
background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.3);
|
background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.3);
|
||||||
font-size: 0.72rem; font-weight: 600; color: var(--accent);
|
font-size: 0.72rem; font-weight: 600; color: var(--accent);
|
||||||
margin-bottom: 28px; width: fit-content; letter-spacing: 0.04em;
|
margin-bottom: 28px; width: fit-content; letter-spacing: 0.04em; text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.hero-badge::before { content: '✦'; font-size: 0.6rem; }
|
.hero-badge::before { content: '✦'; font-size: 0.6rem; }
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: clamp(2.2rem, 3vw, 3.5rem); font-weight: 800;
|
font-size: clamp(3rem, 5.5vw, 5.5rem);
|
||||||
line-height: 1.1; letter-spacing: -0.03em;
|
font-weight: 900;
|
||||||
margin-bottom: 20px; color: var(--text);
|
line-height: 0.95;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
.hero h1 em { font-style: normal; color: var(--accent); }
|
.hero h1 em { font-style: normal; color: var(--accent); }
|
||||||
.hero-sub {
|
.hero-sub {
|
||||||
font-size: 1rem; color: var(--muted);
|
font-size: 1.05rem; color: var(--muted);
|
||||||
line-height: 1.8; margin-bottom: 36px; max-width: 400px;
|
line-height: 1.75; margin-bottom: 36px; max-width: 440px;
|
||||||
}
|
}
|
||||||
.hero-ctas { display: flex; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
|
.hero-ctas { display: flex; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
|
||||||
.trust-strip {
|
.trust-strip {
|
||||||
@@ -100,13 +103,11 @@
|
|||||||
padding-top: 28px; border-top: 1px solid var(--border);
|
padding-top: 28px; border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.4rem; vertical-align: middle; }
|
.trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.4rem; vertical-align: middle; }
|
||||||
/* Right: image as floating card on a soft grey wash */
|
|
||||||
.hero-right {
|
.hero-right {
|
||||||
padding: 40px 5vw 40px 24px;
|
padding: 40px 5vw 40px 24px;
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
position: relative; z-index: 1;
|
position: relative; z-index: 1;
|
||||||
}
|
}
|
||||||
/* Soft grey shape behind the card */
|
|
||||||
.hero-right::before {
|
.hero-right::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -133,18 +134,80 @@
|
|||||||
}
|
}
|
||||||
@media (max-width: 860px) {
|
@media (max-width: 860px) {
|
||||||
.hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 48px; }
|
.hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 48px; }
|
||||||
|
.hero h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); }
|
||||||
.hero-right { padding: 0 24px 24px; }
|
.hero-right { padding: 0 24px 24px; }
|
||||||
.hero-right::before { inset: 0 0 0 0; border-radius: 18px; }
|
.hero-right::before { inset: 0; border-radius: 18px; }
|
||||||
.hero-card { aspect-ratio: 3/2; max-width: 100%; }
|
.hero-card { aspect-ratio: 3/2; max-width: 100%; }
|
||||||
.hero-left { padding: 48px 24px 32px; }
|
.hero-left { padding: 48px 24px 32px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── WHATSAPP MARQUEE ── */
|
||||||
|
.marquee-section {
|
||||||
|
background: var(--navy);
|
||||||
|
padding: 48px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.marquee-label {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(255,255,255,0.25);
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.marquee-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
width: max-content;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
.marquee-row-1 { animation: marqueeLeft 40s linear infinite; }
|
||||||
|
.marquee-row-2 { animation: marqueeRight 45s linear infinite; margin-top: 14px; }
|
||||||
|
@keyframes marqueeLeft {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(-50%); }
|
||||||
|
}
|
||||||
|
@keyframes marqueeRight {
|
||||||
|
0% { transform: translateX(-50%); }
|
||||||
|
100% { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
.wa-bubble {
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #075e54;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 18px 18px 18px 4px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
max-width: 340px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.wa-bubble.outgoing {
|
||||||
|
background: #dcf8c6;
|
||||||
|
color: #1a1a1a;
|
||||||
|
border-radius: 18px 18px 4px 18px;
|
||||||
|
}
|
||||||
|
.wa-bubble .wa-time {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-top: 4px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.marquee-fade-l, .marquee-fade-r {
|
||||||
|
position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
|
||||||
|
}
|
||||||
|
.marquee-fade-l { left: 0; background: linear-gradient(to right, var(--navy), transparent); }
|
||||||
|
.marquee-fade-r { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
|
||||||
|
|
||||||
/* ── STATS BAR ── */
|
/* ── STATS BAR ── */
|
||||||
.stats-bar { background: var(--text); padding: 40px 0; }
|
.stats-bar { background: var(--navy); padding: 56px 0; }
|
||||||
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.08); border-radius: var(--r); overflow: hidden; }
|
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; }
|
||||||
.stat-item { background: var(--text); padding: 32px 24px; text-align: center; }
|
.stat-item { text-align: center; padding: 24px; }
|
||||||
.stat-num { font-size: 2.5rem; font-weight: 800; color: var(--accent); line-height: 1; }
|
.stat-num { font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.04em; }
|
||||||
.stat-lbl { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-top: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
|
.stat-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
|
||||||
|
|
||||||
/* ── SPLIT SECTIONS ── */
|
/* ── SPLIT SECTIONS ── */
|
||||||
.split { padding: 88px 0; }
|
.split { padding: 88px 0; }
|
||||||
@@ -160,6 +223,50 @@
|
|||||||
.split-body ul li::before { content: '✓'; color: var(--accent); font-weight: 800; margin-top: 1px; flex-shrink: 0; }
|
.split-body ul li::before { content: '✓'; color: var(--accent); font-weight: 800; margin-top: 1px; flex-shrink: 0; }
|
||||||
.split.alt { background: var(--bg-soft); }
|
.split.alt { background: var(--bg-soft); }
|
||||||
|
|
||||||
|
/* ── HOW IT WORKS — STEPS ── */
|
||||||
|
.steps-section { padding: 96px 0; background: var(--bg-soft); }
|
||||||
|
.steps-header { text-align: center; margin-bottom: 64px; }
|
||||||
|
.steps-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 10px; }
|
||||||
|
.steps-header p { color: var(--muted); font-size: 1.05rem; }
|
||||||
|
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
|
||||||
|
.step-item { position: relative; }
|
||||||
|
.step-num {
|
||||||
|
font-size: clamp(5rem, 8vw, 8rem);
|
||||||
|
font-weight: 150;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--border);
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.step-item h3 {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.step-item p {
|
||||||
|
font-size: 0.92rem;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.steps-grid { grid-template-columns: 1fr; gap: 40px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── IMAGE BREAK ── */
|
||||||
|
.image-break {
|
||||||
|
width: 100%;
|
||||||
|
height: 420px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-break img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center 30%;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── SLIDER ── */
|
/* ── SLIDER ── */
|
||||||
.slider-section { padding: 72px 0; overflow: hidden; background: var(--bg-soft); }
|
.slider-section { padding: 72px 0; overflow: hidden; background: var(--bg-soft); }
|
||||||
.slider-header { text-align: center; margin-bottom: 40px; }
|
.slider-header { text-align: center; margin-bottom: 40px; }
|
||||||
@@ -214,7 +321,7 @@
|
|||||||
/* ── FREE BLOCK ── */
|
/* ── FREE BLOCK ── */
|
||||||
.free-section { padding: 88px 0; background: var(--bg-soft); }
|
.free-section { padding: 88px 0; background: var(--bg-soft); }
|
||||||
.free-block {
|
.free-block {
|
||||||
background: var(--text); border-radius: var(--r);
|
background: var(--navy); border-radius: var(--r);
|
||||||
padding: 64px 48px; text-align: center;
|
padding: 64px 48px; text-align: center;
|
||||||
max-width: 760px; margin: 0 auto;
|
max-width: 760px; margin: 0 auto;
|
||||||
position: relative; overflow: hidden;
|
position: relative; overflow: hidden;
|
||||||
@@ -224,7 +331,7 @@
|
|||||||
width: 360px; height: 360px; border-radius: 50%;
|
width: 360px; height: 360px; border-radius: 50%;
|
||||||
background: radial-gradient(circle, rgba(0,184,173,0.15) 0%, transparent 70%);
|
background: radial-gradient(circle, rgba(0,184,173,0.15) 0%, transparent 70%);
|
||||||
}
|
}
|
||||||
.free-block h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; }
|
.free-block h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; }
|
||||||
.free-block h2 em { font-style: normal; color: var(--accent); }
|
.free-block h2 em { font-style: normal; color: var(--accent); }
|
||||||
.free-sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.7; }
|
.free-sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.7; }
|
||||||
.checklist { list-style: none; text-align: left; max-width: 400px; margin: 0 auto 40px; display: grid; gap: 12px; }
|
.checklist { list-style: none; text-align: left; max-width: 400px; margin: 0 auto 40px; display: grid; gap: 12px; }
|
||||||
@@ -244,7 +351,6 @@
|
|||||||
}
|
}
|
||||||
.testi-card blockquote { font-size: 1.05rem; line-height: 1.75; color: var(--text); font-style: italic; margin-bottom: 24px; }
|
.testi-card blockquote { font-size: 1.05rem; line-height: 1.75; color: var(--text); font-style: italic; margin-bottom: 24px; }
|
||||||
.testi-author { display: flex; align-items: center; gap: 12px; }
|
.testi-author { display: flex; align-items: center; gap: 12px; }
|
||||||
.testi-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-bg); }
|
|
||||||
.testi-avatar-init { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); font-size: 1rem; flex-shrink: 0; }
|
.testi-avatar-init { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); font-size: 1rem; flex-shrink: 0; }
|
||||||
.testi-name { font-weight: 700; font-size: 0.95rem; }
|
.testi-name { font-weight: 700; font-size: 0.95rem; }
|
||||||
.testi-role { font-size: 0.8rem; color: var(--muted); }
|
.testi-role { font-size: 0.8rem; color: var(--muted); }
|
||||||
@@ -252,7 +358,7 @@
|
|||||||
/* ── FOOTER CTA ── */
|
/* ── FOOTER CTA ── */
|
||||||
.footer-cta { padding: 100px 0; background: linear-gradient(135deg, #0a1628 0%, #0f2040 100%); }
|
.footer-cta { padding: 100px 0; background: linear-gradient(135deg, #0a1628 0%, #0f2040 100%); }
|
||||||
.footer-cta-inner { text-align: center; max-width: 600px; margin: 0 auto; }
|
.footer-cta-inner { text-align: center; max-width: 600px; margin: 0 auto; }
|
||||||
.footer-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-bottom: 14px; line-height: 1.2; }
|
.footer-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 14px; line-height: 1.15; }
|
||||||
.footer-cta h2 em { font-style: normal; color: var(--accent); }
|
.footer-cta h2 em { font-style: normal; color: var(--accent); }
|
||||||
.footer-cta > .footer-cta-inner > p { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.05rem; }
|
.footer-cta > .footer-cta-inner > p { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.05rem; }
|
||||||
.email-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 20px; }
|
.email-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 20px; }
|
||||||
@@ -278,10 +384,12 @@
|
|||||||
}
|
}
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.stats-row { grid-template-columns: 1fr; }
|
.stats-row { grid-template-columns: 1fr; }
|
||||||
|
.stat-item + .stat-item { border-top: 1px solid rgba(255,255,255,0.06); }
|
||||||
.email-form { flex-direction: column; }
|
.email-form { flex-direction: column; }
|
||||||
.hero-ctas .btn { width: 100%; justify-content: center; }
|
.hero-ctas .btn { width: 100%; justify-content: center; }
|
||||||
.free-block { padding: 40px 24px; }
|
.free-block { padding: 40px 24px; }
|
||||||
.slide { flex: 0 0 80vw; }
|
.slide { flex: 0 0 80vw; }
|
||||||
|
.image-break { height: 260px; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -298,12 +406,12 @@
|
|||||||
<!-- ── HERO ── -->
|
<!-- ── HERO ── -->
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="hero-left">
|
<div class="hero-left">
|
||||||
<div class="hero-badge">Free Forever — No Credit Card</div>
|
<div class="hero-badge">Automate What You Already Do</div>
|
||||||
<h1>Your patients are on <em>WhatsApp</em>.<br>Your reminders aren't.</h1>
|
<h1>You're already sending <em>WhatsApp</em> reminders.<br>Stop doing it by hand.</h1>
|
||||||
<p class="hero-sub">Clinera sends appointment reminders, lead follow-ups, and rebooking nudges on WhatsApp — the app your patients check 23 times a day. No-shows drop. Leads convert. Your team stops chasing. Free forever.</p>
|
<p class="hero-sub">Every morning your receptionist opens WhatsApp and starts copy-pasting. "Hi [name], reminder for tomorrow at 10am." Clinera does that — automatically, for every patient, every appointment. Free forever.</p>
|
||||||
<div class="hero-ctas">
|
<div class="hero-ctas">
|
||||||
<a href="#start" class="btn btn-primary">Start Free →</a>
|
<a href="#start" class="btn btn-primary">Automate Your Reminders →</a>
|
||||||
<a href="#features" class="btn btn-ghost">See How It Works ↓</a>
|
<a href="#how" class="btn btn-ghost">See How It Works ↓</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="trust-strip">
|
<div class="trust-strip">
|
||||||
<span>🇦🇪 Dubai</span>
|
<span>🇦🇪 Dubai</span>
|
||||||
@@ -319,13 +427,60 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- ── WHATSAPP MARQUEE ── -->
|
||||||
|
<section class="marquee-section">
|
||||||
|
<div class="marquee-label">Messages your clinic sends every day — on autopilot</div>
|
||||||
|
<div style="position:relative;">
|
||||||
|
<div class="marquee-fade-l"></div>
|
||||||
|
<div class="marquee-fade-r"></div>
|
||||||
|
<div class="marquee-row marquee-row-1">
|
||||||
|
<div class="wa-bubble outgoing">Hi Sarah! 👋 Just a reminder — your dental check-up is tomorrow at 10:30am with Dr. Khalid. See you then! <div class="wa-time">8:00 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Thanks! I'll be there 😊</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Ahmed, your dermatology appointment is in 2 hours (2:00 PM). Reply YES to confirm or RESCHEDULE to pick a new time. <div class="wa-time">12:01 PM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">YES</div>
|
||||||
|
<div class="wa-bubble outgoing">Great news — Dr. Layla has a cancellation slot open tomorrow at 11am. Would you like to book it? <div class="wa-time">5:30 PM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Yes please book it!</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Fatima! It's been 3 months since your last facial treatment. Ready to rebook? Tap here to pick a slot 👇 <div class="wa-time">9:00 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Can I come Thursday?</div>
|
||||||
|
<!-- duplicate set for seamless loop -->
|
||||||
|
<div class="wa-bubble outgoing">Hi Sarah! 👋 Just a reminder — your dental check-up is tomorrow at 10:30am with Dr. Khalid. See you then! <div class="wa-time">8:00 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Thanks! I'll be there 😊</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Ahmed, your dermatology appointment is in 2 hours (2:00 PM). Reply YES to confirm or RESCHEDULE to pick a new time. <div class="wa-time">12:01 PM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">YES</div>
|
||||||
|
<div class="wa-bubble outgoing">Great news — Dr. Layla has a cancellation slot open tomorrow at 11am. Would you like to book it? <div class="wa-time">5:30 PM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Yes please book it!</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Fatima! It's been 3 months since your last facial treatment. Ready to rebook? Tap here to pick a slot 👇 <div class="wa-time">9:00 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Can I come Thursday?</div>
|
||||||
|
</div>
|
||||||
|
<div class="marquee-row marquee-row-2">
|
||||||
|
<div class="wa-bubble outgoing">Hi Noor, hope you're feeling great after yesterday's session! Dr. Rami left a quick note for you 📋 <div class="wa-time">10:15 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">That's so thoughtful, thank you!</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Omar! You have a follow-up booked for next Tuesday at 3pm. Need to change it? Just reply here. <div class="wa-time">7:45 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Can we move it to Wednesday?</div>
|
||||||
|
<div class="wa-bubble outgoing">Done! ✅ Moved to Wednesday 3pm. See you then, Omar.</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Maryam, it's time for your 6-month dental cleaning. Your last visit was Sep 12. Want to book? <div class="wa-time">9:00 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Yes! Morning slot please</div>
|
||||||
|
<div class="wa-bubble outgoing">Booked! Thursday 9:30am with Dr. Khalid. We'll send a reminder the day before 👋 <div class="wa-time">9:02 AM ✓✓</div></div>
|
||||||
|
<!-- duplicate for loop -->
|
||||||
|
<div class="wa-bubble outgoing">Hi Noor, hope you're feeling great after yesterday's session! Dr. Rami left a quick note for you 📋 <div class="wa-time">10:15 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">That's so thoughtful, thank you!</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Omar! You have a follow-up booked for next Tuesday at 3pm. Need to change it? Just reply here. <div class="wa-time">7:45 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Can we move it to Wednesday?</div>
|
||||||
|
<div class="wa-bubble outgoing">Done! ✅ Moved to Wednesday 3pm. See you then, Omar.</div>
|
||||||
|
<div class="wa-bubble outgoing">Hi Maryam, it's time for your 6-month dental cleaning. Your last visit was Sep 12. Want to book? <div class="wa-time">9:00 AM ✓✓</div></div>
|
||||||
|
<div class="wa-bubble">Yes! Morning slot please</div>
|
||||||
|
<div class="wa-bubble outgoing">Booked! Thursday 9:30am with Dr. Khalid. We'll send a reminder the day before 👋 <div class="wa-time">9:02 AM ✓✓</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- ── STATS BAR ── -->
|
<!-- ── STATS BAR ── -->
|
||||||
<section class="stats-bar">
|
<section class="stats-bar">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="stats-row">
|
<div class="stats-row">
|
||||||
<div class="stat-item fade">
|
<div class="stat-item fade">
|
||||||
<div class="stat-num">40%</div>
|
<div class="stat-num">40%</div>
|
||||||
<div class="stat-lbl">Of appointments don't show. One WhatsApp cuts that in half.</div>
|
<div class="stat-lbl">Of appointments no-show. One WhatsApp cuts that in half.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item fade">
|
<div class="stat-item fade">
|
||||||
<div class="stat-num">98%</div>
|
<div class="stat-num">98%</div>
|
||||||
@@ -333,48 +488,48 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="stat-item fade">
|
<div class="stat-item fade">
|
||||||
<div class="stat-num">2hrs</div>
|
<div class="stat-num">2hrs</div>
|
||||||
<div class="stat-lbl">Back in your team's day. Every single day.</div>
|
<div class="stat-lbl">Back in your receptionist's day. Every single day.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ── SPLIT 1 — receptionist ── -->
|
<!-- ── SPLIT 1 — The Problem ── -->
|
||||||
<section class="split">
|
<section class="split">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="split-grid">
|
<div class="split-grid">
|
||||||
<div class="split-img fade">
|
<div class="split-img fade">
|
||||||
<img src="img/receptionist-human.jpg" alt="Calm, unhurried clinic receptionist">
|
<img src="img/receptionist-human.jpg" alt="Receptionist manually sending WhatsApp messages">
|
||||||
</div>
|
</div>
|
||||||
<div class="split-body fade">
|
<div class="split-body fade">
|
||||||
<div class="eyebrow">The Problem</div>
|
<div class="eyebrow">The Problem</div>
|
||||||
<h2>Your receptionist is a reminder bot. She shouldn't be.</h2>
|
<h2>You already use WhatsApp. You just do it the hard way.</h2>
|
||||||
<p>Every morning, your front desk opens WhatsApp and starts copying and pasting. "Hi [name], reminder for tomorrow at 10am." Again. Again. Again. Two hours gone before the first patient walks in. Meanwhile a new lead just messaged — and nobody saw it for three hours.</p>
|
<p>Your clinic isn't ignoring WhatsApp — you're using it every day. But it's manual. Your receptionist opens the app, finds the patient, types the reminder, sends it, moves to the next one. Two hours gone. And the new lead that messaged at 9pm? Nobody saw it until morning.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>2+ hours daily copy-pasting WhatsApp reminders by hand</li>
|
<li>2+ hours daily copy-pasting the same WhatsApp reminder</li>
|
||||||
<li>New leads going cold while your team is in consultations</li>
|
<li>New leads going cold while your team is with patients</li>
|
||||||
<li>No-shows from patients who simply forgot — one message would have fixed it</li>
|
<li>No-shows from patients who simply forgot — one automated message would've saved it</li>
|
||||||
<li>Patient history split across phones, notebooks, and memory</li>
|
<li>Patient history scattered across personal phones and notebooks</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="#features" class="btn btn-primary">See the Fix →</a>
|
<a href="#how" class="btn btn-primary">See the Fix →</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ── SPLIT 2 — doctor consult ── -->
|
<!-- ── SPLIT 2 — The Solution ── -->
|
||||||
<section class="split alt flip">
|
<section class="split alt flip">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="split-grid">
|
<div class="split-grid">
|
||||||
<div class="split-body fade">
|
<div class="split-body fade">
|
||||||
<div class="eyebrow">The Solution</div>
|
<div class="eyebrow">The Solution</div>
|
||||||
<h2>The reminder goes out. You didn't send it.</h2>
|
<h2>Same WhatsApp messages. Zero manual effort.</h2>
|
||||||
<p>24 hours before the appointment, Clinera sends a WhatsApp. 2 hours before, another one. A new lead messages at 11pm — they get a reply instantly. Your team walks in the next morning to confirmed appointments, warm leads, and zero copy-pasting.</p>
|
<p>Clinera sends the exact reminders your team already sends — but automatically. 24 hours before, 2 hours before, every appointment. A lead messages at 11pm, they get an instant reply. Your team walks in to confirmed appointments and warm leads. No copy-pasting. No chasing.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>WhatsApp reminder sent automatically 24h and 2h before — every appointment</li>
|
<li>Automatic WhatsApp reminder 24h and 2h before every appointment</li>
|
||||||
<li>Every new lead gets an instant reply, even at 11pm on a Friday</li>
|
<li>Instant reply to every new lead — even at midnight</li>
|
||||||
<li>Post-visit rebooking nudge goes out automatically — patients come back</li>
|
<li>Post-visit rebooking nudge goes out automatically — patients come back</li>
|
||||||
<li>Full patient history on one screen before they walk through the door</li>
|
<li>Full patient history on one screen — no digging through phone chats</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="#start" class="btn btn-primary">Start Free Today →</a>
|
<a href="#start" class="btn btn-primary">Start Free Today →</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -385,34 +540,66 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- ── HOW IT WORKS — 3 STEPS ── -->
|
||||||
|
<section class="steps-section" id="how">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="steps-header fade">
|
||||||
|
<h2>Three steps. Ten minutes. Done forever.</h2>
|
||||||
|
<p>You don't need to change how your clinic works. Clinera plugs into what you already do.</p>
|
||||||
|
</div>
|
||||||
|
<div class="steps-grid">
|
||||||
|
<div class="step-item fade">
|
||||||
|
<div class="step-num">01</div>
|
||||||
|
<h3>Connect your WhatsApp</h3>
|
||||||
|
<p>Link your clinic's WhatsApp Business number. Takes 2 minutes. Your patients see messages from the number they already know.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-item fade">
|
||||||
|
<div class="step-num">02</div>
|
||||||
|
<h3>Import your schedule</h3>
|
||||||
|
<p>Add your appointments — or sync from your existing calendar. Clinera picks up every booking and queues the reminders automatically.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-item fade">
|
||||||
|
<div class="step-num">03</div>
|
||||||
|
<h3>Watch it run</h3>
|
||||||
|
<p>Reminders go out. Leads get replied to. Rebooking nudges land. Your receptionist opens WhatsApp in the morning — and there's nothing to do.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── FULL-BLEED IMAGE BREAK ── -->
|
||||||
|
<div class="image-break">
|
||||||
|
<img src="img/clinic-team.jpg" alt="Clinic team working together, organised and focused">
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ── PHOTO SLIDER ── -->
|
<!-- ── PHOTO SLIDER ── -->
|
||||||
<section class="slider-section" id="features">
|
<section class="slider-section" id="features">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="slider-header fade">
|
<div class="slider-header fade">
|
||||||
<h2>What happens when the admin runs itself</h2>
|
<h2>What happens when the admin runs itself</h2>
|
||||||
<p>Your team stops chasing. Your patients feel remembered. Your numbers go up. This is what that looks like.</p>
|
<p>Your team stops chasing. Your patients feel remembered. Your numbers go up.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slider-track-wrap">
|
<div class="slider-track-wrap">
|
||||||
<div class="slider-track" id="photoSlider">
|
<div class="slider-track" id="photoSlider">
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/patient-confident.jpg" alt="Patient leaving clinic confident and happy">
|
<img src="img/patient-confident.jpg" alt="Patient leaving clinic confident">
|
||||||
<div class="slide-caption">A patient who got a reminder, showed up. A patient who felt cared for, came back.</div>
|
<div class="slide-caption">A patient who got a reminder showed up. A patient who felt cared for came back.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/clinic-team.jpg" alt="Clinic team relaxed and well-organised">
|
<img src="img/clinic-interior.jpg" alt="Modern clinic interior">
|
||||||
<div class="slide-caption">No morning WhatsApp marathon. Just a team that focuses on people.</div>
|
<div class="slide-caption">Full calendar. Organised records. Zero chasing.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/mobile-whatsapp.jpg" alt="Patient receiving WhatsApp reminder on phone">
|
<img src="img/mobile-whatsapp.jpg" alt="Patient receiving WhatsApp reminder">
|
||||||
<div class="slide-caption">They check WhatsApp 23 times a day. Your reminder is already there.</div>
|
<div class="slide-caption">They check WhatsApp 23 times a day. Your reminder is already there.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/receptionist-human.jpg" alt="Receptionist smiling and unhurried">
|
<img src="img/receptionist-human.jpg" alt="Receptionist relaxed and focused">
|
||||||
<div class="slide-caption">She's not copy-pasting reminders. She's running the front desk.</div>
|
<div class="slide-caption">She's not copy-pasting reminders. She's running the front desk.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/doctor-consult.jpg" alt="Doctor in undivided consultation">
|
<img src="img/doctor-consult.jpg" alt="Doctor in consultation">
|
||||||
<div class="slide-caption">The admin is done. Now it's just the patient.</div>
|
<div class="slide-caption">The admin is done. Now it's just the patient.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
@@ -420,15 +607,11 @@
|
|||||||
<div class="slide-caption">When nothing is falling through the cracks, it shows.</div>
|
<div class="slide-caption">When nothing is falling through the cracks, it shows.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/team-editorial.jpg" alt="Healthcare team working together">
|
<img src="img/team-editorial.jpg" alt="Healthcare team">
|
||||||
<div class="slide-caption">The best clinic teams aren't the busiest. They're the most organised.</div>
|
<div class="slide-caption">The best clinic teams aren't the busiest. They're the most organised.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<img src="img/clinic-interior.jpg" alt="Modern bright clinic">
|
<img src="img/patient-human.jpg" alt="Patient feeling cared for">
|
||||||
<div class="slide-caption">Full calendar. Organised records. Zero chasing.</div>
|
|
||||||
</div>
|
|
||||||
<div class="slide">
|
|
||||||
<img src="img/patient-human.jpg" alt="Patient feeling genuinely cared for">
|
|
||||||
<div class="slide-caption">A message with their name. At the right time. They notice.</div>
|
<div class="slide-caption">A message with their name. At the right time. They notice.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -453,22 +636,22 @@
|
|||||||
<div class="feat-card">
|
<div class="feat-card">
|
||||||
<div class="feat-icon">💬</div>
|
<div class="feat-icon">💬</div>
|
||||||
<h3>The reminder they actually open</h3>
|
<h3>The reminder they actually open</h3>
|
||||||
<p>24h before. 2h before. Sent on WhatsApp automatically. Your no-show rate drops the first week — without your team touching a thing.</p>
|
<p>24h before. 2h before. Sent on WhatsApp automatically. The same message your receptionist types every morning — except she doesn't have to.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feat-card">
|
<div class="feat-card">
|
||||||
<div class="feat-icon">🎯</div>
|
<div class="feat-icon">🎯</div>
|
||||||
<h3>The follow-up that never forgets</h3>
|
<h3>Leads replied to instantly</h3>
|
||||||
<p>New lead at 11pm? They get a reply instantly. Every inquiry is followed up — whether your team is with patients, at lunch, or asleep.</p>
|
<p>New inquiry at 11pm? They get a reply in seconds. Every lead is followed up — whether your team is with patients, at lunch, or asleep.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feat-card">
|
<div class="feat-card">
|
||||||
<div class="feat-icon">📅</div>
|
<div class="feat-icon">📅</div>
|
||||||
<h3>Book on WhatsApp. No portals.</h3>
|
<h3>Book on WhatsApp. No portals.</h3>
|
||||||
<p>Patients message to book. Clinera confirms the slot, updates the calendar, and sends the details — all without your receptionist in the loop.</p>
|
<p>Patients message to book. Clinera confirms the slot, updates the calendar, sends the details — no receptionist in the loop.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feat-card">
|
<div class="feat-card">
|
||||||
<div class="feat-icon">📋</div>
|
<div class="feat-icon">📋</div>
|
||||||
<h3>Every patient's history. One screen.</h3>
|
<h3>Every patient. One screen.</h3>
|
||||||
<p>Notes, treatments, allergies, last visit — all there before they walk in. Your doctor stops asking "remind me what we did last time?"</p>
|
<p>Notes, treatments, allergies, last visit — all there before they walk in. No more "remind me what we did last time?"</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feat-card">
|
<div class="feat-card">
|
||||||
<div class="feat-icon">👥</div>
|
<div class="feat-icon">👥</div>
|
||||||
@@ -477,14 +660,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="feat-card hl">
|
<div class="feat-card hl">
|
||||||
<div class="feat-icon">🆓</div>
|
<div class="feat-icon">🆓</div>
|
||||||
<h3>Free. Not "free trial". Not "free tier". Free.</h3>
|
<h3>Free. Not "free trial". Free.</h3>
|
||||||
<p>Every feature. Every patient. No credit card. No expiry. We make money helping clinics grow — not from monthly subscriptions.</p>
|
<p>Every feature. Every patient. No credit card. No expiry. We make money helping clinics grow — not from subscriptions.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ── SPLIT 3 — patient confident ── -->
|
<!-- ── SPLIT 3 — The Outcome ── -->
|
||||||
<section class="split alt">
|
<section class="split alt">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="split-grid">
|
<div class="split-grid">
|
||||||
@@ -493,12 +676,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="split-body fade">
|
<div class="split-body fade">
|
||||||
<div class="eyebrow">The Outcome</div>
|
<div class="eyebrow">The Outcome</div>
|
||||||
<h2>The patient who felt forgotten? That was a WhatsApp message away.</h2>
|
<h2>The patient who ghosted? That was one WhatsApp away.</h2>
|
||||||
<p>Most patients don't leave a clinic because of bad care. They leave because nobody followed up. One message after their visit — with their name, their treatment, their next step — is the difference between a patient you see once and one who refers their friends.</p>
|
<p>Most patients don't leave because of bad care. They leave because nobody followed up. One message after their visit — with their name, their treatment, their next step — is the difference between a one-time visit and a patient who refers friends.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Post-visit WhatsApp nudge sent automatically — rebooking happens without asking</li>
|
<li>Post-visit rebooking nudge sent automatically — no asking required</li>
|
||||||
<li>Every message personalised with the patient's name and treatment details</li>
|
<li>Every message personalised with name and treatment details</li>
|
||||||
<li>Recall reminders sent at the right interval — 3 months, 6 months, your call</li>
|
<li>Recall reminders at your intervals — 3 months, 6 months, your call</li>
|
||||||
<li>Retention goes up. Your team did nothing extra. That's the point.</li>
|
<li>Retention goes up. Your team did nothing extra. That's the point.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="#start" class="btn btn-primary">Start Free →</a>
|
<a href="#start" class="btn btn-primary">Start Free →</a>
|
||||||
@@ -538,7 +721,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="testi-track" id="testiSlider">
|
<div class="testi-track" id="testiSlider">
|
||||||
<div class="testi-card">
|
<div class="testi-card">
|
||||||
<blockquote>"Every morning, my receptionist would spend the first two hours copy-pasting WhatsApp reminders. I didn't realise how absurd that was until Clinera just... did it instead. No-shows dropped 47% in the first month."</blockquote>
|
<blockquote>"My receptionist used to spend two hours every morning copy-pasting WhatsApp reminders. She'd been doing it for three years. Clinera replaced that on day one. No-shows dropped 47% in a month."</blockquote>
|
||||||
<div class="testi-author">
|
<div class="testi-author">
|
||||||
<div class="testi-avatar-init">SK</div>
|
<div class="testi-avatar-init">SK</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -548,7 +731,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="testi-card">
|
<div class="testi-card">
|
||||||
<blockquote>"We had a lead come in at 9pm on a Tuesday. Clinera replied within a minute, collected their details, and booked them in. I saw it in the morning. She's been a patient for three months now."</blockquote>
|
<blockquote>"A lead messaged at 9pm on a Tuesday. Clinera replied in under a minute, collected her details, booked her in. I saw it in the morning. She's been a patient for three months now."</blockquote>
|
||||||
<div class="testi-author">
|
<div class="testi-author">
|
||||||
<div class="testi-avatar-init">MA</div>
|
<div class="testi-avatar-init">MA</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -558,7 +741,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="testi-card">
|
<div class="testi-card">
|
||||||
<blockquote>"I tried three other systems. All had WhatsApp as an add-on — expensive, clunky, and it never quite worked. Clinera is WhatsApp first. That's the whole product. That's the difference."</blockquote>
|
<blockquote>"We were already using WhatsApp for reminders — just doing it by hand. Clinera automates exactly what we were already doing. Same messages, zero effort. Should've done this years ago."</blockquote>
|
||||||
<div class="testi-author">
|
<div class="testi-author">
|
||||||
<div class="testi-avatar-init">LN</div>
|
<div class="testi-avatar-init">LN</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -591,8 +774,8 @@
|
|||||||
<section class="footer-cta" id="start">
|
<section class="footer-cta" id="start">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="footer-cta-inner">
|
<div class="footer-cta-inner">
|
||||||
<h2>Right now, a patient forgot their appointment.<br><em>One WhatsApp would have fixed it.</em></h2>
|
<h2>Your receptionist sent 47 WhatsApp reminders this morning.<br><em>Clinera sends them in zero seconds.</em></h2>
|
||||||
<p>Every day you don't automate is another two hours of manual reminders, another lead that went cold, another no-show that cost you a slot. Takes 10 minutes to set up. Free forever.</p>
|
<p>Every day you don't automate is another two hours of copy-pasting, another lead that went cold, another no-show that cost you a slot. Takes 10 minutes to set up. Free forever.</p>
|
||||||
<form class="email-form" action="#" method="POST">
|
<form class="email-form" action="#" method="POST">
|
||||||
<input type="email" name="email" placeholder="Your work email" required aria-label="Email">
|
<input type="email" name="email" placeholder="Your work email" required aria-label="Email">
|
||||||
<button type="submit" class="btn btn-primary">Start Free Today →</button>
|
<button type="submit" class="btn btn-primary">Start Free Today →</button>
|
||||||
@@ -604,7 +787,7 @@
|
|||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<p>© 2026 Clinera · Clinic Management Built for WhatsApp-First GCC</p>
|
<p>© 2026 Clinera · WhatsApp-First Clinic Management for GCC</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
@@ -636,7 +819,6 @@
|
|||||||
const count = slides.length;
|
const count = slides.length;
|
||||||
let current = 0;
|
let current = 0;
|
||||||
|
|
||||||
// Build dots
|
|
||||||
for (let i = 0; i < count; i++) {
|
for (let i = 0; i < count; i++) {
|
||||||
const d = document.createElement('div');
|
const d = document.createElement('div');
|
||||||
d.className = 'slider-dot' + (i === 0 ? ' active' : '');
|
d.className = 'slider-dot' + (i === 0 ? ' active' : '');
|
||||||
@@ -645,7 +827,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getSlideWidth() {
|
function getSlideWidth() {
|
||||||
return slides[0].offsetWidth + 20; // gap
|
return slides[0].offsetWidth + 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollTo(idx) {
|
function scrollTo(idx) {
|
||||||
@@ -657,7 +839,6 @@
|
|||||||
prev.addEventListener('click', () => scrollTo(current - 1));
|
prev.addEventListener('click', () => scrollTo(current - 1));
|
||||||
next.addEventListener('click', () => scrollTo(current + 1));
|
next.addEventListener('click', () => scrollTo(current + 1));
|
||||||
|
|
||||||
// Sync dots on manual scroll
|
|
||||||
track.addEventListener('scroll', () => {
|
track.addEventListener('scroll', () => {
|
||||||
const idx = Math.round(track.scrollLeft / getSlideWidth());
|
const idx = Math.round(track.scrollLeft / getSlideWidth());
|
||||||
if (idx !== current) {
|
if (idx !== current) {
|
||||||
@@ -669,8 +850,6 @@
|
|||||||
|
|
||||||
initSlider('photoSlider', 'photoPrev', 'photoNext', 'photoDots');
|
initSlider('photoSlider', 'photoPrev', 'photoNext', 'photoDots');
|
||||||
initSlider('testiSlider', 'testiPrev', 'testiNext', 'testiDots');
|
initSlider('testiSlider', 'testiPrev', 'testiNext', 'testiDots');
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user