Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About - Yadgir Water Supply</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> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .team-member:hover img { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-blue-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="droplet" class="w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold">Yadgir Water Supply</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="hover:text-blue-200 font-medium">Home</a> | |
| <a href="complaints.html" class="hover:text-blue-200 font-medium">File Complaint</a> | |
| <a href="track.html" class="hover:text-blue-200 font-medium">Track Complaint</a> | |
| <a href="#" class="text-blue-200 font-medium">About</a> | |
| </nav> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- About Section --> | |
| <section class="mb-16"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> | |
| <div class="bg-blue-600 text-white p-6"> | |
| <h1 class="text-2xl font-bold">About Yadgir Water Supply DBOT Project</h1> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/2"> | |
| <img src="https://via.placeholder.com/600x400" alt="Water Supply Project" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Our Mission</h2> | |
| <p class="text-gray-600 mb-4">To provide reliable, clean, and sustainable water supply to all residents of Yadgir District through innovative infrastructure development and efficient complaint management systems.</p> | |
| <p class="text-gray-600">The DBOT (Design, Build, Operate, Transfer) model ensures that the water supply infrastructure is developed with the highest standards and maintained effectively throughout the project lifecycle.</p> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Project Highlights</h2> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Coverage of 15+ villages in Yadgir District</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">24/7 complaint management system</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Average resolution time under 24 hours</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Transparent tracking system for all complaints</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-blue-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Mobile app for convenient access</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section class="mb-16"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">Our Team</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="team-member bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg" data-aos="fade-up"> | |
| <img src="https://via.placeholder.com/400x300" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-bold text-gray-800">Dr. Rajesh Kumar</h3> | |
| <p class="text-blue-600 mb-2">Project Director</p> | |
| <p class="text-gray-600 text-sm">With over 15 years of experience in water infrastructure projects across Karnataka.</p> | |
| </div> | |
| </div> | |
| <div class="team-member bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="https://via.placeholder.com/400x300" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-bold text-gray-800">Priya Sharma</h3> | |
| <p class="text-blue-600 mb-2">Operations Manager</p> | |
| <p class="text-gray-600 text-sm">Specializes in complaint management systems and customer service excellence.</p> | |
| </div> | |
| </div> | |
| <div class="team-member bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="https://via.placeholder.com/400x300" alt="Team Member" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-lg font-bold text-gray-800">Mahesh Patel</h3> | |
| <p class="text-blue-600 mb-2">Field Supervisor</p> | |
| <p class="text-gray-600 text-sm">Leads our on-ground team of technicians for quick resolution of water supply issues.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> | |
| <div class="bg-blue-600 text-white p-6"> | |
| <h1 class="text-2xl font-bold">Contact Us</h1> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Get In Touch</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i data-feather="mail" class="w-5 h-5 text-blue-600 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Email</h3> | |
| <p class="text-gray-600">complaints@yadgirwater.org</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="phone" class="w-5 h-5 text-blue-600 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Phone</h3> | |
| <p class="text-gray-600">080-23456789 (Office)</p> | |
| <p class="text-gray-600">9876543210 (24/7 Helpline)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="map-pin" class="w-5 h-5 text-blue-600 mt-1 mr-3"></i> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Address</h3> | |
| <p class="text-gray-600">Yadgir Water Supply Project Office</p> | |
| <p class="text-gray-600">Near DC Office, Yadgir</p> | |
| <p class="text-gray-600">Karnataka - 585201</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Send Us a Message</h2> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="contact-name" class="block text-gray-700 font-medium mb-1">Name</label> | |
| <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-gray-700 font-medium mb-1">Email</label> | |
| <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contact-subject" class="block text-gray-700 font-medium mb-1">Subject</label> | |
| <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contact-message" class="block text-gray-700 font-medium mb-1">Message</label> | |
| <textarea id="contact-message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Yadgir Water Supply</h3> | |
| <p class="text-gray-400">A DBOT project for efficient water supply complaint management in Yadgir District, Karnataka.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="complaints.html" class="text-gray-400 hover:text-white transition">File Complaint</a></li> | |
| <li><a href="track.html" class="text-gray-400 hover:text-white transition">Track Complaint</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> complaints@yadgirwater.org</li> | |
| <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> 080-23456789</li> | |
| <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Yadgir, Karnataka</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Yadgir Water Supply DBOT Project. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden"> | |
| <div class="absolute right-0 top-0 w-64 h-full bg-white shadow-lg"> | |
| <div class="p-4 flex justify-end"> | |
| <button id="close-mobile-menu"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col p-4 space-y-4"> | |
| <a href="index.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a> | |
| <a href="complaints.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">File Complaint</a> | |
| <a href="track.html" class="text-gray-800 hover:text-blue-600 font-medium py-2">Track Complaint</a> | |
| <a href="#" class="text-blue-600 font-medium py-2">About</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const closeMobileMenu = document.getElementById('close-mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| closeMobileMenu.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |