-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
369 lines (345 loc) · 22.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#2563eb" id="themeColor">
<title>شركة التوصيلات والسياحة</title>
<link hre="https://cdn.tailwindcss.com">
</link>
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> -->
<!-- <script src="tailwind.js"></script> -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="travel.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body class="font-sans bg-gray-100">
<div class="glass-container">
<!-- زر تبديل الوضع الليلي والنهاري -->
<div class="theme-toggle" onclick="toggleTheme()">
<svg id="theme-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path id="moon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
<path id="sun"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z" />
</svg>
</div>
<!-- أداة اختيار الألوان -->
<div class="color-picker-container">
<div class="color-picker-icon" onclick="toggleColorOptions()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z" />
</svg>
</div>
<div class="color-options" id="colorOptions">
<div class="color-option bg-[#2563eb]" onclick="changeColor('#2563eb')"></div>
<div class="color-option bg-[#000000]" onclick="changeColor('#000000')"></div>
<div class="color-option bg-[#10B981]" onclick="changeColor('#10B981')"></div>
<div class="color-option bg-[#8B5CF6]" onclick="changeColor('#8B5CF6')"></div>
<div class="color-option bg-[#EF4444]" onclick="changeColor('#EF4444')"></div>
<div class="color-option bg-[#F59E0B]" onclick="changeColor('#F59E0B')"></div>
<div class="color-option bg-[#EC4899]" onclick="changeColor('#EC4899')"></div>
</div>
</div>
</div>
<!-- Header -->
<header class="">
<div
class="container header-container mx-auto px-4 sm:px-6 py-4 flex items-center sm:flex-row justify-between items-center">
<div id="brand" class="text-2xl font-bold text-blue-600 sm:mb-0 select-none">شركة التوصيلات والسياحة</div>
<!-- زر فتح الـ sidebar -->
<button class="sm:hidden p-2 text-gray-700 bg-blue-600 text-white rounded" onclick="toggleSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 12h18M3 6h18M3 18h18" />
</svg>
</button>
<!-- الـ navigation bar للأجهزة الكبيرة -->
<nav class="hidden sm:flex space-x-4">
<a href="#hero" class="nav-link text-gray-700 hover:text-blue-600">الرئيسية</a>
<!-- <a href="#about" class="nav-link text-gray-700 hover:text-blue-600">من نحن</a> -->
<a href="#about" class="nav-link text-gray-700 hover:text-blue-600">من نحن</a>
<a href="#team" class="nav-link text-gray-700 hover:text-blue-600">فريق العمل</a>
<a href="#testimonials" class="nav-link text-gray-700 hover:text-blue-600">آراء العملاء</a>
<a href="#blog" class="nav-link text-gray-700 hover:text-blue-600">مدونة</a>
<a href="#faq" class="nav-link text-gray-700 hover:text-blue-600">الأسئلة الشائعة</a>
<a href="#offers" class="nav-link text-gray-700 hover:text-blue-600">العروض الخاصة</a>
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">اتصل بنا</a>
</nav>
</div>
</header>
<!-- الـ sidebar للأجهزة المحمولة -->
<div class="sidebar" id="sidebar">
<div class="p-4">
<button class="p-2 text-gray-700 bg-blue-600 text-white rounded" onclick="toggleSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<nav class="mt-4 text-blue-600">
<a href="#hero" class="block py-2 hover:text-blue-600 hover:font-bold"
onclick="toggleSidebar()">الرئيسية</a>
<a href="#about" class="block py-2 hover:text-blue-600 hover:font-bold" onclick="toggleSidebar()">من
نحن</a>
<!-- <a href="#services" class="block py-2 hover:text-blue-600 hover:font-bold"
onclick="toggleSidebar()">الخدمات</a> -->
<a href="#team" class="block py-2 hover:text-blue-600 hover:font-bold" onclick="toggleSidebar()">فريق
العمل</a>
<a href="#testimonials" class="block py-2 hover:text-blue-600 hover:font-bold"
onclick="toggleSidebar()">آراء
العملاء</a>
<a href="#blog" class="block py-2 hover:text-blue-600 hover:font-bold"
onclick="toggleSidebar()">مدونة</a>
<a href="#faq" class="block py-2 hover:text-blue-600 hover:font-bold" onclick="toggleSidebar()">الأسئلة
الشائعة</a>
<a href="#offers" class="block py-2 hover:text-blue-600 hover:font-bold"
onclick="toggleSidebar()">العروض
الخاصة</a>
<a href="#contact" class="block py-2 hover:text-blue-600 hover:font-bold" onclick="toggleSidebar()">اتصل
بنا</a>
</nav>
</div>
</div>
<!-- Overlay للـ sidebar -->
<div class="overlay" id="overlay" onclick="toggleSidebar()"></div>
<!-- Hero Section -->
<section id="hero" class="bg-cover bg-center h-96"
style="background-image: url('https://cloudclass.netlify.app/img01.jpg');">
<div class="container mx-auto px-4 sm:px-6 py-20 text-white text-center">
<div class="container">
<h1 id="typed-text" class="text-3xl sm:text-xl font-bold mb-4 animate-on-scroll text-blue-600 inline-block"></h1>
</div>
<div class="text-lg sm:text-xl mb-8 animate-on-scroll">نقدم أفضل خدمات التوصيل والرحلات السياحية بأسعار
تنافسية.</div>
<a href="#" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 animate-on-scroll">احجز
الآن</a>
</div>
</section>
<!-- من نحن -->
<section id="about" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">من نحن</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-4">رسالتنا</h3>
<p class="text-gray-700">نحن نهدف إلى تقديم أفضل خدمات التوصيل والرحلات السياحية بجودة عالية وأسعار
تنافسية.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-4">رؤيتنا</h3>
<p class="text-gray-700">أن نكون الشركة الرائدة في مجال التوصيل والسياحة على مستوى الوطن العربي.</p>
</div>
</div>
</section>
<!-- فريق العمل -->
<section id="team" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">فريق العمل</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="فريق العمل"
class="mx-auto mb-4 rounded-full h-40 w-40">
<h3 class="text-xl font-bold mb-2">أحمد محمد</h3>
<p class="text-gray-700">مدير العمليات</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="فريق العمل"
class="mx-auto mb-4 rounded-full h-40 w-40">
<h3 class="text-xl font-bold mb-2">مصطفى علي</h3>
<p class="text-gray-700">مطور تطبيقات</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="فريق العمل"
class="mx-auto mb-4 rounded-full h-40 w-40">
<h3 class="text-xl font-bold mb-2">سارة علي</h3>
<p class="text-gray-700">مديرة التسويق</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="فريق العمل"
class="mx-auto mb-4 rounded-full h-40 w-40">
<h3 class="text-xl font-bold mb-2">محمد خالد</h3>
<p class="text-gray-700">مطور الويب</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="فريق العمل"
class="mx-auto mb-4 rounded-full h-40 w-40">
<h3 class="text-xl font-bold mb-2">فاطمة حسين</h3>
<p class="text-gray-700">مصممة الجرافيك</p>
</div>
</div>
</section>
<!-- آراء العملاء -->
<section id="testimonials" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">آراء العملاء</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<p class="text-gray-700">"تجربة رائعة! كانت الرحلة منظمة بشكل ممتاز."</p>
<p class="text-sm text-gray-500 mt-4">- أحمد</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<p class="text-gray-700">"توصيل سريع ودقيق، شكرًا لكم!"</p>
<p class="text-sm text-gray-500 mt-4">- سارة</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<p class="text-gray-700">"خدمة عملاء ممتازة، أنصح الجميع بالتعامل معهم."</p>
<p class="text-sm text-gray-500 mt-4">- محمد</p>
</div>
</div>
</section>
<!-- مدونة -->
<section id="blog" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">مدونة</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">نصائح للسفر الآمن</h3>
<p class="text-gray-700">تعرف على أهم النصائح للسفر الآمن والاستمتاع برحلتك.</p>
<a href="#" class="text-blue-600 hover:underline">اقرأ المزيد</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">أفضل الوجهات السياحية</h3>
<p class="text-gray-700">اكتشف أفضل الوجهات السياحية لعام 2025.</p>
<a href="#" class="text-blue-600 hover:underline">اقرأ المزيد</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">كيف تختار الفندق المناسب؟</h3>
<p class="text-gray-700">دليل شامل لاختيار الفندق المناسب لرحلتك.</p>
<a href="#" class="text-blue-600 hover:underline">اقرأ المزيد</a>
</div>
</div>
</section>
<!-- الأسئلة الشائعة -->
<section id="faq" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">الأسئلة الشائعة</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">كيف يمكنني حجز رحلة؟</h3>
<p class="text-gray-700">يمكنك حجز رحلة بسهولة من خلال موقعنا أو تطبيقنا.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">هل يمكنني تعديل الحجز؟</h3>
<p class="text-gray-700">نعم، يمكنك تعديل الحجز من خلال صفحة "إدارة الحجز".</p>
</div>
</div>
</section>
<!-- العروض الخاصة -->
<section id="offers" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">العروض الخاصة</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">خصم 20% على الرحلات الدولية</h3>
<p class="text-gray-700">استمتع بخصم 20% على جميع الرحلات الدولية.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">عروض خاصة على الفنادق</h3>
<p class="text-gray-700">احصل على أفضل العروض على الفنادق الفاخرة.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<h3 class="text-xl font-bold mb-2">عروض التوصيل المجاني</h3>
<p class="text-gray-700">استفد من التوصيل المجاني على جميع الطلبات.</p>
</div>
</div>
</section>
<!-- شركاؤنا -->
<section id="partners" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">شركاؤنا</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="شريك 1"
class="mx-auto mb-4 h-36 w-36 rounded-lg">
<h3 class="text-xl font-bold mb-2">شريك 1</h3>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="شريك 2"
class="mx-auto mb-4 h-36 w-36 rounded-lg">
<h3 class="text-xl font-bold mb-2">شريك 2</h3>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="شريك 3"
class="mx-auto mb-4 h-36 w-36 rounded-lg">
<h3 class="text-xl font-bold mb-2">شريك 3</h3>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center animate-on-scroll">
<img src="https://demonslayer-hinokami.sega.com/img/characters/tmb-tanjiro.png" alt="شريك 4"
class="mx-auto mb-4 h-36 w-36 rounded-lg">
<h3 class="text-xl font-bold mb-2">شريك 4</h3>
</div>
</div>
</section>
<!-- الاشتراك في النشرة البريدية -->
<section id="newsletter" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">اشترك في النشرة البريدية</h2>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<form class="flex flex-col sm:flex-row gap-4">
<input dir="auto" type="email" placeholder="أدخل بريدك الإلكتروني"
class="p-2 border border-gray-300 rounded-lg flex-grow text-black outline-none">
<button type="submit"
class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">اشترك</button>
</form>
</div>
</section>
<!-- اتصل بنا -->
<section id="contact" class="container mx-auto px-4 sm:px-6 py-12">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 animate-on-scroll">اتصل بنا</h2>
<div class="bg-white p-6 rounded-lg shadow-lg animate-on-scroll">
<p class="text-gray-700">الهاتف: 0123456789</p>
<p class="text-gray-700">البريد الإلكتروني: [email protected]</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-700 backdrop-blur-sm text-white py-8 relative overflow-hidden">
<!-- أشكال هندسية -->
<!-- دوائر متداخلة -->
<div class="absolute w-40 h-40 border-2 border-pink-500/20 rounded-full animate-rotate" style="top: -50px; left: -50px;"></div>
<div class="absolute w-60 h-60 border-2 border-yellow-400/20 rounded-full animate-rotate" style="top: -70px; left: -70px;"></div>
<!-- خطوط متقاطعة -->
<div class="absolute w-0.5 h-20 bg-pink-500 transform rotate-45 animate-glow" style="top: 10%; left: 20%;"></div>
<div class="absolute w-0.5 h-20 bg-yellow-400 transform -rotate-45 animate-glow" style="top: 10%; left: 20%;"></div>
<!-- مثلثات -->
<div class="absolute w-0 h-0 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent border-b-[24px] border-b-pink-500 animate-float" style="top: 20%; right: 10%;"></div>
<div class="absolute w-0 h-0 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent border-t-[24px] border-t-yellow-400 animate-float" style="bottom: 20%; left: 10%;"></div>
<!-- محتوى Footer -->
<div class="container mx-auto px-4 sm:px-6 relative z-10">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- القسم الأول: معلومات الشركة -->
<div>
<h3 class="text-xl font-bold mb-4">شركة التوصيلات والسياحة</h3>
<p>نحن هنا لخدمتك في كل ما يتعلق بالتوصيل والرحلات السياحية.</p>
</div>
<!-- القسم الثاني: روابط سريعة -->
<div>
<h3 class="text-xl font-bold mb-4">روابط سريعة</h3>
<ul>
<li><a href="#hero" class="hover:text-blue-600">الرئيسية</a></li>
<li><a href="#about" class="hover:text-blue-600">من نحن</a></li>
<li><a href="#team" class="hover:text-blue-600">فريق العمل</a></li>
<li><a href="#contact" class="hover:text-blue-600">اتصل بنا</a></li>
</ul>
</div>
<!-- القسم الثالث: اتصل بنا -->
<div>
<h3 class="text-xl font-bold mb-4">اتصل بنا</h3>
<p>الهاتف: 0123456789</p>
<p>البريد الإلكتروني: [email protected]</p>
</div>
</div>
<!-- حقوق النشر واسم المصمم -->
<div class="text-center mt-8">
<p>© <span id="year"></span> شركة التوصيلات والسياحة. جميع الحقوق محفوظة.</p>
<!-- اسم المصمم مع تأثيرات -->
<div class="inline-block relative">
<p class="inline-block bg-gradient-to-r from-orange-500 to-yellow-400 bg-clip-text text-transparent animate-glow font-bold">
تصميم عبد الرحمن قاطن
</p>
<!-- دوائر صغيرة -->
<div class="absolute w-2 h-2 bg-pink-500 rounded-full animate-float" style="top: -5px; left: -10px;"></div>
<div class="absolute w-2 h-2 bg-yellow-400 rounded-full animate-float" style="bottom: -5px; right: -10px;"></div>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>