856 lines
40 KiB
HTML
856 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clinera — You're Already Sending WhatsApp Reminders. Stop Doing It By Hand.</title>
|
|
<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 — 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:type" content="website">
|
|
<meta property="og:url" content="https://clinera.quikcue.com">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff;
|
|
--bg-soft: #f7f8fa;
|
|
--border: #e5e7eb;
|
|
--accent: #00b8ad;
|
|
--accent-dk: #009990;
|
|
--accent-bg: #e6faf9;
|
|
--text: #0f1117;
|
|
--navy: #07111f;
|
|
--muted: #6b7280;
|
|
--dim: #9ca3af;
|
|
--font: 'Inter', -apple-system, sans-serif;
|
|
--max: 1120px;
|
|
--r: 14px;
|
|
--r-sm: 8px;
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
|
|
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
|
|
img { max-width: 100%; display: block; }
|
|
|
|
/* BUTTONS */
|
|
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--r-sm); font-family: var(--font); font-weight: 700; font-size: 1rem; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; white-space: nowrap; }
|
|
.btn-primary { background: var(--accent); color: #fff; }
|
|
.btn-primary:hover { background: var(--accent-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,184,173,0.3); }
|
|
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
|
|
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
|
|
.btn-white { background: #fff; color: var(--text); }
|
|
.btn-white:hover { background: #f0fffe; transform: translateY(-1px); }
|
|
|
|
/* 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 .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
|
|
.logo { font-weight: 900; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--text); }
|
|
.logo span { color: var(--accent); }
|
|
nav .btn { padding: 10px 20px; font-size: 0.875rem; }
|
|
|
|
/* ── HERO ── */
|
|
.hero {
|
|
padding-top: 64px;
|
|
min-height: calc(100vh - 64px);
|
|
background: #fff;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -20%; left: -10%;
|
|
width: 50%; height: 100%;
|
|
background: radial-gradient(ellipse at 30% 40%, rgba(0,184,173,0.05) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-left {
|
|
display: flex; flex-direction: column; justify-content: center;
|
|
padding: 60px 40px 60px 6vw;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 5px 14px; border-radius: 100px;
|
|
background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.3);
|
|
font-size: 0.72rem; font-weight: 600; color: var(--accent);
|
|
margin-bottom: 28px; width: fit-content; letter-spacing: 0.04em; text-transform: uppercase;
|
|
}
|
|
.hero-badge::before { content: '✦'; font-size: 0.6rem; }
|
|
.hero h1 {
|
|
font-size: clamp(2.6rem, 4.5vw, 4.4rem);
|
|
font-weight: 900;
|
|
line-height: 1.08;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 28px;
|
|
color: var(--text);
|
|
}
|
|
.hero h1 em { font-style: normal; color: var(--accent); }
|
|
.hero-sub {
|
|
font-size: 1.05rem; color: var(--muted);
|
|
line-height: 1.75; margin-bottom: 36px; max-width: 440px;
|
|
}
|
|
.hero-ctas { display: flex; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
|
|
.trust-strip {
|
|
display: flex; flex-wrap: wrap; gap: 4px 20px;
|
|
font-size: 0.73rem; color: var(--dim); font-weight: 500;
|
|
padding-top: 28px; border-top: 1px solid var(--border);
|
|
}
|
|
.trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.4rem; vertical-align: middle; }
|
|
.hero-right {
|
|
padding: 40px 5vw 40px 24px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.hero-right::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 24px 3vw 24px 0;
|
|
background: #f0f4f4;
|
|
border-radius: 24px;
|
|
z-index: 0;
|
|
}
|
|
.hero-card {
|
|
width: 100%; max-width: 520px;
|
|
aspect-ratio: 4/5;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
position: relative; z-index: 1;
|
|
box-shadow:
|
|
0 2px 0 1px rgba(0,0,0,0.04),
|
|
0 12px 40px rgba(0,0,0,0.12),
|
|
0 32px 80px rgba(0,0,0,0.08);
|
|
}
|
|
.hero-card img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover; object-position: center 15%;
|
|
display: block;
|
|
}
|
|
@media (max-width: 860px) {
|
|
.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::before { inset: 0; border-radius: 18px; }
|
|
.hero-card { aspect-ratio: 3/2; max-width: 100%; }
|
|
.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.6);
|
|
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.7;
|
|
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 { background: var(--navy); padding: 72px 0; border-top: 1px solid rgba(255,255,255,0.06); }
|
|
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
|
|
.stat-item { text-align: center; padding: 32px 24px; }
|
|
.stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.08); }
|
|
.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.78rem; color: rgba(255,255,255,0.65); margin-top: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
|
|
|
|
/* ── SPLIT SECTIONS ── */
|
|
.split { padding: 88px 0; }
|
|
.split-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
|
|
.split-img { border-radius: var(--r); overflow: hidden; }
|
|
.split-img img { width: 100%; height: 460px; object-fit: cover; }
|
|
.split-body { }
|
|
.split-body .eyebrow { font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
|
|
.split-body h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }
|
|
.split-body p { color: var(--muted); line-height: 1.75; margin-bottom: 24px; }
|
|
.split-body ul { list-style: none; display: grid; gap: 10px; margin-bottom: 32px; }
|
|
.split-body ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text); }
|
|
.split-body ul li::before { content: '✓'; color: var(--accent); font-weight: 800; margin-top: 1px; flex-shrink: 0; }
|
|
.split.alt { background: var(--bg-soft); }
|
|
|
|
/* ── HOW IT WORKS — STEPS ── */
|
|
.steps-section { padding: 96px 0; background: var(--bg-soft); }
|
|
.steps-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
|
|
.steps-header h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
|
|
.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-section { padding: 72px 0; overflow: hidden; background: var(--bg-soft); }
|
|
.slider-header { text-align: center; max-width: 600px; margin: 0 auto 40px; }
|
|
.slider-header h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
|
|
.slider-header p { color: var(--muted); }
|
|
.slider-track-wrap { position: relative; }
|
|
.slider-track {
|
|
display: flex; gap: 20px;
|
|
overflow-x: auto; scroll-snap-type: x mandatory;
|
|
scrollbar-width: none; padding: 8px 24px 16px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.slider-track::-webkit-scrollbar { display: none; }
|
|
.slide {
|
|
flex: 0 0 320px; scroll-snap-align: start;
|
|
border-radius: var(--r); overflow: hidden;
|
|
position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
|
}
|
|
.slide img { width: 100%; height: 400px; object-fit: cover; display: block; }
|
|
.slide-caption {
|
|
position: absolute; bottom: 0; left: 0; right: 0;
|
|
padding: 36px 20px 20px;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
|
|
color: #fff; font-size: 0.85rem; font-weight: 600;
|
|
}
|
|
.slider-controls { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
|
|
.slider-btn {
|
|
width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border);
|
|
background: #fff; cursor: pointer; font-size: 1.1rem;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: all 0.2s;
|
|
}
|
|
.slider-btn:hover { border-color: var(--accent); color: var(--accent); }
|
|
.slider-dots { display: flex; gap: 6px; align-items: center; }
|
|
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all 0.2s; }
|
|
.slider-dot.active { background: var(--accent); width: 22px; border-radius: 4px; }
|
|
|
|
/* ── FEATURES ── */
|
|
.features { padding: 88px 0; }
|
|
.section-hd { text-align: center; max-width: 600px; margin: 0 auto 52px; }
|
|
.section-hd h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
|
|
.section-hd p { color: var(--muted); }
|
|
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
|
|
.feat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 32px; transition: all 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.04); opacity: 0; transform: translateY(16px); }
|
|
.feat-card.visible { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s, box-shadow 0.2s; }
|
|
.feat-card:hover { border-color: var(--accent); box-shadow: 0 6px 24px rgba(0,184,173,0.1); }
|
|
.feat-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 16px; }
|
|
.feat-card h3 { font-weight: 700; margin-bottom: 8px; }
|
|
.feat-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
|
|
.feat-card.hl { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-bg) 0%, #fff 100%); }
|
|
|
|
/* ── FREE BLOCK ── */
|
|
.free-section { padding: 88px 0; background: var(--bg-soft); }
|
|
.free-block {
|
|
background: var(--navy); border-radius: var(--r);
|
|
padding: 64px 48px; text-align: center;
|
|
max-width: 760px; margin: 0 auto;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.free-block::before {
|
|
content: ''; position: absolute; top: -120px; right: -120px;
|
|
width: 360px; height: 360px; border-radius: 50%;
|
|
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: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; }
|
|
.free-block h2 em { font-style: normal; color: var(--accent); }
|
|
.free-sub { color: rgba(255,255,255,0.78); 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 li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; color: #fff; }
|
|
.checklist li::before { content: '✓'; color: var(--accent); font-weight: 800; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,184,173,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }
|
|
|
|
/* ── TESTIMONIALS SLIDER ── */
|
|
.testi-section { padding: 88px 0; background: var(--bg-soft); }
|
|
.testi-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 24px 16px; -webkit-overflow-scrolling: touch; }
|
|
.testi-track::-webkit-scrollbar { display: none; }
|
|
.testi-card {
|
|
flex: 0 0 min(480px, 85vw); scroll-snap-align: start;
|
|
background: var(--bg); border: 1px solid var(--border);
|
|
border-radius: var(--r); padding: 36px;
|
|
border-top: 3px solid var(--accent);
|
|
box-shadow: 0 2px 16px rgba(0,0,0,0.05);
|
|
}
|
|
.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-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-role { font-size: 0.8rem; color: var(--muted); }
|
|
|
|
/* ── FOOTER CTA ── */
|
|
.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 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 > .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 input { flex: 1; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); color: #fff; font-family: var(--font); font-size: 0.95rem; }
|
|
.email-form input::placeholder { color: rgba(255,255,255,0.3); }
|
|
.email-form input:focus { outline: none; border-color: var(--accent); }
|
|
.footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
|
|
|
|
/* FOOTER */
|
|
footer { padding: 28px 0; background: #070f1e; text-align: center; }
|
|
footer p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
|
|
|
|
/* FADE-IN */
|
|
.fade { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
|
|
.fade.visible { opacity: 1; transform: translateY(0); }
|
|
|
|
/* RESPONSIVE */
|
|
@media (min-width: 768px) {
|
|
.split-grid { grid-template-columns: 1fr 1fr; }
|
|
.split.flip .split-img { order: 2; }
|
|
.split.flip .split-body { order: 1; }
|
|
.slide { flex: 0 0 380px; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.stats-row { grid-template-columns: 1fr; }
|
|
.stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
|
|
.email-form { flex-direction: column; }
|
|
.hero-ctas .btn { width: 100%; justify-content: center; }
|
|
.free-block { padding: 40px 24px; }
|
|
.slide { flex: 0 0 80vw; }
|
|
.image-break { height: 260px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="wrap">
|
|
<div class="logo">Clinera<span>.</span></div>
|
|
<a href="/register" class="btn btn-primary">Start Free →</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ── HERO ── -->
|
|
<section class="hero">
|
|
<div class="hero-left">
|
|
<div class="hero-badge">Automate What You Already Do</div>
|
|
<h1>You're already sending <em>WhatsApp</em> reminders.<br>Stop doing it by hand.</h1>
|
|
<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">
|
|
<a href="/register" class="btn btn-primary">Automate Your Reminders →</a>
|
|
<a href="#how" 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>
|
|
<div class="hero-right">
|
|
<div class="hero-card">
|
|
<img src="img/hero-human.jpg" alt="Clinic owner in control, Dubai">
|
|
</div>
|
|
</div>
|
|
</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 ── -->
|
|
<section class="stats-bar">
|
|
<div class="wrap">
|
|
<div class="stats-row">
|
|
<div class="stat-item fade">
|
|
<div class="stat-num">40%</div>
|
|
<div class="stat-lbl">Of appointments no-show. One WhatsApp cuts that in half.</div>
|
|
</div>
|
|
<div class="stat-item fade">
|
|
<div class="stat-num">98%</div>
|
|
<div class="stat-lbl">WhatsApp open rate. Your email reminder? 15%.</div>
|
|
</div>
|
|
<div class="stat-item fade">
|
|
<div class="stat-num">2hrs</div>
|
|
<div class="stat-lbl">Back in your receptionist's day. Every single day.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── SPLIT 1 — The Problem ── -->
|
|
<section class="split">
|
|
<div class="wrap">
|
|
<div class="split-grid">
|
|
<div class="split-img fade">
|
|
<img src="img/receptionist-human.jpg" alt="Receptionist manually sending WhatsApp messages">
|
|
</div>
|
|
<div class="split-body fade">
|
|
<div class="eyebrow">The Problem</div>
|
|
<h2>You already use WhatsApp. You just do it the hard way.</h2>
|
|
<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>
|
|
<li>2+ hours daily copy-pasting the same WhatsApp reminder</li>
|
|
<li>New leads going cold while your team is with patients</li>
|
|
<li>No-shows from patients who simply forgot — one automated message would've saved it</li>
|
|
<li>Patient history scattered across personal phones and notebooks</li>
|
|
</ul>
|
|
<a href="#how" class="btn btn-primary">See the Fix →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── SPLIT 2 — The Solution ── -->
|
|
<section class="split alt flip">
|
|
<div class="wrap">
|
|
<div class="split-grid">
|
|
<div class="split-body fade">
|
|
<div class="eyebrow">The Solution</div>
|
|
<h2>Same WhatsApp messages. Zero manual effort.</h2>
|
|
<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>
|
|
<li>Automatic WhatsApp reminder 24h and 2h before every appointment</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>Full patient history on one screen — no digging through phone chats</li>
|
|
</ul>
|
|
<a href="/register" class="btn btn-primary">Start Free Today →</a>
|
|
</div>
|
|
<div class="split-img fade">
|
|
<img src="img/doctor-consult.jpg" alt="Doctor giving full attention to patient">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 ── -->
|
|
<section class="slider-section" id="features">
|
|
<div class="wrap">
|
|
<div class="slider-header fade">
|
|
<h2>What happens when the admin runs itself</h2>
|
|
<p>Your team stops chasing. Your patients feel remembered. Your numbers go up.</p>
|
|
</div>
|
|
</div>
|
|
<div class="slider-track-wrap">
|
|
<div class="slider-track" id="photoSlider">
|
|
<div class="slide">
|
|
<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>
|
|
<div class="slide">
|
|
<img src="img/clinic-interior.jpg" alt="Modern clinic interior">
|
|
<div class="slide-caption">Full calendar. Organised records. Zero chasing.</div>
|
|
</div>
|
|
<div class="slide">
|
|
<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>
|
|
<div class="slide">
|
|
<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>
|
|
<div class="slide">
|
|
<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>
|
|
<div class="slide">
|
|
<img src="img/social-candid.jpg" alt="Candid clinic moment">
|
|
<div class="slide-caption">When nothing is falling through the cracks, it shows.</div>
|
|
</div>
|
|
<div class="slide">
|
|
<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>
|
|
<div class="slide">
|
|
<img src="img/patient-human.jpg" alt="Patient feeling cared for">
|
|
<div class="slide-caption">A message with their name. At the right time. They notice.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrap">
|
|
<div class="slider-controls">
|
|
<button class="slider-btn" id="photoPrev">←</button>
|
|
<div class="slider-dots" id="photoDots"></div>
|
|
<button class="slider-btn" id="photoNext">→</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── FEATURES GRID ── -->
|
|
<section class="features">
|
|
<div class="wrap">
|
|
<div class="section-hd fade">
|
|
<h2>Six things your clinic does manually today. None of them tomorrow.</h2>
|
|
<p>Built for GCC clinics. WhatsApp-native. Every feature included. Free.</p>
|
|
</div>
|
|
<div class="feat-grid">
|
|
<div class="feat-card">
|
|
<div class="feat-icon">💬</div>
|
|
<h3>The reminder they actually open</h3>
|
|
<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 class="feat-card">
|
|
<div class="feat-icon">🎯</div>
|
|
<h3>Leads replied to instantly</h3>
|
|
<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 class="feat-card">
|
|
<div class="feat-icon">📅</div>
|
|
<h3>Book on WhatsApp. No portals.</h3>
|
|
<p>Patients message to book. Clinera confirms the slot, updates the calendar, sends the details — no receptionist in the loop.</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon">📋</div>
|
|
<h3>Every patient. One screen.</h3>
|
|
<p>Notes, treatments, allergies, last visit — all there before they walk in. No more "remind me what we did last time?"</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon">👥</div>
|
|
<h3>Your whole team. No spreadsheet.</h3>
|
|
<p>Schedules, permissions, workload — managed in one place. No WhatsApp group scheduling chaos. No double-bookings.</p>
|
|
</div>
|
|
<div class="feat-card hl">
|
|
<div class="feat-icon">🆓</div>
|
|
<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 subscriptions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── SPLIT 3 — The Outcome ── -->
|
|
<section class="split alt">
|
|
<div class="wrap">
|
|
<div class="split-grid">
|
|
<div class="split-img fade">
|
|
<img src="img/patient-confident.jpg" alt="Happy patient leaving the clinic">
|
|
</div>
|
|
<div class="split-body fade">
|
|
<div class="eyebrow">The Outcome</div>
|
|
<h2>The patient who ghosted? That was one WhatsApp away.</h2>
|
|
<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>
|
|
<li>Post-visit rebooking nudge sent automatically — no asking required</li>
|
|
<li>Every message personalised with name and treatment details</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>
|
|
</ul>
|
|
<a href="/register" class="btn btn-primary">Start Free →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── FREE FOREVER ── -->
|
|
<section class="free-section">
|
|
<div class="wrap">
|
|
<div class="free-block fade">
|
|
<h2><em>Free.</em> Not "free trial". Not "free with limits". Free.</h2>
|
|
<p class="free-sub">We know what you're thinking. There's a catch. There isn't.<br>Every feature, every patient, no card, no expiry — because we make money when your clinic grows, not from your subscription.</p>
|
|
<ul class="checklist">
|
|
<li>Unlimited patients — no cap, ever</li>
|
|
<li>Unlimited appointments</li>
|
|
<li>WhatsApp reminders & instant lead follow-ups</li>
|
|
<li>Lead tracking, nurture & conversion</li>
|
|
<li>Full patient history & clinical records</li>
|
|
<li>Staff scheduling & role permissions</li>
|
|
<li>Multi-location support</li>
|
|
<li>No credit card. Not now. Not ever.</li>
|
|
</ul>
|
|
<a href="/register" class="btn btn-primary" style="font-size:1.05rem; padding:16px 36px;">Get Your Free Clinic Account →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── TESTIMONIALS SLIDER ── -->
|
|
<section class="testi-section">
|
|
<div class="wrap">
|
|
<div class="section-hd fade">
|
|
<h2>What clinics say after the first week</h2>
|
|
<p>Not "great software". Specific numbers. Real mornings.</p>
|
|
</div>
|
|
</div>
|
|
<div class="testi-track" id="testiSlider">
|
|
<div class="testi-card">
|
|
<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-avatar-init">SK</div>
|
|
<div>
|
|
<div class="testi-name">Dr. Sarah K.</div>
|
|
<div class="testi-role">Practice Manager · Dental Clinic, Dubai</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testi-card">
|
|
<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-avatar-init">MA</div>
|
|
<div>
|
|
<div class="testi-name">Dr. Mohammed A.</div>
|
|
<div class="testi-role">Clinic Director · Aesthetic Centre, Riyadh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testi-card">
|
|
<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-avatar-init">LN</div>
|
|
<div>
|
|
<div class="testi-name">Layla N.</div>
|
|
<div class="testi-role">Operations Manager · Women's Wellness Clinic, Abu Dhabi</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testi-card">
|
|
<blockquote>"I kept waiting for the invoice. Six months in, it still hasn't come. Everything works — reminders, follow-ups, records, scheduling. We haven't paid a dirham and I've stopped looking for the catch."</blockquote>
|
|
<div class="testi-author">
|
|
<div class="testi-avatar-init">RT</div>
|
|
<div>
|
|
<div class="testi-name">Rania T.</div>
|
|
<div class="testi-role">Owner · Dermatology & Skin Clinic, Jeddah</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrap">
|
|
<div class="slider-controls" style="margin-top:24px;">
|
|
<button class="slider-btn" id="testiPrev">←</button>
|
|
<div class="slider-dots" id="testiDots"></div>
|
|
<button class="slider-btn" id="testiNext">→</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── FOOTER CTA ── -->
|
|
<section class="footer-cta" id="start">
|
|
<div class="wrap">
|
|
<div class="footer-cta-inner">
|
|
<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 copy-pasting, another lead that went cold, another no-show that cost you a slot. Takes 10 minutes to set up. Free forever.</p>
|
|
<div style="margin-bottom: 20px;">
|
|
<a href="/register" class="btn btn-primary" style="font-size:1.05rem; padding:16px 36px;">Start Free Today →</a>
|
|
</div>
|
|
<p class="footer-note">Free forever. No credit card. Running in under 10 minutes.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="wrap">
|
|
<p>© 2026 Clinera · WhatsApp-First Clinic Management for GCC</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// ── Fade-in on scroll ──
|
|
const io = new IntersectionObserver(entries => {
|
|
entries.forEach((e, i) => {
|
|
if (e.isIntersecting) {
|
|
const d = +e.target.dataset.delay || 0;
|
|
setTimeout(() => e.target.classList.add('visible'), d);
|
|
io.unobserve(e.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.12 });
|
|
document.querySelectorAll('.fade, .feat-card, .stat-item').forEach((el, i) => {
|
|
el.dataset.delay = (i % 4) * 80;
|
|
io.observe(el);
|
|
});
|
|
|
|
// ── Generic slider factory ──
|
|
function initSlider(trackId, prevId, nextId, dotsId) {
|
|
const track = document.getElementById(trackId);
|
|
const prev = document.getElementById(prevId);
|
|
const next = document.getElementById(nextId);
|
|
const dotsEl= document.getElementById(dotsId);
|
|
if (!track) return;
|
|
|
|
const slides = track.children;
|
|
const count = slides.length;
|
|
let current = 0;
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const d = document.createElement('div');
|
|
d.className = 'slider-dot' + (i === 0 ? ' active' : '');
|
|
d.addEventListener('click', () => scrollTo(i));
|
|
dotsEl.appendChild(d);
|
|
}
|
|
|
|
function getSlideWidth() {
|
|
return slides[0].offsetWidth + 20;
|
|
}
|
|
|
|
function scrollTo(idx) {
|
|
current = Math.max(0, Math.min(idx, count - 1));
|
|
track.scrollTo({ left: current * getSlideWidth(), behavior: 'smooth' });
|
|
dotsEl.querySelectorAll('.slider-dot').forEach((d, i) => d.classList.toggle('active', i === current));
|
|
}
|
|
|
|
prev.addEventListener('click', () => scrollTo(current - 1));
|
|
next.addEventListener('click', () => scrollTo(current + 1));
|
|
|
|
track.addEventListener('scroll', () => {
|
|
const idx = Math.round(track.scrollLeft / getSlideWidth());
|
|
if (idx !== current) {
|
|
current = idx;
|
|
dotsEl.querySelectorAll('.slider-dot').forEach((d, i) => d.classList.toggle('active', i === current));
|
|
}
|
|
}, { passive: true });
|
|
}
|
|
|
|
initSlider('photoSlider', 'photoPrev', 'photoNext', 'photoDots');
|
|
initSlider('testiSlider', 'testiPrev', 'testiNext', 'testiDots');
|
|
</script>
|
|
</body>
|
|
</html>
|