| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Salary Search - Iraq Salary Transparency Portal</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| :root { |
| --primary: #6c5ce7; |
| --secondary: #a29bfe; |
| --bg: #e0e5ec; |
| --shadow-light: #ffffff; |
| --shadow-dark: #a3b1c6; |
| } |
| |
| body { |
| background-color: var(--bg); |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .neumorphic { |
| border-radius: 20px; |
| background: var(--bg); |
| box-shadow: 8px 8px 16px var(--shadow-dark), |
| -8px -8px 16px var(--shadow-light); |
| } |
| |
| .neumorphic-inset { |
| border-radius: 20px; |
| background: var(--bg); |
| box-shadow: inset 8px 8px 16px var(--shadow-dark), |
| inset -8px -8px 16px var(--shadow-light); |
| } |
| |
| input, select { |
| border-radius: 15px; |
| background: var(--bg); |
| box-shadow: inset 5px 5px 10px var(--shadow-dark), |
| inset -5px -5px 10px var(--shadow-light); |
| border: none; |
| } |
| |
| nav { |
| border-radius: 0 0 20px 20px; |
| background: var(--bg); |
| box-shadow: 8px 8px 16px var(--shadow-dark), |
| -8px -8px 16px var(--shadow-light); |
| } |
| |
| button { |
| border-radius: 15px; |
| background: var(--bg); |
| box-shadow: 5px 5px 10px var(--shadow-dark), |
| -5px -5px 10px var(--shadow-light); |
| transition: all 0.2s ease; |
| } |
| |
| button:hover { |
| box-shadow: 2px 2px 5px var(--shadow-dark), |
| -2px -2px 5px var(--shadow-light); |
| } |
| |
| button:active { |
| box-shadow: inset 2px 2px 5px var(--shadow-dark), |
| inset -2px -2px 5px var(--shadow-light); |
| } |
| </style> |
| </head> |
| <body class="font-sans"> |
| |
| <nav class="py-4"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <i data-feather="bar-chart-2" class="text-blue-600 mr-2"></i> |
| <span class="text-xl font-bold text-blue-600">Iraq Salary Portal</span> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="index.html" class="text-gray-700 hover:text-blue-600 font-medium">Home</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Submit Salary</a> |
| <a href="salary-search.html" class="text-blue-600 font-medium">Search Data</a> |
| <a href="salary-calculator.html" class="text-gray-700 hover:text-blue-600 font-medium">Calculator</a> |
| <a href="company-culture.html" class="text-gray-700 hover:text-blue-600 font-medium">Company Culture</a> |
| <a href="contact.html" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a> |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Login</button> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12" data-aos="fade-up"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Salary Search</h1> |
| <p class="text-xl text-gray-600">Find salary data by job title, company, or location</p> |
| </div> |
|
|
| <div class="neumorphic p-8 rounded-xl mb-12" data-aos="fade-up"> |
| <div class="grid md:grid-cols-4 gap-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Job Title</label> |
| <input type="text" placeholder="e.g. Software Engineer" class="w-full px-4 py-3"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Company</label> |
| <input type="text" placeholder="e.g. Zain Iraq" class="w-full px-4 py-3"> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Location</label> |
| <select class="w-full px-4 py-3"> |
| <option value="">All Locations</option> |
| <option value="Baghdad">Baghdad</option> |
| <option value="Basra">Basra</option> |
| <option value="Mosul">Mosul</option> |
| <option value="Erbil">Erbil</option> |
| <option value="Sulaymaniyah">Sulaymaniyah</option> |
| <option value="Kirkuk">Kirkuk</option> |
| <option value="Najaf">Najaf</option> |
| <option value="Karbala">Karbala</option> |
| <option value="Nasiriyah">Nasiriyah</option> |
| <option value="Ramadi">Ramadi</option> |
| <option value="Samawa">Samawa</option> |
| <option value="Diyala">Diyala</option> |
| <option value="Dohuk">Dohuk</option> |
| <option value="Halabja">Halabja</option> |
| </select> |
| </div> |
| <div class="flex items-end"> |
| <button class="bg-blue-600 text-white px-6 py-3 w-full hover:bg-blue-700 transition"> |
| <i data-feather="search" class="mr-2 inline"></i> Search |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-wrap gap-4 mb-8" data-aos="fade-up"> |
| <div> |
| <label class="block text-gray-700 mb-2">Experience Level</label> |
| <select class="px-4 py-2"> |
| <option value="">All Levels</option> |
| <option>Entry Level (0-2 years)</option> |
| <option>Mid Level (3-5 years)</option> |
| <option>Senior Level (6+ years)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Industry</label> |
| <select class="px-4 py-2"> |
| <option value="">All Industries</option> |
| <option value="Automotive">Automotive</option> |
| <option value="Oil & Gas">Oil & Gas</option> |
| <option value="NGO">NGO</option> |
| <option value="Construction">Construction</option> |
| <option value="Pharmaceutical">Pharmaceutical</option> |
| <option value="Telecommunications">Telecommunications</option> |
| <option value="Banking & Finance">Banking & Finance</option> |
| <option value="Education">Education</option> |
| <option value="Healthcare">Healthcare</option> |
| <option value="Retail">Retail</option> |
| <option value="Hospitality & Tourism">Hospitality & Tourism</option> |
| <option value="Agriculture">Agriculture</option> |
| <option value="Manufacturing">Manufacturing</option> |
| <option value="Government">Government</option> |
| <option value="Information Technology">Information Technology</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Salary Range</label> |
| <select class="px-4 py-2"> |
| <option value="">All Ranges</option> |
| <option>500,000 - 1,000,000 IQD</option> |
| <option>1,000,000 - 2,000,000 IQD</option> |
| <option>2,000,000 - 3,000,000 IQD</option> |
| <option>3,000,000+ IQD</option> |
| </select> |
| </div> |
| <div class="flex items-end"> |
| <button class="text-blue-600 hover:text-blue-800 flex items-center"> |
| <i data-feather="filter" class="mr-2"></i> More Filters |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="neumorphic p-6 rounded-xl" data-aos="fade-up"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">1,245 Results Found</h2> |
| <div class="flex items-center"> |
| <span class="text-gray-600 mr-2">Sort by:</span> |
| <select class="px-3 py |
