# تحليل واجهات المستخدم (UI/UX) لمشروع MileTruck

تم تحليل مجموعة من واجهات المستخدم (UI/UX) المقترحة لمشروع MileTruck، والتي تغطي واجهة الويب للعملاء (المصانع والشركات) وتطبيق الجوال للسائقين. يعكس هذا التحليل الوظائف والميزات الرئيسية التي تم تصميم النظام لتقديمها.

## 1. واجهة الويب للعميل (Shipper/Factory Web Interface)

تظهر واجهة الويب تركيزًا على إدارة الطلبات والملف الشخصي للعميل، مما يدعم نموذج العمل B2B للشركات التي تحتاج إلى إدارة عمليات نقل متكررة.

| الواجهة | الميزات المستخلصة | التركيز الوظيفي |
| :--- | :--- | :--- |
| **صفحة العميل ويب - الملف الشخصي** | - عرض تفاصيل الملف الشخصي للعميل (الاسم، جهات الاتصال). - إمكانية تعديل البيانات الشخصية. - قسم مخصص للوثائق (قد يشمل السجل التجاري، التراخيص). | إدارة الحساب والامتثال القانوني. |
| **صفحة العميل ويب - طلباتي** | - قائمة شاملة بجميع الطلبات السابقة والحالية. - عرض حالة كل طلب (قيد التنفيذ، مكتمل، ملغي). - إمكانية البحث والتصفية حسب الحالة أو التاريخ. | تتبع شامل للعمليات اللوجستية وإمكانية الرجوع إلى السجل. |
| **صفحة العميل ويب - تفاصيل الطلب** | - عرض مفصل لبيانات الرحلة (نقاط التحميل والتسليم). - تفاصيل الشاحنة والسائق المخصص للرحلة. - عرض حالة التتبع في الوقت الفعلي. - تفاصيل الفواتير والدفع. | شفافية كاملة في تنفيذ الرحلة وإدارة الفواتير. |
| **صفحة العميل ويب - إنشاء طلب جديد** | - واجهة سهلة لإنشاء طلب جديد خطوة بخطوة. - تحديد نوع الحمولة، نوع الشاحنة المطلوبة. - إدخال مواقع التحميل والتسليم (مع إمكانية تحديد أكثر من موقع). | سهولة الاستخدام وسرعة إدخال البيانات لطلب الشاحنة. |
| **صفحة العميل ويب - الصفحة الرئيسية** | - لوحة تحكم تلخيصية (Dashboard) تعرض أهم الإحصائيات (عدد الطلبات النشطة، المكتملة). - وصول سريع لأهم الوظائف (إنشاء طلب جديد، طلباتي). | نظرة عامة سريعة على حالة العمليات اللوجستية. |

## 2. تطبيق الجوال للسائق (Driver Mobile Application)

تظهر واجهة السائق تركيزًا على تسهيل العمليات الميدانية، وتوفير الشفافية في الرحلات، وضمان الامتثال.

| الواجهة | الميزات المستخلصة | التركيز الوظيفي |
| :--- | :--- | :--- |
| **الصفحة الرئيسية للسائقين (اتصال/عدم اتصال)** | - زر واضح لتغيير حالة السائق (Online/Offline) للدلالة على الاستعداد لاستقبال الرحلات. - عرض ملخص للرحلات القادمة أو الحالية. | إدارة توافر السائق وزيادة فرص الحصول على رحلات. |
| **صفحة السائق - الوثائق** | - عرض قائمة بالوثائق المطلوبة (رخصة القيادة، استمارة الشاحنة، التأمين). - نظام تنبيهات لتجديد الوثائق المنتهية (ميزة تنافسية مهمة). | ضمان الامتثال القانوني للسائقين وتسهيل عملية التحقق. |
| **صفحة السائق - الملف الشخصي** | - عرض تقييم السائق (مهم لنظام المكافآت). - عرض تفاصيل الشاحنة المربوطة بالحساب. - إمكانية تعديل البيانات الشخصية. | بناء الثقة والاحترافية بين السائق والمنصة. |
| **صفحة السائق - تنبيهات** | - إشعارات فورية بالرحلات الجديدة. - تنبيهات الصيانة والتجديدات. - إشعارات مهمة من الإدارة. | تواصل فعال ومباشر مع السائق لضمان استمرارية العمل. |
| **صفحة السائق - تفاصيل الرحلة** | - عرض مسار الرحلة على الخريطة. - تفاصيل الحمولة ونقاط التحميل والتسليم. - إمكانية بدء وإنهاء الرحلة (Start/End Trip). | توجيه دقيق للسائق وتوثيق مراحل تنفيذ الرحلة. |
| **صفحة السائق - طلباتي** | - سجل كامل للرحلات المكتملة والملغاة. - تفاصيل الأرباح والعمولات المستحقة من كل رحلة. | شفافية مالية للسائق وإمكانية تتبع الأداء. |

