Hugging Face's logo

Spaces:
huggingchat
/
chat-ui
Running

App Files Community
764
Maram5522 commited on
Commit
ee47b0d
·
verified ·
1 Parent(s): bde8e48

Create Tigers-ksa

Browse files

<!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>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
turquoise: {
100: '#e6fffa',
200: '#b2f5ea',
300: '#81e6d9',
400: '#4fd1c5',
500: '#38b2ac',
600: '#319795',
700: '#2c7a7b',
800: '#285e61',
900: '#234e52',
}
}
}
}
}
</script>
<style>


@import
 url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

body {
font-family: 'Tajawal', sans-serif;
}

.chat-bubble {
border-radius: 20px 20px 0 20px;
}

.user-bubble {
border-radius: 20px 20px 20px 0;
}

.tiger-pattern {
background-image: radial-gradient(circle, rgba(56, 178, 172, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}

.floating {
animation: floating 3s ease-in-out infinite;
}



@keyframes
 floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

.pulse {
animation: pulse 2s infinite;
}



@keyframes
 pulse {
0% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(56, 178, 172, 0); }
100% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0); }
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2 space-x-reverse">
<div class="w-12 h-12 bg-turquoise-500 rounded-full flex items-center justify-center text-white text-2xl">
<i class="fas fa-paw"></i>
</div>
<h1 class="text-2xl font-bold text-turquoise-700">النمور السعودية</h1>
</div>
<nav class="hidden md:flex space-x-6 space-x-reverse">
<a href="#" class="text-turquoise-700 font-medium hover:text-turquoise-500">الرئيسية</a>
<a href="#" class="text-gray-600 hover:text-turquoise-500">المتاجر</a>
<a href="#" class="text-gray-600 hover:text-turquoise-500">المصانع</a>
<a href="#" class="text-gray-600 hover:text-turquoise-500">المنتجات</a>
<a href="#" class="text-gray-600 hover:text-turquoise-500">التقارير</a>
<a href="#" class="text-gray-600 hover:text-turquoise-500">الدعم</a>
</nav>
<div class="flex items-center space-x-3 space-x-reverse">
<button class="md:hidden text-gray-600">
<i class="fas fa-bars text-xl"></i>
</button>
<button class="bg-turquoise-500 hover:bg-turquoise-600 text-white px-4 py-2 rounded-lg">
تسجيل الدخول
</button>
</div>
</div>
</header>

<!-- Hero Section -->
<section class="bg-gradient-to-r from-turquoise-50 to-white tiger-pattern">
<div class="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold text-turquoise-800 mb-4">منظومة <span class="text-turquoise-600">النمور السعودية</span> المتكاملة</h2>
<p class="text-lg text-gray-600 mb-8 leading-relaxed">
نظام متكامل لإدارة المتاجر والمصانع السعودية بأعلى معايير الجودة والكفاءة. نوفر لك جميع الأدوات التي تحتاجها لإدارة عملياتك بسلاسة واحترافية.
</p>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
<button class="bg-turquoise-600 hover:bg-turquoise-700 text-white px-6 py-3 rounded-lg font-medium shadow-lg transition duration-300">
ابدأ الآن مجانًا
</button>
<button class="border border-turquoise-600 text-turquoise-600 hover:bg-turquoise-50 px-6 py-3 rounded-lg font-medium transition duration-300">
شاهد الفيديو التعريفي
</button>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="relative max-w-md mx-auto">
<div class="absolute -top-10 -right-10 w-32 h-32 bg-turquoise-200 rounded-full opacity-30"></div>
<div class="absolute -bottom-10 -left-10 w-40 h-40 bg-turquoise-300 rounded-full opacity-20"></div>
<div class="relative bg-white rounded-xl shadow-xl overflow-hidden border border-turquoise-100">
<div class="bg-turquoise-500 text-white p-4 flex items-center">
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-turquoise-500 mr-3">
<i class="fas fa-robot"></i>
</div>
<div>
<h3 class="font-bold">نمر المساعد</h3>
<p class="text-xs opacity-80">متصل - جاهز للمساعدة</p>
</div>
</div>
<div class="p-4 h-64 overflow-y-auto">
<div class="flex justify-end mb-3">
<div class="bg-turquoise-100 text-gray-800 p-3 max-w-xs chat-bubble">
مرحبا! أنا نمر، كيف يمكنني مساعدتك اليوم؟
</div>
</div>
<div class="flex justify-start mb-3">
<div class="bg-gray-100 text-gray-800 p-3 max-w-xs user-bubble">
أريد معرفة المزيد عن نظام إدارة المخزون
</div>
</div>
<div class="flex justify-end mb-3">
<div class="bg-turquoise-100 text-gray-800 p-3 max-w-xs chat-bubble">
بالطبع! نظامنا يوفر إدارة مخزون ذكية مع تنبيهات عند نفاذ المنتجات وتقارير مفصلة.
</div>
</div>
</div>
<div class="p-3 border-t border-gray-200 flex">
<input type="text" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-turquoise-500 focus:border-transparent">
<button class="bg-turquoise-500 text-white px-4 rounded-r-lg hover:bg-turquoise-600">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Features Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-turquoise-800 mb-4">مميزات منظومة النمور السعودية</h2>
<p class="text-gray-600 max-w-2xl mx-auto">نقدم مجموعة متكاملة من الحلول الذكية لإدارة متاجرك ومصانعك بكفاءة عالية</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
<div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
<i class="fas fa-store text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المتاجر</h3>
<p class="text-gray-600">
نظام متكامل لإدارة جميع فروع متجرك، متابعة المبيعات، إدارة الموظفين، وتقارير أداء الفروع.
</p>
</div>

