856 lines
39 KiB
HTML
856 lines
39 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;
|
|
color: rgba(255,255,255,0.6);
|
|
margin-top: 4px;
|
|
text-align: right;
|
|
}
|
|
.wa-bubble.outgoing .wa-time {
|
|
color: rgba(0,0,0,0.4);
|
|
}
|
|
.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">Your receptionist is copy-pasting the same message 40 times a day. Clinera sends it automatically — 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>Open WhatsApp. Find patient. Type reminder. Send. Repeat 40 times. That's two hours gone before the first appointment. The lead who messaged at 9pm? Nobody saw it until morning.</p>
|
|
<ul>
|
|
<li>2 hours daily on copy-paste reminders</li>
|
|
<li>Leads going cold overnight</li>
|
|
<li>No-shows that one message would have stopped</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>The same messages your team already sends — except Clinera sends them. 24h before. 2h before. After the visit. At midnight. Without anyone touching it.</p>
|
|
<ul>
|
|
<li>Reminders at 24h and 2h — automatic</li>
|
|
<li>New leads replied to in seconds, day or night</li>
|
|
<li>Rebooking nudge sent 3 days after every visit</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>Nothing to change. Nothing to learn. Just connect and go.</p>
|
|
</div>
|
|
<div class="steps-grid">
|
|
<div class="step-item fade">
|
|
<div class="step-num">01</div>
|
|
<h3>Connect your WhatsApp number</h3>
|
|
<p>Your existing WhatsApp Business number. 2 minutes. Patients see messages from the number they already know.</p>
|
|
</div>
|
|
<div class="step-item fade">
|
|
<div class="step-num">02</div>
|
|
<h3>Add your appointments</h3>
|
|
<p>Import your schedule or add bookings manually. Clinera queues the reminders automatically.</p>
|
|
</div>
|
|
<div class="step-item fade">
|
|
<div class="step-num">03</div>
|
|
<h3>Walk away</h3>
|
|
<p>Reminders send. Leads get replied to. Your receptionist opens WhatsApp — 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. Automatic. No-shows drop the first week.</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon">🎯</div>
|
|
<h3>Leads replied to in seconds</h3>
|
|
<p>11pm enquiry. Instant WhatsApp reply. By morning it's already a booked appointment.</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon">📅</div>
|
|
<h3>Book on WhatsApp</h3>
|
|
<p>Patient messages to book. Clinera confirms, updates the calendar, sends the details. Nobody lifted a finger.</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon">📋</div>
|
|
<h3>Every patient. One screen.</h3>
|
|
<p>Notes, treatments, last visit — all there before they walk in. No digging through phone chats.</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon">👥</div>
|
|
<h3>Your whole team. No spreadsheet.</h3>
|
|
<p>Schedules and permissions in one place. No double-bookings. No WhatsApp group chaos.</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 card. No expiry. No catch.</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 WhatsApp — with their name, their treatment, their next step — changes that.</p>
|
|
<ul>
|
|
<li>Post-visit rebooking nudge — automatic</li>
|
|
<li>Recall reminders at 3 or 6 months — your call</li>
|
|
<li>Retention goes up. Your team did nothing extra.</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">No catch. Every feature, every patient, no card, no expiry.</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>
|