Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Roomify - Find Your Perfect Roommate</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b21a8 0%, #9333ea 100%); | |
| } | |
| .room-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| #preferenceForm { | |
| scroll-margin-top: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg 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 class="fas fa-home text-2xl"></i> | |
| <h1 class="text-2xl font-bold">Roomify</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="hover:text-purple-200 transition">Home</a> | |
| <a href="#about" class="hover:text-purple-200 transition">About Us</a> | |
| <a href="#services" class="hover:text-purple-200 transition">Services</a> | |
| <a href="#locations" class="hover:text-purple-200 transition">Locations</a> | |
| <a href="#testimonials" class="hover:text-purple-200 transition">Testimonials</a> | |
| <a href="#contact" class="hover:text-purple-200 transition">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-xl" id="mobileMenuButton"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-purple-900 py-4" id="mobileMenu"> | |
| <div class="container mx-auto px-4 flex flex-col space-y-4"> | |
| <a href="#home" class="hover:text-purple-200 transition">Home</a> | |
| <a href="#about" class="hover:text-purple-200 transition">About Us</a> | |
| <a href="#services" class="hover:text-purple-200 transition">Services</a> | |
| <a href="#locations" class="hover:text-purple-200 transition">Locations</a> | |
| <a href="#testimonials" class="hover:text-purple-200 transition">Testimonials</a> | |
| <a href="#contact" class="hover:text-purple-200 transition">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Find Your Perfect Roommate in Karnataka</h1> | |
| <p class="text-xl mb-8">Roomify matches you with compatible roommates based on your preferences, lifestyle, and budget.</p> | |
| <a href="#preferenceForm" class="bg-white text-purple-800 px-8 py-3 rounded-full font-semibold hover:bg-purple-100 transition inline-block">Find a Roommate</a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1554469384-e58f16ae882d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Happy roommates" class="rounded-lg shadow-2xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Preference Form --> | |
| <section id="preferenceForm" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Tell Us Your Preferences</h2> | |
| <form id="roommateForm" class="max-w-3xl mx-auto bg-gray-100 p-8 rounded-lg shadow-lg"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- Personal Info --> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-800">Personal Information</h3> | |
| </div> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div> | |
| <label for="age" class="block mb-2 font-medium">Age</label> | |
| <input type="number" id="age" min="18" max="60" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div> | |
| <label for="gender" class="block mb-2 font-medium">Gender</label> | |
| <select id="gender" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select</option> | |
| <option value="male">Male</option> | |
| <option value="female">Female</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="education" class="block mb-2 font-medium">Education Level</label> | |
| <select id="education" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select</option> | |
| <option value="ug">Undergraduate (UG)</option> | |
| <option value="pg">Postgraduate (PG)</option> | |
| <option value="working">Working Professional</option> | |
| </select> | |
| </div> | |
| <!-- Location Preferences --> | |
| <div class="md:col-span-2 mt-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-800">Location Preferences</h3> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="city" class="block mb-2 font-medium">Preferred City in Karnataka</label> | |
| <select id="city" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select City</option> | |
| <option value="bangalore">Bangalore</option> | |
| <option value="mysore">Mysore</option> | |
| <option value="hubli">Hubli</option> | |
| <option value="mangalore">Mangalore</option> | |
| <option value="belgaum">Belgaum</option> | |
| <option value="udupi">Udupi</option> | |
| <option value="manipal">Manipal</option> | |
| <option value="dharwad">Dharwad</option> | |
| <option value="gulbarga">Gulbarga</option> | |
| <option value="shimoga">Shimoga</option> | |
| </select> | |
| </div> | |
| <!-- Lifestyle Preferences --> | |
| <div class="md:col-span-2 mt-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-800">Lifestyle Preferences</h3> | |
| </div> | |
| <div> | |
| <label for="food" class="block mb-2 font-medium">Food Habit</label> | |
| <select id="food" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select</option> | |
| <option value="vegetarian">Vegetarian</option> | |
| <option value="non-vegetarian">Non-Vegetarian</option> | |
| <option value="vegan">Vegan</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="language" class="block mb-2 font-medium">Preferred Language</label> | |
| <select id="language" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select</option> | |
| <option value="kannada">Kannada</option> | |
| <option value="hindi">Hindi</option> | |
| <option value="english">English</option> | |
| <option value="tamil">Tamil</option> | |
| <option value="telugu">Telugu</option> | |
| <option value="malayalam">Malayalam</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="budget" class="block mb-2 font-medium">Monthly Budget (₹)</label> | |
| <select id="budget" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select</option> | |
| <option value="5000-10000">₹5,000 - ₹10,000</option> | |
| <option value="10000-15000">₹10,000 - ₹15,000</option> | |
| <option value="15000-20000">₹15,000 - ₹20,000</option> | |
| <option value="20000-25000">₹20,000 - ₹25,000</option> | |
| <option value="25000+">₹25,000+</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="roomType" class="block mb-2 font-medium">Room Type</label> | |
| <select id="roomType" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| <option value="">Select</option> | |
| <option value="single">Single Room</option> | |
| <option value="shared">Shared Room</option> | |
| <option value="studio">Studio Apartment</option> | |
| </select> | |
| </div> | |
| <!-- Additional Preferences --> | |
| <div class="md:col-span-2 mt-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-800">Additional Preferences</h3> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block mb-2 font-medium">Roommate Qualities (Select all that apply)</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="clean" class="mr-2"> | |
| <label for="clean">Clean</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="quiet" class="mr-2"> | |
| <label for="quiet">Quiet</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="social" class="mr-2"> | |
| <label for="social">Social</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="studious" class="mr-2"> | |
| <label for="studious">Studious</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="petFriendly" class="mr-2"> | |
| <label for="petFriendly">Pet Friendly</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="nonSmoker" class="mr-2"> | |
| <label for="nonSmoker">Non-Smoker</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="earlyBird" class="mr-2"> | |
| <label for="earlyBird">Early Bird</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="nightOwl" class="mr-2"> | |
| <label for="nightOwl">Night Owl</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="additionalInfo" class="block mb-2 font-medium">Additional Information</label> | |
| <textarea id="additionalInfo" rows="3" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Any other preferences or information you'd like to share..."></textarea> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button type="submit" class="gradient-bg text-white px-10 py-3 rounded-full font-semibold hover:opacity-90 transition">Find My Match</button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Results Section (Initially Hidden) --> | |
| <section id="resultsSection" class="py-16 bg-gray-100 hidden"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Your Roommate Matches</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="matchesContainer"> | |
| <!-- Matches will be inserted here by JavaScript --> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button id="backToForm" class="bg-purple-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-700 transition">Adjust Preferences</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Us Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">About Roomify</h2> | |
| <div class="flex flex-col md:flex-row items-center gap-10"> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About Roomify" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-4 text-purple-800">Our Story</h3> | |
| <p class="mb-4 text-gray-700">Roomify was founded in 2023 with a simple mission: to make finding the perfect roommate in Karnataka as easy and stress-free as possible. We understand that your living situation can make or break your experience in a new city.</p> | |
| <p class="mb-4 text-gray-700">Our team of housing experts and matchmaking specialists have developed a unique algorithm that considers all the important factors - from lifestyle preferences to budget constraints - to help you find your ideal living situation.</p> | |
| <p class="text-gray-700">Whether you're a student, young professional, or relocating to Karnataka, Roomify is here to help you find not just a place to live, but a place to call home.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Our Services</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-user-friends text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Roommate Matching</h3> | |
| <p class="text-gray-700">Our advanced algorithm matches you with compatible roommates based on your lifestyle, habits, and preferences to ensure a harmonious living environment.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-home text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Verified Listings</h3> | |
| <p class="text-gray-700">All our listings are personally verified by our team to ensure they meet our quality standards and match the description provided.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-handshake text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Rental Assistance</h3> | |
| <p class="text-gray-700">We assist with all aspects of the rental process, from initial search to lease signing, making your transition as smooth as possible.</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mt-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-rupee-sign text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Budget Planning</h3> | |
| <p class="text-gray-700">We help you find accommodations that fit your budget, with options ranging from ₹5,000 to ₹25,000+ per month across Karnataka.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-utensils text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Food Preferences</h3> | |
| <p class="text-gray-700">We match you with roommates who share similar food habits - vegetarian, non-vegetarian, or vegan - to avoid kitchen conflicts.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-language text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Language Compatibility</h3> | |
| <p class="text-gray-700">Find roommates who speak your preferred language - Kannada, Hindi, English, Tamil, Telugu, or Malayalam - for better communication.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Locations Section --> | |
| <section id="locations" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Our Locations in Karnataka</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Bangalore --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1522458203812-7e8d5f8e6c00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bangalore" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Bangalore</h3> | |
| <p class="text-gray-700 mb-4">The IT capital of India with vibrant nightlife and cosmopolitan culture.</p> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-home mr-1"></i> 120+ Listings</span> | |
| <span><i class="fas fa-rupee-sign mr-1"></i> ₹8k - ₹25k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mysore --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1587474260584-136574528ed5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mysore" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Mysore</h3> | |
| <p class="text-gray-700 mb-4">The cultural capital with palaces, yoga centers, and educational institutions.</p> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-home mr-1"></i> 45+ Listings</span> | |
| <span><i class="fas fa-rupee-sign mr-1"></i> ₹5k - ₹15k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mangalore --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1584697964358-3e16d5330f75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mangalore" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Mangalore</h3> | |
| <p class="text-gray-700 mb-4">Coastal city with beautiful beaches and renowned medical colleges.</p> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-home mr-1"></i> 35+ Listings</span> | |
| <span><i class="fas fa-rupee-sign mr-1"></i> ₹5k - ₹12k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hubli --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1581852057101-aa4497e9d52e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hubli" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Hubli</h3> | |
| <p class="text-gray-700 mb-4">Commercial hub with growing IT sector and affordable living costs.</p> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-home mr-1"></i> 28+ Listings</span> | |
| <span><i class="fas fa-rupee-sign mr-1"></i> ₹4k - ₹10k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manipal --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1581852057101-aa4497e9d52e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Manipal" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Manipal</h3> | |
| <p class="text-gray-700 mb-4">University town with vibrant student community and international exposure.</p> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-home mr-1"></i> 50+ Listings</span> | |
| <span><i class="fas fa-rupee-sign mr-1"></i> ₹5k - ₹15k</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Belgaum --> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="https://images.unsplash.com/photo-1581852057101-aa4497e9d52e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Belgaum" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Belgaum</h3> | |
| <p class="text-gray-700 mb-4">Border city with mix of Karnataka and Maharashtra cultures, known for military presence.</p> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span><i class="fas fa-home mr-1"></i> 22+ Listings</span> | |
| <span><i class="fas fa-rupee-sign mr-1"></i> ₹4k - ₹9k</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <p class="text-gray-700 mb-4">We also serve these cities in Karnataka:</p> | |
| <div class="flex flex-wrap justify-center gap-3 max-w-2xl mx-auto"> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Udupi</span> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Dharwad</span> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Gulbarga</span> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Shimoga</span> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Tumkur</span> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Hassan</span> | |
| <span class="bg-purple-100 text-purple-800 px-4 py-2 rounded-full">Chikmagalur</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">What Our Users Say</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">P</div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Priya Sharma</h4> | |
| <p class="text-gray-600 text-sm">PG Student, Bangalore</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="text-gray-700">"Roomify helped me find the perfect vegetarian roommate in Bangalore. We share similar study habits and even became good friends. The ₹12,000 rent for our shared apartment is very reasonable for the location!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">R</div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Rahul Patel</h4> | |
| <p class="text-gray-600 text-sm">Working Professional, Mangalore</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="text-gray-700">"As a non-vegetarian working night shifts, I was struggling to find compatible roommates. Roomify matched me with two others who have similar schedules. Our ₹18,000 3BHK is perfect and we all speak Kannada!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">A</div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Ananya Reddy</h4> | |
| <p class="text-gray-600 text-sm">UG Student, Manipal</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <p class="text-gray-700">"Coming from Andhra Pradesh, I wanted roommates who understand Telugu. Roomify found me two amazing girls who speak Telugu and share my vegan lifestyle. Our ₹7,500 per person shared room is clean and near campus."</p> | |
| </div> | |
| <!-- Testimonial 4 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md testimonial-card md:hidden lg:block"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">S</div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Suresh Kumar</h4> | |
| <p class="text-gray-600 text-sm">PG Student, Mysore</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="text-gray-700">"I needed a quiet, studious environment for my postgraduate studies. Roomify matched me with a PhD scholar who values silence. Our ₹9,000 single rooms in the same house are perfect, and we often study together in the common area."</p> | |
| </div> | |
| <!-- Testimonial 5 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md testimonial-card md:hidden lg:block"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">D</div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Deepak Joshi</h4> | |
| <p class="text-gray-600 text-sm">Working Professional, Hubli</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="text-gray-700">"As a Hindi-speaking professional new to Karnataka, I was worried about communication. Roomify found me a flatmate who speaks Hindi and showed me around Hubli. Our ₹6,500 shared apartment is great value for money."</p> | |
| </div> | |
| <!-- Testimonial 6 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md testimonial-card md:hidden lg:block"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-200 text-purple-800 rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl">M</div> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Meena Krishnan</h4> | |
| <p class="text-gray-600 text-sm">Medical Student, Belgaum</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <p class="text-gray-700">"Finding female roommates near my medical college was challenging. Roomify connected me with three other medical students. We share a ₹20,000 2BHK (₹5k each) and take turns cooking vegetarian meals. Perfect for our hectic schedules!"</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button id="showMoreTestimonials" class="md:hidden bg-purple-800 text-white px-6 py-2 rounded-full font-semibold hover:bg-purple-700 transition">Show More Testimonials</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Us Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-purple-900">Contact Us</h2> | |
| <div class="flex flex-col md:flex-row gap-10"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-6 text-purple-800">Get in Touch</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Email</h4> | |
| <p class="text-gray-700">roomify123@gmail.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Phone</h4> | |
| <p class="text-gray-700">+91 98765 43210</p> | |
| <p class="text-gray-700">+91 87654 32109</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Office</h4> | |
| <p class="text-gray-700">#123, MG Road, Bangalore</p> | |
| <p class="text-gray-700">Karnataka - 560001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Working Hours</h4> | |
| <p class="text-gray-700">Monday - Friday: 9 AM - 6 PM</p> | |
| <p class="text-gray-700">Saturday: 10 AM - 4 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-semibold mt-10 mb-4 text-purple-800">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-purple-100 p-3 rounded-full text-purple-600 hover:bg-purple-200 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-6 text-purple-800">Send Us a Message</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="contactName" class="block mb-1 font-medium">Your Name</label> | |
| <input type="text" id="contactName" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div> | |
| <label for="contactEmail" class="block mb-1 font-medium">Email Address</label> | |
| <input type="email" id="contactEmail" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div> | |
| <label for="contactSubject" class="block mb-1 font-medium">Subject</label> | |
| <input type="text" id="contactSubject" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required> | |
| </div> | |
| <div> | |
| <label for="contactMessage" class="block mb-1 font-medium">Message</label> | |
| <textarea id="contactMessage" rows="5" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500" required></textarea> | |
| </div> | |
| <button type="submit" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-purple-900 text-white py-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 flex items-center"> | |
| <i class="fas fa-home mr-2"></i> Roomify | |
| </h3> | |
| <p class="mb-4">Finding your perfect roommate in Karnataka made simple and stress-free.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="hover:text-purple-200 transition">Home</a></li> | |
| <li><a href="#about" class="hover:text-purple-200 transition">About Us</a></li> | |
| <li><a href="#services" class="hover:text-purple-200 transition">Services</a></li> | |
| <li><a href="#locations" class="hover:text-purple-200 transition">Locations</a></li> | |
| <li><a href="#testimonials" class="hover:text-purple-200 transition">Testimonials</a></li> | |
| <li><a href="#contact" class="hover:text-purple-200 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-purple-200 transition">Roommate Matching</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Verified Listings</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Rental Assistance</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Budget Planning</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Food Preferences</a></li> | |
| <li><a href="#" class="hover:text-purple-200 transition">Language Compatibility</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Newsletter</h3> | |
| <p class="mb-4">Subscribe to get updates on new listings and roommate matching tips.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" class="bg-purple-600 px-4 py-2 rounded-r hover:bg-purple-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-800 mt-10 pt-6 text-center"> | |
| <p>© 2023 Roomify. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobileMenuButton').addEventListener('click', function() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Show more testimonials on mobile | |
| document.getElementById('showMoreTestimonials').addEventListener('click', function() { | |
| const hiddenTestimonials = document.querySelectorAll('.testimonial-card.md\\:hidden'); | |
| hiddenTestimonials.forEach(card => { | |
| card.classList.remove('md:hidden', 'lg:block'); | |
| card.classList.add('block'); | |
| }); | |
| this.style.display = 'none'; | |
| }); | |
| // Roommate matching form submission | |
| document.getElementById('roommateForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const age = document.getElementById('age').value; | |
| const gender = document.getElementById('gender').value; | |
| const education = document.getElementById('education').value; | |
| const city = document.getElementById('city').value; | |
| const food = document.getElementById('food').value; | |
| const language = document.getElementById('language').value; | |
| const budget = document.getElementById('budget').value; | |
| const roomType = document.getElementById('roomType').value; | |
| // Hide form and show results | |
| document.getElementById('preferenceForm').classList.add('hidden'); | |
| document.getElementById('resultsSection').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' }); | |
| // Generate matches (simulated data) | |
| generateMatches(city, food, language, budget, roomType); | |
| }); | |
| // Back to form button | |
| document.getElementById('backToForm').addEventListener('click', function() { | |
| document.getElementById('resultsSection').classList.add('hidden'); | |
| document.getElementById('preferenceForm').classList.remove('hidden'); | |
| document.getElementById('preferenceForm').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Generate simulated matches | |
| function generateMatches(city, food, language, budget, roomType) { | |
| const matchesContainer = document.getElementById('matchesContainer'); | |
| matchesContainer.innerHTML = ''; | |
| // Sample data for matches based on preferences | |
| const sampleMatches = [ | |
| { | |
| name: "Arjun M.", | |
| age: 24, | |
| gender: "male", | |
| education: "PG", | |
| city: city, | |
| food: food, | |
| language: language, | |
| budget: budget, | |
| roomType: roomType, | |
| image: "https://randomuser.me/api/portraits/men/32.jpg", | |
| description: "Engineering student looking for a quiet place to study. Prefers clean environment and follows regular schedule." | |
| }, | |
| { | |
| name: "Priya S.", | |
| age: 22, | |
| gender: "female", | |
| education: "UG", | |
| city: city, | |
| food: food, | |
| language: language, | |
| budget: budget, | |
| roomType: roomType, | |
| image: "https://randomuser.me/api/portraits/women/44.jpg", | |
| description: "Medical student with hectic schedule. Needs a peaceful environment to rest between shifts." | |
| }, | |
| { | |
| name: "Rahul K.", | |
| age: 26, | |
| gender: "male", | |
| education: "Working Professional", | |
| city: city, | |
| food: food, | |
| language: language, | |
| budget: budget, | |
| roomType: roomType, | |
| image: "https://randomuser.me/api/portraits/men/22.jpg", | |
| description: "IT professional working from home 3 days a week. Values cleanliness and quiet during work hours." | |
| }, | |
| { | |
| name: "Ananya P.", | |
| age: 23, | |
| gender: "female", | |
| education: "PG", | |
| city: city, | |
| food: food, | |
| language: language, | |
| budget: budget, | |
| roomType: roomType, | |
| image: "https://randomuser.me/api/portraits/women/63.jpg", | |
| description: "Arts student who enjoys cooking and occasional movie nights. Looking for friendly flatmates." | |
| }, | |
| { | |
| name: "Vikram J.", | |
| age: 25, | |
| gender: "male", | |
| education: "Working Professional", | |
| city: city, | |
| food: food, | |
| language: language, | |
| budget: budget, | |
| roomType: roomType, | |
| image: "https://randomuser.me/api/portraits/men/41.jpg", | |
| description: "Bank employee with regular hours. Enjoys sports and looking for active roommates." | |
| }, | |
| { | |
| name: "Divya R.", | |
| age: 24, | |
| gender: "female", | |
| education: "UG", | |
| city: city, | |
| food: food, | |
| language: language, | |
| budget: budget, | |
| roomType: roomType, | |
| image: "https://randomuser.me/api/portraits/women/33.jpg", | |
| description: "Design student who loves art exhibitions and cultural events. Prefers creative environment." | |
| } | |
| ]; | |
| // Display matches | |
| sampleMatches.forEach(match => { | |
| const matchCard = document.createElement('div'); | |
| matchCard.className = 'bg-white rounded-lg shadow-md room-card transition overflow-hidden'; | |
| matchCard.innerHTML = ` | |
| <div class="h-48 overflow-hidden"> | |
| <img src="${match.image}" alt="${match.name}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-semibold">${match.name}</h3> | |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-sm">${match.age} yrs</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${match.gender === 'male' ? 'Male' : 'Female'}</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${match.education === 'UG' ? 'Undergrad' : match.education === 'PG' ? 'Postgrad' : 'Working'}</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${food === 'vegetarian' ? 'Vegetarian' : food === 'non-vegetarian' ? 'Non-Veg' : 'Vegan'}</span> | |
| <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">${language === 'kannada' ? 'Kannada' : language === 'hindi' ? 'Hindi' : language === 'english' ? 'English' : language === 'tamil' ? 'Tamil' : language === 'telugu' ? 'Telugu' : 'Malayalam'}</span> | |
| </div> | |
| <p class="text-gray-700 mb-4">${match.description}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">${budget === '5000-10000' ? '₹5k-10k' : budget === '10000-15000' ? '₹10k-15k' : budget === '15000-20000' ? '₹15k-20k' : budget === '20000-25000' ? '₹20k-25k' : '₹25k+'}</span> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">Contact</button> | |
| </div> | |
| </div> | |
| `; | |
| matchesContainer.appendChild(matchCard); | |
| }); | |
| } | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Aidevi/roomify-modified" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |