quikcue/clinera-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visually rich layout — full-bleed hero, 2 sliders, 3 split sections

Browse Source
This commit is contained in:
Omair Saleh
2026-03-13 20:53:33 +08:00
parent a6203046f5
commit d9067dc87f
1 changed files with 447 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+447 -334
View File
@@ -4,273 +4,230 @@
<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 — Run Your GCC Clinic on WhatsApp | Free Clinic Management Software</title> <title>Clinera — Run Your GCC Clinic on WhatsApp | Free Clinic Management Software</title>
<meta name="description" content="Clinera is free clinic management software built for WhatsApp-first GCC clinics. Automate patient reminders, lead follow-ups, and appointment booking through WhatsApp. Free forever."> <meta name="description" content="Clinera is free clinic management software built for WhatsApp-first GCC clinics. Automate patient reminders, lead follow-ups, and appointment booking. Free forever.">
<meta property="og:title" content="Clinera — Run Your GCC Clinic on WhatsApp"> <meta property="og:title" content="Clinera — Run Your GCC Clinic on WhatsApp">
<meta property="og:description" content="The only clinic management platform built WhatsApp-first for GCC. Automate reminders, leads & follow-ups. Free forever — no credit card required."> <meta property="og:description" content="The only clinic management platform built WhatsApp-first for GCC. Free forever.">
<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">
<meta name="twitter:card" content="summary_large_image">
<meta name="keywords" content="WhatsApp clinic appointment reminder UAE, clinic management software Dubai, aesthetic clinic software Dubai, patient follow-up automation UAE, WhatsApp appointment booking clinic, clinic WhatsApp automation Saudi Arabia">
<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&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #ffffff; --bg: #ffffff;
--bg-soft: #f7f8fa; --bg-soft: #f7f8fa;
--bg-card: #ffffff; --border: #e5e7eb;
--border: #e5e7eb; --accent: #00b8ad;
--border-mid: #d1d5db; --accent-dk: #009990;
--accent: #00b8ad; --accent-bg: #e6faf9;
--accent-dark: #009990; --text: #0f1117;
--accent-bg: #e6faf9; --muted: #6b7280;
--text: #0f1117; --dim: #9ca3af;
--text-muted: #6b7280; --font: 'Inter', -apple-system, sans-serif;
--text-dim: #9ca3af; --max: 1120px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --r: 14px;
--max-width: 1120px; --r-sm: 8px;
--radius: 14px;
--radius-sm: 8px;
} }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
font-family: var(--font); .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; } img { max-width: 100%; display: block; }
/* ===== BUTTONS ===== */ /* BUTTONS */
.btn { .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; }
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px; border-radius: var(--radius-sm);
font-family: var(--font); font-weight: 700; font-size: 1rem;
cursor: pointer; border: none; transition: all 0.2s ease;
text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; } .btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,184,173,0.25); } .btn-primary:hover { background: var(--accent-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,184,173,0.3); }
.btn-secondary { .btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
background: transparent; color: var(--text); .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
border: 1.5px solid var(--border-mid); .btn-white { background: #fff; color: var(--text); }
} .btn-white:hover { background: #f0fffe; transform: translateY(-1px); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
/* ===== NAV ===== */ /* 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); }
position: fixed; top: 0; left: 0; right: 0; z-index: 100; nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); .logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); }
border-bottom: 1px solid var(--border);
}
nav .container {
display: flex; align-items: center; justify-content: space-between;
height: 64px;
}
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; 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; }
/* ===== HERO ===== */ /* ── HERO ── */
.hero { .hero { padding-top: 64px; position: relative; overflow: hidden; }
padding: 140px 0 100px; .hero-img { width: 100%; height: 88vh; min-height: 520px; max-height: 820px; object-fit: cover; object-position: center 20%; display: block; }
background: linear-gradient(160deg, #f0fffe 0%, #ffffff 60%); .hero-overlay {
text-align: center; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100%);
}
.hero-content {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 60px 24px 64px;
text-align: center; color: #fff;
} }
.hero-badge { .hero-badge {
display: inline-flex; align-items: center; gap: 8px; display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px; border-radius: 100px; padding: 6px 16px; border-radius: 100px;
background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.25); background: rgba(0,184,173,0.25); border: 1px solid rgba(0,184,173,0.5);
font-size: 0.8rem; font-weight: 600; color: var(--accent); font-size: 0.78rem; font-weight: 600; color: #7ffff9;
margin-bottom: 24px; margin-bottom: 20px; backdrop-filter: blur(4px);
} }
.hero-badge::before { content: '✦'; } .hero-badge::before { content: '✦'; }
.hero h1 { .hero h1 {
font-size: clamp(2.2rem, 5.5vw, 3.75rem); font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800;
font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; line-height: 1.1; letter-spacing: -0.03em;
margin-bottom: 20px; max-width: 820px; margin-left: auto; margin-right: auto; max-width: 860px; margin: 0 auto 20px; color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,0.3);
} }
.hero h1 em { font-style: normal; color: var(--accent); } .hero h1 em { font-style: normal; color: #5ffaf3; }
.hero-sub { .hero-sub {
font-size: 1.15rem; color: var(--text-muted); font-size: 1.1rem; color: rgba(255,255,255,0.82);
max-width: 560px; margin: 0 auto 36px; line-height: 1.7; max-width: 540px; margin: 0 auto 36px; line-height: 1.7;
} }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 48px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 36px; }
.trust-strip { .trust-strip { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 500; }
display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.45rem; vertical-align: middle; }
font-size: 0.8rem; color: var(--text-dim); font-weight: 500;
}
.trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.5rem; vertical-align: middle; }
/* ===== PROBLEM ===== */ /* ── STATS BAR ── */
.problem { padding: 88px 0; background: var(--bg-soft); } .stats-bar { background: var(--text); padding: 40px 0; }
.problem-intro { text-align: center; max-width: 600px; margin: 0 auto 48px; } .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; }
.problem-intro h2 { .stat-item { background: var(--text); padding: 32px 24px; text-align: center; }
font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; .stat-num { font-size: 2.5rem; font-weight: 800; color: var(--accent); line-height: 1; }
margin-bottom: 12px; letter-spacing: -0.02em; .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; }
}
.problem-intro p { color: var(--text-muted); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.stat-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 36px;
opacity: 0; transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.stat-card.visible { opacity: 1; transform: translateY(0); }
.stat-number { font-size: 2.75rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.stat-label { font-weight: 700; margin-bottom: 6px; }
.stat-desc { font-size: 0.9rem; color: var(--text-muted); }
/* ===== FEATURES ===== */ /* ── 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 { max-width: 480px; }
.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); }
/* ── SLIDER ── */
.slider-section { padding: 72px 0; overflow: hidden; background: var(--bg-soft); }
.slider-header { text-align: center; margin-bottom: 40px; }
.slider-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.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; } .features { padding: 88px 0; }
.section-header { text-align: center; max-width: 600px; margin: 0 auto 52px; } .section-hd { text-align: center; max-width: 600px; margin: 0 auto 52px; }
.section-header h2 { .section-hd h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; .section-hd p { color: var(--muted); }
margin-bottom: 12px; letter-spacing: -0.02em; .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); }
.section-header p { color: var(--text-muted); } .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; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .feat-card:hover { border-color: var(--accent); box-shadow: 0 6px 24px rgba(0,184,173,0.1); }
.feature-card { .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; }
background: var(--bg-card); border: 1px solid var(--border); .feat-card h3 { font-weight: 700; margin-bottom: 8px; }
border-radius: var(--radius); padding: 32px; .feat-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
opacity: 0; transform: translateY(20px); .feat-card.hl { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-bg) 0%, #fff 100%); }
transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.feature-card.visible { opacity: 1; transform: translateY(0); }
.feature-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(0,184,173,0.08); }
.feature-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;
}
.feature-card h3 { font-weight: 700; margin-bottom: 8px; font-size: 1.05rem; }
.feature-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; }
.feature-card.highlight {
border-color: var(--accent);
background: linear-gradient(135deg, var(--accent-bg) 0%, #fff 100%);
}
/* ===== HOW IT WORKS ===== */ /* ── FREE BLOCK ── */
.how { padding: 88px 0; background: var(--bg-soft); } .free-section { padding: 88px 0; background: var(--bg-soft); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.step {
text-align: center;
opacity: 0; transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.step.visible { opacity: 1; transform: translateY(0); }
.step-num {
width: 52px; height: 52px; border-radius: 50%;
background: var(--accent); color: #fff;
font-weight: 800; font-size: 1.25rem;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.step h3 { font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 0.9rem; color: var(--text-muted); max-width: 280px; margin: 0 auto; }
/* ===== FREE FOREVER ===== */
.free { padding: 88px 0; }
.free-block { .free-block {
background: linear-gradient(135deg, var(--accent-bg) 0%, #ffffff 100%); background: var(--text); border-radius: var(--r);
border: 1.5px solid rgba(0,184,173,0.25); padding: 64px 48px; text-align: center;
border-radius: var(--radius); padding: 56px 48px; max-width: 760px; margin: 0 auto;
text-align: center; max-width: 720px; margin: 0 auto; position: relative; overflow: hidden;
} }
.free-block h2 { .free-block::before {
font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; content: ''; position: absolute; top: -120px; right: -120px;
margin-bottom: 8px; letter-spacing: -0.02em; 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: 800; 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-subtitle { color: var(--text-muted); margin-bottom: 36px; font-size: 1.05rem; } .free-sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.7; }
.checklist { .checklist { list-style: none; text-align: left; max-width: 400px; margin: 0 auto 40px; display: grid; gap: 12px; }
list-style: none; text-align: left; max-width: 400px; .checklist li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.85); }
margin: 0 auto 36px; display: grid; gap: 12px; .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; }
}
.checklist li {
display: flex; align-items: center; gap: 12px;
font-size: 0.95rem; font-weight: 500; color: var(--text);
}
.checklist li::before {
content: '✓'; color: var(--accent); font-weight: 800;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(0,184,173,0.12); display: flex;
align-items: center; justify-content: center;
font-size: 0.75rem; flex-shrink: 0;
}
/* ===== SOCIAL PROOF ===== */ /* ── TESTIMONIALS SLIDER ── */
.proof { padding: 88px 0; background: var(--bg-soft); } .testi-section { padding: 88px 0; }
.proof-inner { max-width: 720px; margin: 0 auto; text-align: center; } .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; }
.proof-inner > p { color: var(--text-muted); margin-bottom: 40px; } .testi-track::-webkit-scrollbar { display: none; }
.quote { .testi-card {
background: var(--bg-card); border: 1px solid var(--border); flex: 0 0 min(480px, 85vw); scroll-snap-align: start;
border-radius: var(--radius); padding: 40px; background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r); padding: 36px;
border-top: 3px solid var(--accent); border-top: 3px solid var(--accent);
box-shadow: 0 2px 12px rgba(0,0,0,0.05); box-shadow: 0 2px 16px rgba(0,0,0,0.05);
} }
.quote blockquote { .testi-card blockquote { font-size: 1.05rem; line-height: 1.75; color: var(--text); font-style: italic; margin-bottom: 24px; }
font-size: 1.1rem; line-height: 1.75; margin-bottom: 24px; .testi-author { display: flex; align-items: center; gap: 12px; }
color: var(--text); font-style: italic; .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; }
.quote-author { display: flex; align-items: center; gap: 12px; justify-content: center; } .testi-name { font-weight: 700; font-size: 0.95rem; }
.quote-avatar { .testi-role { font-size: 0.8rem; color: var(--muted); }
width: 44px; height: 44px; border-radius: 50%;
background: var(--accent-bg); display: flex;
align-items: center; justify-content: center;
font-weight: 700; color: var(--accent); font-size: 1rem;
border: 2px solid rgba(0,184,173,0.2);
}
.quote-name { font-weight: 700; font-size: 0.95rem; text-align: left; }
.quote-role { font-size: 0.8rem; color: var(--text-muted); text-align: left; }
/* ===== FOOTER CTA ===== */ /* ── FOOTER CTA ── */
.footer-cta { .footer-cta { padding: 100px 0; background: linear-gradient(135deg, #0a1628 0%, #0f2040 100%); }
padding: 100px 0;
background: var(--text);
color: #fff;
}
.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 { .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; }
font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; .footer-cta h2 em { font-style: normal; color: var(--accent); }
margin-bottom: 12px; letter-spacing: -0.02em; color: #fff; .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; }
.footer-cta > .footer-cta-inner > p { .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; }
color: rgba(255,255,255,0.65); margin-bottom: 36px; font-size: 1.05rem; .email-form input::placeholder { color: rgba(255,255,255,0.3); }
}
.email-form {
display: flex; gap: 10px; max-width: 460px; margin: 0 auto 20px;
}
.email-form input {
flex: 1; padding: 14px 16px; border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.08);
color: #fff; font-family: var(--font); font-size: 0.95rem;
}
.email-form input::placeholder { color: rgba(255,255,255,0.35); }
.email-form input:focus { outline: none; border-color: var(--accent); } .email-form input:focus { outline: none; border-color: var(--accent); }
.footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.35); } .footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.3); }
/* ===== FOOTER ===== */ /* FOOTER */
footer { footer { padding: 28px 0; background: #070f1e; text-align: center; }
padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.08); footer p { font-size: 0.8rem; color: rgba(255,255,255,0.25); }
background: var(--text); text-align: center;
/* 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; }
} }
footer p { font-size: 0.8rem; color: rgba(255,255,255,0.3); } @media (max-width: 600px) {
.stats-row { grid-template-columns: 1fr; }
/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
.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: 36px 24px; } .free-block { padding: 40px 24px; }
.slide { flex: 0 0 80vw; }
} }
</style> </style>
</head> </head>
@@ -278,178 +235,290 @@
<!-- NAV --> <!-- NAV -->
<nav> <nav>
<div class="container"> <div class="wrap">
<div class="logo">Clinera<span>.</span></div> <div class="logo">Clinera<span>.</span></div>
<a href="#start" class="btn btn-primary">Start Free →</a> <a href="#start" class="btn btn-primary">Start Free →</a>
</div> </div>
</nav> </nav>
<!-- HERO --> <!-- ── HERO ── -->
<section class="hero"> <section class="hero">
<div class="container"> <img class="hero-img" src="img/hero-human.jpg" alt="Clinic owner running her practice with confidence">
<div class="hero-overlay"></div>
<div class="hero-content">
<div class="hero-badge">Free Forever — No Credit Card</div> <div class="hero-badge">Free Forever — No Credit Card</div>
<h1>Run Your GCC Clinic on <em>WhatsApp</em> —<br>Reminders, Leads &amp; Follow-Ups, Automated.</h1> <h1>Run Your GCC Clinic on <em>WhatsApp</em> —<br>Reminders, Leads &amp; Follow-Ups, Automated.</h1>
<p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open. Free forever.</p> <p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open.</p>
<div class="hero-ctas"> <div class="hero-ctas">
<a href="#start" class="btn btn-primary">Start Free — No Credit Card</a> <a href="#start" class="btn btn-primary">Start Free — No Credit Card</a>
<a href="#features" class="btn btn-secondary">See How It Works ↓</a> <a href="#features" class="btn btn-white">See How It Works ↓</a>
</div> </div>
<div class="trust-strip"> <div class="trust-strip">
<span>🇦🇪 Dubai</span> <span>🇦🇪 Dubai</span><span>Abu Dhabi</span><span>🇸🇦 Riyadh</span><span>Jeddah</span>
<span>Abu Dhabi</span>
<span>🇸🇦 Riyadh</span>
<span>Jeddah</span>
</div> </div>
</div> </div>
</section> </section>
<!-- PROBLEM --> <!-- ── STATS BAR ── -->
<section class="problem"> <section class="stats-bar">
<div class="container"> <div class="wrap">
<div class="problem-intro"> <div class="stats-row">
<h2>Your Clinic Is Losing Patients to Silence</h2> <div class="stat-item fade">
<p>Manual follow-ups don't scale. Patients forget. Staff burn out. The numbers tell the story.</p> <div class="stat-num">40%</div>
</div> <div class="stat-lbl">Average no-show rate without reminders</div>
<div class="stat-grid">
<div class="stat-card">
<div class="stat-number">40%</div>
<div class="stat-label">Average no-show rate</div>
<p class="stat-desc">GCC clinics lose up to 40% of booked appointments to no-shows — that's revenue walking out the door every single day.</p>
</div> </div>
<div class="stat-card"> <div class="stat-item fade">
<div class="stat-number">98%</div> <div class="stat-num">98%</div>
<div class="stat-label">WhatsApp open rate</div> <div class="stat-lbl">WhatsApp open rate vs 15% for email</div>
<p class="stat-desc">SMS sits at 20%. Email at 15%. WhatsApp messages get opened by 98% of recipients in the GCC. It's not even close.</p>
</div> </div>
<div class="stat-card"> <div class="stat-item fade">
<div class="stat-number">2hrs</div> <div class="stat-num">2hrs</div>
<div class="stat-label">Daily manual follow-up</div> <div class="stat-lbl">Daily manual follow-up time saved</div>
<p class="stat-desc">Your team spends 2+ hours every day sending reminders, confirming appointments, and chasing leads manually. That time has a cost.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- FEATURES --> <!-- ── SPLIT 1 — receptionist ── -->
<section class="features" id="features"> <section class="split">
<div class="container"> <div class="wrap">
<div class="section-header"> <div class="split-grid">
<div class="split-img fade">
<img src="img/receptionist-human.jpg" alt="Calm, unhurried clinic receptionist">
</div>
<div class="split-body fade">
<div class="eyebrow">The Problem</div>
<h2>Your Team Is Drowning in Manual Follow-Ups</h2>
<p>GCC clinic staff spend hours every day doing things software should do — calling to confirm appointments, chasing leads on WhatsApp, reminding patients about follow-ups. It burns out your best people.</p>
<ul>
<li>2+ hours daily on manual WhatsApp reminders</li>
<li>Leads going cold while the team is with patients</li>
<li>No-shows that could've been prevented with one message</li>
<li>Patient records scattered across phones and notebooks</li>
</ul>
<a href="#features" class="btn btn-primary">See the Fix →</a>
</div>
</div>
</div>
</section>
<!-- ── SPLIT 2 — doctor consult ── -->
<section class="split alt flip">
<div class="wrap">
<div class="split-grid">
<div class="split-body fade">
<div class="eyebrow">The Solution</div>
<h2>Give Your Team Time Back for What Matters</h2>
<p>When Clinera handles the reminders, follow-ups, and rebooking — your staff can focus entirely on patient care. Less admin. Fewer no-shows. More of the work that actually matters.</p>
<ul>
<li>Automatic WhatsApp reminders 24h and 2h before appointments</li>
<li>Instant follow-up to every new lead — no delays</li>
<li>Rebooking nudges sent automatically after each visit</li>
<li>All patient history in one screen, ready before they arrive</li>
</ul>
<a href="#start" 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>
<!-- ── PHOTO SLIDER ── -->
<section class="slider-section" id="features">
<div class="wrap">
<div class="slider-header fade">
<h2>What Running a Great Clinic Looks Like</h2>
<p>When the admin is handled, your clinic becomes what it was always meant to be.</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 and happy">
<div class="slide-caption">Patients who leave happy come back — and refer friends.</div>
</div>
<div class="slide">
<img src="img/clinic-team.jpg" alt="Clinic team relaxed and well-organised">
<div class="slide-caption">A calm team is a productive team.</div>
</div>
<div class="slide">
<img src="img/mobile-whatsapp.jpg" alt="Patient receiving WhatsApp reminder on phone">
<div class="slide-caption">The reminder they actually see — on the app they're already using.</div>
</div>
<div class="slide">
<img src="img/receptionist-human.jpg" alt="Receptionist smiling and unhurried">
<div class="slide-caption">No missed calls. No stressed front desk. Just care.</div>
</div>
<div class="slide">
<img src="img/doctor-consult.jpg" alt="Doctor in undivided consultation">
<div class="slide-caption">Full attention. Every appointment.</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>Everything Your Clinic Needs. Nothing It Doesn't.</h2> <h2>Everything Your Clinic Needs. Nothing It Doesn't.</h2>
<p>Purpose-built for GCC medical and aesthetic clinics. WhatsApp-native from day one.</p> <p>Purpose-built for GCC medical and aesthetic clinics. WhatsApp-native from day one.</p>
</div> </div>
<div class="feature-grid"> <div class="feat-grid">
<div class="feature-card"> <div class="feat-card">
<div class="feature-icon">💬</div> <div class="feat-icon">💬</div>
<h3>WhatsApp Reminders</h3> <h3>WhatsApp Reminders</h3>
<p>Automated appointment reminders sent through WhatsApp — the channel your patients actually check. Reduce no-shows without lifting a finger.</p> <p>Automated appointment reminders through WhatsApp — the channel your patients actually check. Reduce no-shows without lifting a finger.</p>
</div> </div>
<div class="feature-card"> <div class="feat-card">
<div class="feature-icon">🎯</div> <div class="feat-icon">🎯</div>
<h3>Lead Follow-Up</h3> <h3>Lead Follow-Up</h3>
<p>Every inquiry gets a timely, personalised follow-up on WhatsApp. No more leads slipping through because your team was too busy to reply.</p> <p>Every new inquiry gets an instant, personalised WhatsApp follow-up. No lead slips through while your team is with patients.</p>
</div> </div>
<div class="feature-card"> <div class="feat-card">
<div class="feature-icon">📅</div> <div class="feat-icon">📅</div>
<h3>Appointment Booking</h3> <h3>Appointment Booking</h3>
<p>Patients book directly through WhatsApp. No app downloads, no portals, no friction — just a message and a confirmed slot.</p> <p>Patients book directly through WhatsApp. No app downloads, no portals, no friction — just a message and a confirmed slot.</p>
</div> </div>
<div class="feature-card"> <div class="feat-card">
<div class="feature-icon">📋</div> <div class="feat-icon">📋</div>
<h3>Patient History</h3> <h3>Patient History</h3>
<p>Complete patient records, consultation notes, and treatment history in one place. Your team always has context before the patient walks in.</p> <p>Complete records, notes, and treatment history in one place. Your team always has context before the patient walks in.</p>
</div> </div>
<div class="feature-card"> <div class="feat-card">
<div class="feature-icon">👥</div> <div class="feat-icon">👥</div>
<h3>Staff Management</h3> <h3>Staff Management</h3>
<p>Assign practitioners, manage schedules, and track workload across your team. Everyone sees what they need — nothing more.</p> <p>Schedules, permissions, and workload for your whole team — without the spreadsheet.</p>
</div> </div>
<div class="feature-card highlight"> <div class="feat-card hl">
<div class="feature-icon">🆓</div> <div class="feat-icon">🆓</div>
<h3>Free Forever</h3> <h3>Free Forever</h3>
<p>Not a trial. Not a teaser. Full access to every feature, forever. We make money when you grow — through optional premium services, not paywalls.</p> <p>Not a trial. Not a teaser. Full access to every feature, forever. We make money when you grow — not from subscriptions.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- HOW IT WORKS --> <!-- ── SPLIT 3 — patient confident ── -->
<section class="how"> <section class="split alt">
<div class="container"> <div class="wrap">
<div class="section-header"> <div class="split-grid">
<h2>Up and Running in 10 Minutes</h2> <div class="split-img fade">
<p>No complex setup, no training sessions, no IT team required.</p> <img src="img/patient-confident.jpg" alt="Happy patient leaving the clinic">
</div>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<h3>Create Your Profile</h3>
<p>Enter your clinic details and connect your WhatsApp Business number. Takes under 5 minutes.</p>
</div> </div>
<div class="step"> <div class="split-body fade">
<div class="step-num">2</div> <div class="eyebrow">The Outcome</div>
<h3>Add Your Patients</h3> <h2>Patients Who Feel Cared For Come Back</h2>
<p>Import your existing patient list or start fresh. Clinera organises everything from day one.</p> <p>A well-timed WhatsApp reminder isn't just logistics — it's the difference between a patient who feels forgotten and one who feels valued. Clinera makes every patient feel like your most important one.</p>
</div> <ul>
<div class="step"> <li>Automatic rebooking nudges after every visit</li>
<div class="step-num">3</div> <li>Personalised follow-up messages with the patient's name</li>
<h3>WhatsApp Automates</h3> <li>Treatment reminders that build long-term loyalty</li>
<p>Reminders, follow-ups, and rebooking nudges flow automatically through WhatsApp. Your team focuses on care.</p> <li>Higher retention without any extra effort from your team</li>
</ul>
<a href="#start" class="btn btn-primary">Start Free →</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- FREE FOREVER --> <!-- ── FREE FOREVER ── -->
<section class="free"> <section class="free-section">
<div class="container"> <div class="wrap">
<div class="free-block"> <div class="free-block fade">
<h2><em>Free.</em> Not a trial. Not freemium. Free.</h2> <h2><em>Free.</em> Not a trial. Not freemium. Free.</h2>
<p class="free-subtitle">Every feature. Every patient. No credit card. No expiry date.<br>We make money helping clinics grow — not from subscriptions.</p> <p class="free-sub">Every feature. Every patient. No credit card. No expiry date.<br>We make money helping clinics grow — not from subscriptions.</p>
<ul class="checklist"> <ul class="checklist">
<li>Unlimited patients</li> <li>Unlimited patients</li>
<li>Unlimited appointments</li> <li>Unlimited appointments</li>
<li>WhatsApp reminders &amp; follow-ups</li> <li>WhatsApp reminders &amp; follow-ups</li>
<li>Lead tracking &amp; nurture</li> <li>Lead tracking &amp; nurture</li>
<li>Patient history &amp; records</li> <li>Patient history &amp; records</li>
<li>Staff scheduling</li> <li>Staff scheduling &amp; permissions</li>
<li>Multi-location support</li> <li>Multi-location support</li>
<li>No credit card required</li> <li>No credit card required — ever</li>
</ul> </ul>
<a href="#start" class="btn btn-primary">Get Your Free Clinic Account →</a> <a href="#start" class="btn btn-primary" style="font-size:1.05rem; padding:16px 36px;">Get Your Free Clinic Account →</a>
</div> </div>
</div> </div>
</section> </section>
<!-- SOCIAL PROOF --> <!-- ── TESTIMONIALS SLIDER ── -->
<section class="proof"> <section class="testi-section">
<div class="container"> <div class="wrap">
<div class="proof-inner"> <div class="section-hd fade">
<div class="section-header"> <h2>What GCC Clinics Are Saying</h2>
<h2>What GCC Clinics Are Saying</h2> <p>Real results from clinics that made the switch.</p>
<p>Real results from clinics that made the switch.</p> </div>
</div>
<div class="testi-track" id="testiSlider">
<div class="testi-card">
<blockquote>"We were spending two hours a day just sending appointment reminders on WhatsApp. Clinera automated the whole thing in a single afternoon. Our no-show rate dropped by half within the first 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="quote"> </div>
<blockquote>"We were spending two hours a day just sending appointment reminders on WhatsApp. Clinera automated the whole thing in a single afternoon. Our no-show rate dropped by half within the first month."</blockquote> <div class="testi-card">
<div class="quote-author"> <blockquote>"Before Clinera, our receptionist was spending her mornings calling patients to confirm. Now those calls just don't happen — the system handles it, and she focuses on the patients in front of her."</blockquote>
<div class="quote-avatar">SK</div> <div class="testi-author">
<div> <div class="testi-avatar-init">MA</div>
<div class="quote-name">Dr. Sarah K.</div> <div>
<div class="quote-role">Practice Manager · Dental Clinic, Dubai</div> <div class="testi-name">Dr. Mohammed A.</div>
</div> <div class="testi-role">Clinic Director · Aesthetic Centre, Riyadh</div>
</div>
</div>
</div>
<div class="testi-card">
<blockquote>"The WhatsApp integration is what sold me. My patients are already on WhatsApp all day — getting a reminder there feels natural, not clinical. Response rates went through the roof."</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 was sceptical about 'free forever' — I kept waiting for the catch. Six months in, there is no catch. Everything works, support is fast, and we haven't paid a dirham."</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 &amp; Skin Clinic, Jeddah</div>
</div> </div>
</div> </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> </section>
<!-- FOOTER CTA --> <!-- ── FOOTER CTA ── -->
<section class="footer-cta" id="start"> <section class="footer-cta" id="start">
<div class="container"> <div class="wrap">
<div class="footer-cta-inner"> <div class="footer-cta-inner">
<h2>Your Patients Are on WhatsApp.<br>Your Clinic Should Be Too.</h2> <h2>Your Patients Are on <em>WhatsApp</em>.<br>Your Clinic Should Be Too.</h2>
<p>Join GCC clinics already using Clinera to automate patient engagement — completely free.</p> <p>Join GCC clinics already using Clinera to automate patient engagement — completely free.</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 address"> <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>
</form> </form>
<p class="footer-note">Free forever. No credit card. Setup in under 10 minutes.</p> <p class="footer-note">Free forever. No credit card. Setup in under 10 minutes.</p>
@@ -457,29 +526,73 @@
</div> </div>
</section> </section>
<!-- FOOTER -->
<footer> <footer>
<div class="container"> <div class="wrap">
<p>© 2026 Clinera · Clinic Management Built for WhatsApp-First GCC</p> <p>© 2026 Clinera · Clinic Management Built for WhatsApp-First GCC</p>
</div> </div>
</footer> </footer>
<script> <script>
const observer = new IntersectionObserver((entries) => { // ── Fade-in on scroll ──
entries.forEach((entry) => { const io = new IntersectionObserver(entries => {
if (entry.isIntersecting) { entries.forEach((e, i) => {
const delay = entry.target.dataset.delay || 0; if (e.isIntersecting) {
setTimeout(() => entry.target.classList.add('visible'), delay); const d = +e.target.dataset.delay || 0;
observer.unobserve(entry.target); setTimeout(() => e.target.classList.add('visible'), d);
io.unobserve(e.target);
} }
}); });
}, { threshold: 0.15 }); }, { threshold: 0.12 });
document.querySelectorAll('.fade, .feat-card, .stat-item').forEach((el, i) => {
document.querySelectorAll('.stat-card, .feature-card, .step').forEach((el, i) => { el.dataset.delay = (i % 4) * 80;
el.dataset.delay = (i % 3) * 100; io.observe(el);
observer.observe(el);
}); });
</script>
// ── 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;
// Build dots
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; // gap
}
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));
// Sync dots on manual scroll
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> </body>
</html> </html>