| Server IP : 138.197.176.125 / Your IP : 216.73.217.55 Web Server : Apache/2.4.41 (Ubuntu) System : Linux SuiteCRM-8 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 User : root ( 0) PHP Version : 8.3.19 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/demo_wowchat/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WowChat | AI Omnichannel Customer Support & WhatsApp CRM</title>
<!-- Modern Google Font -->
<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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<style>
/* ==========================================================================
1. CSS RESET & VARIABLE SYSTEM
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
/* Color System */
--primary: #0066FF;
--primary-hover: #0052CC;
--primary-light: #EBF3FF;
--accent-orange: #FF6A3D;
--accent-cyan: #06B6D4;
--accent-purple: #7C3AED;
--accent-green: #10B981;
--dark-bg: #0B0F19;
--dark-surface: #111827;
--dark-card: #1F2937;
--light-bg: #F8FAFC;
--light-surface: #FFFFFF;
--border-color: #E2E8F0;
--text-main: #0F172A;
--text-muted: #64748B;
--text-light: #94A3B8;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-full: 9999px;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-md: 0 10px 25px -5px rgba(0, 102, 255, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 20px 40px -15px rgba(0, 102, 255, 0.15);
--shadow-glow: 0 0 30px rgba(0, 102, 255, 0.35);
}
html {
scroll-behavior: smooth;
font-family: var(--font-main);
background-color: var(--light-bg);
color: var(--text-main);
line-height: 1.6;
}
body {
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
/* Container Utility */
.container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
font-weight: 600;
font-size: 15px;
border-radius: var(--radius-full);
transition: all 0.25s ease;
cursor: pointer;
border: none;
outline: none;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, #0040C1 100%);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(0, 102, 255, 0.35);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45);
}
.btn-outline {
background: transparent;
color: var(--text-main);
border: 1px solid var(--border-color);
}
.btn-outline:hover {
background: #F1F5F9;
border-color: #CBD5E1;
transform: translateY(-2px);
}
.btn-glow {
position: relative;
}
.btn-glow::after {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, var(--primary), var(--accent-orange));
border-radius: var(--radius-full);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
filter: blur(8px);
}
.btn-glow:hover::after {
opacity: 0.8;
}
/* Badges & Section Headers */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 600;
background: rgba(0, 102, 255, 0.08);
color: var(--primary);
border: 1px solid rgba(0, 102, 255, 0.18);
}
.section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 56px auto;
}
.section-header h2 {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text-main);
margin: 16px 0;
line-height: 1.25;
}
.section-header p {
font-size: 18px;
color: var(--text-muted);
}
.text-gradient {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 50%, var(--accent-orange) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ==========================================================================
2. NAVIGATION HEADER
========================================================================== */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 800;
color: var(--text-main);
letter-spacing: -0.02em;
}
.logo-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary), #0040C1);
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}
.logo-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: linear-gradient(135deg, var(--accent-orange), #FF8A00);
color: white;
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 15px;
font-weight: 500;
color: var(--text-muted);
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--primary);
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
/* ==========================================================================
3. HERO SECTION & MOCKUP
========================================================================== */
.hero {
position: relative;
padding: 80px 0 100px 0;
background: radial-gradient(circle at 50% 0%, rgba(0, 102, 255, 0.08) 0%, rgba(248, 250, 252, 0) 70%);
overflow: hidden;
}
.hero-content {
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.hero h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
margin: 24px 0 20px 0;
color: var(--text-main);
}
.hero p {
font-size: 20px;
color: var(--text-muted);
max-width: 760px;
margin: 0 auto 36px auto;
line-height: 1.6;
}
.hero-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.hero-trust-list {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 6px;
}
.trust-item svg {
color: var(--accent-green);
}
/* Pure CSS App Visual Mockup */
.hero-mockup-wrapper {
margin-top: 60px;
position: relative;
}
.hero-mockup-backdrop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
max-width: 1000px;
background: radial-gradient(circle, rgba(0, 102, 255, 0.2) 0%, rgba(124, 58, 237, 0.15) 50%, rgba(248, 250, 252, 0) 70%);
filter: blur(60px);
z-index: 1;
pointer-events: none;
}
.app-window {
position: relative;
z-index: 2;
background: var(--dark-bg);
border-radius: var(--radius-lg);
box-shadow: 0 30px 60px -12px rgba(11, 15, 25, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
color: #E2E8F0;
text-align: left;
}
.app-header {
height: 44px;
background: #111827;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
}
.window-dots {
display: flex;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot-red {
background-color: #EF4444;
}
.dot-yellow {
background-color: #F59E0B;
}
.dot-green {
background-color: #10B981;
}
.app-search-bar {
flex: 1;
max-width: 400px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #94A3B8;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.app-body {
display: grid;
grid-template-columns: 240px 320px 1fr;
height: 540px;
background: #0B0F19;
}
/* Sidebar Navigation inside Mockup */
.mockup-nav {
background: #111827;
border-right: 1px solid rgba(255, 255, 255, 0.06);
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 20px;
}
.nav-group-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: #64748B;
letter-spacing: 0.05em;
padding: 0 8px;
}
.mockup-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.mockup-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #94A3B8;
cursor: pointer;
transition: all 0.2s ease;
}
.mockup-menu-item.active,
.mockup-menu-item:hover {
background: rgba(0, 102, 255, 0.15);
color: #38BDF8;
}
.item-badge {
background: var(--primary);
color: white;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
font-weight: 700;
}
/* Mockup Chat List */
.mockup-chat-list {
background: #161F30;
border-right: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
}
.chat-list-header {
padding: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-weight: 700;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-card {
padding: 14px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
display: flex;
gap: 12px;
cursor: pointer;
transition: background 0.2s;
}
.chat-card.active {
background: rgba(0, 102, 255, 0.12);
border-left: 3px solid var(--primary);
}
.avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
color: white;
position: relative;
flex-shrink: 0;
}
.channel-icon-overlay {
position: absolute;
bottom: -2px;
right: -2px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #161F30;
font-size: 9px;
}
.icon-wa {
background: #25D366;
color: white;
}
.icon-ig {
background: #E1306C;
color: white;
}
.icon-mail {
background: #EA4335;
color: white;
}
.chat-info {
flex: 1;
min-width: 0;
}
.chat-name-time {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: #F1F5F9;
margin-bottom: 2px;
}
.chat-time {
font-size: 11px;
color: #64748B;
font-weight: 400;
}
.chat-preview {
font-size: 12px;
color: #94A3B8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mockup Main Chat Canvas */
.mockup-chat-main {
background: #0B0F19;
display: flex;
flex-direction: column;
}
.chat-main-header {
padding: 14px 20px;
background: #111827;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
}
.user-profile-header {
display: flex;
align-items: center;
gap: 12px;
}
.ai-status-tag {
display: flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.15);
color: #34D399;
border: 1px solid rgba(16, 185, 129, 0.3);
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #34D399;
box-shadow: 0 0 8px #34D399;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.messages-area {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
}
.msg-bubble {
max-width: 80%;
padding: 12px 16px;
border-radius: 14px;
font-size: 13px;
line-height: 1.5;
}
.msg-incoming {
background: #1E293B;
color: #F1F5F9;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.msg-outgoing {
background: linear-gradient(135deg, var(--primary), #0040C1);
color: white;
align-self: flex-end;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
}
.msg-ai {
background: linear-gradient(135deg, #1E1B4B, #312E81);
border: 1px solid rgba(124, 58, 237, 0.4);
color: #E0E7FF;
align-self: flex-end;
border-bottom-right-radius: 4px;
position: relative;
}
.ai-badge-label {
font-size: 10px;
font-weight: 700;
color: #A78BFA;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.chat-input-area {
padding: 16px;
background: #111827;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
gap: 10px;
align-items: center;
}
.mock-input {
flex: 1;
background: #1E293B;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 10px 16px;
color: white;
font-size: 13px;
outline: none;
}
/* ==========================================================================
4. CHANNEL INTEGRATION BAR
========================================================================== */
.channels-bar {
padding: 48px 0;
background: #FFFFFF;
border-bottom: 1px solid var(--border-color);
text-align: center;
}
.channels-bar p {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 28px;
}
.channel-badges-grid {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.channel-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: #F8FAFC;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
font-size: 14px;
font-weight: 600;
color: var(--text-main);
transition: all 0.25s ease;
}
.channel-pill:hover {
background: #FFFFFF;
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1);
}
.icon-svg {
width: 22px;
height: 22px;
}
/* ==========================================================================
5. FEATURES GRID SECTION
========================================================================== */
.features-section {
padding: 100px 0;
background: #F8FAFC;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.feature-card {
background: #FFFFFF;
border-radius: var(--radius-md);
padding: 36px 28px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(0, 102, 255, 0.3);
}
.feature-icon-box {
width: 54px;
height: 54px;
border-radius: 14px;
background: var(--primary-light);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon-box {
background: var(--primary);
color: #FFFFFF;
transform: scale(1.05);
}
.feature-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-main);
line-height: 1.3;
}
.feature-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.6;
}
/* Visual Graphic Pill inside Card */
.card-graphic-preview {
margin-top: 24px;
padding-top: 20px;
border-top: 1px dashed var(--border-color);
}
.mini-ui-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #F1F5F9;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #475569;
}
/* ==========================================================================
6. INTERACTIVE LIVE DEMO SIMULATOR
========================================================================== */
.demo-section {
padding: 100px 0;
background: var(--dark-bg);
color: white;
position: relative;
}
.demo-container {
background: #111827;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.demo-tabs {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.demo-tab-btn {
padding: 10px 24px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94A3B8;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.25s ease;
display: flex;
align-items: center;
gap: 8px;
}
.demo-tab-btn.active,
.demo-tab-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 14px rgba(0, 102, 255, 0.4);
}
.demo-simulator {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.simulator-text h3 {
font-size: 32px;
font-weight: 800;
margin-bottom: 16px;
line-height: 1.25;
}
.simulator-text p {
font-size: 16px;
color: #94A3B8;
margin-bottom: 24px;
}
.sim-feature-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.sim-feature-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: #E2E8F0;
}
.sim-feature-item svg {
color: var(--accent-green);
}
/* Interactive Chat Window */
.sim-chat-box {
background: #0B0F19;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.08);
height: 380px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sim-chat-header {
padding: 12px 16px;
background: #1F2937;
font-size: 13px;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
}
.sim-chat-body {
flex: 1;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.sim-input-form {
padding: 12px;
background: #1F2937;
display: flex;
gap: 8px;
}
.sim-input-form input {
flex: 1;
background: #111827;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
padding: 8px 16px;
color: white;
font-size: 13px;
outline: none;
}
/* ==========================================================================
7. REAL-TIME INTELLIGENCE & ANALYTICS METRICS
========================================================================== */
.analytics-section {
padding: 100px 0;
background: #FFFFFF;
border-bottom: 1px solid var(--border-color);
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 60px;
}
.metric-card {
background: var(--light-bg);
border-radius: var(--radius-md);
padding: 32px 24px;
text-align: center;
border: 1px solid var(--border-color);
transition: transform 0.25s ease;
}
.metric-card:hover {
transform: translateY(-4px);
}
.metric-number {
font-size: 44px;
font-weight: 800;
color: var(--primary);
line-height: 1.1;
margin-bottom: 8px;
letter-spacing: -0.03em;
}
.metric-label {
font-size: 15px;
font-weight: 600;
color: var(--text-main);
margin-bottom: 4px;
}
.metric-sub {
font-size: 13px;
color: var(--text-muted);
}
/* CSS/SVG Visual Dashboard Preview */
.analytics-visual-box {
background: var(--dark-bg);
border-radius: var(--radius-lg);
padding: 40px;
color: white;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
box-shadow: var(--shadow-lg);
}
.chart-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.bar-chart-mock {
display: flex;
align-items: flex-end;
gap: 16px;
height: 180px;
padding-top: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bar-column {
flex: 1;
background: linear-gradient(180deg, var(--primary) 0%, rgba(0, 102, 255, 0.2) 100%);
border-radius: 6px 6px 0 0;
position: relative;
transition: height 0.5s ease;
}
.bar-column::after {
content: attr(data-label);
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: #94A3B8;
}
.radial-stat-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #111827;
border-radius: var(--radius-md);
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.circle-chart {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(var(--primary) 0% 88%, rgba(255, 255, 255, 0.1) 88% 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
position: relative;
}
.circle-chart-inner {
width: 90px;
height: 90px;
border-radius: 50%;
background: #111827;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 800;
color: white;
}
/* ==========================================================================
8. CASE STUDIES / CLIENT STORIES
========================================================================== */
.case-studies-section {
padding: 100px 0;
background: #F8FAFC;
}
.case-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.case-card {
background: #FFFFFF;
border-radius: var(--radius-md);
padding: 36px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s ease;
}
.case-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.case-logo-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: var(--light-bg);
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 15px;
color: var(--text-main);
margin-bottom: 20px;
width: fit-content;
}
.company-icon-shape {
width: 28px;
height: 28px;
border-radius: 6px;
background: linear-gradient(135deg, var(--primary), var(--accent-purple));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
}
.case-card h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-main);
}
.case-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 24px;
}
.case-link {
font-size: 14px;
font-weight: 700;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s;
}
.case-link:hover {
gap: 10px;
}
/* ==========================================================================
9. CTA BANNER SECTION
========================================================================== */
.cta-section {
padding: 80px 0;
background: #FFFFFF;
}
.cta-box {
background: linear-gradient(135deg, #0B0F19 0%, #1E1B4B 50%, #0040C1 100%);
border-radius: var(--radius-lg);
padding: 64px 48px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 64, 193, 0.25);
}
.cta-box h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.cta-box p {
font-size: 18px;
color: #CBD5E1;
max-width: 600px;
margin: 0 auto 36px auto;
}
/* ==========================================================================
10. FAQ ACCORDION
========================================================================== */
.faq-section {
padding: 100px 0;
background: #F8FAFC;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
transition: all 0.25s ease;
}
.faq-question {
padding: 20px 24px;
font-size: 17px;
font-weight: 700;
color: var(--text-main);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.faq-toggle-icon {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
color: var(--primary);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
padding: 0 24px;
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
}
.faq-item.open .faq-answer {
max-height: 300px;
padding: 0 24px 20px 24px;
}
.faq-item.open .faq-toggle-icon {
transform: rotate(180deg);
}
/* ==========================================================================
11. FOOTER
========================================================================== */
.footer {
background: var(--dark-bg);
color: #94A3B8;
padding: 80px 0 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 48px;
margin-bottom: 60px;
}
.footer-brand p {
margin-top: 16px;
font-size: 14px;
line-height: 1.6;
max-width: 300px;
}
.footer-title {
font-size: 15px;
font-weight: 700;
color: white;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
font-size: 14px;
color: #94A3B8;
transition: color 0.2s;
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.social-links {
display: flex;
gap: 16px;
}
.social-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: background 0.2s;
}
.social-icon:hover {
background: var(--primary);
}
.logo img {
max-width: 130px;
max-height: 36px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* ==========================================================================
12. RESPONSIVE BREAKPOINTS
========================================================================== */
@media (max-width: 992px) {
.hero h1 {
font-size: 42px;
}
.app-body {
grid-template-columns: 1fr;
height: auto;
}
.mockup-nav,
.mockup-chat-list {
display: none;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
.demo-simulator {
grid-template-columns: 1fr;
}
.analytics-visual-box {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
}
.mobile-toggle {
display: block;
}
.hero h1 {
font-size: 32px;
}
.hero p {
font-size: 16px;
}
.features-grid {
grid-template-columns: 1fr;
}
.case-grid {
grid-template-columns: 1fr;
}
.metrics-grid {
grid-template-columns: 1fr;
}
.cta-box {
padding: 40px 20px;
}
.cta-box h2 {
font-size: 28px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
}
}
</style>
</head>
<body>
<!-- ==========================================================================
1. NAVBAR HEADER
========================================================================== -->
<script>
(function () {
const script = decodeURIComponent(escape(atob("PHNjcmlwdD4KKGZ1bmN0aW9uKGQsIHQpIHsKICB2YXIgZyA9IGQuY3JlYXRlRWxlbWVudCh0KSwKICAgICAgcyA9IGQuZ2V0RWxlbWVudHNCeVRhZ05hbWUodClbMF07CiAgZy5zcmMgPSAnaHR0cHM6Ly9hcHAud293Y2hhdC5jby9zZGsvY2hhdC1hZ2VudC5qcyc7CiAgZy5kZWZlciA9IHRydWU7CiAgZy5hc3luYyA9IHRydWU7CiAgcy5wYXJlbnROb2RlLmluc2VydEJlZm9yZShnLCBzKTsKICBnLm9ubG9hZCA9IGZ1bmN0aW9uKCkgewogICAgd2luZG93LmxpdmVDaGF0U0RLLnJ1bih7CiAgICAgIHdlYnNpdGVUb2tlbjogIjk5MTA0MGVkLTY2NmEtNDc2Mi05NTQ2LTliYWI4ZmFlNGRmMCIsCiAgICAgIHdlbGNvbWVUaXRsZTogIkhleSB0aGVyZSEg8J+RiyIsCiAgICAgIHdlbGNvbWVUYWdsaW5lOiAiR290IGEgcXVlc3Rpb24/IFdlJ3JlIG9ubGluZSBhbmQgcmVhZHkgdG8gaGVscCB5b3UgZmluZCB3aGF0IHlvdSBuZWVkLiIsCiAgICAgIHdpZGdldENvbG9yOiAiIzE5NzZkMiIsCiAgICAgIHRlbmFudElkOiAiZjA1N2FhODRhYjM1NGRiYTg0NDU4N2M4ODhmNjE3NGEiCiAgICB9KTsKICB9Owp9KShkb2N1bWVudCwgInNjcmlwdCIpOwo8L3NjcmlwdD4=")));
document.write(script);
})();
</script>
<nav class="navbar">
<div class="container nav-container">
<a href="#" class="logo">
<img src="./wow-chat-logo.png" alt="Logo">
</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#channels">Channels</a></li>
<li><a href="#live-demo">Live Demo</a></li>
<li><a href="#cases">Case Studies</a></li>
<li><a href="#analytics">Analytics</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
<div class="nav-actions">
<button class="btn btn-outline">Book a Demo</button>
<button class="btn btn-primary btn-glow">Start Free Trial</button>
</div>
</div>
</nav>
<!-- ==========================================================================
2. HERO SECTION
========================================================================== -->
<section class="hero">
<div class="container hero-content">
<div class="badge">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
</svg>
Next-Gen AI Omnichannel Platform & WhatsApp CRM
</div>
<h1>
Unify Customer Conversations with <br>
<span class="text-gradient">AI-Powered Support & WhatsApp CRM</span>
</h1>
<p>
Manage WhatsApp, Instagram, Facebook, Email & Webchat from one shared inbox. Empower your support team
with smart AI agents that answer queries 24/7, qualify leads, and close sales faster.
</p>
<div class="hero-cta">
<button class="btn btn-primary btn-glow" style="padding: 16px 36px; font-size: 17px;">
Start 14-Day Free Trial
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
<button class="btn btn-outline" style="padding: 16px 28px; font-size: 17px;">
Book Live Demo
</button>
</div>
<div class="hero-trust-list">
<span class="trust-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
No credit card required
</span>
<span class="trust-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
5-minute setup
</span>
<span class="trust-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Official Meta Business Partner
</span>
</div>
<!-- App Interface Pure CSS Mockup -->
<div class="hero-mockup-wrapper">
<div class="hero-mockup-backdrop"></div>
<div class="app-window">
<div class="app-header">
<div class="window-dots">
<span class="dot dot-red"></span>
<span class="dot dot-yellow"></span>
<span class="dot dot-green"></span>
</div>
<div class="app-search-bar">
🔒 app.wowchat.co/inbox/unified-workspace
</div>
</div>
<div class="app-body">
<!-- Sidebar -->
<div class="mockup-nav">
<div class="nav-group-title">Channels</div>
<ul class="mockup-menu">
<li class="mockup-menu-item active">
<span>📥 All Conversations</span>
<span class="item-badge">12</span>
</li>
<li class="mockup-menu-item">
<span>💬 WhatsApp API</span>
<span style="font-size:11px; color:#64748B;">8</span>
</li>
<li class="mockup-menu-item">
<span>📸 Instagram DM</span>
<span style="font-size:11px; color:#64748B;">3</span>
</li>
<li class="mockup-menu-item">
<span>✉️ Email Support</span>
<span style="font-size:11px; color:#64748B;">1</span>
</li>
<li class="mockup-menu-item">
<span>🌐 Website Widget</span>
<span style="font-size:11px; color:#64748B;">0</span>
</li>
</ul>
<div class="nav-group-title" style="margin-top: 10px;">CRM & Automation</div>
<ul class="mockup-menu">
<li class="mockup-menu-item">🤖 AI Agent Rules</li>
<li class="mockup-menu-item">📢 Broadcast Campaigns</li>
<li class="mockup-menu-item">🏷️ Contact Tags</li>
</ul>
</div>
<!-- Chat List -->
<div class="mockup-chat-list">
<div class="chat-list-header">
<span>Recent Chats</span>
<span
style="font-size: 11px; color: var(--primary); background: rgba(0,102,255,0.1); padding: 2px 8px; border-radius: 10px;">Live
Feed</span>
</div>
<div class="chat-card active">
<div class="avatar">
SO
<span class="channel-icon-overlay icon-wa">✓</span>
</div>
<div class="chat-info">
<div class="chat-name-time">
<span>Silent Ocean Logistics</span>
<span class="chat-time">10:42 AM</span>
</div>
<div class="chat-preview">Can you update us on freight booking #8921?</div>
</div>
</div>
<div class="chat-card">
<div class="avatar" style="background: linear-gradient(135deg, #EC4899, #8B5CF6);">
OF
<span class="channel-icon-overlay icon-ig">★</span>
</div>
<div class="chat-info">
<div class="chat-name-time">
<span>OfficeFirst Coworking</span>
<span class="chat-time">10:35 AM</span>
</div>
<div class="chat-preview">Interested in virtual office plan pricing</div>
</div>
</div>
<div class="chat-card">
<div class="avatar" style="background: linear-gradient(135deg, #10B981, #059669);">
AF
<span class="channel-icon-overlay icon-mail">@</span>
</div>
<div class="chat-info">
<div class="chat-name-time">
<span>ARC Fertility Care</span>
<span class="chat-time">09:12 AM</span>
</div>
<div class="chat-preview">Appointment confirmed for patient consultation</div>
</div>
</div>
</div>
<!-- Active Chat Canvas -->
<div class="mockup-chat-main">
<div class="chat-main-header">
<div class="user-profile-header">
<div class="avatar" style="width:32px; height:32px; font-size:12px;">SO</div>
<div>
<div style="font-size: 13px; font-weight:700;">Silent Ocean Logistics (WhatsApp)
</div>
<div style="font-size: 11px; color:#94A3B8;">Assigned to: AI Copilot & Sarah
Jenkins</div>
</div>
</div>
<div class="ai-status-tag">
<span class="pulse-dot"></span>
AI Auto-Responder Active
</div>
</div>
<div class="messages-area">
<div class="msg-bubble msg-incoming">
Hi WowChat Team! We have an urgent inquiry about freight shipment #8921 leaving from
Singapore port today. Has the bill of lading been issued?
</div>
<div class="msg-bubble msg-ai">
<div class="ai-badge-label">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
WowChat Autonomous AI Agent
</div>
Hello! Yes, shipment #8921 has been verified. The Bill of Lading (#BL-90218) was
issued at 09:30 AM SGT and dispatched to your email. You can track real-time
container status via our portal link below!
</div>
<div class="msg-bubble msg-incoming">
That was lightning fast! Thank you so much for the instant update! 🙏
</div>
<div class="msg-bubble msg-outgoing">
You're very welcome! Let us know if you need anything else today. Have a great day!
</div>
</div>
<div class="chat-input-area">
<input type="text" class="mock-input"
value="Type your message or use AI suggest templates..." readonly>
<button class="btn btn-primary"
style="padding: 8px 16px; font-size: 13px; border-radius: 12px;">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
3. CHANNELS BAR
========================================================================== -->
<section class="channels-bar" id="channels">
<div class="container">
<p>Connect All Your Customer Channels In One Unified System</p>
<div class="channel-badges-grid">
<div class="channel-pill">
<!-- WhatsApp SVG -->
<svg class="icon-svg" viewBox="0 0 24 24" fill="#25D366">
<path
d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984 0 1.76.459 3.477 1.332 4.992L2 22l5.147-1.348a9.97 9.97 0 004.863 1.258h.004c5.505 0 9.988-4.479 9.989-9.985 0-2.668-1.038-5.176-2.924-7.062A9.92 9.92 0 0012.012 2z" />
</svg>
WhatsApp Business API
</div>
<div class="channel-pill">
<!-- Instagram SVG -->
<svg class="icon-svg" viewBox="0 0 24 24" fill="#E1306C">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z" />
</svg>
Instagram Direct
</div>
<div class="channel-pill">
<!-- Messenger SVG -->
<svg class="icon-svg" viewBox="0 0 24 24" fill="#0084FF">
<path
d="M12 0C5.373 0 0 4.974 0 11.111c0 3.498 1.744 6.614 4.469 8.654V24l4.088-2.242c1.092.304 2.246.464 3.443.464 6.627 0 12-4.975 12-11.111C24 4.974 18.627 0 12 0zm1.191 14.963l-3.055-3.26-5.963 3.26 6.559-6.96 3.127 3.26 5.89-3.26-6.558 6.96z" />
</svg>
Facebook Messenger
</div>
<div class="channel-pill">
<!-- Email SVG -->
<svg class="icon-svg" viewBox="0 0 24 24" fill="#EA4335">
<path
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
</svg>
Email Shared Inbox
</div>
<div class="channel-pill">
<!-- Live Web Chat SVG -->
<svg class="icon-svg" viewBox="0 0 24 24" fill="#0066FF">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" />
</svg>
Website Live Chat
</div>
</div>
</div>
</section>
<!-- ==========================================================================
4. KEY FEATURES SECTION
========================================================================== -->
<section class="features-section" id="features">
<div class="container">
<div class="section-header">
<div class="badge">Everything You Need</div>
<h2>Built to Supercharge Your Support & Growth</h2>
<p>Replace fragmented communication tools with one intelligent platform designed for speed,
collaboration, and conversions.</p>
</div>
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon-box">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<h3>Omnichannel Shared Inbox</h3>
<p>Unify messages from WhatsApp, Instagram, Messenger, Email, and Webchat into a single live inbox.
Zero missed leads, 100% visibility.</p>
<div class="card-graphic-preview">
<div class="mini-ui-badge">
<span style="color:#10B981;">●</span> Multi-Channel Sync Active
</div>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon-box"
style="background: rgba(124, 58, 237, 0.1); color: var(--accent-purple);">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<h3>Autonomous AI Agents</h3>
<p>Deploy AI agents trained on your business knowledge base. Instantly answer customer FAQs, qualify
leads, and triage support tickets 24/7.</p>
<div class="card-graphic-preview">
<div class="mini-ui-badge"
style="background: rgba(124, 58, 237, 0.1); color: var(--accent-purple);">
⚡ Auto-Reply in 1.2s
</div>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon-box"
style="background: rgba(255, 106, 61, 0.1); color: var(--accent-orange);">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
</svg>
</div>
<h3>Smart Ticketing & SLA</h3>
<p>Turn customer queries into structured tickets. Set resolution SLAs, assign tasks automatically,
and track team performance in real time.</p>
<div class="card-graphic-preview">
<div class="mini-ui-badge"
style="background: rgba(255, 106, 61, 0.1); color: var(--accent-orange);">
🎯 SLA Resolution: 99.4%
</div>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon-box"
style="background: rgba(6, 182, 212, 0.1); color: var(--accent-cyan);">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<h3>Mini CRM & Contact Profiles</h3>
<p>Build rich customer profiles with interaction history, custom properties, tags, and purchase data
right beside the chat window.</p>
<div class="card-graphic-preview">
<div class="mini-ui-badge"
style="background: rgba(6, 182, 212, 0.1); color: var(--accent-cyan);">
👤 Complete Customer Context
</div>
</div>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<div class="feature-icon-box"
style="background: rgba(16, 185, 129, 0.1); color: var(--accent-green);">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
<h3>WhatsApp Broadcast Campaigns</h3>
<p>Send bulk WhatsApp messages to customer segments. Schedule updates, promotional campaigns, and
automated follow-ups seamlessly.</p>
<div class="card-graphic-preview">
<div class="mini-ui-badge"
style="background: rgba(16, 185, 129, 0.1); color: var(--accent-green);">
🚀 98.5% Open Rate
</div>
</div>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<div class="feature-icon-box">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<line x1="18" y1="20" x2="18" y2="10"></line>
<line x1="12" y1="20" x2="12" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="14"></line>
</svg>
</div>
<h3>Real-Time Analytics & Reports</h3>
<p>Monitor response speed, chat volume, CSAT scores, and agent productivity with executive dashboard
metrics and exported reports.</p>
<div class="card-graphic-preview">
<div class="mini-ui-badge">
📊 Live Executive Insights
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
5. INTERACTIVE LIVE DEMO SIMULATOR
========================================================================== -->
<section class="demo-section" id="live-demo">
<div class="container">
<div class="section-header">
<div class="badge"
style="background: rgba(255,255,255,0.1); color: white; border-color: rgba(255,255,255,0.2);">
Interactive Experience
</div>
<h2 style="color: white;">Try WowChat AI Agent in Real-Time</h2>
<p style="color: #94A3B8;">Test how our AI instantly processes queries across different messaging
channels.</p>
</div>
<div class="demo-container">
<!-- Tab Selector -->
<div class="demo-tabs">
<button class="demo-tab-btn active" onclick="switchChannel('wa')">
<span>💬 WhatsApp</span>
</button>
<button class="demo-tab-btn" onclick="switchChannel('ig')">
<span>📸 Instagram DM</span>
</button>
<button class="demo-tab-btn" onclick="switchChannel('email')">
<span>✉️ Email Support</span>
</button>
<button class="demo-tab-btn" onclick="switchChannel('chat')">
<span>🌐 Web Chat</span>
</button>
</div>
<div class="demo-simulator">
<div class="simulator-text">
<h3 id="sim-title">Automate WhatsApp Support & Sales</h3>
<p id="sim-desc">
Connect your official WhatsApp Business API. WowChat AI will answer product questions, send
catalog links, and book sales calls without human delay.
</p>
<ul class="sim-feature-list">
<li class="sim-feature-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Instant 24/7 automated responses
</li>
<li class="sim-feature-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Multilingual AI support in 50+ languages
</li>
<li class="sim-feature-item">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Seamless handoff to human support agents
</li>
</ul>
</div>
<!-- Chat Window Simulator -->
<div class="sim-chat-box">
<div class="sim-chat-header">
<span id="sim-header-name">🟢 Live WhatsApp Simulator</span>
<span style="color:#34D399; font-size:11px;">Powered by WowChat AI</span>
</div>
<div class="sim-chat-body" id="sim-messages">
<div class="msg-bubble msg-incoming">
Hello! What are your business hours and pricing plans?
</div>
<div class="msg-bubble msg-ai">
<div class="ai-badge-label">⚡ WowChat AI Assistant</div>
Hello! Our AI agents operate 24/7 non-stop! Our pricing plans start with a 14-day free
trial, followed by flexible monthly tiers. Would you like to view our feature breakdown?
</div>
</div>
<form class="sim-input-form" onsubmit="handleSimSubmit(event)">
<input type="text" id="sim-input-field"
placeholder="Ask the AI a question (e.g. How does setup work?)..." required>
<button type="submit" class="btn btn-primary"
style="padding: 8px 18px; font-size: 13px;">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
6. REAL-TIME INTELLIGENCE & ANALYTICS METRICS
========================================================================== -->
<section class="analytics-section" id="analytics">
<div class="container">
<div class="section-header">
<div class="badge">Measurable Impact</div>
<h2>Data-Driven Results for Modern Support Teams</h2>
<p>See how global companies improve customer satisfaction and operational efficiency with WowChat.</p>
</div>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-number">-85%</div>
<div class="metric-label">First Response Time</div>
<div class="metric-sub">Average response drops from 2 hours to under 15 seconds</div>
</div>
<div class="metric-card">
<div class="metric-number">3.4x</div>
<div class="metric-label">Lead Conversion</div>
<div class="metric-sub">Instant AI qualification doubles sales pipeline conversion</div>
</div>
<div class="metric-card">
<div class="metric-number">99.2%</div>
<div class="metric-label">Customer Satisfaction</div>
<div class="metric-sub">Consistently high CSAT scores with 24/7 instant resolution</div>
</div>
<div class="metric-card">
<div class="metric-number">10k+</div>
<div class="metric-label">Conversations Automated</div>
<div class="metric-sub">Handled per business month without adding extra staff</div>
</div>
</div>
<!-- CSS Visual Analytics Chart Box -->
<div class="analytics-visual-box">
<div class="chart-container">
<div style="display:flex; justify-content:space-between; align-items:center;">
<div>
<div style="font-size: 18px; font-weight:700;">Weekly Response Speed & Volume</div>
<div style="font-size: 13px; color:#94A3B8;">Real-time channel performance breakdown</div>
</div>
<span
style="font-size: 12px; color: var(--accent-green); background: rgba(16,185,129,0.15); padding: 4px 12px; border-radius: 20px;">+42%
Efficiency</span>
</div>
<div class="bar-chart-mock">
<div class="bar-column" style="height: 40%;" data-label="Mon"></div>
<div class="bar-column" style="height: 65%;" data-label="Tue"></div>
<div class="bar-column" style="height: 55%;" data-label="Wed"></div>
<div class="bar-column" style="height: 85%;" data-label="Thu"></div>
<div class="bar-column" style="height: 95%;" data-label="Fri"></div>
<div class="bar-column" style="height: 70%;" data-label="Sat"></div>
<div class="bar-column" style="height: 50%;" data-label="Sun"></div>
</div>
</div>
<div class="radial-stat-box">
<div class="circle-chart">
<div class="circle-chart-inner">88%</div>
</div>
<div style="font-size: 15px; font-weight: 700; color: white;">AI Resolution Rate</div>
<div style="font-size: 12px; color: #94A3B8; text-align: center; margin-top: 4px;">
88% of incoming support questions resolved without agent intervention.
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
7. CASE STUDIES / CLIENT SUCCESS
========================================================================== -->
<section class="case-studies-section" id="cases">
<div class="container">
<div class="section-header">
<div class="badge">Trusted Worldwide</div>
<h2>Empowering Industry Leaders</h2>
<p>Discover how companies across logistics, workspaces, and healthcare scale customer support with
WowChat.</p>
</div>
<div class="case-grid">
<!-- Case 1 -->
<div class="case-card">
<div>
<div class="case-logo-badge">
<div class="company-icon-shape">SO</div>
Silent Ocean Logistics
</div>
<h4>Managing Global Freight Queries on WhatsApp</h4>
<p>
"Silent Ocean Limited managed thousands of time-sensitive freight inquiry messages through
individual accounts. With WowChat, we unified all inquiries into a single multi-agent inbox
and reduced response time by 90%."
</p>
</div>
<a href="#" class="case-link">
Read Full Case Study
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
<!-- Case 2 -->
<div class="case-card">
<div>
<div class="case-logo-badge">
<div class="company-icon-shape"
style="background: linear-gradient(135deg, #EC4899, #8B5CF6);">OF</div>
OfficeFirst Workspace
</div>
<h4>Automating Coworking Space Leads & Bookings</h4>
<p>
"OfficeFirst provides flexible workspace solutions. WowChat's AI agents qualify prospective
tenants on Instagram and WhatsApp 24/7, booking tour appointments automatically into our CRM
calendar."
</p>
</div>
<a href="#" class="case-link">
Read Full Case Study
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
<!-- Case 3 -->
<div class="case-card">
<div>
<div class="case-logo-badge">
<div class="company-icon-shape"
style="background: linear-gradient(135deg, #10B981, #059669);">AF</div>
ARC Fertility Care
</div>
<h4>Compassionate & Timely Patient Engagement</h4>
<p>
"ARC Fertility is one of India's most trusted IVF care providers. WowChat allowed our
support team to respond compassionately and instantly to patient queries across website chat
and SMS."
</p>
</div>
<a href="#" class="case-link">
Read Full Case Study
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
<!-- Case 4 -->
<div class="case-card">
<div>
<div class="case-logo-badge">
<div class="company-icon-shape"
style="background: linear-gradient(135deg, #F59E0B, #D97706);">AT</div>
Asistransport Freight
</div>
<h4>Simplifying Transporter Support & Ticketing</h4>
<p>
"With over 14 years of experience consulting freight carriers, Asistransport uses WowChat
ticketing to streamline regulation inquiries and track carrier compliance tickets
seamlessly."
</p>
</div>
<a href="#" class="case-link">
Read Full Case Study
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
8. CTA BANNER
========================================================================== -->
<section class="cta-section">
<div class="container">
<div class="cta-box">
<h2>Transform Your Customer Support Today</h2>
<p>Join thousands of fast-growing businesses delivering extraordinary customer experiences on WhatsApp,
Instagram, and Webchat.</p>
<div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
<button class="btn btn-primary btn-glow"
style="padding: 16px 36px; font-size: 17px; background: white; color: var(--primary);">
Start Your Free Trial
</button>
<button class="btn btn-outline"
style="padding: 16px 28px; font-size: 17px; color: white; border-color: rgba(255,255,255,0.3);">
Schedule a Demo Call
</button>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
9. FREQUENTLY ASKED QUESTIONS
========================================================================== -->
<section class="faq-section" id="faq">
<div class="container">
<div class="section-header">
<div class="badge">FAQ</div>
<h2>Got Questions? We've Got Answers</h2>
<p>Everything you need to know about setting up WowChat and integrating your channels.</p>
</div>
<div class="faq-list">
<div class="faq-item open">
<div class="faq-question" onclick="toggleFaq(this)">
<span>What messaging channels can I connect to WowChat?</span>
<svg class="faq-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
WowChat supports Official WhatsApp Business API, Instagram Direct Messages, Facebook Messenger,
Email (Gmail/Outlook shared inbox), SMS, Website Live Chat, Telegram, and LINE.
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFaq(this)">
<span>How does the AI Agent train on my business information?</span>
<svg class="faq-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
You can upload your website URL, PDF documentation, FAQ files, or product catalogs. WowChat's AI
model indexes your knowledge base in seconds and provides accurate, human-like answers.
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFaq(this)">
<span>Can multiple team members work in the same WhatsApp account?</span>
<svg class="faq-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
Yes! WowChat provides a multi-agent shared inbox where unlimited team members can respond
simultaneously to customer chats on the same WhatsApp phone number without collision.
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFaq(this)">
<span>Is there a free trial available?</span>
<svg class="faq-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
<div class="faq-answer">
Yes, we offer a 14-day full feature free trial. No credit card is required to sign up and get
started.
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================================================
10. FOOTER
========================================================================== -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo" style="color: white;">
<div class="logo-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2.5">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<span>WowChat</span>
</a>
<p>AI-powered omnichannel customer support and WhatsApp CRM platform designed to help teams scale
effortlessly.</p>
</div>
<div>
<div class="footer-title">Product</div>
<ul class="footer-links">
<li><a href="#features">Shared Inbox</a></li>
<li><a href="#features">AI Agents</a></li>
<li><a href="#features">WhatsApp CRM</a></li>
<li><a href="#features">Ticketing System</a></li>
<li><a href="#features">Broadcast Campaigns</a></li>
</ul>
</div>
<div>
<div class="footer-title">Solutions</div>
<ul class="footer-links">
<li><a href="#">E-Commerce</a></li>
<li><a href="#">Healthcare</a></li>
<li><a href="#">Logistics & Freight</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Financial Services</a></li>
</ul>
</div>
<div>
<div class="footer-title">Company</div>
<ul class="footer-links">
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© 2026 WowChat Inc. All rights reserved. Built with pure CSS & SVG.</div>
<div class="social-links">
<a href="#" class="social-icon" aria-label="Twitter">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</a>
<a href="#" class="social-icon" aria-label="LinkedIn">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
<path
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z" />
<circle cx="4" cy="4" r="2" />
</svg>
</a>
<a href="#" class="social-icon" aria-label="Facebook">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
</a>
</div>
</div>
</div>
</footer>
<!-- ==========================================================================
11. INTERACTIVE JAVASCRIPT LOGIC
========================================================================== -->
<script>
// FAQ Accordion Toggle
function toggleFaq(element) {
const item = element.parentElement;
const isOpen = item.classList.contains('open');
// Close all items
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
// If it wasn't open, open it
if (!isOpen) {
item.classList.add('open');
}
}
// Channel Switcher in Interactive Demo
const channelsData = {
wa: {
title: "Automate WhatsApp Support & Sales",
desc: "Connect your official WhatsApp Business API. WowChat AI will answer product questions, send catalog links, and book sales calls without human delay.",
header: "🟢 Live WhatsApp Simulator",
initialMsg: "Hi! Can I integrate WhatsApp with my existing CRM?",
aiReply: "Absolutely! WowChat integrates seamlessly with HubSpot, Salesforce, Zoho, and Shopify via native API connectors."
},
ig: {
title: "Convert Instagram DM Leads Instantly",
desc: "Turn story mentions, ad replies, and direct messages into instant sales conversations with automatic lead qualification.",
header: "📸 Live Instagram DM Simulator",
initialMsg: "Hey! Loved your post. How much is the starter plan?",
aiReply: "Thanks for reaching out! Our starter tier is designed for growing teams. Tap the link below to check out all feature inclusions!"
},
email: {
title: "Streamline Email Inboxes & SLA Tracking",
desc: "Transform flooded support email addresses into structured tickets with automated categorization and fast AI drafting.",
header: "✉️ Live Email Support Simulator",
initialMsg: "Requesting refund policy details for invoice #INV-4029",
aiReply: "Hello! Our refund policy guarantees a 30-day full refund for all annual subscriptions. I have attached the terms doc to your ticket."
},
chat: {
title: "Engage Website Visitors in Seconds",
desc: "Embed our ultra-lightweight website widget. Proactively trigger chat greetings to visitors based on page behavior.",
header: "🌐 Live Web Chat Simulator",
initialMsg: "Can someone help me set up multi-user agent permissions?",
aiReply: "I'd be glad to help! You can configure custom roles (Admin, Manager, Agent) under Settings > Team Management."
}
};
function switchChannel(channelKey) {
// Update Tab Button styles
const buttons = document.querySelectorAll('.demo-tab-btn');
buttons.forEach(btn => btn.classList.remove('active'));
event.currentTarget.classList.add('active');
const data = channelsData[channelKey];
if (!data) return;
document.getElementById('sim-title').innerText = data.title;
document.getElementById('sim-desc').innerText = data.desc;
document.getElementById('sim-header-name').innerText = data.header;
const msgBox = document.getElementById('sim-messages');
msgBox.innerHTML = `
<div class="msg-bubble msg-incoming">${data.initialMsg}</div>
<div class="msg-bubble msg-ai">
<div class="ai-badge-label">⚡ WowChat AI Assistant</div>
${data.aiReply}
</div>
`;
}
// Handle Custom Question Submission in Demo Simulator
function handleSimSubmit(e) {
e.preventDefault();
const input = document.getElementById('sim-input-field');
const val = input.value.trim();
if (!val) return;
const msgBox = document.getElementById('sim-messages');
// Append user message
const userBubble = document.createElement('div');
userBubble.className = 'msg-bubble msg-incoming';
userBubble.innerText = val;
msgBox.appendChild(userBubble);
input.value = '';
msgBox.scrollTop = msgBox.scrollHeight;
// Simulated AI Reply after 600ms delay
setTimeout(() => {
const aiBubble = document.createElement('div');
aiBubble.className = 'msg-bubble msg-ai';
aiBubble.innerHTML = `
<div class="ai-badge-label">⚡ WowChat AI Assistant</div>
Great question! WowChat handles "${val}" automatically using customized AI agent workflows. Would you like to schedule a full product walkthrough with our tech team?
`;
msgBox.appendChild(aiBubble);
msgBox.scrollTop = msgBox.scrollHeight;
}, 600);
}
</script>
</body>
</html>