| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Iraq Leadership Academy</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> |
| | .hero-gradient { |
| | background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
| | } |
| | .card-hover:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | .transition-smooth { |
| | transition: all 0.3s ease; |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans antialiased text-gray-800"> |
| | |
| | <nav class="bg-white shadow-sm fixed w-full z-10"> |
| | <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"> |
| | <div class="flex-shrink-0 flex items-center"> |
| | <i data-feather="award" class="h-8 w-8 text-blue-600"></i> |
| | <span class="ml-2 text-xl font-bold text-blue-600">Iraq Leadership Academy</span> |
| | </div> |
| | </div> |
| | <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| | <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
| | <a href="#programs" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Programs</a> |
| | <a href="#announcements" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Announcements</a> |
| | <a href="student-portal.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Student Portal</a> |
| | </div> |
| | <div class="hidden sm:ml-6 sm:flex sm:items-center"> |
| | <a href="login.html" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Login</a> |
| | </div> |
| | <div class="-mr-2 flex items-center sm:hidden"> |
| | <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="sm:hidden hidden" id="mobile-menu"> |
| | <div class="pt-2 pb-3 space-y-1"> |
| | <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
| | <a href="#programs" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Programs</a> |
| | <a href="#announcements" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Announcements</a> |
| | <a href="student-portal.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Student Portal</a> |
| | <a href="login.html" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50">Login</a> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <div class="hero-gradient pt-24 pb-32 text-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:grid lg:grid-cols-12 lg:gap-8"> |
| | <div class="px-4 sm:px-0 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center"> |
| | <div> |
| | <h1 class="mt-4 text-4xl tracking-tight font-extrabold sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl"> |
| | <span class="md:block">Shaping Iraq's</span> |
| | <span class="text-blue-300 md:block">Future Leaders</span> |
| | </h1> |
| | <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl"> |
| | Empowering the next generation of Iraqi leaders through world-class education and leadership development programs. |
| | </p> |
| | <div class="mt-10 sm:mt-12"> |
| | <div class="sm:max-w-xl sm:mx-auto lg:mx-0"> |
| | <div class="sm:flex"> |
| | <div class="min-w-0 flex-1"> |
| | <a href="login.html" class="block w-full px-4 py-3 rounded-md shadow bg-blue-500 hover:bg-blue-600 text-white font-medium text-center transition-smooth">Get Started</a> |
| | </div> |
| | <div class="mt-3 sm:mt-0 sm:ml-3"> |
| | <a href="#programs" class="block w-full px-4 py-3 rounded-md shadow bg-white hover:bg-gray-50 text-blue-600 font-medium text-center transition-smooth">Our Programs</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> |
| | <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> |
| | <img class="w-full rounded-lg" src="http://static.photos/education/1024x576/1" alt="Students learning"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="programs" class="py-12 bg-white"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Programs</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| | Our Leadership Development Programs |
| | </p> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| | Designed to cultivate leadership skills at every level of education. |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
| | |
| | <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-smooth"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| | <i data-feather="book" class="h-6 w-6 text-white"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Youth Leadership</h3> |
| | <p class="mt-1 text-sm text-gray-500">For high school students</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-sm text-gray-600"> |
| | A 12-week intensive program focusing on leadership fundamentals, public speaking, and community engagement. |
| | </p> |
| | </div> |
| | <div class="mt-5"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500"> |
| | Learn more <span aria-hidden="true">→</span> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-smooth"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| | <i data-feather="users" class="h-6 w-6 text-white"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Executive Leadership</h3> |
| | <p class="mt-1 text-sm text-gray-500">For professionals</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-sm text-gray-600"> |
| | Advanced leadership training for mid-career professionals focusing on strategic thinking and organizational leadership. |
| | </p> |
| | </div> |
| | <div class="mt-5"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500"> |
| | Learn more <span aria-hidden="true">→</span> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white overflow-hidden shadow rounded-lg card-hover transition-smooth"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| | <i data-feather="globe" class="h-6 w-6 text-white"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Global Leaders</h3> |
| | <p class="mt-1 text-sm text-gray-500">For university students</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <p class="text-sm text-gray-600"> |
| | International exchange program with leadership seminars and cultural immersion experiences. |
| | </p> |
| | </div> |
| | <div class="mt-5"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500"> |
| | Learn more <span aria-hidden="true">→</span> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="announcements" class="py-12 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="lg:text-center"> |
| | <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Announcements</h2> |
| | <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| | Latest Updates |
| | </p> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| | Stay informed about our latest news and events. |
| | </p> |
| | </div> |
| |
|
| | <div class="mt-10"> |
| | <div class="space-y-4"> |
| | |
| | <div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
| | <div class="px-4 py-5 sm:px-6"> |
| | <div class="flex items-center justify-between"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">New Leadership Summit 2023</h3> |
| | <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">New</span> |
| | </div> |
| | <div class="mt-1 max-w-2xl text-sm text-gray-500"> |
| | <p>Join us for our annual leadership summit featuring international speakers and workshops.</p> |
| | </div> |
| | <div class="mt-4"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500"> |
| | Read more <span aria-hidden="true">→</span> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
| | <div class="px-4 py-5 sm:px-6"> |
| | <div class="flex items-center justify-between"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Application Deadline Extended</h3> |
| | <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Important</span> |
| | </div> |
| | <div class="mt-1 max-w-2xl text-sm text-gray-500"> |
| | <p>The application deadline for the Youth Leadership Program has been extended to October 15th.</p> |
| | </div> |
| | <div class="mt-4"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500"> |
| | Read more <span aria-hidden="true">→</span> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
| | <div class="px-4 py-5 sm:px-6"> |
| | <div class="flex items-center justify-between"> |
| | <h3 class="text-lg leading-6 font-medium text-gray-900">Alumni Success Stories</h3> |
| | <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Featured</span> |
| | </div> |
| | <div class="mt-1 max-w-2xl text-sm text-gray-500"> |
| | <p>Read about how our alumni are making an impact in their communities and careers.</p> |
| | </div> |
| | <div class="mt-4"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500"> |
| | Read more <span aria-hidden="true">→</span> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-blue-700"> |
| | <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> |
| | <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
| | <span class="block">Ready to begin your leadership journey?</span> |
| | </h2> |
| | <p class="mt-4 text-lg leading-6 text-blue-200"> |
| | Join hundreds of students who have transformed their leadership potential through our programs. |
| | </p> |
| | <a href="login.html" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 sm:w-auto"> |
| | Apply Now |
| | </a> |
| | </div> |
| | </div> |
| |
|
| | |
| | <footer class="bg-gray-800"> |
| | <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">About</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Our Mission</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Faculty</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Partners</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Programs</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Youth Leadership</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Executive Leadership</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Global Leaders</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Research</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">FAQs</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> |
| | <ul class="mt-4 space-y-4"> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a></li> |
| | <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> |
| | <li class="flex space-x-6"> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="facebook"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="twitter"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="instagram"></i> |
| | </a> |
| | <a href="#" class="text-gray-400 hover:text-white"> |
| | <i data-feather="linkedin"></i> |
| | </a> |
| | </li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="mt-12 border-t border-gray-700 pt-8"> |
| | <p class="text-base text-gray-400 text-center"> |
| | © 2023 Iraq Leadership Academy. All rights reserved. |
| | </p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { |
| | const menu = document.getElementById('mobile-menu'); |
| | menu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | AOS.init(); |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
