| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>IT Partner Mongolia - IT Solutions & Services</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#3B82F6', |
| 600: '#2563EB', |
| }, |
| secondary: { |
| 500: '#10B981', |
| 600: '#059669', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
|
|
| |
| <section class="relative bg-gradient-to-r from-primary-500 to-primary-600 text-white py-20"> |
| <div class="container mx-auto px-6 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Innovative IT Solutions for Your Business</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">We provide cutting-edge technology services to help your business grow and succeed in the digital world.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#services" class="bg-white text-primary-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-lg transition duration-300">Our Services</a> |
| <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-primary-600 px-8 py-3 rounded-lg font-semibold text-lg transition duration-300">Contact Us</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Services</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
| <div class="text-primary-500 mb-4"> |
| <i data-feather="code" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Software Development</h3> |
| <p class="text-gray-600">Custom software solutions tailored to your business needs, from web applications to enterprise systems.</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
| <div class="text-primary-500 mb-4"> |
| <i data-feather="cloud" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Cloud Solutions</h3> |
| <p class="text-gray-600">Scalable and secure cloud infrastructure to optimize your business operations and reduce costs.</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
| <div class="text-primary-500 mb-4"> |
| <i data-feather="shield" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Cybersecurity</h3> |
| <p class="text-gray-600">Comprehensive security solutions to protect your business from cyber threats and data breaches.</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
| <div class="text-primary-500 mb-4"> |
| <i data-feather="database" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Data Analytics</h3> |
| <p class="text-gray-600">Powerful data analysis tools to extract valuable insights and drive informed business decisions.</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
| <div class="text-primary-500 mb-4"> |
| <i data-feather="smartphone" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Mobile Development</h3> |
| <p class="text-gray-600">Cross-platform mobile applications that deliver seamless user experiences on any device.</p> |
| </div> |
|
|
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300"> |
| <div class="text-primary-500 mb-4"> |
| <i data-feather="headphones" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">IT Consulting</h3> |
| <p class="text-gray-600">Expert advice and strategic planning to align your IT infrastructure with business goals.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
| <img src="http://static.photos/technology/1024x576" alt="IT Team" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="lg:w-1/2"> |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">About IT Partner Mongolia</h2> |
| <p class="text-gray-600 mb-4">We are a team of passionate IT professionals dedicated to delivering innovative solutions that drive business success. With years of experience across various industries, we understand the unique challenges businesses face in today's digital landscape.</p> |
| <p class="text-gray-600 mb-6">Our mission is to empower organizations through technology, helping them streamline operations, enhance productivity, and achieve sustainable growth.</p> |
| <div class="flex flex-wrap gap-4"> |
| <div class="flex items-center"> |
| <div class="bg-primary-500 rounded-full p-2 mr-3"> |
| <i data-feather="check" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-medium text-gray-700">Certified Professionals</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-primary-500 rounded-full p-2 mr-3"> |
| <i data-feather="check" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-medium text-gray-700">24/7 Support</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-primary-500 rounded-full p-2 mr-3"> |
| <i data-feather="check" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-medium text-gray-700">Custom Solutions</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Clients</h2> |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> |
| <div class="flex items-center justify-center p-4"> |
| <img src="http://static.photos/finance/200x200/1" alt="Client Logo" class="h-16 grayscale hover:grayscale-0 transition duration-300"> |
| </div> |
| <div class="flex items-center justify-center p-4"> |
| <img src="http://static.photos/retail/200x200/2" alt="Client Logo" class="h-16 grayscale hover:grayscale-0 transition duration-300"> |
| </div> |
| <div class="flex items-center justify-center p-4"> |
| <img src="http://static.photos/education/200x200/3" alt="Client Logo" class="h-16 grayscale hover:grayscale-0 transition duration-300"> |
| </div> |
| <div class="flex items-center justify-center p-4"> |
| <img src="http://static.photos/healthcare/200x200/4" alt="Client Logo" class="h-16 grayscale hover:grayscale-0 transition duration-300"> |
| </div> |
| <div class="flex items-center justify-center p-4"> |
| <img src="http://static.photos/technology/200x200/5" alt="Client Logo" class="h-16 grayscale hover:grayscale-0 transition duration-300"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 bg-primary-600 text-white p-8 md:p-12"> |
| <h2 class="text-2xl font-bold mb-6">Get in Touch</h2> |
| <div class="mb-6"> |
| <div class="flex items-start mb-4"> |
| <i data-feather="map-pin" class="w-5 h-5 mt-1 mr-3"></i> |
| <div> |
| <h3 class="font-semibold">Address</h3> |
| <p>Ulaanbaatar, Mongolia</p> |
| </div> |
| </div> |
| <div class="flex items-start mb-4"> |
| <i data-feather="mail" class="w-5 h-5 mt-1 mr-3"></i> |
| <div> |
| <h3 class="font-semibold">Email</h3> |
| <p>info@itpartner.mn</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <i data-feather="phone" class="w-5 h-5 mt-1 mr-3"></i> |
| <div> |
| <h3 class="font-semibold">Phone</h3> |
| <p>+976 9999 9999</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-white hover:text-gray-200"> |
| <i data-feather="facebook" class="w-6 h-6"></i> |
| </a> |
| <a href="#" class="text-white hover:text-gray-200"> |
| <i data-feather="twitter" class="w-6 h-6"></i> |
| </a> |
| <a href="#" class="text-white hover:text-gray-200"> |
| <i data-feather="linkedin" class="w-6 h-6"></i> |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 p-8 md:p-12"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Send Us a Message</h2> |
| <form> |
| <div class="mb-4"> |
| <label for="name" class="block text-gray-700 mb-2">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="email" class="block text-gray-700 mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="message" class="block text-gray-700 mb-2">Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">Send Message</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
