Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>مركز صيانة السيارات - زيت، فلاتر، إطارات</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f5f5f5; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .oil-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .tire-bg { | |
| background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%); | |
| } | |
| .filter-bg { | |
| background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%); | |
| } | |
| .maintenance-bg { | |
| background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #3b82f6; | |
| transition: width .3s; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| left: -8px; | |
| top: 0; | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-car-side text-3xl text-blue-500 mr-3"></i> | |
| <h1 class="text-2xl font-bold text-blue-600">مركز صيانة السيارات</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8 space-x-reverse"> | |
| <a href="#services" class="nav-link font-medium text-gray-700 hover:text-blue-600">خدماتنا</a> | |
| <a href="#products" class="nav-link font-medium text-gray-700 hover:text-blue-600">منتجاتنا</a> | |
| <a href="#tracking" class="nav-link font-medium text-gray-700 hover:text-blue-600">تتبع الصيانة</a> | |
| <a href="#about" class="nav-link font-medium text-gray-700 hover:text-blue-600">عن المركز</a> | |
| <a href="#contact" class="nav-link font-medium text-gray-700 hover:text-blue-600">اتصل بنا</a> | |
| </nav> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-blue-600 text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl font-bold mb-4">صيانة متكاملة لسيارتك بأعلى جودة</h2> | |
| <p class="text-xl mb-6">نقدم جميع خدمات تغيير الزيوت، الفلاتر، الإطارات وخدمات الصيانة الدورية لتضمن سلامة سيارتك وأداءها الأمثل</p> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">احجز موعد</button> | |
| <button class="border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 transition">تعرف على خدماتنا</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Car Maintenance" class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">خدماتنا المتكاملة</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Oil Change Service --> | |
| <div class="service-card oil-bg rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-oil-can"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تغيير الزيوت</h3> | |
| <p class="text-gray-600 mb-4">نقدم جميع أنواع زيوت المحركات بأعلى جودة من أشهر الماركات العالمية مع ضمان الجودة</p> | |
| <ul class="space-y-2 text-gray-700 mb-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| زيت محرك سينثيتيك | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| زيت محرك معدني | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| زيت ناقل حركة | |
| </li> | |
| </ul> | |
| <button class="text-blue-600 font-bold flex items-center"> | |
| المزيد من التفاصيل | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| </div> | |
| <!-- Filters Service --> | |
| <div class="service-card filter-bg rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-filter"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">استبدال الفلاتر</h3> | |
| <p class="text-gray-600 mb-4">جميع أنواع فلاتر السيارات الأصلية والبديلة مع ضمان الأداء الأمثل لسيارتك</p> | |
| <ul class="space-y-2 text-gray-700 mb-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فلتر هواء المحرك | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فلتر زيت المحرك | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فلتر هواء التكييف | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فلتر وقود | |
| </li> | |
| </ul> | |
| <button class="text-green-700 font-bold flex items-center"> | |
| المزيد من التفاصيل | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| </div> | |
| <!-- Tires Service --> | |
| <div class="service-card tire-bg rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="text-cyan-600 text-4xl mb-4"> | |
| <i class="fas fa-tire"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">الإطارات والعجلات</h3> | |
| <p class="text-gray-600 mb-4">أفضل أنواع الإطارات بجميع المقاسات مع خدمة تركيب وضبط زوايا متكاملة</p> | |
| <ul class="space-y-2 text-gray-700 mb-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| إطارات صيفية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| إطارات شتوية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| إطارات جميع المواسم | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| ضبط زوايا العجلات | |
| </li> | |
| </ul> | |
| <button class="text-cyan-700 font-bold flex items-center"> | |
| المزيد من التفاصيل | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| </div> | |
| <!-- Maintenance Service --> | |
| <div class="service-card maintenance-bg rounded-xl p-6 shadow-md transition duration-300"> | |
| <div class="text-orange-500 text-4xl mb-4"> | |
| <i class="fas fa-tools"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">خدمات الصيانة</h3> | |
| <p class="text-gray-600 mb-4">صيانة دورية شاملة لسيارتك مع متابعة كاملة لجميع أعمال الصيانة السابقة</p> | |
| <ul class="space-y-2 text-gray-700 mb-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| صيانة دورية كاملة | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فحص كهرباء السيارة | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| صيانة المكيف | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فحص الفرامل | |
| </li> | |
| </ul> | |
| <button class="text-orange-600 font-bold flex items-center"> | |
| المزيد من التفاصيل | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">منتجاتنا عالية الجودة</h2> | |
| <div class="flex flex-wrap -mx-4"> | |
| <!-- Oil Products --> | |
| <div class="w-full md:w-1/3 px-4 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="oil-bg p-6"> | |
| <h3 class="text-xl font-bold text-center mb-4">زيوت المحركات</h3> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fas fa-oil-can text-5xl text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Castrol Oil" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">زيت كاسترول EDGE 5W-30</h4> | |
| <p class="text-sm text-gray-600">زيت سينثيتيك كامل</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Mobil Oil" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">زيت موبيل 1 0W-40</h4> | |
| <p class="text-sm text-gray-600">زيت محرك عالي الأداء</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Valvoline Oil" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">زيت فالفولين 10W-40</h4> | |
| <p class="text-sm text-gray-600">زيت محرك معدني</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white py-2 rounded-lg font-bold hover:bg-blue-700 transition"> | |
| عرض جميع أنواع الزيوت | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Filter Products --> | |
| <div class="w-full md:w-1/3 px-4 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="filter-bg p-6"> | |
| <h3 class="text-xl font-bold text-center mb-4">فلاتر السيارات</h3> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fas fa-filter text-5xl text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Air Filter" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">فلتر هواء محرك</h4> | |
| <p class="text-sm text-gray-600">ماركة Mann-Filter</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Oil Filter" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">فلتر زيت محرك</h4> | |
| <p class="text-sm text-gray-600">ماركة Bosch</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Cabin Filter" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">فلتر هواء تكييف</h4> | |
| <p class="text-sm text-gray-600">ماركة Fram</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-green-600 text-white py-2 rounded-lg font-bold hover:bg-green-700 transition"> | |
| عرض جميع أنواع الفلاتر | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tire Products --> | |
| <div class="w-full md:w-1/3 px-4 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="tire-bg p-6"> | |
| <h3 class="text-xl font-bold text-center mb-4">إطارات السيارات</h3> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fas fa-tire text-5xl text-cyan-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Michelin Tire" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">إطار ميشلان Primacy 4</h4> | |
| <p class="text-sm text-gray-600">مقاس 205/55 R16</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Bridgestone Tire" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">إطار بريدجستون Turanza</h4> | |
| <p class="text-sm text-gray-600">مقاس 215/60 R17</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4 p-3 bg-gray-100 rounded-lg"> | |
| <img src="https://via.placeholder.com/60" alt="Pirelli Tire" class="w-16 h-16 object-contain mr-3"> | |
| <div> | |
| <h4 class="font-bold">إطار بيريلي P Zero</h4> | |
| <p class="text-sm text-gray-600">مقاس 225/45 R18</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-cyan-600 text-white py-2 rounded-lg font-bold hover:bg-cyan-700 transition"> | |
| عرض جميع أنواع الإطارات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Maintenance Tracking Section --> | |
| <section id="tracking" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">تتبع سجل صيانة سيارتك</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-blue-50 rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-bold mb-4 text-blue-700">أدخل بيانات سيارتك</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">رقم لوحة السيارة</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="مثال: أ ب ج 1234"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">رقم الهاتف</label> | |
| <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="05XXXXXXXX"> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition"> | |
| عرض سجل الصيانة | |
| </button> | |
| </form> | |
| </div> | |
| <div class="mt-8 bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <h3 class="text-xl font-bold mb-4">إحصائيات الصيانة السنوية</h3> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="bg-blue-100 p-4 rounded-lg text-center w-1/3"> | |
| <div class="text-blue-600 text-2xl font-bold">4</div> | |
| <div class="text-gray-600">زيوت</div> | |
| </div> | |
| <div class="bg-green-100 p-4 rounded-lg text-center w-1/3"> | |
| <div class="text-green-600 text-2xl font-bold">3</div> | |
| <div class="text-gray-600">فلاتر</div> | |
| </div> | |
| <div class="bg-cyan-100 p-4 rounded-lg text-center w-1/3"> | |
| <div class="text-cyan-600 text-2xl font-bold">2</div> | |
| <div class="text-gray-600">إطارات</div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">إجمالي تكلفة الصيانة السنوية:</span> | |
| <span class="font-bold">1,850 ر.س</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">متوسط تكلفة الصيانة الشهرية:</span> | |
| <span class="font-bold">154 ر.س</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white border rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-blue-600 text-white p-4"> | |
| <h3 class="text-xl font-bold">سجل الصيانة لسيارة تويوتا كامري 2021</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="relative pl-8 border-l-2 border-blue-200 space-y-8"> | |
| <!-- Maintenance Item 1 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-blue-50 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-blue-700">تغيير زيت المحرك</h4> | |
| <span class="bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded">تم</span> | |
| </div> | |
| <p class="text-gray-600 mb-2">زيت كاسترول EDGE 5W-30</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>15 يناير 2023</span> | |
| <span>350 ر.س</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Maintenance Item 2 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-green-50 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-green-700">استبدال فلتر الهواء</h4> | |
| <span class="bg-green-100 text-green-800 text-sm px-2 py-1 rounded">تم</span> | |
| </div> | |
| <p class="text-gray-600 mb-2">فلتر هواء ماركة Mann-Filter</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>10 مارس 2023</span> | |
| <span>180 ر.س</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Maintenance Item 3 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-cyan-50 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-cyan-700">تركيب إطارات جديدة</h4> | |
| <span class="bg-cyan-100 text-cyan-800 text-sm px-2 py-1 rounded">تم</span> | |
| </div> | |
| <p class="text-gray-600 mb-2">إطارات ميشلان Primacy 4 215/55 R17</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>5 مايو 2023</span> | |
| <span>2,400 ر.س</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Maintenance Item 4 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-orange-50 rounded-lg p-4 shadow-sm"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-bold text-orange-700">صيانة دورية كاملة</h4> | |
| <span class="bg-orange-100 text-orange-800 text-sm px-2 py-1 rounded">مجدولة</span> | |
| </div> | |
| <p class="text-gray-600 mb-2">فحص شامل للسيارة وتغيير جميع السوائل</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>15 أغسطس 2023</span> | |
| <span>600 ر.س (متوقع)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 border-2 border-blue-500 text-blue-600 py-2 rounded-lg font-bold hover:bg-blue-50 transition"> | |
| تحميل سجل الصيانة كملف PDF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Light Maintenance Services --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">خدمات الصيانة الخفيفة</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Battery Service --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-yellow-100 p-6"> | |
| <div class="flex justify-center text-yellow-600 text-4xl mb-4"> | |
| <i class="fas fa-car-battery"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center">فحص وتغيير بطارية السيارة</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4">فحص شامل لبطارية السيارة وتركيب بطارية جديدة إذا لزم الأمر مع ضمان لمدة عامين</p> | |
| <ul class="space-y-2 text-gray-700 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| فحص حالة البطارية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| تركيب بطارية جديدة | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| ضمان لمدة عامين | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">بدءًا من 450 ر.س</span> | |
| <button class="bg-yellow-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-yellow-600 transition"> | |
| احجز الآن | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wiper Blades Service --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-blue-100 p-6"> | |
| <div class="flex justify-center text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-wind"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center">استبدال مساحات الزجاج</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4">تركيب مساحات زجاج جديدة عالية الجودة لضمان رؤية واضحة في جميع الظروف الجوية</p> | |
| <ul class="space-y-2 text-gray-700 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| مساحات أمامية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| مساحات خلفية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| تركيب مجاني | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">بدءًا من 120 ر.س</span> | |
| <button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-600 transition"> | |
| احجز الآن | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Light Bulbs Service --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-purple-100 p-6"> | |
| <div class="flex justify-center text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center">استبدال مصابيح الإضاءة</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4">تركيب جميع أنواع مصابيح السيارة (أمامية، خلفية، داخلية) بأعلى جودة وضمان</p> | |
| <ul class="space-y-2 text-gray-700 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| مصابيح أمامية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| مصابيح خلفية | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| مصابيح داخلية | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">بدءًا من 80 ر.س</span> | |
| <button class="bg-purple-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-purple-600 transition"> | |
| احجز الآن | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1580273916550-e4c0b05b59ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Car Service Center" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6">عن مركز صيانة السيارات</h2> | |
| <p class="text-gray-600 mb-4">نحن مركز متكامل لصيانة السيارات نقدم جميع خدمات تغيير الزيوت، الفلاتر، الإطارات والخدمات الأخرى بأعلى معايير الجودة.</p> | |
| <p class="text-gray-600 mb-6">بخبرة تزيد عن 15 عامًا في مجال صيانة السيارات، نضمن لسيارتك أفضل خدمة وأعلى أداء.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="text-blue-500 text-2xl mb-2"> | |
| <i class="fas fa-award"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">جودة مميزة</h4> | |
| <p class="text-sm text-gray-600">منتجات أصلية بضمان المصنع</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="text-green-500 text-2xl mb-2"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">خدمة سريعة</h4> | |
| <p class="text-sm text-gray-600">أقل وقت انتظار ممكن</p> | |
| </div> | |
| <div class="bg-orange-50 p-4 rounded-lg"> | |
| <div class="text-orange-500 text-2xl mb-2"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">فريق محترف</h4> | |
| <p class="text-sm text-gray-600">فنيون ذوو خبرة عالية</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="text-purple-500 text-2xl mb-2"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h4 class="font-bold mb-1">ضمان شامل</h4> | |
| <p class="text-sm text-gray-600">ضمان على جميع الخدمات</p> | |
| </div> | |
| </div> | |
| <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 transition"> | |
| تعرف أكثر عنا | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">اتصل بنا</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 h-full"> | |
| <h3 class="text-xl font-bold mb-6">معلومات التواصل</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">العنوان</h4> | |
| <p class="text-gray-600">شارع الملك فهد، الرياض، المملكة العربية السعودية</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-green-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">الهاتف</h4> | |
| <p class="text-gray-600">0112345678</p> | |
| <p class="text-gray-600">0501234567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-red-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">البريد الإلكتروني</h4> | |
| <p class="text-gray-600">info@car-maintenance.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-yellow-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">ساعات العمل</h4> | |
| <p class="text-gray-600">من السبت إلى الخميس: 8 صباحًا - 10 مساءً</p> | |
| <p class="text-gray-600">الجمعة: 4 مساءً - 10 مساءً</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">تابعنا على وسائل التواصل</h4> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-blue-400 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-red-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-700 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-900 transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white rounded-xl shadow-md p-6 h-full"> | |
| <h3 class="text-xl font-bold mb-6">أرسل لنا رسالة</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">الاسم الكامل</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">البريد الإلكتروني</label> | |
| <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">رقم الهاتف</label> | |
| <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">الرسالة</label> | |
| <textarea rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition"> | |
| إرسال الرسالة | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-car-side text-blue-400 mr-2"></i> | |
| مركز صيانة السيارات | |
| </h3> | |
| <p class="text-gray-400">نقدم جميع خدمات صيانة السيارات وتغيير الزيوت والفلاتر والإطارات بأعلى جودة وأفضل الأسعار.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">الرئيسية</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">خدماتنا</a></li> | |
| <li><a href="#products" class="text-gray-400 hover:text-white transition">منتجاتنا</a></li> | |
| <li><a href="#tracking" class="text-gray-400 hover:text-white transition">تتبع الصيانة</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">عن المركز</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">اتصل بنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">خدماتنا</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">تغيير الزيوت</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">استبدال الفلاتر</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">تركيب الإطارات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">الصيانة الدورية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">خدمات الصيانة الخفيفة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">فحص شامل للسيارة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4> | |
| <p class="text-gray-400 mb-4">اشترك في نشرتنا البريدية لتصلك أحدث العروض والتخفيضات.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 rounded-r-lg focus:outline-none text-gray-800 w-full"> | |
| <button class="bg-blue-600 px-4 py-2 rounded-l-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 مركز صيانة السيارات. جميع الحقوق محفوظة.</p> | |
| <div class="flex space-x-6 space-x-reverse"> | |
| <img src="https://via.placeholder.com/40" alt="Visa" class="h-8"> | |
| <img src="https://via.placeholder.com/40" alt="Mastercard" class="h-8"> | |
| <img src="https://via.placeholder.com/40" alt="Mada" class="h-8"> | |
| <img src="https://via.placeholder.com/40" alt="Apple Pay" class="h-8"> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu (Hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden" id="mobileMenu"> | |
| <div class="absolute top-0 right-0 h-full w-3/4 bg-white shadow-lg"> | |
| <div class="p-4 flex justify-between items-center border-b"> | |
| <h3 class="text-xl font-bold">القائمة</h3> | |
| <button id="closeMobileMenu" class="text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <nav class="p-4 space-y-4"> | |
| <a href="#services" class="block py-3 px-4 bg-gray-100 rounded-lg font-medium">خدماتنا</a> | |
| <a href="#products" class="block py-3 px-4 bg-gray-100 rounded-lg font-medium">منتجاتنا</a> | |
| <a href="#tracking" class="block py-3 px-4 bg-gray-100 rounded-lg font-medium">تتبع الصيانة</a> | |
| <a href="#about" class="block py-3 px-4 bg-gray-100 rounded-lg font-medium">عن المركز</a> | |
| <a href="#contact" class="block py-3 px-4 bg-gray-100 rounded-lg font-medium">اتصل بنا</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile Menu Toggle | |
| document.querySelector('header button').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeMobileMenu').addEventListener('click', function() { | |
| document.getElementById('mobileMenu').classList.add('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.getElementById('mobileMenu').classList.add('hidden'); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohamed3007/mome" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |