Hugging Face's logo

Spaces:
wasmdashai
/
haseert
Running

App Files Community
wasmdashai commited on
Commit
37b7f92
·
verified ·
1 Parent(s): 63b238a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +736 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Haseert
3
- emoji: 🐠
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: haseert
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,736 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background-color: #f8f9fa;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #93c5fd 100%);
19
+ }
20
+
21
+ .feature-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ .nav-link {
27
+ position: relative;
28
+ }
29
+
30
+ .nav-link:after {
31
+ content: '';
32
+ position: absolute;
33
+ width: 0;
34
+ height: 2px;
35
+ bottom: 0;
36
+ right: 0;
37
+ background-color: #3b82f6;
38
+ transition: width 0.3s ease;
39
+ }
40
+
41
+ .nav-link:hover:after {
42
+ width: 100%;
43
+ right: auto;
44
+ left: 0;
45
+ }
46
+
47
+ .ar-content {
48
+ direction: rtl;
49
+ text-align: right;
50
+ }
51
+
52
+ .en-content {
53
+ direction: ltr;
54
+ text-align: left;
55
+ }
56
+
57
+ .language-switch {
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .language-switch:hover {
62
+ transform: scale(1.1);
63
+ }
64
+
65
+ .map-container {
66
+ height: 400px;
67
+ border-radius: 1rem;
68
+ overflow: hidden;
69
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
70
+ }
71
+
72
+ @keyframes float {
73
+ 0% { transform: translateY(0px); }
74
+ 50% { transform: translateY(-10px); }
75
+ 100% { transform: translateY(0px); }
76
+ }
77
+
78
+ .floating {
79
+ animation: float 3s ease-in-out infinite;
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="bg-gray-50">
84
+ <!-- Language Switch -->
85
+ <div class="fixed bottom-6 left-6 z-50">
86
+ <button id="languageSwitch" class="language-switch bg-blue-600 text-white p-3 rounded-full shadow-lg">
87
+ <i class="fas fa-language text-xl"></i>
88
+ </button>
89
+ </div>
90
+
91
+ <!-- Navigation -->
92
+ <nav class="bg-white shadow-lg sticky top-0 z-40">
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
94
+ <div class="flex justify-between h-16">
95
+ <div class="flex items-center">
96
+ <div class="flex-shrink-0 flex items-center">
97
+ <img class="h-10 w-auto" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Emblem_of_Saudi_Arabia.svg/1200px-Emblem_of_Saudi_Arabia.svg.png" alt="Aseer Logo">
98
+ <span class="ml-2 text-xl font-bold text-blue-800">دليل عسير الذكي</span>
99
+ </div>
100
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
101
+ <a href="#home" class="nav-link text-blue-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-sm font-medium">الرئيسية</a>
102
+ <a href="#features" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">المميزات</a>
103
+ <a href="#tech" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">التقنيات</a>
104
+ <a href="#target" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">المستخدمون</a>
105
+ <a href="#contact" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">اتصل بنا</a>
106
+ </div>
107
+ </div>
108
+ <div class="hidden md:ml-6 md:flex md:items-center">
109
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
110
+ حمل التطبيق الآن
111
+ </button>
112
+ </div>
113
+ <div class="-mr-2 flex items-center md:hidden">
114
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
115
+ <span class="sr-only">Open main menu</span>
116
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
117
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
118
+ </svg>
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Mobile menu -->
125
+ <div class="md:hidden hidden" id="mobile-menu">
126
+ <div class="pt-2 pb-3 space-y-1">
127
+ <a href="#home" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-r-4 text-base font-medium">الرئيسية</a>
128
+ <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-r-4 text-base font-medium">المميزات</a>
129
+ <a href="#tech" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-r-4 text-base font-medium">التقنيات</a>
130
+ <a href="#target" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-r-4 text-base font-medium">المستخدمون</a>
131
+ <a href="#contact" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-r-4 text-base font-medium">اتصل بنا</a>
132
+ <div class="px-5 py-3">
133
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
134
+ حمل التطبيق الآن
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </nav>
140
+
141
+ <!-- Hero Section -->
142
+ <section id="home" class="hero-gradient text-white">
143
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
144
+ <div class="flex flex-col md:flex-row items-center">
145
+ <div class="md:w-1/2 mb-10 md:mb-0">
146
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 ar-content">
147
+ اكتشف عسير... كما لم ترها من قبل!
148
+ </h1>
149
+ <p class="text-xl md:text-2xl mb-8 ar-content">
150
+ منصة سياحية ذكية متكاملة تجمع بين التقنية والتجربة الإنسانية لخدمة السياح والزوار في منطقة عسير
151
+ </p>
152
+ <div class="flex flex-col sm:flex-row gap-4">
153
+ <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-lg shadow-lg transition duration-300">
154
+ ابدأ الرحلة الآن
155
+ </button>
156
+ <button class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-bold text-lg shadow-lg transition duration-300">
157
+ شاهد الفيديو
158
+ </button>
159
+ </div>
160
+ </div>
161
+ <div class="md:w-1/2 flex justify-center">
162
+ <div class="relative">
163
+ <img src="https://images.unsplash.com/photo-1527631746610-bca00a040d60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Aseer Landscape" class="rounded-xl shadow-2xl w-full max-w-md floating">
164
+ <div class="absolute -bottom-5 -left-5 bg-white p-3 rounded-lg shadow-lg">
165
+ <div class="flex items-center">
166
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
167
+ <i class="fas fa-map-marked-alt text-blue-600 text-xl"></i>
168
+ </div>
169
+ <div>
170
+ <p class="text-gray-800 text-sm font-bold">+150 موقع سياحي</p>
171
+ <p class="text-gray-600 text-xs">متاحة للاستكشاف</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Features Section -->
182
+ <section id="features" class="py-20 bg-white">
183
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
184
+ <div class="text-center mb-16">
185
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 ar-content">المكونات الأساسية للمنصة</h2>
186
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto ar-content">
187
+ نقدم تجربة سياحية متكاملة تجمع بين الذكاء الاصطناعي والواقع المعزز لتحقيق أقصى استفادة من زيارتك لعسير
188
+ </p>
189
+ </div>
190
+
191
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
192
+ <!-- Feature 1 -->
193
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
194
+ <div class="p-6">
195
+ <div class="flex items-center mb-4">
196
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
197
+ <i class="fas fa-robot text-blue-600 text-xl"></i>
198
+ </div>
199
+ <h3 class="text-xl font-bold text-gray-900 ar-content">مساعد سياحي ذكي</h3>
200
+ </div>
201
+ <p class="text-gray-600 mb-4 ar-content">
202
+ مساعد ذكي يحلل تفضيلاتك ويقترح جدول رحلات مخصص حسب المدة والموقع والطقس لضمان تجربة سياحية مثالية
203
+ </p>
204
+ <div class="flex flex-wrap gap-2">
205
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">AI</span>
206
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">توصيات ذكية</span>
207
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">جدول مخصص</span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Feature 2 -->
213
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
214
+ <div class="p-6">
215
+ <div class="flex items-center mb-4">
216
+ <div class="bg-green-100 p-3 rounded-full mr-4">
217
+ <i class="fas fa-map-marked-alt text-green-600 text-xl"></i>
218
+ </div>
219
+ <h3 class="text-xl font-bold text-gray-900 ar-content">خريطة تفاعلية</h3>
220
+ </div>
221
+ <p class="text-gray-600 mb-4 ar-content">
222
+ خريطة شاملة للمواقع السياحية مع وصف صوتي ومرئي، تظهر لك أقرب طريق والزحام ووقت الزيارة المثالي
223
+ </p>
224
+ <div class="flex flex-wrap gap-2">
225
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">GIS</span>
226
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">خرائط ذكية</span>
227
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">معلومات حية</span>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Feature 3 -->
233
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
234
+ <div class="p-6">
235
+ <div class="flex items-center mb-4">
236
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
237
+ <i class="fas fa-mobile-alt text-purple-600 text-xl"></i>
238
+ </div>
239
+ <h3 class="text-xl font-bold text-gray-900 ar-content">الواقع المعزز</h3>
240
+ </div>
241
+ <p class="text-gray-600 mb-4 ar-content">
242
+ عند توجيه الكاميرا لأي موقع، تظهر معلومات تفاعلية مثل القصص التاريخية والصور القديمة وشخصيات تراثية تتحدث
243
+ </p>
244
+ <div class="flex flex-wrap gap-2">
245
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">AR</span>
246
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">تفاعلي</span>
247
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">تجربة غامرة</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Feature 4 -->
253
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
254
+ <div class="p-6">
255
+ <div class="flex items-center mb-4">
256
+ <div class="bg-red-100 p-3 rounded-full mr-4">
257
+ <i class="fas fa-utensils text-red-600 text-xl"></i>
258
+ </div>
259
+ <h3 class="text-xl font-bold text-gray-900 ar-content">دليل المأكولات</h3>
260
+ </div>
261
+ <p class="text-gray-600 mb-4 ar-content">
262
+ دليل شامل للمطاعم الشعبية والمتاجر التراثية مع تقييمات حقيقية من السياح ونظام حجز مباشر
263
+ </p>
264
+ <div class="flex flex-wrap gap-2">
265
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">تقييمات</span>
266
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">حجوزات</span>
267
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">عروض خاصة</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Feature 5 -->
273
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
274
+ <div class="p-6">
275
+ <div class="flex items-center mb-4">
276
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
277
+ <i class="fas fa-calendar-alt text-yellow-600 text-xl"></i>
278
+ </div>
279
+ <h3 class="text-xl font-bold text-gray-900 ar-content">مركز الفعاليات</h3>
280
+ </div>
281
+ <p class="text-gray-600 mb-4 ar-content">
282
+ تقويم يومي لجميع الفعاليات السياحية والموسمية في عسير مع إمكانية الحجز المباشر والمشاركة
283
+ </p>
284
+ <div class="flex flex-wrap gap-2">
285
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">أحداث</span>
286
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">تنبيهات</span>
287
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">حجوزات</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Feature 6 -->
293
+ <div class="feature-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
294
+ <div class="p-6">
295
+ <div class="flex items-center mb-4">
296
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
297
+ <i class="fas fa-language text-indigo-600 text-xl"></i>
298
+ </div>
299
+ <h3 class="text-xl font-bold text-gray-900 ar-content">المرشد الصوتي</h3>
300
+ </div>
301
+ <p class="text-gray-600 mb-4 ar-content">
302
+ دعم متعدد اللغات واللهجات مع روايات تراثية تُحكى بصوت محلي لتجربة ثقافية أصيلة
303
+ </p>
304
+ <div class="flex flex-wrap gap-2">
305
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">متعدد اللغات</span>
306
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">لهجات محلية</span>
307
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">قصص صوتية</span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </section>
314
+
315
+ <!-- AR Demo Section -->
316
+ <section class="py-20 bg-gray-50">
317
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
318
+ <div class="flex flex-col md:flex-row items-center">
319
+ <div class="md:w-1/2 mb-10 md:mb-0">
320
+ <h2 class="text-3xl font-bold text-gray-900 mb-6 ar-content">تجربة الواقع المعزز</h2>
321
+ <p class="text-lg text-gray-600 mb-6 ar-content">
322
+ حوّل هاتفك إلى مرشد سياحي تفاعلي! عند توجيه الكاميرا لأي موقع سياحي في عسير، ستظهر لك معلومات حية وتفاعلية تثري تجربتك السياحية.
323
+ </p>
324
+ <ul class="space-y-4 mb-8">
325
+ <li class="flex items-start">
326
+ <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
327
+ <i class="fas fa-check-circle text-blue-600"></i>
328
+ </div>
329
+ <span class="text-gray-700 ar-content">قصص تاريخية تظهر عند توجيه الكاميرا للمواقع الأثرية</span>
330
+ </li>
331
+ <li class="flex items-start">
332
+ <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
333
+ <i class="fas fa-check-circle text-blue-600"></i>
334
+ </div>
335
+ <span class="text-gray-700 ar-content">مقارنة بين الصور القديمة والحديثة للمواقع التراثية</span>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
339
+ <i class="fas fa-check-circle text-blue-600"></i>
340
+ </div>
341
+ <span class="text-gray-700 ar-content">شخصيات تراثية افتراضية تشرح تفاصيل المكان</span>
342
+ </li>
343
+ </ul>
344
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold shadow-lg transition duration-300 flex items-center">
345
+ <i class="fas fa-mobile-alt mr-2"></i>
346
+ <span>جرب التجربة الآن</span>
347
+ </button>
348
+ </div>
349
+ <div class="md:w-1/2 flex justify-center">
350
+ <div class="relative">
351
+ <img src="https://images.unsplash.com/photo-1593508512255-86ab42a516e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=798&q=80" alt="AR Experience" class="rounded-xl shadow-2xl w-full max-w-md">
352
+ <div class="absolute -top-5 -right-5 bg-white p-4 rounded-lg shadow-lg">
353
+ <div class="flex items-center">
354
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
355
+ <i class="fas fa-vr-cardboard text-blue-600 text-xl"></i>
356
+ </div>
357
+ <div>
358
+ <p class="text-gray-800 text-sm font-bold">تجربة الواقع المعزز</p>
359
+ <p class="text-gray-600 text-xs">متاحة الآن</p>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Technologies Section -->
370
+ <section id="tech" class="py-20 bg-white">
371
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
372
+ <div class="text-center mb-16">
373
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 ar-content">التقنيات المستخدمة</h2>
374
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto ar-content">
375
+ نستخدم أحدث التقنيات لتقديم تجربة سياحية فريدة من نوعها في منطقة عسير
376
+ </p>
377
+ </div>
378
+
379
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
380
+ <!-- Tech 1 -->
381
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300">
382
+ <div class="flex items-center mb-4">
383
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
384
+ <i class="fas fa-brain text-blue-600 text-xl"></i>
385
+ </div>
386
+ <h3 class="text-lg font-bold text-gray-900 ar-content">الذكاء الاصطناعي</h3>
387
+ </div>
388
+ <p class="text-gray-600 text-sm ar-content">
389
+ التوصيات الشخصية والتخطيط الذكي للرحلات بناءً على تفضيلات المستخدم والطقس والازدحام
390
+ </p>
391
+ </div>
392
+
393
+ <!-- Tech 2 -->
394
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300">
395
+ <div class="flex items-center mb-4">
396
+ <div class="bg-green-100 p-3 rounded-full mr-4">
397
+ <i class="fas fa-map text-green-600 text-xl"></i>
398
+ </div>
399
+ <h3 class="text-lg font-bold text-gray-900 ar-content">نظم المعلومات الجغرافية</h3>
400
+ </div>
401
+ <p class="text-gray-600 text-sm ar-content">
402
+ عرض الخرائط والمواقع بدقة عالية مع معلومات عن الطرق والمسافات وأوقات الوصول
403
+ </p>
404
+ </div>
405
+
406
+ <!-- Tech 3 -->
407
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300">
408
+ <div class="flex items-center mb-4">
409
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
410
+ <i class="fas fa-mobile-alt text-purple-600 text-xl"></i>
411
+ </div>
412
+ <h3 class="text-lg font-bold text-gray-900 ar-content">الواقع المعزز</h3>
413
+ </div>
414
+ <p class="text-gray-600 text-sm ar-content">
415
+ تقديم محتوى تفاعلي في المواقع السياحية لتعزيز التجربة وإثراء المعلومات
416
+ </p>
417
+ </div>
418
+
419
+ <!-- Tech 4 -->
420
+ <div class="bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300">
421
+ <div class="flex items-center mb-4">
422
+ <div class="bg-red-100 p-3 rounded-full mr-4">
423
+ <i class="fas fa-wifi text-red-600 text-xl"></i>
424
+ </div>
425
+ <h3 class="text-lg font-bold text-gray-900 ar-content">إنترنت الأشياء</h3>
426
+ </div>
427
+ <p class="text-gray-600 text-sm ar-content">
428
+ ربط المواقع السياحية بمعلومات آنية عن الزحام والطقس وتوفر المرافق
429
+ </p>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Target Audience -->
436
+ <section id="target" class="py-20 bg-gray-50">
437
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
438
+ <div class="text-center mb-16">
439
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 ar-content">المستخدمون المستهدفون</h2>
440
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto ar-content">
441
+ صممنا منصة دليل عسير الذكي لتلبي احتياجات مجموعة متنوعة من المستخدمين
442
+ </p>
443
+ </div>
444
+
445
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
446
+ <!-- Audience 1 -->
447
+ <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300 text-center">
448
+ <div class="bg-blue-100 p-4 rounded-full inline-block mb-4">
449
+ <i class="fas fa-users text-blue-600 text-2xl"></i>
450
+ </div>
451
+ <h3 class="text-lg font-bold text-gray-900 mb-2 ar-content">السياح</h3>
452
+ <p class="text-gray-600 text-sm ar-content">
453
+ محليون ودوليون يبحثون عن تجربة سياحية مميزة في عسير مع تخطيط ذكي للرحلات
454
+ </p>
455
+ </div>
456
+
457
+ <!-- Audience 2 -->
458
+ <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300 text-center">
459
+ <div class="bg-green-100 p-4 rounded-full inline-block mb-4">
460
+ <i class="fas fa-home text-green-600 text-2xl"></i>
461
+ </div>
462
+ <h3 class="text-lg font-bold text-gray-900 mb-2 ar-content">العائلات</h3>
463
+ <p class="text-gray-600 text-sm ar-content">
464
+ عائلات تبحث عن أماكن مناسبة للزيارة مع أطفالها وخدمات تلبي احتياجاتها
465
+ </p>
466
+ </div>
467
+
468
+ <!-- Audience 3 -->
469
+ <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300 text-center">
470
+ <div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
471
+ <i class="fas fa-user-tie text-purple-600 text-2xl"></i>
472
+ </div>
473
+ <h3 class="text-lg font-bold text-gray-900 mb-2 ar-content">المرشدون السياحيون</h3>
474
+ <p class="text-gray-600 text-sm ar-content">
475
+ للاستفادة من الأدوات الذكية في تقديم تجربة أفضل للسياح الذين يرافقونهم
476
+ </p>
477
+ </div>
478
+
479
+ <!-- Audience 4 -->
480
+ <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition duration-300 text-center">
481
+ <div class="bg-red-100 p-4 rounded-full inline-block mb-4">
482
+ <i class="fas fa-store text-red-600 text-2xl"></i>
483
+ </div>
484
+ <h3 class="text-lg font-bold text-gray-900 mb-2 ar-content">أصحاب المنشآت</h3>
485
+ <p class="text-gray-600 text-sm ar-content">
486
+ مطاعم، فنادق، ومتاجر تراثية تريد الوصول إلى السياح وتعزيز خدماتها
487
+ </p>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </section>
492
+
493
+ <!-- CTA Section -->
494
+ <section class="py-16 bg-blue-600 text-white">
495
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
496
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 ar-content">جاهز لاكتشاف عسير بطريقة جديدة؟</h2>
497
+ <p class="text-xl mb-8 max-w-3xl mx-auto ar-content">
498
+ حمل تطبيق دليل عسير الذكي الآن وتمتع بتجربة سياحية لا تُنسى في واحدة من أجمل مناطق المملكة
499
+ </p>
500
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
501
+ <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-lg shadow-lg transition duration-300 flex items-center justify-center">
502
+ <i class="fab fa-apple text-2xl mr-2"></i>
503
+ <div class="text-left">
504
+ <div class="text-xs">Download on the</div>
505
+ <div class="text-lg">App Store</div>
506
+ </div>
507
+ </button>
508
+ <button class="bg-gray-900 text-white hover:bg-gray-800 px-6 py-3 rounded-lg font-bold text-lg shadow-lg transition duration-300 flex items-center justify-center">
509
+ <i class="fab fa-google-play text-2xl mr-2"></i>
510
+ <div class="text-left">
511
+ <div class="text-xs">Get it on</div>
512
+ <div class="text-lg">Google Play</div>
513
+ </div>
514
+ </button>
515
+ </div>
516
+ </div>
517
+ </section>
518
+
519
+ <!-- Contact Section -->
520
+ <section id="contact" class="py-20 bg-white">
521
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
522
+ <div class="flex flex-col md:flex-row">
523
+ <div class="md:w-1/2 mb-10 md:mb-0">
524
+ <h2 class="text-3xl font-bold text-gray-900 mb-6 ar-content">اتصل بنا</h2>
525
+ <p class="text-lg text-gray-600 mb-8 ar-content">
526
+ لديك استفسار أو ترغب في التعاون معنا؟ لا تتردد في التواصل مع فريق دليل عسير الذكي
527
+ </p>
528
+
529
+ <div class="space-y-6">
530
+ <div class="flex items-start">
531
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
532
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
533
+ </div>
534
+ <div>
535
+ <h4 class="font-bold text-gray-900 mb-1 ar-content">العنوان</h4>
536
+ <p class="text-gray-600 ar-content">منطقة عسير، المملكة العربية السعودية</p>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="flex items-start">
541
+ <div class="bg-green-100 p-3 rounded-full mr-4">
542
+ <i class="fas fa-envelope text-green-600"></i>
543
+ </div>
544
+ <div>
545
+ <h4 class="font-bold text-gray-900 mb-1 ar-content">البريد الإلكتروني</h4>
546
+ <p class="text-gray-600">info@aseerguide.sa</p>
547
+ </div>
548
+ </div>
549
+
550
+ <div class="flex items-start">
551
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
552
+ <i class="fas fa-phone-alt text-purple-600"></i>
553
+ </div>
554
+ <div>
555
+ <h4 class="font-bold text-gray-900 mb-1 ar-content">الهاتف</h4>
556
+ <p class="text-gray-600">+966 12 345 6789</p>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="mt-8">
562
+ <h4 class="font-bold text-gray-900 mb-4 ar-content">تابعنا على</h4>
563
+ <div class="flex space-x-4">
564
+ <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition duration-300">
565
+ <i class="fab fa-twitter"></i>
566
+ </a>
567
+ <a href="#" class="bg-blue-800 text-white p-3 rounded-full hover:bg-blue-900 transition duration-300">
568
+ <i class="fab fa-facebook-f"></i>
569
+ </a>
570
+ <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition duration-300">
571
+ <i class="fab fa-instagram"></i>
572
+ </a>
573
+ <a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition duration-300">
574
+ <i class="fab fa-youtube"></i>
575
+ </a>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <div class="md:w-1/2">
581
+ <div class="bg-gray-50 rounded-xl p-8 shadow-sm">
582
+ <h3 class="text-xl font-bold text-gray-900 mb-6 ar-content">أرسل لنا رسالة</h3>
583
+ <form>
584
+ <div class="mb-4">
585
+ <label for="name" class="block text-gray-700 font-medium mb-2 ar-content">الاسم</label>
586
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
587
+ </div>
588
+ <div class="mb-4">
589
+ <label for="email" class="block text-gray-700 font-medium mb-2">البريد الإلكتروني</label>
590
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
591
+ </div>
592
+ <div class="mb-4">
593
+ <label for="subject" class="block text-gray-700 font-medium mb-2 ar-content">الموضوع</label>
594
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
595
+ </div>
596
+ <div class="mb-6">
597
+ <label for="message" class="block text-gray-700 font-medium mb-2 ar-content">الرسالة</label>
598
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea>
599
+ </div>
600
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold shadow-lg transition duration-300 ar-content">
601
+ إرسال الرسالة
602
+ </button>
603
+ </form>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- Footer -->
611
+ <footer class="bg-gray-900 text-white py-12">
612
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
613
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
614
+ <div>
615
+ <h3 class="text-lg font-bold mb-4 ar-content">دليل عسير الذكي</h3>
616
+ <p class="text-gray-400 text-sm ar-content">
617
+ منصة سياحية ذكية متكاملة تجمع بين التقنية والتجربة الإنسانية لخدمة السياح والزوار في منطقة عسير
618
+ </p>
619
+ </div>
620
+
621
+ <div>
622
+ <h3 class="text-lg font-bold mb-4 ar-content">روابط سريعة</h3>
623
+ <ul class="space-y-2">
624
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300 text-sm ar-content">الرئيسية</a></li>
625
+ <li><a href="#features" class="text-gray-400 hover:text-white transition duration-300 text-sm ar-content">المميزات</a></li>
626
+ <li><a href="#tech" class="text-gray-400 hover:text-white transition duration-300 text-sm ar-content">التقنيات</a></li>
627
+ <li><a href="#target" class="text-gray-400 hover:text-white transition duration-300 text-sm ar-content">المستخدمون</a></li>
628
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300 text-sm ar-content">اتصل بنا</a></li>
629
+ </ul>
630
+ </div>
631
+
632
+ <div>
633
+ <h3 class="text-lg font-bold mb-4 ar-content">التطبيق</h3>
634
+ <div class="space-y-3">
635
+ <a href="#" class="flex items-center text-gray-400 hover:text-white transition duration-300 text-sm">
636
+ <i class="fab fa-apple mr-2"></i>
637
+ <span class="ar-content">iOS App</span>
638
+ </a>
639
+ <a href="#" class="flex items-center text-gray-400 hover:text-white transition duration-300 text-sm">
640
+ <i class="fab fa-android mr-2"></i>
641
+ <span class="ar-content">Android App</span>
642
+ </a>
643
+ <a href="#" class="flex items-center text-gray-400 hover:text-white transition duration-300 text-sm">
644
+ <i class="fas fa-globe mr-2"></i>
645
+ <span class="ar-content">الموقع الإلكتروني</span>
646
+ </a>
647
+ </div>
648
+ </div>
649
+
650
+ <div>
651
+ <h3 class="text-lg font-bold mb-4 ar-content">النشرة البريدية</h3>
652
+ <p class="text-gray-400 text-sm mb-4 ar-content">
653
+ اشترك في نشرتنا البريدية لتصلك آخر التحديثات والعروض الخاصة
654
+ </p>
655
+ <div class="flex">
656
+ <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 rounded-r-lg text-gray-900 w-full focus:outline-none">
657
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-l-lg transition duration-300">
658
+ <i class="fas fa-paper-plane"></i>
659
+ </button>
660
+ </div>
661
+ </div>
662
+ </div>
663
+
664
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
665
+ <p class="text-gray-400 text-sm mb-4 md:mb-0 ar-content">
666
+ © 2023 دليل عسير الذكي. جميع الحقوق محفوظة.
667
+ </p>
668
+ <div class="flex space-x-6">
669
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
670
+ <i class="fab fa-twitter"></i>
671
+ </a>
672
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
673
+ <i class="fab fa-facebook-f"></i>
674
+ </a>
675
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
676
+ <i class="fab fa-instagram"></i>
677
+ </a>
678
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
679
+ <i class="fab fa-linkedin-in"></i>
680
+ </a>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </footer>
685
+
686
+ <script>
687
+ // Mobile menu toggle
688
+ const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
689
+ const mobileMenu = document.getElementById('mobile-menu');
690
+
691
+ mobileMenuButton.addEventListener('click', () => {
692
+ mobileMenu.classList.toggle('hidden');
693
+ });
694
+
695
+ // Language switch functionality
696
+ const languageSwitch = document.getElementById('languageSwitch');
697
+ let currentLanguage = 'ar';
698
+
699
+ languageSwitch.addEventListener('click', () => {
700
+ if (currentLanguage === 'ar') {
701
+ // Switch to English
702
+ document.querySelectorAll('.ar-content').forEach(el => {
703
+ el.classList.add('en-content');
704
+ el.classList.remove('ar-content');
705
+ });
706
+ currentLanguage = 'en';
707
+ languageSwitch.innerHTML = '<i class="fas fa-language text-xl"></i> AR';
708
+ } else {
709
+ // Switch to Arabic
710
+ document.querySelectorAll('.en-content').forEach(el => {
711
+ el.classList.add('ar-content');
712
+ el.classList.remove('en-content');
713
+ });
714
+ currentLanguage = 'ar';
715
+ languageSwitch.innerHTML = '<i class="fas fa-language text-xl"></i> EN';
716
+ }
717
+ });
718
+
719
+ // Smooth scrolling for anchor links
720
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
721
+ anchor.addEventListener('click', function (e) {
722
+ e.preventDefault();
723
+
724
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
725
+ behavior: 'smooth'
726
+ });
727
+
728
+ // Close mobile menu if open
729
+ if (!mobileMenu.classList.contains('hidden')) {
730
+ mobileMenu.classList.add('hidden');
731
+ }
732
+ });
733
+ });
734
+ </script>
735
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wasmdashai/haseert" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
736
+ </html>