<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muslim Connect</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Additional custom styles if needed */
    </style>
</head>
<body class="bg-gray-100 font-sans">

    <!-- Navbar -->
    <header class="bg-green-200 p-4 shadow-md">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center">
                <!-- Hamburger Menu (optional) -->
                <button class="mr-4 md:hidden">
                    <span class="text-xl">&#9776;</span>
                </button>
                <nav class="hidden md:flex space-x-4">
                    <a href="#" class="text-gray-700 hover:text-green-700">Home</a>
                    <a href="#" class="text-gray-700 hover:text-green-700">Mosques</a>
                    <a href="#" class="text-gray-700 hover:text-green-700">Hotels</a>
                    <a href="#" class="text-gray-700 hover:text-green-700">Restaurants</a>
                </nav>
            </div>
            <a href="#" class="text-gray-800 font-bold">Contact Us!</a>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="relative bg-cover bg-center h-96" style="background-image: url('https://images.unsplash.com/photo-1575879173704-dfbf97a191b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
        <div class="absolute inset-0 bg-green-200 bg-opacity-70 flex flex-col justify-center items-center">
            <h1 class="text-6xl font-bold text-gray-800">MUSLIM</h1>
            <h2 class="text-4xl text-gray-600">connect</h2>
            <p class="mt-4 text-xl italic text-gray-700">Connecting you to the heart of the Muslim community, wherever your journey takes you...</p>
        </div>
    </section>

    <!-- About Us Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto flex justify-center items-center space-x-8">
            <!-- Image Card -->
            <div class="w-1/3 p-4 bg-green-200 rounded-lg shadow-lg">
                <img src="https://images.unsplash.com/photo-1508154048109-de555266b1df?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="Mosque Image" class="w-full h-auto rounded-md">
            </div>
            <!-- About Us Text -->
            <div class="w-2/3 p-8 bg-green-100 rounded-lg shadow-lg">
                <h3 class="text-3xl font-bold mb-4 text-gray-800">ABOUT US</h3>
                <p class="text-gray-700 leading-relaxed">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </section>

</body>
</html>
 update this code to be more professional