## 3. واجهات الدخول والدعم (Login and Support Interfaces)

* **صفحات تسجيل الدخول (للشركات والسائقين):** واجهات مخصصة لكل فئة مستخدم (شركات/سائقين) مما يؤكد على الفصل بين أنواع الحسابات وتخصيص التجربة.
* **صفحة الترحيب:** واجهة بسيطة وموجهة للمستخدم الجديد، مما يشير إلى سهولة عملية الإعداد (Onboarding).
* **صفحة الدعم الفني:** توفير قناة دعم مباشرة، مما يعزز الموثوقية ويقلل من الاحتكاك في حل المشكلات.
* **لوحة التحكم في الجوال للشركات:** وجود لوحة تحكم مصغرة للشركات على الجوال يشير إلى إمكانية إدارة الأسطول والطلبات أثناء التنقل، وهي ميزة حيوية لمديري العمليات.

## 4. استنتاج تحليل الـ UI/UX

يعكس التصميم المقترح لمشروع MileTruck تركيزًا قويًا على:
1. **الفصل بين المستخدمين:** تم تصميم واجهات مخصصة للعملاء (الشركات) والسائقين، مما يضمن تلبية احتياجات كل طرف بدقة.
2. **الشفافية والتتبع:** الميزات المتعلقة بتفاصيل الطلبات، تتبع الرحلات، وعرض الوثائق والتنبيهات، تؤكد على التزام المنصة بالشفافية والموثوقية.
3. **إدارة الأسطول:** وجود ميزات مثل إدارة الوثائق والتنبيهات في واجهة السائق، ولوحة التحكم في واجهة العميل، يدعم القيمة المضافة الأساسية للمشروع وهي **إدارة الأسطول الذكية**.

هذا التصميم المقترح يدعم بشكل كبير الميزات التنافسية التي تم تحديدها في تحليل المنافسين، خاصة فيما يتعلق بتوفير نظام متكامل لإدارة العمليات اللوجستية.

README.md

@@ -1,10 +1,13 @@
 ---
-title: L4luv40
-emoji: 📉
-colorFrom: purple
-colorTo: indigo
+title: ---------------------l4luv40
+colorFrom: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,298 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        
+        .footer {
+          background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
+          color: white;
+        }
+        
+        .footer-link {
+          color: #D1D5DB;
+          transition: color 0.3s ease;
+          display: block;
+          padding: 0.25rem 0;
+        }
+        
+        .footer-link:hover {
+          color: #F59E0B;
+          transform: translateX(-4px);
+        }
+        
+        .social-icon {
+          width: 40px;
+          height: 40px;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+        }
+        
+        .social-icon:hover {
+          background: #F59E0B;
+          transform: translateY(-3px);
+        }
+        
+        .newsletter-input {
+          background: rgba(255, 255, 255, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          color: white;
+          padding: 0.75rem 1rem;
+          border-radius: 0.5rem;
+          width: 100%;
+          transition: all 0.3s ease;
+        }
+        
+        .newsletter-input:focus {
+          outline: none;
+          border-color: #F59E0B;
+          background: rgba(255, 255, 255, 0.15);
+        }
+        
+        .newsletter-input::placeholder {
+          color: #9CA3AF;
+        }
+        
+        .payment-method {
+          height: 40px;
+          background: white;
+          border-radius: 0.5rem;
+          padding: 0.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        .back-to-top {
+          background: #F59E0B;
+          color: white;
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: fixed;
+          bottom: 2rem;
+          left: 2rem;
+          cursor: pointer;
+          opacity: 0;
+          transform: translateY(20px);
+          transition: all 0.3s ease;
+          z-index: 40;
+        }
+        
+        .back-to-top.visible {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        
+        .back-to-top:hover {
+          background: #D97706;
+          transform: translateY(-3px);
+        }
+        
+        .copyright {
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          padding: 1.5rem 0;
+          color: #9CA3AF;
+        }
+      </style>
+      
+      <!-- Back to Top Button -->
+      <div class="back-to-top" id="backToTop">
+        <i data-feather="arrow-up" class="w-5 h-5"></i>
+      </div>
+      
+      <!-- Footer Content -->
+      <footer class="footer pt-16 pb-8">
+        <div class="container mx-auto px-4">
+          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+            <!-- Company Info -->
+            <div>
+              <div class="flex items-center space-x-3 space-x-reverse mb-6">
+                <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
+                  <i data-feather="truck" class="text-white w-6 h-6"></i>
+                </div>
+                <div>
+                  <div class="text-xl font-bold">MileTruck</div>
+                  <div class="text-sm text-gray-400">النقل البري الذكي</div>
+                </div>
+              </div>
+              <p class="text-gray-300 mb-6">
+                شريكك الموثوق للتميز التشغيلي في النقل البري والخدمات اللوجستية في المملكة العربية السعودية ودول الخليج.
+              </p>
+              <div class="flex space-x-4 space-x-reverse">
+                <a href="#" class="social-icon">
+                  <i data-feather="twitter" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="social-icon">
+                  <i data-feather="facebook" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="social-icon">
+                  <i data-feather="linkedin" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="social-icon">
+                  <i data-feather="instagram" class="w-5 h-5"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- Quick Links -->
+            <div>
+              <h3 class="text-lg font-semibold mb-6">روابط سريعة</h3>
+              <div class="space-y-2">
+                <a href="/" class="footer-link">الرئيسية</a>
+                <a href="#services" class="footer-link">خدماتنا</a>
+                <a href="/fleet.html" class="footer-link">أسطولنا</a>
+                <a href="/solutions.html" class="footer-link">حلول متكاملة</a>
+                <a href="/about.html" class="footer-link">عنّا</a>
+                <a href="/contact.html" class="footer-link">اتصل بنا</a>
+              </div>
+            </div>
+            
+            <!-- Services -->
+            <div>
+              <h3 class="text-lg font-semibold mb-6">خدماتنا</h3>
+              <div class="space-y-2">
+                <a href="/services/long-term.html" class="footer-link">عقود النقل طويلة الأمد</a>
+                <a href="/services/daily-rental.html" class="footer-link">تأجير الشاحنات اليومي</a>
+                <a href="/services/port-transport.html" class="footer-link">النقل من وإلى الموانئ</a>
+                <a href="/services/cross-border.html" class="footer-link">النقل البري عبر الحدود</a>
+                <a href="/services/container.html" class="footer-link">نقل الحاويات</a>
+                <a href="/services/erp-integration.html" class="footer-link">الربط التقني مع ERP</a>
+              </div>
+            </div>
+            
+            <!-- Newsletter -->
+            <div>
+              <h3 class="text-lg font-semibold mb-6">النشرة البريدية</h3>
+              <p class="text-gray-300 mb-4">
+                اشترك في نشرتنا البريدية لتبقى على اطلاع بأحدث العروض والأخبار.
+              </p>
+              <form id="newsletterForm" class="space-y-3">
+                <input type="email" placeholder="بريدك الإلكتروني" class="newsletter-input" required>
+                <button type="submit" class="bg-secondary hover:bg-secondary-dark text-white font-semibold py-3 px-6 rounded-lg w-full transition-colors duration-300">
+                  <i data-feather="send" class="ml-2 inline"></i>
+                  اشتراك
+                </button>
+              </form>
+            </div>
+          </div>
+          
+          <!-- Contact Info -->
+          <div class="grid md:grid-cols-3 gap-6 mb-8 p-6 bg-gray-800 rounded-xl">
+            <div class="flex items-center space-x-4 space-x-reverse">
+              <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i data-feather="phone" class="text-primary w-5 h-5"></i>
+              </div>
+              <div>
+                <div class="text-sm text-gray-400">اتصل بنا</div>
+                <div class="font-semibold">9200 000 00</div>
+              </div>
+            </div>
+            <div class="flex items-center space-x-4 space-x-reverse">
+              <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i data-feather="mail" class="text-primary w-5 h-5"></i>
+              </div>
+              <div>
+                <div class="text-sm text-gray-400">البريد الإلكتروني</div>
+                <div class="font-semibold">info@miletruck.com</div>
+              </div>
+            </div>
+            <div class="flex items-center space-x-4 space-x-reverse">
+              <div class="w-12 h-12 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center">
+                <i data-feather="map-pin" class="text-primary w-5 h-5"></i>
+              </div>
+              <div>
+                <div class="text-sm text-gray-400">العنوان</div>
+                <div class="font-semibold">الرياض، المملكة العربية السعودية</div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Payment Methods -->
+          <div class="flex flex-wrap gap-4 items-center justify-center mb-8">
+            <div class="text-gray-400">طرق الدفع المتاحة:</div>
+            <div class="payment-method">
+              <i data-feather="credit-card" class="text-gray-700 w-6 h-6"></i>
+            </div>
+            <div class="payment-method">
+              <span class="text-gray-700 font-semibold">MADA</span>
+            </div>
+            <div class="payment-method">
+              <span class="text-gray-700 font-semibold">Apple Pay</span>
+            </div>
+            <div class="payment-method">
+              <i data-feather="smartphone" class="text-gray-700 w-6 h-6"></i>
+            </div>
+          </div>
+          
+          <!-- Copyright -->
+          <div class="copyright text-center">
+            <div class="mb-2">© 2024 MileTruck. جميع الحقوق محفوظة</div>
+            <div class="text-sm space-x-6 space-x-reverse">
+              <a href="/privacy.html" class="text-gray-400 hover:text-white transition-colors">سياسة الخصوصية</a>
+              <a href="/terms.html" class="text-gray-400 hover:text-white transition-colors">الشروط والأحكام</a>
+              <a href="/sitemap.html" class="text-gray-400 hover:text-white transition-colors">خريطة الموقع</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+    
+    this.initializeEventListeners();
+  }
+  
+  initializeEventListeners() {
+    // Back to top button
+    const backToTop = this.shadowRoot.getElementById('backToTop');
+    
+    window.addEventListener('scroll', () => {
+      if (window.pageYOffset > 300) {
+        backToTop.classList.add('visible');
+      } else {
+        backToTop.classList.remove('visible');
+      }
+    });
+    
+    backToTop.addEventListener('click', () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    });
+    
+    // Newsletter form
+    const newsletterForm = this.shadowRoot.getElementById('newsletterForm');
+    if (newsletterForm) {
+      newsletterForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const email = newsletterForm.querySelector('input[type="email"]').value;
+        
+        // In a real app, you would send this to your newsletter service
+        console.log('Newsletter subscription:', email);
+        alert('شكراً لاشتراكك! ستصلك أحدث عروضنا قريباً.');
+        newsletterForm.reset();
+      });
+    }
+    
+    // Initialize feather icons in shadow DOM
+    setTimeout(() => {
+      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
+      if (typeof feather !== 'undefined') {
+        feather.replace({}, this.shadowRoot);
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,234 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          z-index: 50;
+          position: relative;
+        }
+        
+        .navbar {
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(30, 64, 175, 0.1);
+          transition: all 0.3s ease;
+        }
+        
+        .navbar.scrolled {
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+        
+        .nav-link {
+          position: relative;
+          padding: 0.5rem 1rem;
+          color: #4B5563;
+          transition: color 0.3s ease;
+          font-weight: 500;
+        }
+        
+        .nav-link:hover {
+          color: #1E40AF;
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          right: 1rem;
+          left: 1rem;
+          height: 2px;
+          background: #1E40AF;
+          transform: scaleX(0);
+          transition: transform 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          transform: scaleX(1);
+        }
+        
+        .mobile-menu {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.5s ease-out;
+        }
+        
+        .mobile-menu.open {
+          max-height: 500px;
+        }
+        
+        .language-switcher {
+          border: 1px solid #E5E7EB;
+          border-radius: 0.5rem;
+          padding: 0.25rem;
+        }
+        
+        .language-option {
+          padding: 0.25rem 0.75rem;
+          border-radius: 0.375rem;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        
+        .language-option.active {
+          background: #1E40AF;
+          color: white;
+        }
+        
+        .language-option:not(.active):hover {
+          background: #F3F4F6;
+        }
+        
+        @media (max-width: 768px) {
+          .desktop-menu {
+            display: none;
+          }
+          
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+        
+        @media (min-width: 769px) {
+          .mobile-menu-btn {
+            display: none;
+          }
+          
+          .mobile-menu {
+            display: none;
+          }
+        }
+      </style>
+      
+      <nav class="navbar fixed top-0 left-0 right-0 py-4">
+        <div class="container mx-auto px-4">
+          <div class="flex justify-between items-center">
+            <!-- Logo -->
+            <a href="/" class="flex items-center space-x-3 space-x-reverse">
+              <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+                <i data-feather="truck" class="text-white w-6 h-6"></i>
+              </div>
+              <div>
+                <div class="text-xl font-bold text-primary">MileTruck</div>
+                <div class="text-xs text-gray-500">شحن بري ذكي</div>
+              </div>
+            </a>
+            
+            <!-- Desktop Menu -->
+            <div class="desktop-menu flex items-center space-x-2 space-x-reverse">
+              <a href="/" class="nav-link">الرئيسية</a>
+              <a href="#services" class="nav-link">خدماتنا</a>
+              <a href="/fleet.html" class="nav-link">أسطولنا</a>
+              <a href="/solutions.html" class="nav-link">حلول متكاملة</a>
+              <a href="/about.html" class="nav-link">عنّا</a>
+              <a href="/contact.html" class="nav-link">اتصل بنا</a>
+              
+              <!-- Language Switcher -->
+              <div class="language-switcher flex mr-4">
+                <div class="language-option active" data-lang="ar">العربية</div>
+                <div class="language-option" data-lang="en">English</div>
+              </div>
+              
+              <!-- CTA Buttons -->
+              <div class="flex items-center space-x-3 space-x-reverse">
+                <a href="/login.html" class="text-primary hover:text-primary-dark font-medium">
+                  <i data-feather="log-in" class="ml-1 w-4 h-4 inline"></i>
+                  تسجيل الدخول
+                </a>
+                <a href="/quote.html" class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 hover-lift">
+                  <i data-feather="clipboard" class="ml-2"></i>
+                  طلب عرض سعر
+                </a>
+              </div>
+            </div>
+            
+            <!-- Mobile Menu Button -->
+            <button class="mobile-menu-btn p-2 rounded-lg hover:bg-gray-100">
+              <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
+            </button>
+          </div>
+          
+          <!-- Mobile Menu -->
+          <div class="mobile-menu mt-4">
+            <div class="space-y-2 py-4 border-t">
+              <a href="/" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">الرئيسية</a>
+              <a href="#services" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">خدماتنا</a>
+              <a href="/fleet.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">أسطولنا</a>
+              <a href="/solutions.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">حلول متكاملة</a>
+              <a href="/about.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">عنّا</a>
+              <a href="/contact.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">اتصل بنا</a>
+              
+              <div class="pt-4 border-t">
+                <a href="/login.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">
+                  <i data-feather="log-in" class="ml-2 w-4 h-4 inline"></i>
+                  تسجيل الدخول
+                </a>
+                <a href="/quote.html" class="block py-2 px-4 bg-primary text-white rounded-lg mt-2 text-center">
+                  <i data-feather="clipboard" class="ml-2"></i>
+                  طلب عرض سعر
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    `;
+    
+    this.initializeEventListeners();
+  }
+  
+  initializeEventListeners() {
+    // Mobile menu toggle
+    const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+    const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
+    
+    mobileMenuBtn.addEventListener('click', () => {
+      mobileMenu.classList.toggle('open');
+    });
+    
+    // Language switcher
+    const langOptions = this.shadowRoot.querySelectorAll('.language-option');
+    langOptions.forEach(option => {
+      option.addEventListener('click', () => {
+        langOptions.forEach(opt => opt.classList.remove('active'));
+        option.classList.add('active');
+        // In a real app, you would change the language here
+      });
+    });
+    
+    // Navbar scroll effect
+    let lastScrollTop = 0;
+    window.addEventListener('scroll', () => {
+      const navbar = this.shadowRoot.querySelector('.navbar');
+      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      
+      if (currentScrollTop > 50) {
+        navbar.classList.add('scrolled');
+      } else {
+        navbar.classList.remove('scrolled');
+      }
+      
+      lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
+    });
+    
+    // Close mobile menu when clicking on a link
+    const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-menu a');
+    mobileLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        mobileMenu.classList.remove('open');
+      });
+    });
+    
+    // Initialize feather icons in shadow DOM
+    setTimeout(() => {
+      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
+      if (typeof feather !== 'undefined') {
+        feather.replace({}, this.shadowRoot);
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,294 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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>

script.js

@@ -0,0 +1,308 @@
+// Main JavaScript for MileTruck Project
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize components
+    initializeStatsCounter();
+    initializeFleetGallery();
+    initializePartnerLogos();
+    initializeFleetNavigation();
+    
+    // Add smooth scroll to anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                window.scrollTo({
+                    top: targetElement.offsetTop - 80,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+});
+
+// Stats Counter Animation
+function initializeStatsCounter() {
+    const statElements = document.querySelectorAll('.stat-counter');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const element = entry.target;
+                const target = parseFloat(element.getAttribute('data-target'));
+                const suffix = element.textContent.includes('مليون') ? ' مليون' : 
+                             element.textContent.includes('مليار') ? ' مليار' : 
+                             element.textContent.includes(' ألف') ? ' ألف' : '';
+                
+                let start = 0;
+                const duration = 2000; // 2 seconds
+                const increment = target / (duration / 16); // 60fps
+                
+                const timer = setInterval(() => {
+                    start += increment;
+                    if (start >= target) {
+                        element.textContent = formatNumber(target) + suffix;
+                        clearInterval(timer);
+                    } else {
+                        element.textContent = formatNumber(Math.floor(start)) + suffix;
+                    }
+                }, 16);
+                
+                observer.unobserve(element);
+            }
+        });
+    }, { threshold: 0.5 });
+    
+    statElements.forEach(el => observer.observe(el));
+}
+
+function formatNumber(num) {
+    if (num >= 1000000) {
+        return (num / 1000000).toFixed(1).replace('.0', '');
+    }
+    return num.toLocaleString('en-US');
+}
+
+// Fleet Gallery Initialization
+function initializeFleetGallery() {
+    const fleetData = [
+        {
+            category: 'traila',
+            type: 'تريلا',
+            name: 'تريلا سطحة محورين',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/traila/flatbed-trailer-2axles.webp',
+            length: 'طول المقطورة حتى 13.5 متر',
+            capacity: 'حمولة قصوى 25 طن'
+        },
+        {
+            category: 'traila',
+            type: 'تريلا',
+            name: 'تريلا سطحة ثلاث محاور',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/traila/flatbed-trailer-3axles.webp',
+            length: 'طول المقطورة حتى 13.5 متر',
+            capacity: 'حمولة قصوى 30 طن'
+        },
+        {
+            category: 'traila',
+            type: 'تريلا',
+            name: 'تريلا ستارة',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/traila/curtain-trailer.webp',
+            length: 'طول المقطورة حتى 13.5 متر',
+            capacity: 'حمولة قصوى 25 طن'
+        },
+        {
+            category: 'traila',
+            type: 'تريلا',
+            name: 'تريلا جوانب عالية',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/traila/high-sided-trailer.webp',
+            length: 'طول المقطورة حتى 15 متر',
+            capacity: 'حمولة قصوى 20 طن'
+        },
+        {
+            category: 'six',
+            type: 'سقس',
+            name: 'سقس جوانب عالية',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/six/sax-high-sided.webp',
+            length: 'الطول حتى 8 متر',
+            capacity: 'حمولة قصوى 13 طن'
+        },
+        {
+            category: 'six',
+            type: 'سقس',
+            name: 'سقس ثلاجة',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/six/sax-refrigerated.webp',
+            length: 'الطول حتى 8 متر',
+            capacity: 'حمولة قصوى 10 طن'
+        },
+        {
+            category: 'lorry',
+            type: 'لوري',
+            name: 'لوري شبك',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/lorry/Lorry-Cage-Truck-7M.webp',
+            length: 'الطول حتى 7.5 متر',
+            capacity: 'حمولة قصوى 8 طن'
+        },
+        {
+            category: 'lorry',
+            type: 'لوري',
+            name: 'لوري جاف (مغلق)',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/lorry/closed-lorry.webp',
+            length: 'الطول حتى 6.5 متر',
+            capacity: 'حمولة قصوى 6 طن'
+        },
+        {
+            category: 'dyna',
+            type: 'دينا',
+            name: 'دينا شبك',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/dyna/open-dyna.webp',
+            length: 'الطول حتى 6 متر',
+            capacity: 'حمولة قصوى 4 طن'
+        },
+        {
+            category: 'pickup',
+            type: 'بكب',
+            name: 'بكب',
+            image: 'https://www.shahen-sa.com/assets/images/home/truck-images/pickup/Pickup-Truck.webp',
+            length: 'الطول حتى 5 متر',
+            capacity: 'حمولة قصوى 2 طن'
+        }
+    ];
+
+    const container = document.querySelector('.fleet-container');
+    
+    function renderFleetItems(filter = 'all') {
+        container.innerHTML = '';
+        
+        const filteredFleet = filter === 'all' 
+            ? fleetData 
+            : fleetData.filter(item => item.category === filter);
+        
+        filteredFleet.forEach((item, index) => {
+            const fleetCard = document.createElement('div');
+            fleetCard.className = `fleet-card bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300`;
+            fleetCard.style.animationDelay = `${index * 100}ms`;
+            
+            fleetCard.innerHTML = `
+                <div class="relative h-48 overflow-hidden">
+                    <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
+                    <div class="absolute top-3 right-3 bg-primary text-white px-3 py-1 rounded-full text-sm">
+                        ${item.type}
+                    </div>
+                </div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold mb-2 text-dark">${item.name}</h3>
+                    <div class="space-y-2 text-gray-600">
+                        <div class="flex items-center">
+                            <i data-feather="maximize" class="w-4 h-4 ml-2"></i>
+                            <span>${item.length}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i data-feather="package" class="w-4 h-4 ml-2"></i>
+                            <span>${item.capacity}</span>
+                        </div>
+                    </div>
+                    <button class="mt-4 w-full bg-gray-100 hover:bg-primary hover:text-white text-primary font-medium py-2 rounded-lg transition-colors duration-300 flex items-center justify-center">
+                        <i data-feather="shopping-cart" class="ml-2"></i>
+                        طلب هذه المركبة
+                    </button>
+                </div>
+            `;
+            
+            container.appendChild(fleetCard);
+        });
+        
+        // Re-initialize feather icons for new elements
+        feather.replace();
+    }
+    
+    window.renderFleetItems = renderFleetItems;
+    renderFleetItems(); // Initial render
+}
+
+// Fleet Navigation
+function initializeFleetNavigation() {
+    const categoryButtons = document.querySelectorAll('.fleet-category-btn');
+    
+    categoryButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Remove active class from all buttons
+            categoryButtons.forEach(btn => {
+                btn.classList.remove('active', 'bg-primary', 'text-white');
+                btn.classList.add('bg-gray-100', 'hover:bg-gray-200');
+            });
+            
+            // Add active class to clicked button
+            this.classList.add('active', 'bg-primary', 'text-white');
+            this.classList.remove('bg-gray-100', 'hover:bg-gray-200');
+            
+            // Filter fleet items
+            const category = this.getAttribute('data-category');
+            renderFleetItems(category);
+        });
+    });
+}
+
+// Partner Logos
+function initializePartnerLogos() {
+    const partnerLogos = [
+        'Partner (1).png', 'Partner (2).png', 'Partner (3).png', 'Partner (4).png',
+        'Partner (5).png', 'Partner (6).png', 'Partner (7).png', 'Partner (8).png',
+        'Partner (9).png', 'Partner (10).png', 'Partner (11).png', 'Partner (12).png',
+        'Partner (13).png', 'Partner (14).png', 'Partner (15).png', 'Partner (16).png',
+        'Partner (17).png', 'Partner (18).png', 'Partner (19).png', 'Partner (20).png'
+    ];
+    
+    const baseUrl = 'https://www.shahen-sa.com/assets/images/home/partnerlogos/';
+    const container = document.querySelector('.partner-logos-container');
+    
+    // Create double set for seamless scrolling
+    for (let i = 0; i < 2; i++) {
+        partnerLogos.forEach(logo => {
+            const logoDiv = document.createElement('div');
+            logoDiv.className = 'partner-logo';
+            logoDiv.innerHTML = `
+                <img src="${baseUrl}${logo}" alt="شريك" class="max-w-full max-h-full object-contain">
+            `;
+            container.appendChild(logoDiv);
+        });
+    }
+}
+
+// Form handling for quote request
+function handleQuoteRequest(e) {
+    e.preventDefault();
+    
+    const formData = {
+        name: document.getElementById('name').value,
+        company: document.getElementById('company').value,
+        email: document.getElementById('email').value,
+        phone: document.getElementById('phone').value,
+        service: document.getElementById('service').value,
+        details: document.getElementById('details').value
+    };
+    
+    // In a real application, you would send this to a server
+    console.log('Quote request submitted:', formData);
+    
+    // Show success message
+    alert('تم استلام طلبك بنجاح! سيتصل بك فريقنا خلال 24 ساعة عمل.');
+    
+    // Reset form
+    e.target.reset();
+}
+
+// Add form submission handler if form exists
+document.addEventListener('DOMContentLoaded', function() {
+    const quoteForm = document.getElementById('quote-form');
+    if (quoteForm) {
+        quoteForm.addEventListener('submit', handleQuoteRequest);
+    }
+});
+
+// Mobile menu toggle (for components that might need it)
+function toggleMobileMenu() {
+    const mobileMenu = document.querySelector('.mobile-menu');
+    if (mobileMenu) {
+        mobileMenu.classList.toggle('hidden');
+    }
+}
+
+// Lazy loading for images
+if ('IntersectionObserver' in window) {
+    const imageObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                img.src = img.dataset.src;
+                img.classList.remove('lazy');
+                imageObserver.unobserve(img);
+            }
+        });
+    });
+    
+    document.querySelectorAll('img.lazy').forEach(img => imageObserver.observe(img));
+}

style.css

@@ -1,28 +1,145 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom CSS for MileTruck Project */
+
+/* Custom Animations */
+@keyframes blob {
+    0% {
+        transform: translate(0px, 0px) scale(1);
+    }
+    33% {
+        transform: translate(30px, -50px) scale(1.1);
+    }
+    66% {
+        transform: translate(-20px, 20px) scale(0.9);
+    }
+    100% {
+        transform: translate(0px, 0px) scale(1);
+    }
+}
+
+@keyframes partner-scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+.animate-blob {
+    animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+    animation-delay: 2s;
+}
+
+.animate-partner-scroll {
+    animation: partner-scroll 30s linear infinite;
+}
+
+/* Smooth Scroll */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom Stat Card Styling */
+.stat-card {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    border-radius: 1rem;
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.1);
+    border-color: #3b82f6;
+}
+
+/* Partner Logo Styling */
+.partner-logo {
+    flex-shrink: 0;
+    width: 160px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    border-radius: 0.75rem;
+    padding: 1rem;
+    border: 1px solid #e5e7eb;
+    transition: all 0.3s ease;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.partner-logo:hover {
+    border-color: #1E40AF;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Fleet Card Styling */
+.fleet-card {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.6s ease forwards;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* RTL Specific Adjustments */
+[dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 1;
 }
+
+/* Custom Button Hover Effects */
+.hover-lift {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive Typography */
+@media (max-width: 640px) {
+    .text-responsive {
+        font-size: 1.5rem;
+    }
+}
+
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #1E40AF;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #1E3A8A;
+}