| <!DOCTYPE html> |
| <html lang="fa" 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=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Naskh Arabic', serif; |
| } |
| |
| .map-container { |
| height: 400px; |
| width: 100%; |
| border-radius: 15px; |
| overflow: hidden; |
| } |
| |
| .service-card { |
| transition: all 0.3s ease; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .price-badge { |
| position: absolute; |
| top: -10px; |
| left: -10px; |
| } |
| |
| .floating-button { |
| position: fixed; |
| bottom: 30px; |
| left: 30px; |
| z-index: 100; |
| box-shadow: 0 4px 15px rgba(0,0,0,0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-yellow-500 text-white shadow-md"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2 space-x-reverse"> |
| <img src="https://via.placeholder.com/50" alt="Logo" class="w-12 h-12 rounded-full border-2 border-white"> |
| <div> |
| <h1 class="text-xl font-bold">شرکت ناجی پاس</h1> |
| <p class="text-sm">معاونت خدمات خودرویی</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <button class="p-2 rounded-full bg-yellow-600"> |
| <i class="fas fa-bell text-white"></i> |
| </button> |
| <button class="p-2 rounded-full bg-yellow-600"> |
| <i class="fas fa-user text-white"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-6"> |
| |
| <section class="mb-8 relative rounded-xl overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-r from-yellow-500 to-yellow-300 opacity-90"></div> |
| <div class="relative z-10 p-6 md:p-10 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0"> |
| <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">خدمات امداد جاده‌ای و حمل خودرو</h2> |
| <p class="text-white mb-6">با استفاده از جرثقیل‌های پالفینگر زرد رنگ ما، در هر نقطه از ایران به کمک شما می‌آییم</p> |
| <button class="bg-white text-yellow-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition"> |
| درخواست امداد |
| </button> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://via.placeholder.com/400x250?text=جرثقیل+پالفینگر+زرد" alt="جرثقیل پالفینگر زرد" class="rounded-lg shadow-xl border-4 border-white"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">خدمات ما</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="service-card bg-white p-6 rounded-xl shadow-md relative"> |
| <div class="price-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold"> |
| از ۱۲۰,۰۰۰ تومان |
| </div> |
| <div class="flex items-center mb-4"> |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> |
| <i class="fas fa-truck-pickup text-yellow-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-bold text-gray-800">حمل خودرو</h3> |
| </div> |
| <p class="text-gray-600 mb-4">حمل خودرو شما با جرثقیل‌های مجهز پالفینگر به مقصد مورد نظر</p> |
| <button class="w-full bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600 transition"> |
| درخواست حمل |
| </button> |
| </div> |
| |
| |
| <div class="service-card bg-white p-6 rounded-xl shadow-md relative"> |
| <div class="price-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold"> |
| از ۸۰,۰۰۰ تومان |
| </div> |
| <div class="flex items-center mb-4"> |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> |
| <i class="fas fa-tools text-yellow-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-bold text-gray-800">تعمیرات جاده‌ای</h3> |
| </div> |
| <p class="text-gray-600 mb-4">تعمیرات اولیه خودرو در محل حادثه توسط مکانیک‌های مجرب</p> |
| <button class="w-full bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600 transition"> |
| درخواست مکانیک |
| </button> |
| </div> |
| |
| |
| <div class="service-card bg-white p-6 rounded-xl shadow-md relative"> |
| <div class="price-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold"> |
| از ۵۰,۰۰۰ تومان |
| </div> |
| <div class="flex items-center mb-4"> |
| <div class="bg-yellow-100 p-3 rounded-full mr-3"> |
| <i class="fas fa-gas-pump text-yellow-600 text-xl"></i> |
| </div> |
| <h3 class="text-lg font-bold text-gray-800">سوخت رسانی</h3> |
| </div> |
| <p class="text-gray-600 mb-4">ارسال سوخت به محل خودروی شما در صورت اتمام بنزین</p> |
| <button class="w-full bg-yellow-500 text-white py-2 rounded-lg hover:bg-yellow-600 transition"> |
| درخواست سوخت |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">پوشش سراسری در ایران</h2> |
| <div class="map-container bg-gray-200 flex items-center justify-center"> |
| <img src="https://via.placeholder.com/800x400?text=نقشه+ایران" alt="نقشه ایران" class="w-full h-full object-cover"> |
| </div> |
| <div class="mt-4 text-center"> |
| <p class="text-gray-600">ما در تمامی شهرها و جاده‌های کشور حاضریم و در کمترین زمان ممکن به شما خدمات می‌رسانیم</p> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">تعرفه خدمات (سال ۱۴۰۳)</h2> |
| <div class="overflow-x-auto"> |
| <table class="w-full bg-white rounded-xl overflow-hidden shadow-md"> |
| <thead class="bg-yellow-500 text-white"> |
| <tr> |
| <th class="py-3 px-4 text-right">خدمت</th> |
| <th class="py-3 px-4 text-right">حداقل قیمت</th> |
| <th class="py-3 px-4 text-right">قیمت هر کیلومتر</th> |
| <th class="py-3 px-4 text-right">زمان انتظار</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr> |
| <td class="py-3 px-4">حمل خودرو (جرثقیل پالفینگر)</td> |
| <td class="py-3 px-4">120,000 تومان</td> |
| <td class="py-3 px-4">3,500 تومان</td> |
| <td class="py-3 px-4">30 دقیقه</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="py-3 px-4">تعمیرات جاده‌ای</td> |
| <td class="py-3 px-4">80,000 تومان</td> |
| <td class="py-3 px-4">2,500 تومان</td> |
| <td class="py-3 px-4">45 دقیقه</td> |
| </tr> |
| <tr> |
| <td class="py-3 px-4">سوخت رسانی</td> |
| <td class="py-3 px-4">50,000 تومان</td> |
| <td class="py-3 px-4">4,000 تومان</td> |
| <td class="py-3 px-4">60 دقیقه</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="py-3 px-4">باطری به باطری</td> |
| <td class="py-3 px-4">70,000 تومان</td> |
| <td class="py-3 px-4">3,000 تومان</td> |
| <td class="py-3 px-4">40 دقیقه</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="mt-4 text-sm text-gray-500"> |
| <p>* قیمت‌ها بر اساس نرخ مصوب سال ۱۴۰۳ می‌باشد و ممکن است در شرایط خاص تغییر کند.</p> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-10"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b-2 border-yellow-500 pb-2">نظرات کاربران</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://via.placeholder.com/50" alt="User" class="w-12 h-12 rounded-full mr-3"> |
| <div> |
| <h4 class="font-bold">محمد رضایی</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">در جاده چالوس خودرویم دچار مشکل شد. در کمتر از 40 دقیقه جرثقیل پالفینگر زرد رنگ شرکت ناجی پاس به محل رسید و خدمات عالی ارائه داد.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://via.placeholder.com/50" alt="User" class="w-12 h-12 rounded-full mr-3"> |
| <div> |
| <h4 class="font-bold">فاطمه محمدی</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">خودرویم در شهر دچار نقص فنی شد. مکانیک‌های این شرکت بسیار حرفه‌ای بودند و مشکل را در محل حل کردند. قیمت‌ها هم منصفانه بود.</p> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <button class="floating-button bg-yellow-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-lg hover:bg-yellow-600 transition"> |
| <i class="fas fa-plus"></i> |
| </button> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-bold mb-4 text-yellow-400">شرکت ناجی پاس</h3> |
| <p class="text-gray-300">معاونت خدمات خودرویی</p> |
| <p class="text-gray-300 mt-2">ارائه دهنده خدمات امداد جاده‌ای و حمل خودرو با جرثقیل‌های پالفینگر زرد رنگ در سراسر ایران</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4 text-yellow-400">لینک‌های مفید</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">قوانین و مقررات</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">سوالات متداول</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">تماس با ما</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-yellow-400 transition">همکاری با ما</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4 text-yellow-400">تماس با ما</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-300"> |
| <i class="fas fa-phone ml-2 text-yellow-400"></i> |
| ۰۲۱-۱۲۳۴۵۶۷۸ |
| </li> |
| <li class="flex items-center text-gray-300"> |
| <i class="fas fa-envelope ml-2 text-yellow-400"></i> |
| info@najipass.ir |
| </li> |
| <li class="flex items-center text-gray-300"> |
| <i class="fas fa-map-marker-alt ml-2 text-yellow-400"></i> |
| تهران، خیابان آزادی، پلاک ۱۲۳ |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4 text-yellow-400">دانلود اپلیکیشن</h3> |
| <div class="flex flex-col space-y-3"> |
| <button class="bg-black text-white px-4 py-2 rounded-lg flex items-center justify-center"> |
| <i class="fab fa-google-play ml-2"></i> |
| دانلود از گوگل پلی |
| </button> |
| <button class="bg-black text-white px-4 py-2 rounded-lg flex items-center justify-center"> |
| <i class="fab fa-apple ml-2"></i> |
| دانلود از اپ استور |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
| <p>© ۱۴۰۳ کلیه حقوق برای شرکت ناجی پاس محفوظ است.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const floatingBtn = document.querySelector('.floating-button'); |
| floatingBtn.addEventListener('click', function() { |
| alert('درخواست امداد جاده‌ای شما ثبت شد. نزدیک‌ترین امدادگر به محل شما اعزام خواهد شد.'); |
| }); |
| |
| |
| const serviceButtons = document.querySelectorAll('.service-card button'); |
| serviceButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const serviceName = this.closest('.service-card').querySelector('h3').textContent; |
| alert(`درخواست ${serviceName} شما ثبت شد. لطفا موقعیت خود را روی نقشه مشخص کنید.`); |
| }); |
| }); |
| |
| |
| const headerRequestBtn = document.querySelector('.bg-white'); |
| headerRequestBtn.addEventListener('click', function() { |
| alert('برای درخواست امداد جاده‌ای، لطفا موقعیت خود را روی نقشه مشخص کنید.'); |
| }); |
| }); |
| </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=dpr1360/q" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
