Hugging Face's logo

Spaces:
0xlocalhost
/
l4luv40
Running

App Files Community
l4luv40
File size: 18,124 Bytes
296e4a0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MileTruck | النقل البري والخدمات اللوجستية للشركات في السعودية</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF', // Blue-700
                        'primary-dark': '#1E3A8A',
                        secondary: '#F59E0B', // Amber-500
                        'secondary-dark': '#D97706',
                        accent: '#10B981', // Emerald-500
                        dark: '#1F2937',
                        light: '#F9FAFB',
                    },
                    fontFamily: {
                        'arabic': ['IBM Plex Sans Arabic', 'sans-serif'],
                    },
                    backgroundImage: {
                        'hero-gradient': 'linear-gradient(135deg, #1E40AF 0%, #0C4A6E 100%)',
                        'stats-gradient': 'linear-gradient(to right, #10B981 0%, #3B82F6 100%)',
                    }
                }
            }
        }
    </script>
</head>
<body class="font-arabic text-dark bg-gray-50">
    <!-- Navbar Component -->
    <custom-navbar></custom-navbar>

    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-hero-gradient text-white">
        <div class="absolute inset-0 bg-black opacity-30"></div>
        <div class="absolute top-10 right-10 w-64 h-64 bg-primary rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
        <div class="absolute bottom-10 left-10 w-64 h-64 bg-secondary rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
        <div class="relative container mx-auto px-4 py-24 md:py-32">
            <div class="max-w-3xl">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                    الريادة في النقل البري، <span class="text-secondary">مُثبَتة بالأداء</span>
                </h1>
                <p class="text-xl md:text-2xl mb-10 text-gray-200">
                    شريكك الموثوق للتميز التشغيلي. نجمع بين التقنية المتقدمة والانضباط المؤسسي لنقدم تجربة نقل احترافية تمنحك التحكم الكامل والشفافية المطلقة.
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#services" class="bg-secondary hover:bg-secondary-dark text-white font-semibold py-3 px-8 rounded-lg shadow-lg transition duration-300 transform hover:-translate-y-1">
                        <i data-feather="truck" class="inline ml-2"></i> استعرض خدماتنا
                    </a>
                    <a href="/quote.html" class="bg-white hover:bg-gray-100 text-primary font-semibold py-3 px-8 rounded-lg shadow-lg transition duration-300">
                        <i data-feather="clipboard" class="inline ml-2"></i> اطلب عرض سعر
                    </a>
                </div>
            </div>
        </div>
        <!-- Scroll Indicator -->
        <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 animate-bounce">
            <i data-feather="chevron-down" class="text-white w-8 h-8"></i>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 text-dark">أرقامنا تتحدث عن ريادتنا</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-6">
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="150">0</div>
                    <div class="text-gray-600">عميل</div>
                    <i data-feather="users" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="50000">0</div>
                    <div class="text-gray-600">رحلات مكتملة</div>
                    <i data-feather="check-circle" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="1.5">0</div>
                    <div class="text-gray-600">مليون طن منقول</div>
                    <i data-feather="package" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="25">0</div>
                    <div class="text-gray-600">مليون كم تشغيل</div>
                    <i data-feather="map-pin" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="3.2">0</div>
                    <div class="text-gray-600">مليار ريال قيمة بضائع</div>
                    <i data-feather="dollar-sign" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="50">0</div>
                    <div class="text-gray-600">وجهة تشغيلية</div>
                    <i data-feather="target" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
                <div class="stat-card text-center p-6">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2 stat-counter" data-target="15">0</div>
                    <div class="text-gray-600">سنة خبرة</div>
                    <i data-feather="award" class="text-primary w-8 h-8 mx-auto mt-4"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits/Features Section -->
    <section id="services" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">لماذا تختار MileTruck؟</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">نوفر لك مزايا تنافسية تضمن كفاءة عملياتك اللوجستية</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                    <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="monitor" class="text-primary w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">منصة مؤسسية موحدة</h3>
                    <p class="text-gray-600">إدارة جميع عمليات النقل بكفاءة ووضوح من خلال منصة رقمية متكاملة.</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                    <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="shield" class="text-primary w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">موثوقية مثبتة بالأداء</h3>
                    <p class="text-gray-600">أداء تشغيلي منضبط يلتزم بأعلى المعايير لضمان استمرارية أعمالك.</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                    <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="eye" class="text-primary w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">شفافية كاملة</h3>
                    <p class="text-gray-600">وضوح تام في العقود، التسعير، والفوترة الإلكترونية الآلية.</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                    <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="headphones" class="text-primary w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">دعم متكامل</h3>
                    <p class="text-gray-600">فريق متخصص لدعم عملياتك وتعزيز كفاءة التشغيل والاستجابة الفورية.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Fleet Showcase -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">أسطولنا المتنوع مصمم لكل حمولة</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">المركبة المناسبة لكل متطلب، من التوصيل في الميل الأخير إلى النقل الثقيل عبر دول مجلس التعاون الخليجي.</p>
            </div>
            
            <!-- Fleet Navigation -->
            <div class="flex justify-center mb-8 overflow-x-auto pb-2">
                <div class="flex space-x-2 space-x-reverse">
                    <button class="fleet-category-btn active px-4 py-2 rounded-lg bg-primary text-white" data-category="all">الكل</button>
                    <button class="fleet-category-btn px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200" data-category="traila">تريلا</button>
                    <button class="fleet-category-btn px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200" data-category="six">سقس</button>
                    <button class="fleet-category-btn px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200" data-category="lorry">لوري</button>
                    <button class="fleet-category-btn px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200" data-category="dyna">دينا</button>
                    <button class="fleet-category-btn px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200" data-category="pickup">بكب</button>
                </div>
            </div>

            <!-- Fleet Grid -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 fleet-container">
                <!-- Fleet items will be loaded by JavaScript -->
            </div>
        </div>
    </section>

    <!-- Integrated Solutions -->
    <section class="py-16 bg-gradient-to-r from-primary to-primary-dark text-white">
        <div class="container mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl font-bold mb-6">حلول متكاملة لدعم نمو أعمالك</h2>
                    <p class="text-lg mb-8 opacity-90">نوفر مجموعة شاملة من حلول النقل واللوجستيات المصممة لتمكين الشركات من إدارة عملياتها بكفاءة وشفافية.</p>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <i data-feather="check-circle" class="text-secondary mr-3"></i>
                            <span>عقود النقل طويلة الأمد</span>
                        </div>
                        <div class="flex items-center">
                            <i data-feather="check-circle" class="text-secondary mr-3"></i>
                            <span>تأجير الشاحنات اليومي والشهري</span>
                        </div>
                        <div class="flex items-center">
                            <i data-feather="check-circle" class="text-secondary mr-3"></i>
                            <span>النقل من وإلى الموانئ ونقل الحاويات</span>
                        </div>
                        <div class="flex items-center">
                            <i data-feather="check-circle" class="text-secondary mr-3"></i>
                            <span>الربط التقني مع أنظمة الشركات (ERP/SAP)</span>
                        </div>
                        <div class="flex items-center">
                            <i data-feather="check-circle" class="text-secondary mr-3"></i>
                            <span>النقل البري عبر الحدود</span>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <img src="http://static.photos/technology/640x360/1" alt="حلول النقل الذكية" class="rounded-2xl shadow-2xl">
                    <div class="absolute -bottom-6 -right-6 bg-white text-dark p-6 rounded-2xl shadow-xl max-w-xs">
                        <i data-feather="map" class="text-primary w-8 h-8 mb-3"></i>
                        <h4 class="font-bold mb-2">تتبع حي لحظة بلحظة</h4>
                        <p class="text-sm text-gray-600">تابع شحنتك على الخريطة في الوقت الفعلي</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Clients/Partners -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">عملاؤنا الذين نعتز بهم</h2>
                <p class="text-gray-600">نفخر بشراكتنا مع أبرز الشركات الوطنية والعالمية</p>
            </div>
            <div class="relative">
                <div class="overflow-hidden">
                    <div class="flex animate-partner-scroll">
                        <!-- Partner logos will be duplicated by JavaScript -->
                        <div class="partner-logos-container flex space-x-8 space-x-reverse">
                            <!-- Logos will be inserted here by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="bg-gradient-to-r from-primary to-secondary rounded-3xl p-8 md:p-12 text-white shadow-2xl">
                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <h2 class="text-3xl font-bold mb-4">حمّل تطبيق MileTruck الآن</h2>
                        <p class="text-lg mb-6 opacity-90">كل ما تحتاجه لإدارة النقل في منصة واحدة. تتبع شحناتك، إدارة الفواتير، وحجز الرحلات بنقرة واحدة.</p>
                        <div class="flex flex-wrap gap-4">
                            <a href="#" class="bg-white text-primary hover:bg-gray-100 font-semibold py-3 px-6 rounded-lg flex items-center">
                                <i data-feather="download" class="ml-2"></i>
                                تحميل للتطبيق
                            </a>
                            <a href="#" class="border-2 border-white hover:bg-white hover:text-primary font-semibold py-3 px-6 rounded-lg">
                                <i data-feather="globe" class="inline ml-2"></i>
                                الدخول للويب
                            </a>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <div class="relative">
                            <img src="http://static.photos/black/320x240/1" alt="رمز QR" class="rounded-2xl border-4 border-white shadow-2xl">
                            <div class="absolute -bottom-4 -right-4 bg-white text-dark p-3 rounded-xl shadow-lg">
                                <i data-feather="maximize" class="text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Component -->
    <custom-footer></custom-footer>

    <!-- Component Scripts -->
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    
    <!-- Main Script -->
    <script src="script.js"></script>
    
    <!-- Feather Icons & Initialization -->
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>