<!-- Feature 2 -->
<div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
<div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
<i class="fas fa-industry text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المصانع</

Files changed (1) hide show
  1. Tigers-ksa +364 -0
Tigers-ksa ADDED
@@ -0,0 +1,364 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>النمور السعودية - منظومة المتاجر والمصانع</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ turquoise: {
15
+ 100: '#e6fffa',
16
+ 200: '#b2f5ea',
17
+ 300: '#81e6d9',
18
+ 400: '#4fd1c5',
19
+ 500: '#38b2ac',
20
+ 600: '#319795',
21
+ 700: '#2c7a7b',
22
+ 800: '#285e61',
23
+ 900: '#234e52',
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
32
+
33
+ body {
34
+ font-family: 'Tajawal', sans-serif;
35
+ }
36
+
37
+ .chat-bubble {
38
+ border-radius: 20px 20px 0 20px;
39
+ }
40
+
41
+ .user-bubble {
42
+ border-radius: 20px 20px 20px 0;
43
+ }
44
+
45
+ .tiger-pattern {
46
+ background-image: radial-gradient(circle, rgba(56, 178, 172, 0.1) 1px, transparent 1px);
47
+ background-size: 20px 20px;
48
+ }
49
+
50
+ .floating {
51
+ animation: floating 3s ease-in-out infinite;
52
+ }
53
+
54
+ @keyframes floating {
55
+ 0% { transform: translateY(0px); }
56
+ 50% { transform: translateY(-10px); }
57
+ 100% { transform: translateY(0px); }
58
+ }
59
+
60
+ .pulse {
61
+ animation: pulse 2s infinite;
62
+ }
63
+
64
+ @keyframes pulse {
65
+ 0% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0.7); }
66
+ 70% { box-shadow: 0 0 0 10px rgba(56, 178, 172, 0); }
67
+ 100% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0); }
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-50 text-gray-800">
72
+ <!-- Header -->
73
+ <header class="bg-white shadow-md">
74
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
75
+ <div class="flex items-center space-x-2 space-x-reverse">
76
+ <div class="w-12 h-12 bg-turquoise-500 rounded-full flex items-center justify-center text-white text-2xl">
77
+ <i class="fas fa-paw"></i>
78
+ </div>
79
+ <h1 class="text-2xl font-bold text-turquoise-700">النمور السعودية</h1>
80
+ </div>
81
+ <nav class="hidden md:flex space-x-6 space-x-reverse">
82
+ <a href="#" class="text-turquoise-700 font-medium hover:text-turquoise-500">الرئيسية</a>
83
+ <a href="#" class="text-gray-600 hover:text-turquoise-500">المتاجر</a>
84
+ <a href="#" class="text-gray-600 hover:text-turquoise-500">المصانع</a>
85
+ <a href="#" class="text-gray-600 hover:text-turquoise-500">المنتجات</a>
86
+ <a href="#" class="text-gray-600 hover:text-turquoise-500">التقارير</a>
87
+ <a href="#" class="text-gray-600 hover:text-turquoise-500">الدعم</a>
88
+ </nav>
89
+ <div class="flex items-center space-x-3 space-x-reverse">
90
+ <button class="md:hidden text-gray-600">
91
+ <i class="fas fa-bars text-xl"></i>
92
+ </button>
93
+ <button class="bg-turquoise-500 hover:bg-turquoise-600 text-white px-4 py-2 rounded-lg">
94
+ تسجيل الدخول
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </header>
99
+
100
+ <!-- Hero Section -->
101
+ <section class="bg-gradient-to-r from-turquoise-50 to-white tiger-pattern">
102
+ <div class="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
103
+ <div class="md:w-1/2 mb-10 md:mb-0">
104
+ <h2 class="text-4xl md:text-5xl font-bold text-turquoise-800 mb-4">منظومة <span class="text-turquoise-600">النمور السعودية</span> المتكاملة</h2>
105
+ <p class="text-lg text-gray-600 mb-8 leading-relaxed">
106
+ نظام متكامل لإدارة المتاجر والمصانع السعودية بأعلى معايير الجودة والكفاءة. نوفر لك جميع الأدوات التي تحتاجها لإدارة عملياتك بسلاسة واحترافية.
107
+ </p>
108
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
109
+ <button class="bg-turquoise-600 hover:bg-turquoise-700 text-white px-6 py-3 rounded-lg font-medium shadow-lg transition duration-300">
110
+ ابدأ الآن مجانًا
111
+ </button>
112
+ <button class="border border-turquoise-600 text-turquoise-600 hover:bg-turquoise-50 px-6 py-3 rounded-lg font-medium transition duration-300">
113
+ شاهد الفيديو التعريفي
114
+ </button>
115
+ </div>
116
+ </div>
117
+ <div class="md:w-1/2 relative">
118
+ <div class="relative max-w-md mx-auto">
119
+ <div class="absolute -top-10 -right-10 w-32 h-32 bg-turquoise-200 rounded-full opacity-30"></div>
120
+ <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-turquoise-300 rounded-full opacity-20"></div>
121
+ <div class="relative bg-white rounded-xl shadow-xl overflow-hidden border border-turquoise-100">
122
+ <div class="bg-turquoise-500 text-white p-4 flex items-center">
123
+ <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-turquoise-500 mr-3">
124
+ <i class="fas fa-robot"></i>
125
+ </div>
126
+ <div>
127
+ <h3 class="font-bold">نمر المساعد</h3>
128
+ <p class="text-xs opacity-80">متصل - جاهز للمساعدة</p>
129
+ </div>
130
+ </div>
131
+ <div class="p-4 h-64 overflow-y-auto">
132
+ <div class="flex justify-end mb-3">
133
+ <div class="bg-turquoise-100 text-gray-800 p-3 max-w-xs chat-bubble">
134
+ مرحبا! أنا نمر، كيف يمكنني مساعدتك اليوم؟
135
+ </div>
136
+ </div>
137
+ <div class="flex justify-start mb-3">
138
+ <div class="bg-gray-100 text-gray-800 p-3 max-w-xs user-bubble">
139
+ أريد معرفة المزيد عن نظام إدارة المخزون
140
+ </div>
141
+ </div>
142
+ <div class="flex justify-end mb-3">
143
+ <div class="bg-turquoise-100 text-gray-800 p-3 max-w-xs chat-bubble">
144
+ بالطبع! نظامنا يوفر إدارة مخزون ذكية مع تنبيهات عند نفاذ المنتجات وتقارير مفصلة.
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="p-3 border-t border-gray-200 flex">
149
+ <input type="text" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-turquoise-500 focus:border-transparent">
150
+ <button class="bg-turquoise-500 text-white px-4 rounded-r-lg hover:bg-turquoise-600">
151
+ <i class="fas fa-paper-plane"></i>
152
+ </button>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Features Section -->
161
+ <section class="py-16 bg-white">
162
+ <div class="container mx-auto px-4">
163
+ <div class="text-center mb-16">
164
+ <h2 class="text-3xl font-bold text-turquoise-800 mb-4">مميزات منظومة النمور السعودية</h2>
165
+ <p class="text-gray-600 max-w-2xl mx-auto">نقدم مجموعة متكاملة من الحلول الذكية لإدارة متاجرك ومصانعك بكفاءة عالية</p>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
169
+ <!-- Feature 1 -->
170
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
171
+ <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
172
+ <i class="fas fa-store text-2xl"></i>
173
+ </div>
174
+ <h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المتاجر</h3>
175
+ <p class="text-gray-600">
176
+ نظام متكامل لإدارة جميع فروع متجرك، متابعة المبيعات، إدارة الموظفين، وتقارير أداء الفروع.
177
+ </p>
178
+ </div>
179
+
180
+ <!-- Feature 2 -->
181
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
182
+ <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
183
+ <i class="fas fa-industry text-2xl"></i>
184
+ </div>
185
+ <h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المصانع</h3>
186
+ <p class="text-gray-600">
187
+ تحكم كامل في عمليات الإنتاج، إدارة خطوط التصنيع، متابعة الجودة، وحساب تكاليف الإنتاج بدقة.
188
+ </p>
189
+ </div>
190
+
191
+ <!-- Feature 3 -->
192
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
193
+ <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
194
+ <i class="fas fa-boxes text-2xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المخزون</h3>
197
+ <p class="text-gray-600">
198
+ نظام مخزون ذكي مع تنبيهات تلقائية، إدارة المشتريات، وتحليل معدل دوران المخزون.
199
+ </p>
200
+ </div>
201
+
202
+ <!-- Feature 4 -->
203
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
204
+ <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
205
+ <i class="fas fa-chart-line text-2xl"></i>
206
+ </div>
207
+ <h3 class="text-xl font-bold text-turquoise-700 mb-3">التقارير والتحليلات</h3>
208
+ <p class="text-gray-600">
209
+ لوحات تحكم تفاعلية مع تقارير مخصصة تساعدك في اتخاذ القرارات بناءً على بيانات دقيقة.
210
+ </p>
211
+ </div>
212
+
213
+ <!-- Feature 5 -->
214
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
215
+ <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
216
+ <i class="fas fa-robot text-2xl"></i>
217
+ </div>
218
+ <h3 class="text-xl font-bold text-turquoise-700 mb-3">نمر المساعد الذكي</h3>
219
+ <p class="text-gray-600">
220
+ مساعد ذكي يعمل بالذكاء الاصطناعي لمساعدتك في إدارة عملياتك والإجابة على استفساراتك.
221
+ </p>
222
+ </div>
223
+
224
+ <!-- Feature 6 -->
225
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
226
+ <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
227
+ <i class="fas fa-mobile-alt text-2xl"></i>
228
+ </div>
229
+ <h3 class="text-xl font-bold text-turquoise-700 mb-3">تطبيق جوال</h3>
230
+ <p class="text-gray-600">
231
+ إدارة عملك من أي مكان عبر تطبيقاتنا الذكية المتوافقة مع جميع الأجهزة المحمولة.
232
+ </p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Nimr AI Assistant Section -->
239
+ <section class="py-16 bg-gradient-to-b from-turquoise-50 to-white">
240
+ <div class="container mx-auto px-4">
241
+ <div class="flex flex-col md:flex-row items-center">
242
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
243
+ <div class="relative inline-block">
244
+ <div class="absolute -top-5 -right-5 w-20 h-20 bg-turquoise-200 rounded-full opacity-30"></div>
245
+ <div class="relative bg-white p-2 rounded-full shadow-xl pulse">
246
+ <img src="https://placehold.co/300x300/e5f9f7/38b2ac?text=نمر" alt="نمر المساعد" class="w-64 h-64 rounded-full border-4 border-turquoise-300 object-cover">
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div class="md:w-1/2">
251
+ <h2 class="text-3xl font-bold text-turquoise-800 mb-4">نمر - المساعد الذكي</h2>
252
+ <p class="text-gray-600 mb-6 leading-relaxed">
253
+ مساعدك الشخصي الذي يعمل بالذكاء الاصطناعي لمساعدتك في إدارة متجرك أو مصنعك. يمكنك سؤاله عن أي شيء متعلق بعملك وسيقوم بتقديم الإجابات الفورية أو تنفيذ المهام نيابة عنك.
254
+ </p>
255
+ <div class="space-y-4">
256
+ <div class="flex items-start">
257
+ <div class="flex-shrink-0 mt-1">
258
+ <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
259
+ <i class="fas fa-check"></i>
260
+ </div>
261
+ </div>
262
+ <div class="mr-3">
263
+ <p class="text-gray-800 font-medium">إجابة على استفساراتك فورًا</p>
264
+ </div>
265
+ </div>
266
+ <div class="flex items-start">
267
+ <div class="flex-shrink-0 mt-1">
268
+ <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
269
+ <i class="fas fa-check"></i>
270
+ </div>
271
+ </div>
272
+ <div class="mr-3">
273
+ <p class="text-gray-800 font-medium">تنبيهات ذكية لأهم الأمور</p>
274
+ </div>
275
+ </div>
276
+ <div class="flex items-start">
277
+ <div class="flex-shrink-0 mt-1">
278
+ <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
279
+ <i class="fas fa-check"></i>
280
+ </div>
281
+ </div>
282
+ <div class="mr-3">
283
+ <p class="text-gray-800 font-medium">تنفيذ مهام متقدمة بأوامر صوتية</p>
284
+ </div>
285
+ </div>
286
+ <div class="flex items-start">
287
+ <div class="flex-shrink-0 mt-1">
288
+ <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
289
+ <i class="fas fa-check"></i>
290
+ </div>
291
+ </div>
292
+ <div class="mr-3">
293
+ <p class="text-gray-800 font-medium">تعلم مستمر ليتكيف مع احتياجات عملك</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <button class="mt-8 bg-turquoise-600 hover:bg-turquoise-700 text-white px-6 py-3 rounded-lg font-medium shadow-lg transition duration-300 flex items-center">
298
+ <i class="fas fa-comment-alt ml-2"></i>
299
+ تحدث مع نمر الآن
300
+ </button>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Testimonials -->
307
+ <section class="py-16 bg-white">
308
+ <div class="container mx-auto px-4">
309
+ <div class="text-center mb-12">
310
+ <h2 class="text-3xl font-bold text-turquoise-800 mb-4">آراء عملائنا</h2>
311
+ <p class="text-gray-600 max-w-2xl mx-auto">انضم الآلاف من أصحاب المتاجر والمصانع إلى منظومة النمور السعودية</p>
312
+ </div>
313
+
314
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
315
+ <!-- Testimonial 1 -->
316
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
317
+ <div class="flex items-center mb-4">
318
+ <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center text-turquoise-600 font-bold text-xl">
319
+ م
320
+ </div>
321
+ <div class="mr-3">
322
+ <h4 class="font-bold">محمد العتيبي</h4>
323
+ <p class="text-sm text-gray-500">مالك مصنع أثاث</p>
324
+ </div>
325
+ </div>
326
+ <p class="text-gray-600 mb-4">
327
+ "منظومة النمور السعودية غيرت طريقة إدارتنا للمصنع بالكامل. أصبحت لدينا رؤية واضحة لكل العمليات والتكاليف."
328
+ </p>
329
+ <div class="flex text-turquoise-500">
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ <i class="fas fa-star"></i>
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star"></i>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Testimonial 2 -->
339
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
340
+ <div class="flex items-center mb-4">
341
+ <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center text-turquoise-600 font-bold text-xl">
342
+ س
343
+ </div>
344
+ <div class="mr-3">
345
+ <h4 class="font-bold">سارة القحطاني</h4>
346
+ <p class="text-sm text-gray-500">مالكة سلسلة متاجر إلكترونية</p>
347
+ </div>
348
+ </div>
349
+ <p class="text-gray-600 mb-4">
350
+ "خاصية نمر المساعد وفرت علينا ساعات من العمل يوميًا. يمكننا الآن الحصول على أي معلومة أو تقرير بأمر صوتي بسيط."
351
+ </p>
352
+ <div class="flex text-turquoise-500">
353
+ <i class="fas fa-star"></i>
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star"></i>
357
+ <i class="fas fa-star-half-alt"></i>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Testimonial 3 -->
362
+ <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
363
+ <div class="flex items-center mb-4">
364
+ <div class="w-12 h-12 rounded-full bg