<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#2563eb">
    <meta name="description" content="سامانه هوشمند حمل و نقل بین شهری">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="<?php echo e(asset('pwa/manifest.json')); ?>">
    <link rel="icon" type="image/x-icon" href="<?php echo e(asset('pwa/favicon.ico')); ?>">
    <link rel="apple-touch-icon" href="<?php echo e(asset('pwa/apple-touch-icon.png')); ?>">
    
    <title>سبک بار | سامانه هوشمند حمل و نقل بین شهری</title>
    
    <!-- Yekan Bakh Font محلی -->
    <link rel="stylesheet" href="<?php echo e(asset('assets/vendor/yekan-bakh/yekan-bakh.css')); ?>">
    
    <!-- Font Awesome محلی -->
    <link rel="stylesheet" href="<?php echo e(asset('assets/vendor/fontawesome/css/all.min.css')); ?>">
    
    <!-- Tailwind محلی -->
    <script src="<?php echo e(asset('assets/vendor/tailwind/tailwind.min.js')); ?>"></script>
    
    <style>
        body {
            font-family: 'Yekan Bakh', Tahoma, Arial, sans-serif;
        }
        
        .hero-bg {
            background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)), linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        
        .step-number {
            background: linear-gradient(135deg, #1e40af, #3b82f6);
        }
        
        .navbar {
            backdrop-filter: blur(12px);
        }
    </style>
</head>
<body class="bg-zinc-50 text-zinc-800">

    <!-- هدر -->
    <header class="navbar bg-white/90 sticky top-0 z-50 border-b">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex items-center justify-between h-20">
                <!-- لوگو -->
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center text-white text-3xl font-bold">سبک</div>
                    <div>
                        <span class="text-2xl font-bold text-blue-700">سبک بار</span>
                    </div>
                </div>

                <!-- منو -->
                <nav class="hidden md:flex items-center gap-8 text-lg">
                    <a href="#" class="hover:text-blue-600 transition-colors font-medium">خانه</a>
                    <a href="#barname" class="hover:text-blue-600 transition-colors font-medium">صدور بارنامه</a>
                    <a href="#" class="hover:text-blue-600 transition-colors font-medium">لیست باربری‌ها</a>
                    <a href="#" class="hover:text-blue-600 transition-colors font-medium">باربری</a>
                    <a href="#" class="hover:text-blue-600 transition-colors font-medium">بلاگ</a>
                    <a href="#" class="hover:text-blue-600 transition-colors font-medium">درباره ما</a>
                </nav>

                <!-- دکمه‌های ورود -->
                <div class="flex items-center gap-4">
                    <button onclick="showComingSoon()" 
                            class="px-6 py-2.5 text-blue-600 border border-blue-600 rounded-2xl hover:bg-blue-50 transition-all font-medium flex items-center gap-2">
                        <i class="fa-solid fa-truck"></i>
                        <span>ورود / ثبت‌نام باربری</span>
                    </button>
                    <button onclick="showComingSoon()" 
                            class="px-6 py-2.5 bg-blue-600 text-white rounded-2xl hover:bg-blue-700 transition-all font-medium flex items-center gap-2">
                        <i class="fa-solid fa-box"></i>
                        <span>ثبت درخواست حمل بار</span>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- برنامه صاحبین بار - دانلود -->
    <section class="py-24 bg-blue-700 text-white">
        <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
            <div>
                <h2 class="text-5xl font-bold leading-tight mb-8">
                    اپلیکیشن صاحبین بار
                </h2>
                <p class="text-2xl leading-relaxed opacity-90">
                    با «سبک بار» بار خود را در چند ثانیه اعلام کنید و بهترین راننده را پیدا کنید.
                </p>
                <ul class="mt-10 space-y-6 text-lg">
                    <li class="flex items-center gap-4">
                        <i class="fa-solid fa-check text-green-400 text-2xl"></i>
                        اعلام بار هوشمند
                    </li>
                    <li class="flex items-center gap-4">
                        <i class="fa-solid fa-check text-green-400 text-2xl"></i>
                        پیدا کردن راننده در لحظه
                    </li>
                    <li class="flex items-center gap-4">
                        <i class="fa-solid fa-check text-green-400 text-2xl"></i>
                        ردیابی آنلاین بار
                    </li>
                    <li class="flex items-center gap-4">
                        <i class="fa-solid fa-check text-green-400 text-2xl"></i>
                        پرداخت امن و سریع
                    </li>
                </ul>
                
                <div class="mt-12 flex gap-6">
                    <button onclick="showComingSoon()" class="bg-white text-blue-700 px-8 py-4 rounded-3xl font-bold text-lg flex items-center gap-3 hover:scale-105 transition-all">
                        <i class="fa-solid fa-download"></i>
                        دانلود برای صاحبین بار
                    </button>
                </div>
            </div>
            
            <div class="relative">
                <div class="w-full h-96 bg-zinc-700 rounded-3xl flex items-center justify-center shadow-2xl border-8 border-white/30">
                    <div class="text-center">
                        <i class="fa-solid fa-image text-white text-6xl mb-4 opacity-50"></i>
                        <p class="text-white/50">تصویر اپلیکیشن</p>
                    </div>
                </div>
                <div class="absolute -bottom-6 -left-6 bg-white text-zinc-900 p-6 rounded-3xl shadow-xl">
                    <div class="flex items-center gap-4">
                        <div class="text-4xl">🚚</div>
                        <div>
                            <div class="font-bold">بیش از ۱۲۰۰ بار</div>
                            <div class="text-sm text-zinc-500">در هفته جابجا شده</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- سکشن هیرو - صدور بارنامه آنلاین -->
    <section id="barname" class="hero-bg h-screen flex items-center text-white">
        <div class="max-w-5xl mx-auto px-6 text-center">
            <h1 class="text-6xl md:text-7xl font-bold mb-6 leading-tight">
                صدور بارنامه آنلاین
            </h1>
            <p class="text-2xl md:text-3xl mb-10 max-w-3xl mx-auto text-white/90">
                سریع، امن و هوشمند — بارنامه الکترونیکی خود را در کمتر از ۲ دقیقه صادر کنید
            </p>
            
            <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
                <button onclick="showComingSoon()" 
                        class="px-10 py-6 bg-white text-blue-700 text-2xl font-bold rounded-3xl hover:scale-105 transition-all shadow-2xl flex items-center gap-4 group">
                    <i class="fa-solid fa-file-lines text-3xl group-active:rotate-12 transition-transform"></i>
                    <div class="text-right">
                        <div class="text-xl">صدور بارنامه آنلاین</div>
                        <div class="text-sm opacity-75">همین حالا شروع کنید</div>
                    </div>
                </button>
                
                <div class="text-center">
                    <div class="text-5xl font-bold text-amber-400">یا</div>
                </div>
                
                <a href="tel:09124540125" 
                   class="px-10 py-6 bg-white/10 backdrop-blur-md border border-white/30 text-white text-2xl font-bold rounded-3xl hover:bg-white/20 transition-all flex items-center gap-4">
                    <i class="fa-solid fa-phone-volume text-3xl"></i>
                    <div class="text-right">
                        <div class="text-xl">صدور بارنامه تلفنی</div>
                        <div class="text-2xl font-mono">۰۹۱۲۴۵۴۰۱۲۵</div>
                    </div>
                </a>
            </div>
            
            <div class="mt-16 text-sm opacity-75">
                <p>با یک کلیک بارنامه الکترونیکی دریافت کنید و از تمام مزایای قانونی آن بهره‌مند شوید</p>
            </div>
        </div>
    </section>

    <!-- مزایای بارنامه الکترونیکی -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <h2 class="text-4xl font-bold text-center mb-16">مزایای بارنامه الکترونیکی</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-zinc-50 p-8 rounded-3xl card-hover">
                    <i class="fa-solid fa-folder-open text-5xl text-blue-500 mb-6"></i>
                    <h3 class="text-2xl font-bold mb-3">ذخیره‌سازی و جستجوی آسان</h3>
                    <p class="text-zinc-600">تمام بارنامه‌های شما به صورت دیجیتال ذخیره و قابل جستجو هستند.</p>
                </div>
                <div class="bg-zinc-50 p-8 rounded-3xl card-hover">
                    <i class="fa-solid fa-bolt text-5xl text-amber-500 mb-6"></i>
                    <h3 class="text-2xl font-bold mb-3">تبادل فوری اطلاعات</h3>
                    <p class="text-zinc-600">اطلاعات در لحظه بین طرفین، راهداری و پلیس منتقل می‌شود.</p>
                </div>
                <div class="bg-zinc-50 p-8 rounded-3xl card-hover">
                    <i class="fa-solid fa-shield-halved text-5xl text-green-500 mb-6"></i>
                    <h3 class="text-2xl font-bold mb-3">امنیت بالا</h3>
                    <p class="text-zinc-600">اطلاعات بارنامه با بالاترین سطح امنیت محافظت می‌شود.</p>
                </div>
                <div class="bg-zinc-50 p-8 rounded-3xl card-hover">
                    <i class="fa-solid fa-clock text-5xl text-purple-500 mb-6"></i>
                    <h3 class="text-2xl font-bold mb-3">دسترسی سریع</h3>
                    <p class="text-zinc-600">در هر زمان و هر مکان به بارنامه خود دسترسی دارید.</p>
                </div>
                <div class="bg-zinc-50 p-8 rounded-3xl card-hover">
                    <i class="fa-solid fa-handshake text-5xl text-rose-500 mb-6"></i>
                    <h3 class="text-2xl font-bold mb-3">جلوگیری از اختلافات</h3>
                    <p class="text-zinc-600">اطلاعات شفاف و غیرقابل تغییر بین تمام طرفین.</p>
                </div>
                <div class="bg-zinc-50 p-8 rounded-3xl card-hover">
                    <i class="fa-solid fa-truck text-5xl text-blue-500 mb-6"></i>
                    <h3 class="text-2xl font-bold mb-3">امنیت در حمل</h3>
                    <p class="text-zinc-600">ردیابی دقیق و کنترل کامل مسیر حمل بار.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- مراحل صدور بارنامه -->
    <section class="py-24 bg-zinc-100">
        <div class="max-w-7xl mx-auto px-6">
            <h2 class="text-4xl font-bold text-center mb-16">مراحل صدور بارنامه الکترونیکی</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-4xl mx-auto">
                <div class="flex gap-6">
                    <div class="step-number w-12 h-12 rounded-2xl flex-shrink-0 text-white flex items-center justify-center text-2xl font-bold">۱</div>
                    <div>
                        <h4 class="font-bold text-xl mb-2">ثبت مشخصات</h4>
                        <p class="text-zinc-600">راننده، کامیون، مسیر، نوع کالا، وزن و ابعاد</p>
                    </div>
                </div>
                <div class="flex gap-6">
                    <div class="step-number w-12 h-12 rounded-2xl flex-shrink-0 text-white flex items-center justify-center text-2xl font-bold">۲</div>
                    <div>
                        <h4 class="font-bold text-xl mb-2">تعیین نرخ کرایه</h4>
                        <p class="text-zinc-600">مشاهده نرخ پیشنهادی و تأیید توسط متقاضی</p>
                    </div>
                </div>
                <div class="flex gap-6">
                    <div class="step-number w-12 h-12 rounded-2xl flex-shrink-0 text-white flex items-center justify-center text-2xl font-bold">۳</div>
                    <div>
                        <h4 class="font-bold text-xl mb-2">کنترل و استعلام</h4>
                        <p class="text-zinc-600">بررسی اطلاعات توسط سازمان راهداری و پلیس</p>
                    </div>
                </div>
                <div class="flex gap-6">
                    <div class="step-number w-12 h-12 rounded-2xl flex-shrink-0 text-white flex items-center justify-center text-2xl font-bold">۴</div>
                    <div>
                        <h4 class="font-bold text-xl mb-2">پرداخت و صدور</h4>
                        <p class="text-zinc-600">پرداخت حق تمبر و دریافت کد رهگیری</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- فوتر -->
    <footer class="bg-zinc-900 text-white">
        <div class="max-w-7xl mx-auto px-6 pt-20">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                <!-- ستون اول -->
                <div>
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center text-4xl">سبک</div>
                        <span class="text-3xl font-bold">سبک بار</span>
                    </div>
                    <p class="text-zinc-400 leading-relaxed">
                        سامانه هوشمند حمل و نقل بین شهری
                    </p>
                </div>
                
                <!-- دسته‌بندی -->
                <div>
                    <h4 class="font-bold text-lg mb-6">دسته‌بندی</h4>
                    <ul class="space-y-3 text-zinc-400">
                        <li><a href="#" class="hover:text-white">خانه</a></li>
                        <li><a href="#barname" class="hover:text-white">صدور بارنامه</a></li>
                        <li><a href="#" class="hover:text-white">لیست باربری‌ها</a></li>
                        <li><a href="#" class="hover:text-white">باربری</a></li>
                        <li><a href="#" class="hover:text-white">بلاگ</a></li>
                        <li><a href="#" class="hover:text-white">درباره ما</a></li>
                    </ul>
                </div>
                
                <!-- بارنامه -->
                <div>
                    <h4 class="font-bold text-lg mb-6">بارنامه</h4>
                    <ul class="space-y-3 text-zinc-400">
                        <li><a href="#barname" class="hover:text-white">صدور بارنامه آنلاین</a></li>
                        <li><a href="tel:09124540125" class="hover:text-white">صدور بارنامه تلفنی</a></li>
                    </ul>
                </div>
                
                <!-- ارتباط با ما -->
                <div>
                    <h4 class="font-bold text-lg mb-6">ارتباط با ما</h4>
                    <div class="space-y-4 text-zinc-400">
                        <p>۰۲۱-۵۵۲۶۳۰۳۳<br>۰۲۱-۵۵۱۰۱۰۱۱۰</p>
                        <p class="font-mono">۰۹۱۲۴۵۴۰۱۲۵</p>
                        <p>info@sabokbaar.ir</p>
                        <p class="text-sm">اسلامشهر، چهاردانگه، کمربندی بزرگراه آیت‌الله سعیدی، پلاک ۱۲۰۳</p>
                    </div>
                </div>
            </div>
            
            <!-- فوتر پایین -->
            <div class="border-t border-zinc-800 mt-16 pt-10 flex flex-wrap justify-between items-center gap-6">
                    © ۱۴۰۴ سبک بار - تمامی حقوق محفوظ است<br>
                    <span class="text-red-400 text-xs">استفاده از محتوای این سایت بدون مجوز پیگرد قانونی دارد</span>
                </div>
                
                <div class="flex gap-6 text-3xl text-zinc-500">
                    <i class="fa-brands fa-telegram hover:text-white cursor-pointer"></i>
                    <i class="fa-brands fa-instagram hover:text-white cursor-pointer"></i>
                    <i class="fa-brands fa-linkedin hover:text-white cursor-pointer"></i>
                </div>
            </div>
        </div>
    </footer>

    <!-- مودال بزودی -->
    <div id="comingSoonModal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-[100]">
        <div class="bg-white rounded-3xl p-12 max-w-md text-center">
            <div class="text-6xl mb-6">🚧</div>
            <h3 class="text-3xl font-bold mb-4">به‌زودی</h3>
            <p class="text-zinc-600">این بخش در حال توسعه است و به‌زودی در دسترس خواهد بود.</p>
            <button onclick="hideComingSoon()" 
                    class="mt-10 w-full py-4 bg-blue-600 text-white rounded-2xl font-bold">باشه</button>
        </div>
    </div>

    <script>
        function showComingSoon() {
            document.getElementById('comingSoonModal').classList.remove('hidden');
        }
        
        function hideComingSoon() {
            document.getElementById('comingSoonModal').classList.add('hidden');
        }
        
        // Service Worker برای PWA
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('<?php echo e(asset("pwa/sw.js")); ?>')
                .then(reg => console.log('PWA Service Worker registered'))
                .catch(err => console.log('Service Worker registration failed:', err));
        }
        
        window.onload = function() {
            // PWA initialized
        };
    </script>
</body>
</html>
<?php /**PATH S:\wamp\www\sabok\temp-laravel\resources\views/pwa/index.blade.php ENDPATH**/ ?>