918 lines
39 KiB
HTML
918 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>نبيه | منصة المحادثة الذكية وأتمتة خدمة العملاء بالذكاء الاصطناعي</title>
|
|
|
|
<!-- Google Fonts: Cairo for Arabic, Outfit for numbers & code -->
|
|
<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=Cairo:wght@300;400;600;700;800&family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-color: #ffffff;
|
|
--panel-bg: #f8f9fa;
|
|
--border-color: #dadce0;
|
|
|
|
--primary: #1a73e8; /* Google Blue */
|
|
--primary-hover: #1557b0;
|
|
--primary-glow: rgba(26, 115, 232, 0.08);
|
|
|
|
--success: #34a853; /* Google Green */
|
|
--warning: #fbbc05; /* Google Yellow */
|
|
--danger: #ea4335; /* Google Red */
|
|
--telegram: #229ED9; /* Telegram Blue */
|
|
|
|
--text-main: #202124;
|
|
--text-muted: #5f6368;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Cairo', 'Outfit', sans-serif;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Container & Grid layout */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
/* Navbar Styling */
|
|
header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: #ffffff;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 70px;
|
|
}
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
color: var(--text-main);
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
}
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.logo-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--primary);
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 1.75rem;
|
|
list-style: none;
|
|
align-items: center;
|
|
}
|
|
.nav-links a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.nav-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.6rem 1.25rem;
|
|
border-radius: 6px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
font-size: 0.9rem;
|
|
}
|
|
.btn-primary {
|
|
background-color: var(--primary);
|
|
color: #ffffff !important;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
.btn-secondary {
|
|
background-color: #ffffff;
|
|
color: var(--text-muted) !important;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: #f8f9fa;
|
|
color: var(--text-main) !important;
|
|
}
|
|
.btn-accent {
|
|
background-color: var(--primary);
|
|
color: #ffffff !important;
|
|
}
|
|
.btn-accent:hover {
|
|
background-color: var(--primary-hover);
|
|
}
|
|
|
|
.nav-links a.btn-primary {
|
|
color: #ffffff !important;
|
|
}
|
|
.nav-links a.btn-secondary {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
.nav-links a.btn-accent {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 5rem 0;
|
|
background: #ffffff;
|
|
}
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
.hero-content h1 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
line-height: 1.3;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-main);
|
|
}
|
|
.hero-content h1 span.highlight-blue { color: var(--primary); }
|
|
.hero-content h1 span.highlight-green { color: var(--success); }
|
|
.hero-content h1 span.highlight-yellow { color: var(--warning); }
|
|
|
|
.hero-content p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.8;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
.hero-visual {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.mockup-wrapper {
|
|
background: #ffffff;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 0.35rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
width: 100%;
|
|
}
|
|
.mockup-img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
display: block;
|
|
}
|
|
|
|
/* Channel Pills */
|
|
.channel-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.channel-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 999px;
|
|
background: #f1f3f4;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
}
|
|
.channel-pill.telegram { background: rgba(34, 158, 217, 0.1); color: var(--telegram); }
|
|
.channel-pill.whatsapp { background: rgba(52, 168, 83, 0.1); color: var(--success); }
|
|
.channel-pill.meta { background: rgba(26, 115, 232, 0.1); color: var(--primary); }
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 5rem 0;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: #f8f9fa;
|
|
}
|
|
.section-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto 3.5rem auto;
|
|
}
|
|
.section-header h2 {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-main);
|
|
}
|
|
.section-header p {
|
|
color: var(--text-muted);
|
|
font-size: 1.05rem;
|
|
line-height: 1.6;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
.feature-card {
|
|
background: #ffffff;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 2.2rem;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
/* Colorful Google-like feature icon backgrounds */
|
|
.feature-card:nth-child(1) .feature-icon { background: rgba(26, 115, 232, 0.1); color: var(--primary); }
|
|
.feature-card:nth-child(2) .feature-icon { background: rgba(52, 168, 83, 0.1); color: var(--success); }
|
|
.feature-card:nth-child(3) .feature-icon { background: rgba(251, 188, 5, 0.1); color: var(--warning); }
|
|
.feature-card:nth-child(4) .feature-icon { background: rgba(234, 67, 53, 0.1); color: var(--danger); }
|
|
.feature-card:nth-child(5) .feature-icon { background: rgba(34, 158, 217, 0.1); color: var(--telegram); }
|
|
.feature-card:nth-child(6) .feature-icon { background: rgba(26, 115, 232, 0.1); color: var(--primary); }
|
|
.feature-card:nth-child(7) .feature-icon { background: rgba(52, 168, 83, 0.1); color: var(--success); }
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-main);
|
|
}
|
|
.feature-card p {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Interactive Chat Simulator Section */
|
|
.chat-demo {
|
|
padding: 5rem 0;
|
|
background-color: #ffffff;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.chat-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.chat-header {
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1rem 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.chat-header-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.chat-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
.chat-header-info h4 {
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
}
|
|
.chat-header-info span {
|
|
font-size: 0.75rem;
|
|
color: var(--success);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
.chat-body {
|
|
height: 300px;
|
|
padding: 1.25rem;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.85rem;
|
|
background: #ffffff;
|
|
}
|
|
.msg {
|
|
max-width: 80%;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 12px;
|
|
font-size: 0.92rem;
|
|
line-height: 1.5;
|
|
}
|
|
.msg-in {
|
|
align-self: flex-start;
|
|
background: #f1f3f4;
|
|
color: var(--text-main);
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.msg-out {
|
|
align-self: flex-end;
|
|
background: #e8f0fe;
|
|
color: var(--primary);
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.chat-footer {
|
|
padding: 0.85rem 1.25rem;
|
|
background: #f8f9fa;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
.chat-input {
|
|
flex-grow: 1;
|
|
background: #ffffff;
|
|
border: 1px solid var(--border-color);
|
|
padding: 0.6rem 1rem;
|
|
border-radius: 8px;
|
|
color: var(--text-main);
|
|
outline: none;
|
|
font-size: 0.9rem;
|
|
}
|
|
.chat-input:focus {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* Pricing Section */
|
|
.pricing {
|
|
padding: 5rem 0;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: #f8f9fa;
|
|
}
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 0 auto;
|
|
}
|
|
.price-card {
|
|
background: #ffffff;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 2.2rem 1.5rem;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
.price-card.featured {
|
|
border: 2px solid var(--primary);
|
|
box-shadow: 0 4px 20px rgba(26, 115, 232, 0.08);
|
|
}
|
|
.price-card.featured .popular-tag {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--primary);
|
|
color: #ffffff;
|
|
padding: 0.25rem 1rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
.price-name {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.price-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.price-val {
|
|
font-size: 2.4rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
}
|
|
.price-val span {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
}
|
|
.price-features {
|
|
list-style: none;
|
|
margin-bottom: 2rem;
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
.price-features li {
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.price-features li svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: var(--success);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Coming Soon / Roadmap Section */
|
|
.roadmap {
|
|
padding: 5rem 0;
|
|
border-top: 1px solid var(--border-color);
|
|
background: #ffffff;
|
|
}
|
|
.roadmap-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
.roadmap-card {
|
|
background: #f8f9fa;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
position: relative;
|
|
}
|
|
.badge-soon {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
background: rgba(251, 188, 5, 0.15);
|
|
border: 1px solid rgba(251, 188, 5, 0.3);
|
|
color: #d97706;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
.roadmap-card h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-main);
|
|
}
|
|
.roadmap-card p {
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
border-top: 1px solid var(--border-color);
|
|
background: #f8f9fa;
|
|
padding: 4rem 0 2rem 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.88rem;
|
|
}
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
gap: 4rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
.footer-logo {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.footer-col h5 {
|
|
color: var(--text-main);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.1rem;
|
|
}
|
|
.footer-links {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
}
|
|
.footer-links a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.footer-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
.copyright {
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--border-color);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 900px) {
|
|
.hero-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
text-align: center;
|
|
}
|
|
.hero-actions {
|
|
justify-content: center;
|
|
}
|
|
.footer-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header / Navbar -->
|
|
<header>
|
|
<div class="container nav-container">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 1.84.5 3.56 1.37 5.04L2 22l5.12-1.34C8.54 21.5 10.2 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18c-1.63 0-3.15-.45-4.47-1.23l-.32-.19-3 .79.8-2.93-.21-.34C4.04 14.78 3.5 13.45 3.5 12c0-4.69 3.81-8.5 8.5-8.5s8.5 3.81 8.5 8.5-3.81 8.5-8.5 8.5z"/></svg>
|
|
</div>
|
|
<span>نبيه</span>
|
|
</a>
|
|
|
|
<ul class="nav-links">
|
|
<li><a href="#features">الميزات</a></li>
|
|
<li><a href="#pricing">باقات الاشتراك</a></li>
|
|
<li><a href="#demo">التجربة التفاعلية</a></li>
|
|
<li><a href="#coming-soon">قريباً</a></li>
|
|
<li><a href="/login" class="btn btn-secondary" style="padding: 0.5rem 1.25rem;">تسجيل الدخول</a></li>
|
|
<li><a href="/register" class="btn btn-primary" style="padding: 0.5rem 1.25rem;">ابدأ مجاناً</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container hero-grid">
|
|
<div class="hero-content">
|
|
<h1>أتمتة خدمة العملاء والردود الذكية المتكاملة</h1>
|
|
<p>منصة نبيه تمنحك إمكانية ربط قنوات الاتصال (واتساب، تيليجرام، ماسنجر، إنستغرام) وتشغيل مساعد ذكي مدعوم بـ AI يقوم بقراءة الرسائل والصور والإجابة على العملاء فورياً لزيادة مبيعات متجرك وتفعيل أتمتة الدعم والعمليات بمعدل 5 أضعاف.</p>
|
|
<div class="channel-pills">
|
|
<span class="channel-pill whatsapp">💚 واتساب</span>
|
|
<span class="channel-pill telegram">✈️ تيليجرام</span>
|
|
<span class="channel-pill meta">💬 ماسنجر</span>
|
|
<span class="channel-pill meta">📷 إنستغرام</span>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<a href="/register" class="btn btn-primary">ابدأ تجربتك المجانية (14 يوم)</a>
|
|
<a href="#demo" class="btn btn-secondary">جرب المحاكاة التفاعلية</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="mockup-wrapper">
|
|
<img src="/landing_mockup.php" alt="لوحة تحكم نبيه الذكية" class="mockup-img">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Key Features Section -->
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>لماذا تختار منصة نبيه لأعمالك؟</h2>
|
|
<p>نجمع لك أفضل تقنيات المحادثة الذكية وأدوات التفاعل المتكاملة لتوفير الوقت وتحسين تجربة العميل.</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🤖</div>
|
|
<h3>مساعد ذكي بالذكاء الاصطناعي</h3>
|
|
<p>مساعد مخصص يفهم سياق الحديث، ويجيب على الاستفسارات المعقدة بلغات ولهجات مختلفة، ويقرأ الصور والملفات المرفقة (OCR).</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⚡</div>
|
|
<h3>محرك المحادثات التفاعلية</h3>
|
|
<p>صياغة مسارات محادثات تفاعلية خطوة بخطوة للتحقق من أرقام الهواتف، تسجيل السائقين الجدد، أو أخذ بيانات الحجز بكل سلاسة.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🛍️</div>
|
|
<h3>تكامل المتاجر الإلكترونية</h3>
|
|
<p>الربط المباشر مع سلة (Salla) و WooCommerce لإرسال تحديثات حالة الطلب تلقائياً وتذكير العملاء بالسلات المتروكة.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">✈️</div>
|
|
<h3>دعم بوتات تيليجرام (Telegram)</h3>
|
|
<p>ربط بوتات التيليجرام مع المنصة لإدارة المحادثات الخاصة والمجموعات والقنوات، وتشغيل الردود التلقائية وأتمتة الدعم عبر Telegram Bot API.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">💬</div>
|
|
<h3>ربط قنوات ماسنجر وإنستغرام</h3>
|
|
<p>استقبل وأرسل الرسائل لصفحات الفيسبوك وحسابات الإنستغرام (Meta APIs) مع تشغيل أتمتة الردود والمحادثات من مكان واحد.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📢</div>
|
|
<h3>حملات الرسائل الجماعية</h3>
|
|
<p>أرسل عروضك وحملاتك التسويقية إلى قائمة عملائك بكبسة زر واحدة، مع متابعة فورية لمعدلات التسليم والقراءة.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔍</div>
|
|
<h3>تحليل مستندات وصور (OCR)</h3>
|
|
<p>استخراج البيانات تلقائياً من الفواتير والبطاقات الشخصية ورخص القيادة ومطابقتها فورياً عبر الذكاء الاصطناعي.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Chat Simulator Section -->
|
|
<section class="chat-demo" id="demo">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>تفاعل مع محاكاة البوت الذكي</h2>
|
|
<p>قم بكتابة أي رسالة للتعرف على سرعة ردود المساعد التلقائي ومحرك المحادثات التفاعلية:</p>
|
|
</div>
|
|
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<div class="chat-header-user">
|
|
<div class="chat-avatar">ن</div>
|
|
<div class="chat-header-info">
|
|
<h4>مساعد نبيه الافتراضي</h4>
|
|
<span>🟢 متصل ومستعد للرد</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-body" id="chat-box">
|
|
<div class="msg msg-in">أهلاً بك! أنا مساعد منصة نبيه المخصص لخدمتك. ما الذي يمكنني إرشادك إليه اليوم؟</div>
|
|
</div>
|
|
|
|
<div class="chat-footer">
|
|
<input type="text" id="chat-input" class="chat-input" placeholder="مثال: 'كم سعر الباقة الفضية؟' أو 'أريد تجربة الخدمة'" onkeypress="handleKeyPress(event)">
|
|
<button class="btn btn-primary" style="padding: 0.5rem 1.25rem;" onclick="sendMessage()">إرسال</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section class="pricing" id="pricing">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>باقات اشتراك مرنة لكل مستويات الأعمال</h2>
|
|
<p>ابدأ بفترة تجريبية مجانية واستكشف كافة الميزات دون الحاجة لبطاقة ائتمان.</p>
|
|
</div>
|
|
|
|
<div class="pricing-grid">
|
|
<!-- Free Trial (Plan ID: 4) -->
|
|
<div class="price-card">
|
|
<div>
|
|
<div class="price-name">الفترة التجريبية</div>
|
|
<div class="price-desc">استكشف جميع ميزات المنصة مجاناً</div>
|
|
<div class="price-val">0 <span>د.أ / 14 يوم</span></div>
|
|
<ul class="price-features">
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> خط واتساب واحد نشط</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 5,000 رسالة تجريبية</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 100 رسالة صوتية مدمجة</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 100 عملية تحليل مستندات OCR</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> اختبار متكامل مع المتاجر</li>
|
|
</ul>
|
|
</div>
|
|
<a href="/register" class="btn btn-secondary">ابدأ التجربة مجاناً</a>
|
|
</div>
|
|
|
|
<!-- Starter (Plan ID: 1) -->
|
|
<div class="price-card">
|
|
<div>
|
|
<div class="price-name">الباقة الأساسية</div>
|
|
<div class="price-desc">مثالية للمتاجر الصغيرة والناشئة</div>
|
|
<div class="price-val">19 <span>د.أ / شهرياً</span></div>
|
|
<ul class="price-features">
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> خط واتساب واحد نشط</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 1,000 رسالة / شهرياً</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> بوت رد تلقائي أساسي</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> إدارة الحملات التسويقية</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> تقارير وإحصائيات أساسية</li>
|
|
</ul>
|
|
</div>
|
|
<a href="/register" class="btn btn-secondary">اشترك الآن</a>
|
|
</div>
|
|
|
|
<!-- Growth (Plan ID: 2 - Featured) -->
|
|
<div class="price-card featured">
|
|
<div class="popular-tag">الأكثر طلباً</div>
|
|
<div>
|
|
<div class="price-name">الباقة المتقدمة</div>
|
|
<div class="price-desc">للشركات والمتاجر متوسطة الحجم</div>
|
|
<div class="price-val">49 <span>د.أ / شهرياً</span></div>
|
|
<ul class="price-features">
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> خطين واتساب متصلين</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 5,000 رسالة / شهرياً</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 500 رسالة صوتية شهرياً</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 500 عملية تحليل مستندات OCR</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> ربط متاجر سلة و WooCommerce</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> محادثات تفاعلية ومساعد ذكي AI</li>
|
|
</ul>
|
|
</div>
|
|
<a href="/register" class="btn btn-primary">اشترك الآن</a>
|
|
</div>
|
|
|
|
<!-- Professional (Plan ID: 3) -->
|
|
<div class="price-card">
|
|
<div>
|
|
<div class="price-name">باقة المحترفين</div>
|
|
<div class="price-desc">للشركات الكبرى والعمليات الواسعة</div>
|
|
<div class="price-val">99 <span>د.أ / شهرياً</span></div>
|
|
<ul class="price-features">
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 5 خطوط واتساب نشطة</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 15,000 رسالة / شهرياً</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 2,000 رسالة صوتية شهرياً</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> 2,000 عملية تحليل OCR</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> تكامل مع الويب هوك والربط الخارجي</li>
|
|
<li><svg viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg> ذكاء اصطناعي تفاعلي وصوتي كامل</li>
|
|
</ul>
|
|
</div>
|
|
<a href="/register" class="btn btn-secondary">اشترك الآن</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Coming Soon Section -->
|
|
<section class="roadmap" id="coming-soon">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>رؤيتنا المستقبلية وقنوات الاتصال القادمة</h2>
|
|
<p>نعمل باستمرار على تمكينك من إدارة كافة تفاعلاتك مع العملاء من منصة واحدة وموحدة:</p>
|
|
</div>
|
|
|
|
<div class="roadmap-grid">
|
|
<div class="roadmap-card" style="border-color: var(--telegram);">
|
|
<span style="position: absolute; top: 1rem; left: 1rem; background: rgba(34, 158, 217, 0.15); border: 1px solid rgba(34, 158, 217, 0.3); color: #229ED9; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700;">متاح الآن ✓</span>
|
|
<h3 style="margin-top: 2.25rem;">بوتات تيليجرام (Telegram)</h3>
|
|
<p>أتمتة المحادثات والرد التلقائي وإدارة مجموعات وقنوات التيليجرام بمساعد الذكاء الاصطناعي مباشرة. متاح للربط في جميع الباقات المدفوعة.</p>
|
|
</div>
|
|
|
|
<div class="roadmap-card">
|
|
<span class="badge-soon">قريباً</span>
|
|
<h3>تكامل شوبيفاي المباشر (Shopify)</h3>
|
|
<p>تزامن فوري للمنتجات وحالة الطلب وتتبع الشحنات لعملاء متاجر شوبيفاي لتقليل تذاكر الدعم الفني.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container footer-grid">
|
|
<div class="footer-col">
|
|
<div class="footer-logo">
|
|
<span style="font-weight: 800; color: var(--text-main);">نبيه</span>
|
|
</div>
|
|
<p style="line-height: 1.6; margin-bottom: 1.5rem;">منصة المحادثة الفورية المتكاملة لربط أعمالك مع الذكاء الاصطناعي وأتمتة خدمة العملاء على مدار الساعة.</p>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h5>روابط سريعة</h5>
|
|
<ul class="footer-links">
|
|
<li><a href="#features">الميزات الأساسية</a></li>
|
|
<li><a href="#pricing">باقات الاشتراك</a></li>
|
|
<li><a href="#demo">التجربة التفاعلية</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-col">
|
|
<h5>تواصل معنا</h5>
|
|
<p style="line-height: 1.6;">البريد الإلكتروني: support@nabeh.app<br>عمان، الأردن</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="copyright">
|
|
جميع الحقوق محفوظة لمنصة نبيه © 2026
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function handleKeyPress(event) {
|
|
if (event.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
}
|
|
|
|
function sendMessage() {
|
|
const input = document.getElementById('chat-input');
|
|
const message = input.value.trim();
|
|
if (!message) return;
|
|
|
|
const chatBox = document.getElementById('chat-box');
|
|
|
|
// Append user message
|
|
const userMsgDiv = document.createElement('div');
|
|
userMsgDiv.className = 'msg msg-out';
|
|
userMsgDiv.textContent = message;
|
|
chatBox.appendChild(userMsgDiv);
|
|
|
|
input.value = '';
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
|
|
// Generate reply based on keywords
|
|
setTimeout(() => {
|
|
const replyDiv = document.createElement('div');
|
|
replyDiv.className = 'msg msg-in';
|
|
|
|
let reply = 'أهلاً بك! لقد استلمت رسالتك بنجاح. مساعد نبيه الذكي قيد التشغيل وسيقوم بالتواصل معك بكافة التفاصيل.';
|
|
const msgLower = message.toLowerCase();
|
|
|
|
if (msgLower.includes('سعر') || msgLower.includes('باق') || msgLower.includes('أسعار') || msgLower.includes('بكم')) {
|
|
reply = 'منصة نبيه توفر 4 باقات:\n1. الباقة التجريبية: مجاناً لـ 14 يوماً.\n2. الباقة الأساسية: 19 د.أ / شهرياً.\n3. الباقة المتقدمة: 49 د.أ / شهرياً.\n4. باقة المحترفين: 99 د.أ / شهرياً.';
|
|
} else if (msgLower.includes('تجرب') || msgLower.includes('مجانا') || msgLower.includes('trial')) {
|
|
reply = 'يمكنك بدء التجربة المجانية لمدة 14 يوماً فوراً دون الحاجة لبطاقة ائتمان من خلال الضغط على زر "ابدأ مجاناً" أعلى الصفحة.';
|
|
} else if (msgLower.includes('سلة') || msgLower.includes('woocommerce') || msgLower.includes('متجر')) {
|
|
reply = 'نعم! تدعم باقاتنا المتقدمة والاحترافية التكامل الفوري والمباشر مع متاجر سلة و WooCommerce لمتابعة الطلبات وتذكير السلات المتروكة.';
|
|
} else if (msgLower.includes('تيليجرام') || msgLower.includes('telegram') || msgLower.includes('بوت')) {
|
|
reply = 'نعم! منصة نبيه تدعم بوتات تيليجرام بالكامل! يمكنك ربط بوت التيليجرام الخاص بك مع المنصة لإدارة المحادثات والمجموعات والقنوات وتشغيل الرد التلقائي بالذكاء الاصطناعي. الميزة متاحة في الباقات المدفوعة.';
|
|
} else if (msgLower.includes('قنوات') || msgLower.includes('channel') || msgLower.includes('واتساب') && msgLower.includes('تليجرام')) {
|
|
reply = 'منصة نبيه تدعم الربط مع واتساب، تيليجرام، ماسنجر، وإنستغرام من مكان واحد، مع تشغيل أتمتة موحدة بالذكاء الاصطناعي عبر جميع القنوات.';
|
|
}
|
|
|
|
replyDiv.innerText = reply;
|
|
chatBox.appendChild(replyDiv);
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}, 800);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|