Daniel González Fernández
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex flex-col"> <header class="bg-white shadow-md"> <div class="container mx-auto px-6 py-4 flex justify-between items-center"> <h1 class="text-3xl font-bold text-blue-600">RoomMate Match</h1> <nav> <ul class="flex space-x-4"> <li><a href="#" class="text-gray-700 hover:text-blue-500">Home</a></li> <li><a href="#" class="text-gray-700 hover:text-blue-500">About</a></li> <li><a href="#" class="text-gray-700 hover:text-blue-500">Contact</a></li> <li><a href="#" class="text-blue-500 hover:bg-blue-100 px-4 py-2 rounded">Sign Up</a></li> </ul> </nav> </div> </header> <main class="flex-grow flex flex-col items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500"> <div class="bg-white rounded-lg shadow-2xl p-8 max-w-lg w-full text-center mb-6"> <h2 class="text-2xl font-bold mb-4">Find Your Perfect Roommate</h2> <p class="text-gray-600 mb-6">Join our community and connect with potential roommates that match your lifestyle and preferences.</p> <a href="#" class="bg-blue-500 text-white px-6 py-2 rounded-lg shadow-lg hover:bg-blue-400 transition-all duration-300">Get Started</a> </div> <div class="flex flex-col items-center mb-8"> <h3 class="text-xl font-semibold mb-2">Join Our Community!</h3> <p class="text-gray-600 mb-4">Sign up to receive updates and find your perfect roommate.</p> <input type="email" placeholder="Enter your email" class="p-2 border rounded mb-2 w-64" /> <button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg hover:bg-blue-400 transition-all duration-300">Subscribe</button> </div> </main> <section class="bg-gray-50 py-12"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-8">How It Works</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white rounded-lg shadow-lg p-6 text-center"> <i class="fa-solid fa-user-friends text-4xl text-blue-500 mb-4"></i> <h3 class="text-xl font-semibold mb-2">Create a Profile</h3> <p class="text-gray-600">Sign up and create a profile that showcases your interests and preferences.</p> </div> <div class="bg-white rounded-lg shadow-lg p-6 text-center"> <i class="fa-solid fa-search text-4xl text-blue-500 mb-4"></i> <h3 class="text-xl font-semibold mb-2">Find Matches</h3> <p class="text-gray-600">Browse through potential roommates and find matches that suit your needs.</p> </div> <div class="bg-white rounded-lg shadow-lg p-6 text-center"> <i class="fa-solid fa-comments text-4xl text-blue-500 mb-4"></i> <h3 class="text-xl font-semibold mb-2">Connect & Chat</h3> <p class="text-gray-600">Connect with your matches and chat to see if you’re a good fit.</p> </div> </div> </div> </section> <footer class="bg-white py-4"> <div class="container mx-auto text-center"> <p class="text-gray-600">© 2023 RoomMate Match. All rights reserved.</p> </div> </footer> </body>