moha21 commited on
Commit
66ea8b9
·
verified ·
1 Parent(s): 9059c53

booking اعد ملف

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. booking.html +232 -0
  3. index.html +506 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🌖
4
- colorFrom: green
5
- colorTo: yellow
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: undefined
3
+ colorFrom: gray
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
booking.html ADDED
@@ -0,0 +1,232 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>حجز خدمة - Shine & Go</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
13
+ body {
14
+ font-family: 'Tajawal', sans-serif;
15
+ }
16
+ .flatpickr-calendar {
17
+ font-family: 'Tajawal', sans-serif;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 min-h-screen">
22
+ <nav class="bg-white shadow-lg">
23
+ <div class="max-w-7xl mx-auto px-4">
24
+ <div class="flex justify-between items-center h-20">
25
+ <div class="flex items-center">
26
+ <a href="index.html">
27
+ <i data-feather="droplet" class="text-blue-600 w-8 h-8"></i>
28
+ <span class="text-xl font-bold text-blue-600 mr-2">Shine & Go</span>
29
+ </a>
30
+ </div>
31
+ <div class="hidden md:flex space-x-1 space-x-reverse">
32
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">الرئيسية</a>
33
+ <a href="index.html#services" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">خدماتنا</a>
34
+ <a href="index.html#pricing" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">الأسعار</a>
35
+ <a href="booking.html" class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 bg-blue-50">حجز خدمة</a>
36
+ </div>
37
+ <div class="md:hidden">
38
+ <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-blue-50">
39
+ <i data-feather="menu"></i>
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </nav>
45
+
46
+ <div class="container mx-auto px-4 py-12 max-w-4xl">
47
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
48
+ <div class="bg-blue-600 text-white p-6">
49
+ <h1 class="text-2xl font-bold">حجز خدمة غسيل السيارات</h1>
50
+ <p class="mt-2 opacity-90">املأ النموذج أدناه لحجز موعدك</p>
51
+ </div>
52
+
53
+ <div class="p-6 md:p-8">
54
+ <form id="bookingForm">
55
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
56
+ <!-- Personal Info -->
57
+ <div class="md:col-span-2">
58
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">المعلومات الشخصية</h2>
59
+ </div>
60
+ <div>
61
+ <label class="block text-gray-700 mb-2">الاسم الكامل</label>
62
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
63
+ </div>
64
+ <div>
65
+ <label class="block text-gray-700 mb-2">رقم الجوال</label>
66
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
67
+ </div>
68
+ <div>
69
+ <label class="block text-gray-700 mb-2">البريد الإلكتروني</label>
70
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
71
+ </div>
72
+
73
+ <!-- Vehicle Info -->
74
+ <div class="md:col-span-2 mt-6">
75
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">معلومات المركبة</h2>
76
+ </div>
77
+ <div>
78
+ <label class="block text-gray-700 mb-2">نوع المركبة</label>
79
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
80
+ <option value="">اختر نوع المركبة</option>
81
+ <option value="sedan">سيارة صغيرة</option>
82
+ <option value="suv">سيارة دفع رباعي</option>
83
+ <option value="truck">شاحنة</option>
84
+ <option value="luxury">سيارة فاخرة</option>
85
+ </select>
86
+ </div>
87
+ <div>
88
+ <label class="block text-gray-700 mb-2">طراز المركبة</label>
89
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
90
+ </div>
91
+ <div>
92
+ <label class="block text-gray-700 mb-2">رقم اللوحة</label>
93
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
94
+ </div>
95
+ <div>
96
+ <label class="block text-gray-700 mb-2">لون المركبة</label>
97
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
98
+ </div>
99
+
100
+ <!-- Service Selection -->
101
+ <div class="md:col-span-2 mt-6">
102
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">اختر الخدمة</h2>
103
+ </div>
104
+ <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4">
105
+ <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors">
106
+ <div class="flex items-center">
107
+ <input type="radio" name="service" id="basic" value="basic" class="mr-2" checked>
108
+ <label for="basic" class="font-medium">غسيل أساسي</label>
109
+ </div>
110
+ <p class="text-gray-600 text-sm mt-2">غسيل خارجي وتنظيف العجلات والزجاج</p>
111
+ <p class="text-blue-600 font-bold mt-2">30 ريال</p>
112
+ </div>
113
+ <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors">
114
+ <div class="flex items-center">
115
+ <input type="radio" name="service" id="premium" value="premium" class="mr-2">
116
+ <label for="premium" class="font-medium">غسيل مميز</label>
117
+ </div>
118
+ <p class="text-gray-600 text-sm mt-2">يشمل الأساسي مع شفط الداخلية</p>
119
+ <p class="text-blue-600 font-bold mt-2">60 ريال</p>
120
+ </div>
121
+ <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors">
122
+ <div class="flex items-center">
123
+ <input type="radio" name="service" id="full" value="full" class="mr-2">
124
+ <label for="full" class="font-medium">تفصيل كامل</label>
125
+ </div>
126
+ <p class="text-gray-600 text-sm mt-2">تنظيف كامل مع شمع وتلميع</p>
127
+ <p class="text-blue-600 font-bold mt-2">150 ريال</p>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Date & Time -->
132
+ <div class="md:col-span-2 mt-6">
133
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">الموعد</h2>
134
+ </div>
135
+ <div>
136
+ <label class="block text-gray-700 mb-2">التاريخ</label>
137
+ <input type="text" id="datePicker" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="اختر التاريخ" required>
138
+ </div>
139
+ <div>
140
+ <label class="block text-gray-700 mb-2">الوقت</label>
141
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
142
+ <option value="">اختر الوقت</option>
143
+ <option value="08:00">8:00 ص</option>
144
+ <option value="09:00">9:00 ص</option>
145
+ <option value="10:00">10:00 ص</option>
146
+ <option value="11:00">11:00 ص</option>
147
+ <option value="12:00">12:00 م</option>
148
+ <option value="13:00">1:00 م</option>
149
+ <option value="14:00">2:00 م</option>
150
+ <option value="15:00">3:00 م</option>
151
+ <option value="16:00">4:00 م</option>
152
+ <option value="17:00">5:00 م</option>
153
+ </select>
154
+ </div>
155
+
156
+ <!-- Location -->
157
+ <div class="md:col-span-2 mt-6">
158
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">الموقع</h2>
159
+ </div>
160
+ <div class="md:col-span-2">
161
+ <label class="block text-gray-700 mb-2">اختر الفرع</label>
162
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
163
+ <option value="">اختر الفرع</option>
164
+ <option value="north">الفرع الشمالي - الرياض</option>
165
+ <option value="south">الفرع الجنوبي - الرياض</option>
166
+ <option value="east">الفرع الشرقي - الرياض</option>
167
+ <option value="west">الفرع الغربي - الرياض</option>
168
+ </select>
169
+ </div>
170
+ <div class="md:col-span-2">
171
+ <label class="block text-gray-700 mb-2">ملاحظات إضافية (اختياري)</label>
172
+ <textarea rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="mt-8">
177
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium text-lg">
178
+ تأكيد الحجز
179
+ </button>
180
+ </div>
181
+ </form>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <footer class="bg-gray-800 text-white py-8 mt-12">
187
+ <div class="max-w-7xl mx-auto px-4">
188
+ <div class="flex flex-col md:flex-row justify-between items-center">
189
+ <div class="flex items-center mb-4 md:mb-0">
190
+ <i data-feather="droplet" class="text-blue-400 w-6 h-6"></i>
191
+ <span class="text-xl font-bold text-blue-400 mr-2">Shine & Go</span>
192
+ </div>
193
+ <div class="text-gray-400 text-sm">
194
+ © 2023 جميع الحقوق محفوظة
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </footer>
199
+
200
+ <script>
201
+ document.addEventListener('DOMContentLoaded', function() {
202
+ feather.replace();
203
+
204
+ // Initialize date picker
205
+ flatpickr("#datePicker", {
206
+ minDate: "today",
207
+ dateFormat: "Y-m-d",
208
+ locale: "ar"
209
+ });
210
+
211
+ // Service option selection
212
+ document.querySelectorAll('.service-option').forEach(option => {
213
+ option.addEventListener('click', function() {
214
+ document.querySelectorAll('.service-option').forEach(opt => {
215
+ opt.classList.remove('border-blue-500', 'bg-blue-50');
216
+ });
217
+ this.classList.add('border-blue-500', 'bg-blue-50');
218
+ const radio = this.querySelector('input[type="radio"]');
219
+ radio.checked = true;
220
+ });
221
+ });
222
+
223
+ // Form submission
224
+ document.getElementById('bookingForm').addEventListener('submit', function(e) {
225
+ e.preventDefault();
226
+ alert('تم استلام طلب الحجز بنجاح! سنتصل بك لتأكيد الموعد.');
227
+ this.reset();
228
+ });
229
+ });
230
+ </script>
231
+ </body>
232
+ </html>
index.html CHANGED
@@ -1,19 +1,507 @@
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>Shine & Go - غسيل السيارات</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
13
+ body {
14
+ font-family: 'Tajawal', sans-serif;
15
+ }
16
+ .lang-switch {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .service-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ #vanta-bg {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ z-index: -1;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 text-gray-800">
34
+ <div id="vanta-bg"></div>
35
+
36
+ <!-- Language Switch -->
37
+ <div class="fixed top-4 left-4 z-50">
38
+ <button id="langSwitch" class="lang-switch bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full shadow-lg flex items-center">
39
+ <i data-feather="globe" class="mr-2"></i>
40
+ <span>English</span>
41
+ </button>
42
+ </div>
43
+
44
+ <!-- Navbar -->
45
+ <nav class="bg-white shadow-lg">
46
+ <div class="max-w-7xl mx-auto px-4">
47
+ <div class="flex justify-between items-center h-20">
48
+ <div class="flex items-center">
49
+ <i data-feather="droplet" class="text-blue-600 w-8 h-8"></i>
50
+ <span class="text-xl font-bold text-blue-600 mr-2" id="brand">Shine & Go</span>
51
+ </div>
52
+ <div class="hidden md:flex space-x-1 space-x-reverse">
53
+ <a href="#home" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Home" data-ar="الرئيسية">الرئيسية</a>
54
+ <a href="#services" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Services" data-ar="خدماتنا">خدماتنا</a>
55
+ <a href="#pricing" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Pricing" data-ar="الأسعار">الأسعار</a>
56
+ <a href="#about" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="About" data-ar="من نحن">من نحن</a>
57
+ <a href="#contact" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Contact" data-ar="تواصل معنا">تواصل معنا</a>
58
+ <a href="booking.html" class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 bg-blue-50" data-en="Book Now" data-ar="حجز خدمة">حجز خدمة</a>
59
+ </div>
60
+ <div class="md:hidden">
61
+ <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-blue-50">
62
+ <i data-feather="menu"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Hero Section -->
70
+ <section id="home" class="py-20 px-4 text-center">
71
+ <div class="max-w-4xl mx-auto">
72
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6" data-en="Premium Car Wash Service" data-ar="خدمة غسيل سيارات مميزة">خدمة غسيل سيارات مميزة</h1>
73
+ <p class="text-xl text-gray-600 mb-8" data-en="We bring the shine back to your car with our professional services" data-ar="نعيد لسيارتك بريقها مع خدماتنا الاحترافية">نعيد لسيارتك بريقها مع خدماتنا الاحترافية</p>
74
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
75
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full shadow-lg font-medium" data-en="Book Now" data-ar="احجز الآن">اح��ز الآن</button>
76
+ <button class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-full shadow-lg font-medium border border-blue-600" data-en="Our Services" data-ar="خدماتنا">خدماتنا</button>
77
+ </div>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- Services Section -->
82
+ <section id="services" class="py-16 bg-white">
83
+ <div class="max-w-7xl mx-auto px-4">
84
+ <h2 class="text-3xl font-bold text-center mb-12" data-en="Our Services" data-ar="خدماتنا">خدماتنا</h2>
85
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
86
+ <!-- Service 1 -->
87
+ <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition-all duration-300">
88
+ <img src="http://static.photos/automotive/640x360/1" alt="Car Wash" class="w-full h-48 object-cover">
89
+ <div class="p-6">
90
+ <div class="flex items-center mb-4">
91
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
92
+ <i data-feather="droplet" class="text-blue-600"></i>
93
+ </div>
94
+ <h3 class="text-xl font-bold" data-en="Basic Wash" data-ar="غسيل أساسي">غسيل أساسي</h3>
95
+ </div>
96
+ <p class="text-gray-600 mb-4" data-en="Exterior wash, wheel cleaning, and window cleaning" data-ar="غسيل خارجي، تنظيف العجلات، وتنظيف الزجاج">غسيل خارجي، تنظيف العجلات، وتنظيف الزجاج</p>
97
+ <button class="text-blue-600 font-medium" data-en="Learn More" data-ar="المزيد">المزيد →</button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Service 2 -->
102
+ <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition-all duration-300">
103
+ <img src="http://static.photos/automotive/640x360/2" alt="Premium Wash" class="w-full h-48 object-cover">
104
+ <div class="p-6">
105
+ <div class="flex items-center mb-4">
106
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
107
+ <i data-feather="star" class="text-blue-600"></i>
108
+ </div>
109
+ <h3 class="text-xl font-bold" data-en="Premium Wash" data-ar="غسيل مميز">غسيل مميز</h3>
110
+ </div>
111
+ <p class="text-gray-600 mb-4" data-en="Includes basic wash plus interior vacuuming and dashboard cleaning" data-ar="يشمل الغسيل الأساسي بالإضافة إلى شفط الداخلية وتنظيف لوحة القيادة">يشمل الغسيل الأساسي بالإضافة إلى شفط الداخلية وتنظيف لوحة القيادة</p>
112
+ <button class="text-blue-600 font-medium" data-en="Learn More" data-ar="المزيد">المزيد →</button>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Service 3 -->
117
+ <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition-all duration-300">
118
+ <img src="http://static.photos/automotive/640x360/3" alt="Full Detailing" class="w-full h-48 object-cover">
119
+ <div class="p-6">
120
+ <div class="flex items-center mb-4">
121
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
122
+ <i data-feather="award" class="text-blue-600"></i>
123
+ </div>
124
+ <h3 class="text-xl font-bold" data-en="Full Detailing" data-ar="تفصيل كامل">تفصيل كامل</h3>
125
+ </div>
126
+ <p class="text-gray-600 mb-4" data-en="Complete interior and exterior detailing with wax and polish" data-ar="تفصيل كامل للداخلية والخارجية مع الشمع والتلميع">تفصيل كامل للداخلية والخارجية مع الشمع والتلميع</p>
127
+ <button class="text-blue-600 font-medium" data-en="Learn More" data-ar="المزيد">المزيد →</button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Pricing Section -->
135
+ <section id="pricing" class="py-16 bg-gray-50">
136
+ <div class="max-w-7xl mx-auto px-4">
137
+ <h2 class="text-3xl font-bold text-center mb-12" data-en="Our Pricing" data-ar="أسعارنا">أسعارنا</h2>
138
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
139
+ <!-- Plan 1 -->
140
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
141
+ <div class="px-6 py-8">
142
+ <h3 class="text-2xl font-bold text-center mb-4" data-en="Basic Wash" data-ar="غسيل أساسي">غسيل أساسي</h3>
143
+ <div class="text-center mb-6">
144
+ <span class="text-4xl font-bold">30</span>
145
+ <span class="text-gray-600" data-en="SAR" data-ar="ريال">ريال</span>
146
+ </div>
147
+ <ul class="space-y-3">
148
+ <li class="flex items-center">
149
+ <i data-feather="check" class="text-green-500 mr-2"></i>
150
+ <span data-en="Exterior Wash" data-ar="غسيل خارجي">غسيل خارجي</span>
151
+ </li>
152
+ <li class="flex items-center">
153
+ <i data-feather="check" class="text-green-500 mr-2"></i>
154
+ <span data-en="Wheel Cleaning" data-ar="تنظيف العجلات">تنظيف العجلات</span>
155
+ </li>
156
+ <li class="flex items-center">
157
+ <i data-feather="check" class="text-green-500 mr-2"></i>
158
+ <span data-en="Window Cleaning" data-ar="تنظيف الزجاج">تنظيف الزجاج</span>
159
+ </li>
160
+ </ul>
161
+ </div>
162
+ <div class="px-6 pb-8">
163
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium" data-en="Book Now" data-ar="احجز الآن">احجز الآن</button>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Plan 2 -->
168
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transform scale-105">
169
+ <div class="bg-blue-600 text-white text-center py-2">
170
+ <span class="font-bold" data-en="Most Popular" data-ar="الأكثر طلباً">الأكثر طلباً</span>
171
+ </div>
172
+ <div class="px-6 py-8">
173
+ <h3 class="text-2xl font-bold text-center mb-4" data-en="Premium Wash" data-ar="غسيل مميز">غسيل مميز</h3>
174
+ <div class="text-center mb-6">
175
+ <span class="text-4xl font-bold">60</span>
176
+ <span class="text-gray-600" data-en="SAR" data-ar="ريال">ريال</span>
177
+ </div>
178
+ <ul class="space-y-3">
179
+ <li class="flex items-center">
180
+ <i data-feather="check" class="text-green-500 mr-2"></i>
181
+ <span data-en="Basic Wash Included" data-ar="يشمل الغسيل الأساسي">يشمل الغسيل الأساسي</span>
182
+ </li>
183
+ <li class="flex items-center">
184
+ <i data-feather="check" class="text-green-500 mr-2"></i>
185
+ <span data-en="Interior Vacuuming" data-ar="شفط الداخلية">شفط الداخلية</span>
186
+ </li>
187
+ <li class="flex items-center">
188
+ <i data-feather="check" class="text-green-500 mr-2"></i>
189
+ <span data-en="Dashboard Cleaning" data-ar="تنظيف لوحة القيادة">تنظيف لوحة القيادة</span>
190
+ </li>
191
+ </ul>
192
+ </div>
193
+ <div class="px-6 pb-8">
194
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium" data-en="Book Now" data-ar="احجز الآن">احجز الآن</button>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Plan 3 -->
199
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
200
+ <div class="px-6 py-8">
201
+ <h3 class="text-2xl font-bold text-center mb-4" data-en="Full Detailing" data-ar="تفصيل كامل">تفصيل كامل</h3>
202
+ <div class="text-center mb-6">
203
+ <span class="text-4xl font-bold">150</span>
204
+ <span class="text-gray-600" data-en="SAR" data-ar="ريال">ريال</span>
205
+ </div>
206
+ <ul class="space-y-3">
207
+ <li class="flex items-center">
208
+ <i data-feather="check" class="text-green-500 mr-2"></i>
209
+ <span data-en="Premium Wash Included" data-ar="يشمل الغسيل المميز">يشمل الغسيل المميز</span>
210
+ </li>
211
+ <li class="flex items-center">
212
+ <i data-feather="check" class="text-green-500 mr-2"></i>
213
+ <span data-en="Wax & Polish" data-ar="شمع وتلميع">شمع وتلميع</span>
214
+ </li>
215
+ <li class="flex items-center">
216
+ <i data-feather="check" class="text-green-500 mr-2"></i>
217
+ <span data-en="Leather Conditioning" data-ar="تلميع الجلد">تلميع الجلد</span>
218
+ </li>
219
+ </ul>
220
+ </div>
221
+ <div class="px-6 pb-8">
222
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium" data-en="Book Now" data-ar="احجز الآن">احجز الآن</button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- About Section -->
230
+ <section id="about" class="py-16 bg-white">
231
+ <div class="max-w-7xl mx-auto px-4">
232
+ <div class="flex flex-col md:flex-row items-center">
233
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
234
+ <img src="http://static.photos/automotive/640x360/4" alt="About Us" class="rounded-lg shadow-lg w-full">
235
+ </div>
236
+ <div class="md:w-1/2">
237
+ <h2 class="text-3xl font-bold mb-6" data-en="About Us" data-ar="من نحن">من نحن</h2>
238
+ <p class="text-gray-600 mb-4" data-en="Shine & Go is a premium car wash service dedicated to bringing back the shine to your vehicle with our professional team and eco-friendly products." data-ar="شاين آند جو هي خدمة غسيل سيارات مميزة مخصصة لإعادة البريق إلى سيارتك مع فريقنا المحترف ومنتجاتنا الصديقة للبيئة.">شاين آند جو هي خدمة غسيل سيارات مميزة مخصصة لإعادة البريق إلى سيارتك مع فريقنا المحترف ومنتجاتنا الصديقة للبيئة.</p>
239
+ <p class="text-gray-600 mb-6" data-en="Our mission is to provide exceptional car care services that exceed customer expectations while being environmentally responsible." data-ar="مهمتنا هي تقديم خدمات العناية بالسيارات الاستثنائية التي تتجاوز توقعات العملاء مع المسؤولية البيئية.">مهمتنا هي تقديم خدمات العناية بالسيارات الاستثنائية التي تتجاوز توقعات العملاء مع المسؤولية البيئية.</p>
240
+ <div class="grid grid-cols-2 gap-4">
241
+ <div class="flex items-center">
242
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
243
+ <i data-feather="shield" class="text-blue-600"></i>
244
+ </div>
245
+ <span class="font-medium" data-en="Quality Service" data-ar="خدمة عالية الجودة">خدمة عالية الجودة</span>
246
+ </div>
247
+ <div class="flex items-center">
248
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
249
+ <i data-feather="users" class="text-blue-600"></i>
250
+ </div>
251
+ <span class="font-medium" data-en="Professional Team" data-ar="فريق محترف">فريق محترف</span>
252
+ </div>
253
+ <div class="flex items-center">
254
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
255
+ <i data-feather="leaf" class="text-blue-600"></i>
256
+ </div>
257
+ <span class="font-medium" data-en="Eco-Friendly" data-ar="صديق للبيئة">صديق للبيئة</span>
258
+ </div>
259
+ <div class="flex items-center">
260
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
261
+ <i data-feather="clock" class="text-blue-600"></i>
262
+ </div>
263
+ <span class="font-medium" data-en="Quick Service" data-ar="خدمة سريعة">خدمة سريعة</span>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Contact Section -->
272
+ <section id="contact" class="py-16 bg-gray-50">
273
+ <div class="max-w-7xl mx-auto px-4">
274
+ <h2 class="text-3xl font-bold text-center mb-12" data-en="Contact Us" data-ar="تواصل معنا">تواصل معنا</h2>
275
+ <div class="flex flex-col md:flex-row gap-8">
276
+ <div class="md:w-1/2">
277
+ <div class="bg-white p-8 rounded-lg shadow-lg">
278
+ <h3 class="text-xl font-bold mb-6" data-en="Send us a message" data-ar="أرسل لنا رسالة">أرسل لنا رسالة</h3>
279
+ <form>
280
+ <div class="mb-4">
281
+ <label class="block text-gray-700 mb-2" data-en="Name" data-ar="الاسم">الاسم</label>
282
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
283
+ </div>
284
+ <div class="mb-4">
285
+ <label class="block text-gray-700 mb-2" data-en="Email" data-ar="البريد الإلكتروني">البريد الإلكتروني</label>
286
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
287
+ </div>
288
+ <div class="mb-4">
289
+ <label class="block text-gray-700 mb-2" data-en="Phone" data-ar="رقم الهاتف">رقم الهاتف</label>
290
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
291
+ </div>
292
+ <div class="mb-4">
293
+ <label class="block text-gray-700 mb-2" data-en="Message" data-ar="الرسالة">الرسالة</label>
294
+ <textarea rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea>
295
+ </div>
296
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium" data-en="Send Message" data-ar="إرسال الرسالة">إرسال الرسالة</button>
297
+ </form>
298
+ </div>
299
+ </div>
300
+ <div class="md:w-1/2">
301
+ <div class="bg-white p-8 rounded-lg shadow-lg h-full">
302
+ <h3 class="text-xl font-bold mb-6" data-en="Our Information" data-ar="معلوماتنا">معلوماتنا</h3>
303
+ <div class="space-y-6">
304
+ <div class="flex items-start">
305
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
306
+ <i data-feather="map-pin" class="text-blue-600"></i>
307
+ </div>
308
+ <div>
309
+ <h4 class="font-bold" data-en="Address" data-ar="العنوان">العنوان</h4>
310
+ <p class="text-gray-600" data-en="123 Car Wash St, Riyadh, Saudi Arabia" data-ar="123 شارع غسيل السيارات، الرياض، المملكة العربية السعودية">123 شارع غسيل السيارات، الرياض، المملكة العربية السعودية</p>
311
+ </div>
312
+ </div>
313
+ <div class="flex items-start">
314
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
315
+ <i data-feather="phone" class="text-blue-600"></i>
316
+ </div>
317
+ <div>
318
+ <h4 class="font-bold" data-en="Phone" data-ar="الهاتف">الهاتف</h4>
319
+ <p class="text-gray-600">+966 12 345 6789</p>
320
+ </div>
321
+ </div>
322
+ <div class="flex items-start">
323
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
324
+ <i data-feather="mail" class="text-blue-600"></i>
325
+ </div>
326
+ <div>
327
+ <h4 class="font-bold" data-en="Email" data-ar="البريد الإلكتروني">البريد الإلكتروني</h4>
328
+ <p class="text-gray-600">info@shineandgo.com</p>
329
+ </div>
330
+ </div>
331
+ <div class="flex items-start">
332
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
333
+ <i data-feather="clock" class="text-blue-600"></i>
334
+ </div>
335
+ <div>
336
+ <h4 class="font-bold" data-en="Working Hours" data-ar="ساعات العمل">ساعات العمل</h4>
337
+ <p class="text-gray-600" data-en="Daily from 8:00 AM to 10:00 PM" data-ar="يومياً من 8 صباحاً إلى 10 مساءً">يومياً من 8 صباحاً إلى 10 مساءً</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ <div class="mt-8">
342
+ <h4 class="font-bold mb-4" data-en="Follow Us" data-ar="تابعنا">تابعنا</h4>
343
+ <div class="flex space-x-4 space-x-reverse">
344
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">
345
+ <i data-feather="facebook"></i>
346
+ </a>
347
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">
348
+ <i data-feather="twitter"></i>
349
+ </a>
350
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">
351
+ <i data-feather="instagram"></i>
352
+ </a>
353
+ <a href="#" class="bg-blue-100 p-3 rounded-full text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">
354
+ <i data-feather="youtube"></i>
355
+ </a>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- Footer -->
365
+ <footer class="bg-gray-800 text-white py-12">
366
+ <div class="max-w-7xl mx-auto px-4">
367
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
368
+ <div>
369
+ <div class="flex items-center mb-4">
370
+ <i data-feather="droplet" class="text-blue-400 w-6 h-6"></i>
371
+ <span class="text-xl font-bold text-blue-400 mr-2">Shine & Go</span>
372
+ </div>
373
+ <p class="text-gray-400" data-en="Premium car wash services at your convenience" data-ar="خدمات غسيل سيارات مميزة براحتك">خدمات غسيل سيارات مميزة براحتك</p>
374
+ </div>
375
+ <div>
376
+ <h4 class="text-lg font-bold mb-4" data-en="Quick Links" data-ar="روابط سريعة">روابط سريعة</h4>
377
+ <ul class="space-y-2">
378
+ <li><a href="#home" class="text-gray-400 hover:text-blue-400 transition-colors nav-link" data-en="Home" data-ar="الرئيسية">الرئيسية</a></li>
379
+ <li><a href="#services" class="text-gray-400 hover:text-blue-400 transition-colors nav-link" data-en="Services" data-ar="خدماتنا">خدماتنا</a></li>
380
+ <li><a href="#pricing" class="text-gray-400 hover:text-blue-400 transition-colors nav-link" data-en="Pricing" data-ar="الأسعار">الأسعار</a></li>
381
+ <li><a href="#about" class="text-gray-400 hover:text-blue-400 transition-colors nav-link" data-en="About" data-ar="من نحن">من نحن</a></li>
382
+ </ul>
383
+ </div>
384
+ <div>
385
+ <h4 class="text-lg font-bold mb-4" data-en="Services" data-ar="الخدمات">الخدمات</h4>
386
+ <ul class="space-y-2">
387
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" data-en="Basic Wash" data-ar="غسيل أساسي">غسيل أساسي</a></li>
388
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" data-en="Premium Wash" data-ar="غسيل مميز">غسيل مميز</a></li>
389
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" data-en="Full Detailing" data-ar="تفصيل كامل">تفصيل كامل</a></li>
390
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" data-en="Interior Cleaning" data-ar="تنظيف داخلي">تنظيف داخلي</a></li>
391
+ </ul>
392
+ </div>
393
+ <div>
394
+ <h4 class="text-lg font-bold mb-4" data-en="Newsletter" data-ar="النشرة البريدية">النشرة البريدية</h4>
395
+ <p class="text-gray-400 mb-4" data-en="Subscribe to our newsletter for updates" data-ar="اشترك في نشرتنا البريدية للحصول على التحديثات">اشترك في نشرتنا البريدية للحصول على التحديثات</p>
396
+ <form class="flex">
397
+ <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
398
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg">
399
+ <i data-feather="send"></i>
400
+ </button>
401
+ </form>
402
+ </div>
403
+ </div>
404
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
405
+ <p class="text-gray-400 mb-4 md:mb-0" data-en="© 2023 Shine & Go. All rights reserved." data-ar="© 2023 شاين آند جو. جميع الحقوق محفوظة.">© 2023 شاين آند جو. جميع الحقوق محفوظة.</p>
406
+ <div class="flex space-x-6 space-x-reverse">
407
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" data-en="Privacy Policy" data-ar="سياسة الخصوصية">سياسة الخصوصية</a>
408
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors" data-en="Terms of Service" data-ar="شروط الخدمة">شروط الخدمة</a>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </footer>
413
+
414
+ <!-- Mobile Menu (hidden by default) -->
415
+ <div class="mobile-menu hidden fixed inset-0 bg-white z-50 p-4">
416
+ <div class="flex justify-end mb-8">
417
+ <button class="mobile-menu-close p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-blue-50">
418
+ <i data-feather="x"></i>
419
+ </button>
420
+ </div>
421
+ <nav class="flex flex-col space-y-4">
422
+ <a href="#home" class="nav-link px-4 py-3 rounded-md text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Home" data-ar="الرئيسية">الرئيسية</a>
423
+ <a href="#services" class="nav-link px-4 py-3 rounded-md text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Services" data-ar="خدماتنا">خدماتنا</a>
424
+ <a href="#pricing" class="nav-link px-4 py-3 rounded-md text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Pricing" data-ar="الأسعار">الأسعار</a>
425
+ <a href="#about" class="nav-link px-4 py-3 rounded-md text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="About" data-ar="من نحن">من نحن</a>
426
+ <a href="#contact" class="nav-link px-4 py-3 rounded-md text-lg font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50" data-en="Contact" data-ar="تواصل معنا">تواصل معنا</a>
427
+ <a href="booking.html" class="nav-link px-4 py-3 rounded-md text-lg font-medium text-blue-600 bg-blue-50" data-en="Book Now" data-ar="حجز خدمة">حجز خدمة</a>
428
+ </nav>
429
+ <div class="mt-8 flex justify-center">
430
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full shadow-lg font-medium" data-en="Book Now" data-ar="احجز الآن">احجز الآن</button>
431
+ </div>
432
+ </div>
433
+
434
+ <script>
435
+ // Initialize Vanta.js background
436
+ VANTA.WAVES({
437
+ el: "#vanta-bg",
438
+ mouseControls: true,
439
+ touchControls: true,
440
+ gyroControls: false,
441
+ minHeight: 200.00,
442
+ minWidth: 200.00,
443
+ scale: 1.00,
444
+ scaleMobile: 1.00,
445
+ color: 0x3b82f6,
446
+ shininess: 35.00,
447
+ waveHeight: 15.00,
448
+ waveSpeed: 0.80,
449
+ zoom: 0.85
450
+ });
451
+
452
+ // Language switching functionality
453
+ document.addEventListener('DOMContentLoaded', function() {
454
+ feather.replace();
455
+
456
+ let currentLang = 'ar';
457
+ const langSwitch = document.getElementById('langSwitch');
458
+
459
+ langSwitch.addEventListener('click', function() {
460
+ currentLang = currentLang === 'ar' ? 'en' : 'ar';
461
+
462
+ // Update button text
463
+ const buttonText = currentLang === 'ar' ? 'English' : 'العربية';
464
+ langSwitch.querySelector('span').textContent = buttonText;
465
+
466
+ // Update dir attribute
467
+ document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
468
+ document.documentElement.lang = currentLang;
469
+
470
+ // Update all elements with data attributes
471
+ document.querySelectorAll('[data-ar], [data-en]').forEach(el => {
472
+ el.textContent = el.getAttribute(`data-${currentLang}`);
473
+ });
474
+
475
+ // Update placeholder text in contact form if it exists
476
+ const emailInput = document.querySelector('input[type="email"][placeholder="Your Email"]');
477
+ if (emailInput) {
478
+ emailInput.placeholder = currentLang === 'ar' ? 'بريدك الإلكتروني' : 'Your Email';
479
+ }
480
+ });
481
+
482
+ // Mobile menu toggle
483
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
484
+ const mobileMenuClose = document.querySelector('.mobile-menu-close');
485
+ const mobileMenu = document.querySelector('.mobile-menu');
486
+
487
+ mobileMenuButton.addEventListener('click', function() {
488
+ mobileMenu.classList.remove('hidden');
489
+ document.body.style.overflow = 'hidden';
490
+ });
491
+
492
+ mobileMenuClose.addEventListener('click', function() {
493
+ mobileMenu.classList.add('hidden');
494
+ document.body.style.overflow = 'auto';
495
+ });
496
+
497
+ // Close mobile menu when clicking on a link
498
+ document.querySelectorAll('.mobile-menu a').forEach(link => {
499
+ link.addEventListener('click', function() {
500
+ mobileMenu.classList.add('hidden');
501
+ document.body.style.overflow = 'auto';
502
+ });
503
+ });
504
+ });
505
+ </script>
506
+ </body>
507
  </html>