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

Light theme, no images

Browse Source
This commit is contained in:
Omair Saleh
2026-03-13 20:46:33 +08:00
parent b66f9b20d9
commit a6203046f5
1 changed files with 141 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+141 -213
View File
@@ -8,7 +8,7 @@
<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. Automate reminders, leads & follow-ups. Free forever — no credit card required.">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://clinera.app"> <meta property="og:url" content="https://clinera.quikcue.com">
<meta name="twitter:card" content="summary_large_image"> <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"> <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">
@@ -16,32 +16,33 @@
<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 {
--color-bg: #0a1628; --bg: #ffffff;
--color-bg-card: #111d33; --bg-soft: #f7f8fa;
--color-bg-elevated: #162240; --bg-card: #ffffff;
--color-accent: #00d4c8; --border: #e5e7eb;
--color-accent-hover: #00f0e2; --border-mid: #d1d5db;
--color-text: #ffffff; --accent: #00b8ad;
--color-text-muted: #8b9cc0; --accent-dark: #009990;
--color-text-dim: #5a6d94; --accent-bg: #e6faf9;
--color-border: #1e2d4a; --text: #0f1117;
--color-gold: #c9a84c; --text-muted: #6b7280;
--text-dim: #9ca3af;
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--max-width: 1120px; --max-width: 1120px;
--radius: 12px; --radius: 14px;
--radius-sm: 8px; --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); font-family: var(--font);
background: var(--color-bg); background: var(--bg);
color: var(--color-text); color: var(--text);
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
a { color: var(--color-accent); text-decoration: none; } a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; } img { max-width: 100%; display: block; }
/* ===== BUTTONS ===== */ /* ===== BUTTONS ===== */
@@ -50,154 +51,116 @@
padding: 14px 28px; border-radius: var(--radius-sm); padding: 14px 28px; border-radius: var(--radius-sm);
font-family: var(--font); font-weight: 700; font-size: 1rem; font-family: var(--font); font-weight: 700; font-size: 1rem;
cursor: pointer; border: none; transition: all 0.2s ease; cursor: pointer; border: none; transition: all 0.2s ease;
text-decoration: none; text-decoration: none; white-space: nowrap;
} }
.btn-primary { .btn-primary { background: var(--accent); color: #fff; }
background: var(--color-accent); color: #0a1628; .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(--color-accent-hover); transform: translateY(-1px); }
.btn-secondary { .btn-secondary {
background: transparent; color: var(--color-text); background: transparent; color: var(--text);
border: 1.5px solid var(--color-border); border: 1.5px solid var(--border-mid);
} }
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } .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; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--border);
} }
nav .container { nav .container {
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
height: 64px; height: 64px;
} }
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; } .logo { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text); }
.logo span { color: var(--color-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: 140px 0 80px; padding: 140px 0 100px;
position: relative; overflow: hidden; background: linear-gradient(160deg, #f0fffe 0%, #ffffff 60%);
} text-align: center;
.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 { .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: rgba(0,212,200,0.1); border: 1px solid rgba(0,212,200,0.2); background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.25);
font-size: 0.8rem; font-weight: 600; color: var(--color-accent); font-size: 0.8rem; font-weight: 600; color: var(--accent);
margin-bottom: 20px; margin-bottom: 24px;
} }
.hero-badge::before { content: '✦'; } .hero-badge::before { content: '✦'; }
.hero h1 { .hero h1 {
font-size: clamp(2rem, 5vw, 3.25rem); font-size: clamp(2.2rem, 5.5vw, 3.75rem);
font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
margin-bottom: 20px; margin-bottom: 20px; max-width: 820px; margin-left: auto; margin-right: auto;
}
.hero h1 em {
font-style: normal; color: var(--color-accent);
} }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { .hero-sub {
font-size: 1.125rem; color: var(--color-text-muted); font-size: 1.15rem; color: var(--text-muted);
max-width: 520px; margin-bottom: 32px; line-height: 1.7; max-width: 560px; margin: 0 auto 36px; line-height: 1.7;
} }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 48px; }
.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 { .trust-strip {
display: flex; flex-wrap: wrap; gap: 8px 24px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center;
font-size: 0.8rem; color: var(--color-text-dim); font-weight: 500; font-size: 0.8rem; color: var(--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;
} }
.trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.5rem; vertical-align: middle; }
/* ===== PROBLEM ===== */ /* ===== PROBLEM ===== */
.problem { padding: 80px 0; } .problem { padding: 88px 0; background: var(--bg-soft); }
.problem-intro { .problem-intro { text-align: center; max-width: 600px; margin: 0 auto 48px; }
text-align: center; max-width: 600px; margin: 0 auto 48px;
}
.problem-intro h2 { .problem-intro h2 {
font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800;
margin-bottom: 12px; letter-spacing: -0.02em; margin-bottom: 12px; letter-spacing: -0.02em;
} }
.problem-intro p { color: var(--color-text-muted); } .problem-intro p { color: var(--text-muted); }
.stat-grid { .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.stat-card { .stat-card {
background: var(--color-bg-card); border: 1px solid var(--color-border); background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 32px; border-radius: var(--radius); padding: 36px;
opacity: 0; transform: translateY(20px); opacity: 0; transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease; 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-card.visible { opacity: 1; transform: translateY(0); }
.stat-number { .stat-number { font-size: 2.75rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 8px; }
font-size: 2.5rem; font-weight: 800; color: var(--color-accent); .stat-label { font-weight: 700; margin-bottom: 6px; }
line-height: 1; margin-bottom: 8px; .stat-desc { font-size: 0.9rem; color: var(--text-muted); }
}
.stat-label { font-weight: 700; margin-bottom: 4px; }
.stat-desc { font-size: 0.9rem; color: var(--color-text-muted); }
/* ===== FEATURES ===== */ /* ===== FEATURES ===== */
.features { padding: 80px 0; } .features { padding: 88px 0; }
.section-header { .section-header { text-align: center; max-width: 600px; margin: 0 auto 52px; }
text-align: center; max-width: 600px; margin: 0 auto 48px;
}
.section-header h2 { .section-header h2 {
font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800;
margin-bottom: 12px; letter-spacing: -0.02em; margin-bottom: 12px; letter-spacing: -0.02em;
} }
.section-header p { color: var(--color-text-muted); } .section-header p { color: var(--text-muted); }
.feature-grid { .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.feature-card { .feature-card {
background: var(--color-bg-card); border: 1px solid var(--color-border); background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 32px; border-radius: var(--radius); padding: 32px;
opacity: 0; transform: translateY(20px); opacity: 0; transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease; 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.visible { opacity: 1; transform: translateY(0); }
.feature-card:hover { border-color: rgba(0,212,200,0.3); } .feature-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(0,184,173,0.08); }
.feature-icon { .feature-icon {
width: 48px; height: 48px; border-radius: 10px; width: 48px; height: 48px; border-radius: 12px;
background: rgba(0,212,200,0.1); display: flex; background: var(--accent-bg); display: flex;
align-items: center; justify-content: center; align-items: center; justify-content: center;
font-size: 1.5rem; margin-bottom: 16px; font-size: 1.4rem; margin-bottom: 16px;
} }
.feature-card h3 { font-weight: 700; margin-bottom: 8px; font-size: 1.1rem; } .feature-card h3 { font-weight: 700; margin-bottom: 8px; font-size: 1.05rem; }
.feature-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; } .feature-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; }
.feature-card.highlight { .feature-card.highlight {
border-color: var(--color-accent); border-color: var(--accent);
background: linear-gradient(135deg, rgba(0,212,200,0.06) 0%, var(--color-bg-card) 100%); background: linear-gradient(135deg, var(--accent-bg) 0%, #fff 100%);
} }
/* ===== HOW IT WORKS ===== */ /* ===== HOW IT WORKS ===== */
.how { padding: 80px 0; } .how { padding: 88px 0; background: var(--bg-soft); }
.steps { .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px; margin-bottom: 48px;
}
.step { .step {
text-align: center; text-align: center;
opacity: 0; transform: translateY(20px); opacity: 0; transform: translateY(20px);
@@ -205,130 +168,109 @@
} }
.step.visible { opacity: 1; transform: translateY(0); } .step.visible { opacity: 1; transform: translateY(0); }
.step-num { .step-num {
width: 48px; height: 48px; border-radius: 50%; width: 52px; height: 52px; border-radius: 50%;
background: var(--color-accent); color: var(--color-bg); background: var(--accent); color: #fff;
font-weight: 800; font-size: 1.25rem; font-weight: 800; font-size: 1.25rem;
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px; margin-bottom: 16px;
} }
.step h3 { font-weight: 700; margin-bottom: 8px; } .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; } .step p { font-size: 0.9rem; color: var(--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 FOREVER ===== */
.free { padding: 80px 0; } .free { padding: 88px 0; }
.free-block { .free-block {
background: var(--color-bg-card); border: 1px solid var(--color-border); background: linear-gradient(135deg, var(--accent-bg) 0%, #ffffff 100%);
border-radius: var(--radius); padding: 48px; border: 1.5px solid rgba(0,184,173,0.25);
border-radius: var(--radius); padding: 56px 48px;
text-align: center; max-width: 720px; margin: 0 auto; text-align: center; max-width: 720px; margin: 0 auto;
} }
.free-block h2 { .free-block h2 {
font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800;
margin-bottom: 8px; letter-spacing: -0.02em; margin-bottom: 8px; letter-spacing: -0.02em;
} }
.free-block h2 em { font-style: normal; color: var(--color-accent); } .free-block h2 em { font-style: normal; color: var(--accent); }
.free-subtitle { color: var(--color-text-muted); margin-bottom: 32px; } .free-subtitle { color: var(--text-muted); margin-bottom: 36px; font-size: 1.05rem; }
.checklist { .checklist {
list-style: none; text-align: left; max-width: 400px; list-style: none; text-align: left; max-width: 400px;
margin: 0 auto 32px; display: grid; gap: 12px; margin: 0 auto 36px; display: grid; gap: 12px;
} }
.checklist li { .checklist li {
display: flex; align-items: center; gap: 12px; display: flex; align-items: center; gap: 12px;
font-size: 0.95rem; font-weight: 500; font-size: 0.95rem; font-weight: 500; color: var(--text);
} }
.checklist li::before { .checklist li::before {
content: '✓'; color: var(--color-accent); font-weight: 800; content: '✓'; color: var(--accent); font-weight: 800;
width: 24px; height: 24px; border-radius: 50%; width: 24px; height: 24px; border-radius: 50%;
background: rgba(0,212,200,0.1); display: flex; background: rgba(0,184,173,0.12); display: flex;
align-items: center; justify-content: center; align-items: center; justify-content: center;
font-size: 0.75rem; flex-shrink: 0; font-size: 0.75rem; flex-shrink: 0;
} }
/* ===== SOCIAL PROOF ===== */ /* ===== SOCIAL PROOF ===== */
.proof { padding: 80px 0; } .proof { padding: 88px 0; background: var(--bg-soft); }
.proof-grid { .proof-inner { max-width: 720px; margin: 0 auto; text-align: center; }
display: grid; grid-template-columns: 1fr; gap: 40px; .proof-inner > p { color: var(--text-muted); margin-bottom: 40px; }
align-items: center;
}
.quote { .quote {
background: var(--color-bg-card); border: 1px solid var(--color-border); background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 40px; border-radius: var(--radius); padding: 40px;
border-left: 3px solid var(--color-accent); border-top: 3px solid var(--accent);
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
} }
.quote blockquote { .quote blockquote {
font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; font-size: 1.1rem; line-height: 1.75; margin-bottom: 24px;
font-style: italic; color: var(--color-text); color: var(--text); font-style: italic;
} }
.quote-author { display: flex; align-items: center; gap: 12px; } .quote-author { display: flex; align-items: center; gap: 12px; justify-content: center; }
.quote-avatar { .quote-avatar {
width: 44px; height: 44px; border-radius: 50%; width: 44px; height: 44px; border-radius: 50%;
background: var(--color-bg-elevated); display: flex; background: var(--accent-bg); display: flex;
align-items: center; justify-content: center; align-items: center; justify-content: center;
font-weight: 700; color: var(--color-accent); font-size: 1rem; 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; } .quote-name { font-weight: 700; font-size: 0.95rem; text-align: left; }
.quote-role { font-size: 0.8rem; color: var(--color-text-muted); } .quote-role { font-size: 0.8rem; color: var(--text-muted); text-align: left; }
.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 ===== */
.footer-cta { .footer-cta {
padding: 80px 0; padding: 100px 0;
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-card) 100%); background: var(--text);
border-top: 1px solid var(--color-border); 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.5rem, 3vw, 2.25rem); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800;
margin-bottom: 12px; letter-spacing: -0.02em; margin-bottom: 12px; letter-spacing: -0.02em; color: #fff;
} }
.footer-cta p { .footer-cta > .footer-cta-inner > p {
color: var(--color-text-muted); margin-bottom: 32px; font-size: 1.05rem; color: rgba(255,255,255,0.65); margin-bottom: 36px; font-size: 1.05rem;
} }
.email-form { .email-form {
display: flex; gap: 12px; max-width: 440px; margin: 0 auto 24px; display: flex; gap: 10px; max-width: 460px; margin: 0 auto 20px;
} }
.email-form input { .email-form input {
flex: 1; padding: 14px 16px; border-radius: var(--radius-sm); flex: 1; padding: 14px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--color-border); background: var(--color-bg); border: 1px solid rgba(255,255,255,0.15);
color: var(--color-text); font-family: var(--font); font-size: 0.95rem; background: rgba(255,255,255,0.08);
} color: #fff; 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);
} }
.email-form input::placeholder { color: rgba(255,255,255,0.35); }
.email-form input:focus { outline: none; border-color: var(--accent); }
.footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
/* ===== FOOTER ===== */ /* ===== FOOTER ===== */
footer { footer {
padding: 32px 0; border-top: 1px solid var(--color-border); padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.08);
text-align: center; background: var(--text); text-align: center;
} }
footer p { font-size: 0.8rem; color: var(--color-text-dim); } footer p { font-size: 0.8rem; color: rgba(255,255,255,0.3); }
/* ===== RESPONSIVE ===== */ /* ===== 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) { @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: 32px 24px; } .free-block { padding: 36px 24px; }
} }
</style> </style>
</head> </head>
@@ -345,27 +287,18 @@
<!-- HERO --> <!-- HERO -->
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<div class="hero-grid"> <div class="hero-badge">Free Forever — No Credit Card</div>
<div> <h1>Run Your GCC Clinic on <em>WhatsApp</em> —<br>Reminders, Leads &amp; Follow-Ups, Automated.</h1>
<div class="hero-badge">Free Forever — No Credit Card</div> <p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open. Free forever.</p>
<h1>Run Your GCC Clinic on <em>WhatsApp</em> — Reminders, Leads &amp; Follow-Ups, Automated.</h1> <div class="hero-ctas">
<p class="hero-sub">Every other clinic software sends reminders. Clinera sends WhatsApp reminders — the ones your patients actually open.</p> <a href="#start" class="btn btn-primary">Start Free — No Credit Card</a>
<div class="hero-ctas"> <a href="#features" class="btn btn-secondary">See How It Works ↓</a>
<a href="#start" class="btn btn-primary">Start Free — No Credit Card</a> </div>
<a href="#features" class="btn btn-secondary">See How It Works ↓</a> <div class="trust-strip">
</div> <span>🇦🇪 Dubai</span>
<div class="trust-strip"> <span>Abu Dhabi</span>
<span>Dubai</span> <span>🇸🇦 Riyadh</span>
<span>Abu Dhabi</span> <span>Jeddah</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>
</div> </div>
</section> </section>
@@ -463,10 +396,6 @@
<p>Reminders, follow-ups, and rebooking nudges flow automatically through WhatsApp. Your team focuses on care.</p> <p>Reminders, follow-ups, and rebooking nudges flow automatically through WhatsApp. Your team focuses on care.</p>
</div> </div>
</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> </div>
</section> </section>
@@ -475,7 +404,7 @@
<div class="container"> <div class="container">
<div class="free-block"> <div class="free-block">
<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.</p> <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>
<ul class="checklist"> <ul class="checklist">
<li>Unlimited patients</li> <li>Unlimited patients</li>
<li>Unlimited appointments</li> <li>Unlimited appointments</li>
@@ -484,9 +413,9 @@
<li>Patient history &amp; records</li> <li>Patient history &amp; records</li>
<li>Staff scheduling</li> <li>Staff scheduling</li>
<li>Multi-location support</li> <li>Multi-location support</li>
<li>Priority WhatsApp support</li> <li>No credit card required</li>
</ul> </ul>
<a href="#start" class="btn btn-primary">Start Free — No Credit Card</a> <a href="#start" class="btn btn-primary">Get Your Free Clinic Account →</a>
</div> </div>
</div> </div>
</section> </section>
@@ -494,7 +423,11 @@
<!-- SOCIAL PROOF --> <!-- SOCIAL PROOF -->
<section class="proof"> <section class="proof">
<div class="container"> <div class="container">
<div class="proof-grid"> <div class="proof-inner">
<div class="section-header">
<h2>What GCC Clinics Are Saying</h2>
<p>Real results from clinics that made the switch.</p>
</div>
<div class="quote"> <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> <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-author">
@@ -505,10 +438,6 @@
</div> </div>
</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>
</div> </div>
</section> </section>
@@ -517,7 +446,7 @@
<section class="footer-cta" id="start"> <section class="footer-cta" id="start">
<div class="container"> <div class="container">
<div class="footer-cta-inner"> <div class="footer-cta-inner">
<h2>Your Patients Are on WhatsApp. Your Clinic Should Be Too.</h2> <h2>Your Patients Are on WhatsApp.<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 address">
@@ -531,14 +460,13 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<div class="container"> <div class="container">
<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>
// IntersectionObserver fade-in
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
const delay = entry.target.dataset.delay || 0; const delay = entry.target.dataset.delay || 0;
setTimeout(() => entry.target.classList.add('visible'), delay); setTimeout(() => entry.target.classList.add('visible'), delay);