Add landing page, images, and nginx/docker deploy config
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
FROM nginx:alpine
|
||||||
|
COPY public/ /usr/share/nginx/html/
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
EXPOSE 80
|
||||||
+19
@@ -0,0 +1,19 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/javascript image/jpeg image/png;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff2)$ {
|
||||||
|
expires 7d;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 706 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 699 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 654 KiB |
@@ -0,0 +1,557 @@
|
|||||||
|
<!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 — 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 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:type" content="website">
|
||||||
|
<meta property="og:url" content="https://clinera.app">
|
||||||
|
<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.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--color-bg: #0a1628;
|
||||||
|
--color-bg-card: #111d33;
|
||||||
|
--color-bg-elevated: #162240;
|
||||||
|
--color-accent: #00d4c8;
|
||||||
|
--color-accent-hover: #00f0e2;
|
||||||
|
--color-text: #ffffff;
|
||||||
|
--color-text-muted: #8b9cc0;
|
||||||
|
--color-text-dim: #5a6d94;
|
||||||
|
--color-border: #1e2d4a;
|
||||||
|
--color-gold: #c9a84c;
|
||||||
|
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
--max-width: 1120px;
|
||||||
|
--radius: 12px;
|
||||||
|
--radius-sm: 8px;
|
||||||
|
}
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body {
|
||||||
|
font-family: var(--font);
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
|
||||||
|
a { color: var(--color-accent); text-decoration: none; }
|
||||||
|
img { max-width: 100%; display: block; }
|
||||||
|
|
||||||
|
/* ===== BUTTONS ===== */
|
||||||
|
.btn {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--color-accent); color: #0a1628;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent; color: var(--color-text);
|
||||||
|
border: 1.5px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
|
||||||
|
|
||||||
|
/* ===== NAV ===== */
|
||||||
|
nav {
|
||||||
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||||
|
background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid var(--color-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; }
|
||||||
|
.logo span { color: var(--color-accent); }
|
||||||
|
nav .btn { padding: 10px 20px; font-size: 0.875rem; }
|
||||||
|
|
||||||
|
/* ===== HERO ===== */
|
||||||
|
.hero {
|
||||||
|
padding: 140px 0 80px;
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: ''; position: absolute; top: -200px; right: -200px;
|
||||||
|
width: 600px; height: 600px; border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(0,212,200,0.08) 0%, transparent 70%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero-grid {
|
||||||
|
display: grid; grid-template-columns: 1fr; gap: 48px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.hero-badge {
|
||||||
|
display: inline-flex; align-items: center; gap: 8px;
|
||||||
|
padding: 6px 16px; border-radius: 100px;
|
||||||
|
background: rgba(0,212,200,0.1); border: 1px solid rgba(0,212,200,0.2);
|
||||||
|
font-size: 0.8rem; font-weight: 600; color: var(--color-accent);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.hero-badge::before { content: '✦'; }
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(2rem, 5vw, 3.25rem);
|
||||||
|
font-weight: 800; line-height: 1.15; letter-spacing: -0.03em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.hero h1 em {
|
||||||
|
font-style: normal; color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.hero-sub {
|
||||||
|
font-size: 1.125rem; color: var(--color-text-muted);
|
||||||
|
max-width: 520px; margin-bottom: 32px; line-height: 1.7;
|
||||||
|
}
|
||||||
|
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
|
||||||
|
.hero-image {
|
||||||
|
/* IMAGE: Dashboard mockup showing Clinera WhatsApp integration — clinic overview with patient list, upcoming appointments, and WhatsApp message thread visible */
|
||||||
|
aspect-ratio: 16/10; background: var(--color-bg-card);
|
||||||
|
border-radius: var(--radius); border: 1px solid var(--color-border);
|
||||||
|
overflow: hidden; position: relative;
|
||||||
|
}
|
||||||
|
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.trust-strip {
|
||||||
|
display: flex; flex-wrap: wrap; gap: 8px 24px;
|
||||||
|
font-size: 0.8rem; color: var(--color-text-dim); font-weight: 500;
|
||||||
|
}
|
||||||
|
.trust-strip span::before { content: '◆ '; color: var(--color-accent); font-size: 0.5rem; vertical-align: middle; }
|
||||||
|
.tagline {
|
||||||
|
font-size: 0.85rem; color: var(--color-text-dim); font-weight: 500;
|
||||||
|
margin-top: 16px; letter-spacing: 0.04em; text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== PROBLEM ===== */
|
||||||
|
.problem { padding: 80px 0; }
|
||||||
|
.problem-intro {
|
||||||
|
text-align: center; max-width: 600px; margin: 0 auto 48px;
|
||||||
|
}
|
||||||
|
.problem-intro h2 {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
|
||||||
|
margin-bottom: 12px; letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.problem-intro p { color: var(--color-text-muted); }
|
||||||
|
.stat-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: var(--color-bg-card); border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius); padding: 32px;
|
||||||
|
opacity: 0; transform: translateY(20px);
|
||||||
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
|
}
|
||||||
|
.stat-card.visible { opacity: 1; transform: translateY(0); }
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2.5rem; font-weight: 800; color: var(--color-accent);
|
||||||
|
line-height: 1; margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.stat-label { font-weight: 700; margin-bottom: 4px; }
|
||||||
|
.stat-desc { font-size: 0.9rem; color: var(--color-text-muted); }
|
||||||
|
|
||||||
|
/* ===== FEATURES ===== */
|
||||||
|
.features { padding: 80px 0; }
|
||||||
|
.section-header {
|
||||||
|
text-align: center; max-width: 600px; margin: 0 auto 48px;
|
||||||
|
}
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
|
||||||
|
margin-bottom: 12px; letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.section-header p { color: var(--color-text-muted); }
|
||||||
|
.feature-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.feature-card {
|
||||||
|
background: var(--color-bg-card); border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius); padding: 32px;
|
||||||
|
opacity: 0; transform: translateY(20px);
|
||||||
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
|
}
|
||||||
|
.feature-card.visible { opacity: 1; transform: translateY(0); }
|
||||||
|
.feature-card:hover { border-color: rgba(0,212,200,0.3); }
|
||||||
|
.feature-icon {
|
||||||
|
width: 48px; height: 48px; border-radius: 10px;
|
||||||
|
background: rgba(0,212,200,0.1); display: flex;
|
||||||
|
align-items: center; justify-content: center;
|
||||||
|
font-size: 1.5rem; margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.feature-card h3 { font-weight: 700; margin-bottom: 8px; font-size: 1.1rem; }
|
||||||
|
.feature-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; }
|
||||||
|
.feature-card.highlight {
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
background: linear-gradient(135deg, rgba(0,212,200,0.06) 0%, var(--color-bg-card) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== HOW IT WORKS ===== */
|
||||||
|
.how { padding: 80px 0; }
|
||||||
|
.steps {
|
||||||
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||||
|
gap: 32px; margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.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: 48px; height: 48px; border-radius: 50%;
|
||||||
|
background: var(--color-accent); color: var(--color-bg);
|
||||||
|
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(--color-text-muted); max-width: 280px; margin: 0 auto; }
|
||||||
|
.how-image {
|
||||||
|
/* IMAGE: WhatsApp conversation flow showing automated appointment reminder from clinic to patient — Arabic + English bilingual message, green WhatsApp bubbles, clinic branding visible */
|
||||||
|
aspect-ratio: 16/9; background: var(--color-bg-card);
|
||||||
|
border-radius: var(--radius); border: 1px solid var(--color-border);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.how-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
/* ===== FREE FOREVER ===== */
|
||||||
|
.free { padding: 80px 0; }
|
||||||
|
.free-block {
|
||||||
|
background: var(--color-bg-card); border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius); padding: 48px;
|
||||||
|
text-align: center; max-width: 720px; margin: 0 auto;
|
||||||
|
}
|
||||||
|
.free-block h2 {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
|
||||||
|
margin-bottom: 8px; letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.free-block h2 em { font-style: normal; color: var(--color-accent); }
|
||||||
|
.free-subtitle { color: var(--color-text-muted); margin-bottom: 32px; }
|
||||||
|
.checklist {
|
||||||
|
list-style: none; text-align: left; max-width: 400px;
|
||||||
|
margin: 0 auto 32px; display: grid; gap: 12px;
|
||||||
|
}
|
||||||
|
.checklist li {
|
||||||
|
display: flex; align-items: center; gap: 12px;
|
||||||
|
font-size: 0.95rem; font-weight: 500;
|
||||||
|
}
|
||||||
|
.checklist li::before {
|
||||||
|
content: '✓'; color: var(--color-accent); font-weight: 800;
|
||||||
|
width: 24px; height: 24px; border-radius: 50%;
|
||||||
|
background: rgba(0,212,200,0.1); display: flex;
|
||||||
|
align-items: center; justify-content: center;
|
||||||
|
font-size: 0.75rem; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== SOCIAL PROOF ===== */
|
||||||
|
.proof { padding: 80px 0; }
|
||||||
|
.proof-grid {
|
||||||
|
display: grid; grid-template-columns: 1fr; gap: 40px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.quote {
|
||||||
|
background: var(--color-bg-card); border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius); padding: 40px;
|
||||||
|
border-left: 3px solid var(--color-accent);
|
||||||
|
}
|
||||||
|
.quote blockquote {
|
||||||
|
font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px;
|
||||||
|
font-style: italic; color: var(--color-text);
|
||||||
|
}
|
||||||
|
.quote-author { display: flex; align-items: center; gap: 12px; }
|
||||||
|
.quote-avatar {
|
||||||
|
width: 44px; height: 44px; border-radius: 50%;
|
||||||
|
background: var(--color-bg-elevated); display: flex;
|
||||||
|
align-items: center; justify-content: center;
|
||||||
|
font-weight: 700; color: var(--color-accent); font-size: 1rem;
|
||||||
|
}
|
||||||
|
.quote-name { font-weight: 700; font-size: 0.95rem; }
|
||||||
|
.quote-role { font-size: 0.8rem; color: var(--color-text-muted); }
|
||||||
|
.proof-image {
|
||||||
|
/* IMAGE: Modern aesthetic clinic reception in Dubai — warm lighting, contemporary interior with subtle gold accents, receptionist using tablet with Clinera interface, diverse GCC patients in comfortable waiting area */
|
||||||
|
aspect-ratio: 4/3; background: var(--color-bg-card);
|
||||||
|
border-radius: var(--radius); border: 1px solid var(--color-border);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.proof-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
/* ===== FOOTER CTA ===== */
|
||||||
|
.footer-cta {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-card) 100%);
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.footer-cta-inner {
|
||||||
|
text-align: center; max-width: 600px; margin: 0 auto;
|
||||||
|
}
|
||||||
|
.footer-cta h2 {
|
||||||
|
font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
|
||||||
|
margin-bottom: 12px; letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.footer-cta p {
|
||||||
|
color: var(--color-text-muted); margin-bottom: 32px; font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
.email-form {
|
||||||
|
display: flex; gap: 12px; max-width: 440px; margin: 0 auto 24px;
|
||||||
|
}
|
||||||
|
.email-form input {
|
||||||
|
flex: 1; padding: 14px 16px; border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--color-border); background: var(--color-bg);
|
||||||
|
color: var(--color-text); font-family: var(--font); font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.email-form input::placeholder { color: var(--color-text-dim); }
|
||||||
|
.email-form input:focus { outline: none; border-color: var(--color-accent); }
|
||||||
|
.footer-note {
|
||||||
|
font-size: 0.8rem; color: var(--color-text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== FOOTER ===== */
|
||||||
|
footer {
|
||||||
|
padding: 32px 0; border-top: 1px solid var(--color-border);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer p { font-size: 0.8rem; color: var(--color-text-dim); }
|
||||||
|
|
||||||
|
/* ===== RESPONSIVE ===== */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.hero-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
.proof-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
.hero { padding: 160px 0 100px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.email-form { flex-direction: column; }
|
||||||
|
.hero-ctas .btn { width: 100%; justify-content: center; }
|
||||||
|
.free-block { padding: 32px 24px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- NAV -->
|
||||||
|
<nav>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">Clinera<span>.</span></div>
|
||||||
|
<a href="#start" class="btn btn-primary">Start Free →</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div>
|
||||||
|
<div class="hero-badge">Free Forever — No Credit Card</div>
|
||||||
|
<h1>Run Your GCC Clinic on <em>WhatsApp</em> — Reminders, Leads & Follow-Ups, Automated.</h1>
|
||||||
|
<p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open.</p>
|
||||||
|
<div class="hero-ctas">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="trust-strip">
|
||||||
|
<span>Dubai</span>
|
||||||
|
<span>Abu Dhabi</span>
|
||||||
|
<span>Riyadh</span>
|
||||||
|
<span>Jeddah</span>
|
||||||
|
</div>
|
||||||
|
<p class="tagline">Clinic Management Built for WhatsApp-First GCC.</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-image">
|
||||||
|
<!-- IMAGE: hero-dashboard.jpg — Clinera dashboard mockup showing WhatsApp integration, patient list, upcoming appointments -->
|
||||||
|
<img src="img/hero-dashboard.jpg" alt="Clinera clinic management dashboard with WhatsApp integration">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PROBLEM -->
|
||||||
|
<section class="problem">
|
||||||
|
<div class="container">
|
||||||
|
<div class="problem-intro">
|
||||||
|
<h2>Your Clinic Is Losing Patients to Silence</h2>
|
||||||
|
<p>Manual follow-ups don't scale. Patients forget. Staff burn out. The numbers tell the story.</p>
|
||||||
|
</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 class="stat-card">
|
||||||
|
<div class="stat-number">98%</div>
|
||||||
|
<div class="stat-label">WhatsApp open rate</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 class="stat-card">
|
||||||
|
<div class="stat-number">2hrs</div>
|
||||||
|
<div class="stat-label">Daily manual follow-up</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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FEATURES -->
|
||||||
|
<section class="features" id="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">💬</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">🎯</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">📅</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">📋</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon">👥</div>
|
||||||
|
<h3>Staff Management</h3>
|
||||||
|
<p>Assign practitioners, manage schedules, and track workload across your team. Everyone sees what they need — nothing more.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card highlight">
|
||||||
|
<div class="feature-icon">🆓</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOW IT WORKS -->
|
||||||
|
<section class="how">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Up and Running in 10 Minutes</h2>
|
||||||
|
<p>No complex setup, no training sessions, no IT team required.</p>
|
||||||
|
</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 class="step">
|
||||||
|
<div class="step-num">2</div>
|
||||||
|
<h3>Add Your Patients</h3>
|
||||||
|
<p>Import your existing patient list or start fresh. Clinera organises everything from day one.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">3</div>
|
||||||
|
<h3>WhatsApp Automates</h3>
|
||||||
|
<p>Reminders, follow-ups, and rebooking nudges flow automatically through WhatsApp. Your team focuses on care.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="how-image">
|
||||||
|
<!-- IMAGE: whatsapp-flow.jpg — WhatsApp conversation showing automated clinic appointment reminder in English + Arabic, green chat bubbles -->
|
||||||
|
<img src="img/whatsapp-flow.jpg" alt="WhatsApp automated appointment reminder flow">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FREE FOREVER -->
|
||||||
|
<section class="free">
|
||||||
|
<div class="container">
|
||||||
|
<div class="free-block">
|
||||||
|
<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.</p>
|
||||||
|
<ul class="checklist">
|
||||||
|
<li>Unlimited patients</li>
|
||||||
|
<li>Unlimited appointments</li>
|
||||||
|
<li>WhatsApp reminders & follow-ups</li>
|
||||||
|
<li>Lead tracking & nurture</li>
|
||||||
|
<li>Patient history & records</li>
|
||||||
|
<li>Staff scheduling</li>
|
||||||
|
<li>Multi-location support</li>
|
||||||
|
<li>Priority WhatsApp support</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#start" class="btn btn-primary">Start Free — No Credit Card</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SOCIAL PROOF -->
|
||||||
|
<section class="proof">
|
||||||
|
<div class="container">
|
||||||
|
<div class="proof-grid">
|
||||||
|
<div class="quote">
|
||||||
|
<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="quote-author">
|
||||||
|
<div class="quote-avatar">SK</div>
|
||||||
|
<div>
|
||||||
|
<div class="quote-name">Dr. Sarah K.</div>
|
||||||
|
<div class="quote-role">Practice Manager · Dental Clinic, Dubai</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="proof-image">
|
||||||
|
<!-- IMAGE: clinic-context.jpg — Modern aesthetic clinic reception in Dubai, warm professional lighting, contemporary interior, receptionist using tablet, diverse GCC patients -->
|
||||||
|
<img src="img/clinic-context.jpg" alt="Modern GCC clinic using Clinera">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FOOTER CTA -->
|
||||||
|
<section class="footer-cta" id="start">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-cta-inner">
|
||||||
|
<h2>Your Patients Are on WhatsApp. Your Clinic Should Be Too.</h2>
|
||||||
|
<p>Join GCC clinics already using Clinera to automate patient engagement — completely free.</p>
|
||||||
|
<form class="email-form" action="#" method="POST">
|
||||||
|
<input type="email" name="email" placeholder="Your work email" required aria-label="Email address">
|
||||||
|
<button type="submit" class="btn btn-primary">Start Free Today →</button>
|
||||||
|
</form>
|
||||||
|
<p class="footer-note">Free forever. No credit card. Setup in under 10 minutes.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 Clinera. Clinic Management Built for WhatsApp-First GCC.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// IntersectionObserver fade-in
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry, i) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const delay = entry.target.dataset.delay || 0;
|
||||||
|
setTimeout(() => entry.target.classList.add('visible'), delay);
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.15 });
|
||||||
|
|
||||||
|
document.querySelectorAll('.stat-card, .feature-card, .step').forEach((el, i) => {
|
||||||
|
el.dataset.delay = (i % 3) * 100;
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user