<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SNS ADR Conference Rooms</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
        }
        .btn-primary {
            background-color: #2563EB;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #1D4ED8;
            transform: translateY(-2px);
        }
        .btn-secondary {
            background-color: #FF7F50;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background-color: #FF6347;
            transform: translateY(-2px);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Header/Navigation -->
    <header class="sticky top-0 z-50 bg-white shadow-md">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl">SNS</div>
                    <span class="ml-3 text-xl font-bold text-gray-800">ADR Center</span>
                </div>

                <!-- Navigation -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Home</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">About Us</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Conference Rooms</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Pricing</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">T&C</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Testimonials</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Feedback</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
                </nav>

                <!-- Auth Buttons -->
                <div class="flex items-center space-x-4">
                    <button class="px-4 py-2 text-blue-600 font-medium">Login</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">Sign Up</button>
                    <button class="px-6 py-2 bg-orange-500 text-white rounded-lg font-medium hover:bg-orange-600 transition">Book Now</button>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Premium Conference Rooms for Your Business Needs</h1>
            <p class="text-xl mb-8 max-w-2xl mx-auto">State-of-the-art facilities with flexible booking options and instant confirmation</p>
            <button class="btn-secondary px-8 py-3 rounded-full text-lg font-semibold shadow-lg">Book Your Room Today</button>
        </div>
    </section>

    <!-- About Us Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">Why Choose Us?</h2>
            
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-8 md:mb-0">
                    <img src="https://images.unsplash.com/photo-1564507519412-7f097ffbcc9e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                         alt="SNS ADR Center" 
                         class="rounded-lg shadow-xl w-full h-auto">
                </div>
                <div class="md:w-1/2 md:pl-12">
                    <p class="text-lg text-gray-700 mb-8">
                        SNS ADR Center provides premium conference facilities with cutting-edge technology and professional service. 
                        Our modern spaces are designed to inspire productivity and collaboration.
                    </p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-3 rounded-full mr-4">
                                <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">Trusted by Businesses</h3>
                                <p class="text-gray-600">100+ companies rely on our facilities</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-3 rounded-full mr-4">
                                <i class="fas fa-calendar-check text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">Flexible Booking</h3>
                                <p class="text-gray-600">Hourly, daily, or weekly options</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-3 rounded-full mr-4">
                                <i class="fas fa-bolt text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">Instant Confirmation</h3>
                                <p class="text-gray-600">Book and get confirmed immediately</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-3 rounded-full mr-4">
                                <i class="fas fa-parking text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1">Ample Parking</h3>
                                <p class="text-gray-600">Secure parking with lounge facilities</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Conference Rooms Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">Our Conference Rooms</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Room 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
                    <img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                         alt="Executive Boardroom" 
                         class="w-full h-56 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Executive Boardroom</h3>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-users text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Up to 12 people</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-wifi text-gray-500 mr-2"></i>
                            <span class="text-gray-600">High-speed WiFi</span>
                        </div>
                        <div class="flex items-center mb-4">
                            <i class="fas fa-utensils text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Catering available</span>
                        </div>
                        <button class="btn-primary w-full py-2 rounded-lg">Book Now</button>
                    </div>
                </div>
                
                <!-- Room 2 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                         alt="Training Room" 
                         class="w-full h-56 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Training Room</h3>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-users text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Up to 30 people</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-tv text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Projector & Screen</span>
                        </div>
                        <div class="flex items-center mb-4">
                            <i class="fas fa-coffee text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Refreshments included</span>
                        </div>
                        <button class="btn-primary w-full py-2 rounded-lg">Book Now</button>
                    </div>
                </div>
                
                <!-- Room 3 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
                    <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                         alt="Meeting Room" 
                         class="w-full h-56 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Meeting Room</h3>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-users text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Up to 8 people</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <i class="fas fa-phone text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Video conferencing</span>
                        </div>
                        <div class="flex items-center mb-4">
                            <i class="fas fa-print text-gray-500 mr-2"></i>
                            <span class="text-gray-600">Printing facilities</span>
                        </div>
                        <button class="btn-primary w-full py-2 rounded-lg">Book Now</button>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-10">
                <button class="px-6 py-3 border-2 border-blue-600 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition">
                    View All Rooms
                </button>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">What Our Clients Say</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Testimonial 1 -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" 
                             alt="Sarah Johnson" 
                             class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold">Sarah Johnson</h4>
                            <p class="text-gray-600">CEO, TechSolutions</p>
                        </div>
                    </div>
                    <div class="flex mb-3">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-700">
                        "The Executive Boardroom at SNS ADR Center is our go-to for important client meetings. 
                        The facilities are top-notch and the staff is incredibly professional."
                    </p>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" 
                             alt="Michael Chen" 
                             class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold">Michael Chen</h4>
                            <p class="text-gray-600">Director, Global Corp</p>
                        </div>
                    </div>
                    <div class="flex mb-3">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-700">
                        "We've hosted multiple training sessions here and the experience has been flawless every time. 
                        The rooms are spacious and well-equipped with all the tech we need."
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Quick Links -->
                <div>
                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-blue-300">Home</a></li>
                        <li><a href="#" class="hover:text-blue-300">About Us</a></li>
                        <li><a href="#" class="hover:text-blue-300">Conference Rooms</a></li>
                        <li><a href="#" class="hover:text-blue-300">Pricing</a></li>
                        <li><a href="#" class="hover:text-blue-300">Contact</a></li>
                    </ul>
                </div>
                
                <!-- Contact Info -->
                <div>
                    <h3 class="text-lg font-bold mb-4">Contact Us</h3>
                    <address class="not-italic">
                        <p class="mb-2">123 Business Park, Sector 22</p>
                        <p class="mb-2">New Delhi, India 110075</p>
                        <p class="mb-2"><i class="fas fa-phone mr-2"></i> <PRESIDIO_ANONYMIZED_PHONE_NUMBER></p>
                        <p class="mb-2"><i class="fas fa-envelope mr-2"></i> info@snsadr.com</p>
                    </address>
                </div>
                
                <!-- Social Media -->
                <div>
                    <h3 class="text-lg font-bold mb-4">Follow Us</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center hover:bg-blue-500">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-pink-600 rounded-full flex items-center justify-center hover:bg-pink-700">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center hover:bg-blue-800">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Map -->
                <div>
                    <h3 class="text-lg font-bold mb-4">Location</h3>
                    <div class="bg-gray-700 h-40 rounded-lg overflow-hidden">
                        <!-- Map placeholder -->
                        <div class="w-full h-full flex items-center justify-center">
                            <i class="fas fa-map-marker-alt text-2xl text-blue-400"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 SNS ADR Center. All rights reserved.</p>
                <div class="mt-2">
                    <a href="#" class="hover:text-white">Terms & Conditions</a> | 
                    <a href="#" class="hover:text-white">Privacy Policy</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>
   in this i wanted the navbar to be more fashionable also too many tabs in navabr..combine similar into a dropdown ...