<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Partner Login — Instafix24</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="min-h-screen bg-gray-50 font-sans selection:bg-[#109E38] selection:text-white">

    <!-- SECURE HEADER[cite: 12] -->
    <header class="w-full bg-white border-b border-gray-100 shadow-sm sticky top-0 z-50">
        <div class="flex h-20 items-center justify-center md:justify-start px-4 md:px-8 max-w-[1400px] mx-auto">
          <div class="flex items-center gap-3">
            <div class="bg-[#109E38] p-2 rounded-full shadow-md shadow-green-500/20">
              <i data-lucide="snowflake" class="w-6 h-6 text-white"></i>
            </div>
            <span class="text-2xl font-black tracking-tight text-gray-900">
              Instafix<span class="text-[#109E38]">Partner</span>
            </span>
          </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 py-12 md:py-20">
        <div class="grid md:grid-cols-2 gap-12 lg:gap-20 items-center">
          
          <!-- LEFT SIDE: PROMOTION & EARNING INFO[cite: 12] -->
          <div class="text-center md:text-left order-2 md:order-1">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-100 border border-green-200 mb-6 shadow-sm mx-auto md:mx-0">
              <span class="flex h-2 w-2 rounded-full bg-[#109E38] animate-pulse"></span>
              <span class="text-xs font-black tracking-widest uppercase text-green-800">Hiring in Delhi NCR</span>
            </div>
            <h1 class="text-4xl lg:text-6xl font-black tracking-tight mb-4 leading-tight text-gray-900">
              Be your own Boss. <br />
              <span class="text-[#109E38]">Earn up to ₹50,000/mo.</span>
            </h1>
            <p class="text-gray-600 mb-8 font-medium text-lg max-w-lg mx-auto md:mx-0">
              Join Delhi's fastest-growing AC Service network. Weekly payouts, flexible timings, and guaranteed daily bookings.
            </p>

            <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 mb-8 text-left max-w-md mx-auto md:mx-0">
              <h3 class="font-black text-gray-900 mb-4 text-lg">Partner Benefits:</h3>
              <ul class="space-y-3">
                <li class="flex items-center gap-3 text-sm font-bold text-gray-700">
                  <i data-lucide="check-circle-2" class="w-5 h-5 text-[#109E38]"></i> Daily & Weekly Direct Bank Payouts
                </li>
                <li class="flex items-center gap-3 text-sm font-bold text-gray-700">
                  <i data-lucide="check-circle-2" class="w-5 h-5 text-[#109E38]"></i> Flat ₹120 Extra Incentive per 6 Rides
                </li>
                <li class="flex items-center gap-3 text-sm font-bold text-gray-700">
                  <i data-lucide="check-circle-2" class="w-5 h-5 text-[#109E38]"></i> Zero Hidden Deductions
                </li>
              </ul>
            </div>
          </div>

          <!-- RIGHT SIDE: LOGIN FORM[cite: 12] -->
          <div class="order-1 md:order-2">
            <div class="bg-white p-8 rounded-[2.5rem] shadow-[0_10px_40px_rgba(0,0,0,0.08)] border border-gray-100 max-w-md mx-auto w-full relative overflow-hidden">
              <div class="absolute top-0 left-0 w-full h-2 bg-[#109E38]"></div>
              
              <div class="text-center mb-8">
                <h2 class="text-2xl font-black text-gray-900 mb-2">Welcome Back Partner</h2>
                <p class="text-sm font-bold text-gray-500">Login to access your dashboard and jobs.</p>
              </div>

              <!-- Yeh form aapke Route par data bhejega -->
              <form action="/dummy-login" method="POST" class="space-y-5">
                <?php echo csrf_field(); ?>
                <div>
                  <label class="text-xs font-black text-gray-700 uppercase tracking-wider mb-2 block">Mobile Number</label>
                  <input type="tel" name="phone" placeholder="Enter 8888 for Technician" required class="h-14 w-full rounded-xl bg-gray-50 border border-gray-200 px-4 focus:ring-[#109E38] font-bold outline-none" />
                </div>
                <div>
                  <label class="text-xs font-black text-gray-700 uppercase tracking-wider mb-2 block">Password / OTP</label>
                  <input type="password" placeholder="Enter password or OTP" class="h-14 w-full rounded-xl bg-gray-50 border border-gray-200 px-4 focus:ring-[#109E38] font-bold outline-none" />
                </div>

                <button type="submit" class="w-full h-14 rounded-xl bg-[#109E38] hover:bg-green-700 text-white font-black text-lg shadow-lg shadow-green-500/30 transition-transform hover:scale-[1.02]">
                  Login to Dashboard
                </button>
              </form>
            </div>
          </div>
        </div>

        <!-- BOTTOM SECTION: HOW TO START EARNING?[cite: 12] -->
        <div class="mt-24 pt-16 border-t border-gray-200">
          <h2 class="text-3xl font-black text-gray-900 mb-12 text-center">How to start earning?</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative max-w-4xl mx-auto">
            <div class="hidden md:block absolute top-8 left-1/6 right-1/6 h-0.5 bg-gray-200 z-0 w-2/3 mx-auto"></div>
            
            <div class="relative z-10 flex flex-col items-center text-center group">
              <div class="w-16 h-16 rounded-full bg-white border-4 border-gray-100 shadow-sm flex items-center justify-center text-green-600 mb-4 group-hover:border-green-200 transition-colors">
                <i data-lucide="smartphone" class="w-7 h-7"></i>
              </div>
              <h4 class="text-xl font-black text-gray-900 mb-2">1. Register Online</h4>
              <p class="text-sm text-gray-500 font-medium px-4">Download the app and complete your profile with Aadhar and Pan Card.</p>
            </div>

            <div class="relative z-10 flex flex-col items-center text-center group">
              <div class="w-16 h-16 rounded-full bg-white border-4 border-gray-100 shadow-sm flex items-center justify-center text-blue-600 mb-4 group-hover:border-blue-200 transition-colors">
                <i data-lucide="shield-check" class="w-7 h-7"></i>
              </div>
              <h4 class="text-xl font-black text-gray-900 mb-2">2. Quick Training</h4>
              <p class="text-sm text-gray-500 font-medium px-4">Attend a 1-day onboarding & training session at our Delhi hub.</p>
            </div>

            <div class="relative z-10 flex flex-col items-center text-center group">
              <div class="w-16 h-16 rounded-full bg-white border-4 border-gray-100 shadow-sm flex items-center justify-center text-yellow-600 mb-4 group-hover:border-yellow-200 transition-colors">
                <i data-lucide="banknote" class="w-7 h-7"></i>
              </div>
              <h4 class="text-xl font-black text-gray-900 mb-2">3. Start Earning</h4>
              <p class="text-sm text-gray-500 font-medium px-4">Go online on the Partner App, accept jobs, and get paid weekly.</p>
            </div>
          </div>
        </div>
    </main>
    <script>lucide.createIcons();</script>
</body>
</html><?php /**PATH C:\Users\Asus\OneDrive\Documents\instafix24-app\resources\views/welcome.blade.php ENDPATH**/ ?>