|
|
<!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> |
