| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>StudentStay - Find Your Perfect Student Accommodation</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <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> |
| <style> |
| .property-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .gallery-slider { |
| scroll-snap-type: x mandatory; |
| } |
| .gallery-slide { |
| scroll-snap-align: start; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="#" class="flex items-center"> |
| <i data-feather="home" class="text-blue-500 mr-2"></i> |
| <span class="text-xl font-bold text-blue-600">StudentStay</span> |
| </a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#" class="text-blue-600 font-medium">Home</a> |
| <a href="listings.html" class="text-gray-600 hover:text-blue-600">Listings</a> |
| <a href="landlord.html" class="text-gray-600 hover:text-blue-600">For Landlords</a> |
| <a href="about.html" class="text-gray-600 hover:text-blue-600">About</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="login.html" class="px-4 py-2 rounded-md text-blue-600 border border-blue-600 hover:bg-blue-50">Log In</a> |
| <a href="signup.html" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700">Sign Up</a> |
| <button class="md:hidden text-gray-600"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="relative bg-blue-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24"> |
| <div class="text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Find Your Perfect Student Accommodation</h1> |
| <p class="text-xl text-gray-600 mb-8">Safe, affordable housing options near your campus</p> |
| |
| |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-4"> |
| <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4"> |
| <div class="flex-1"> |
| <label for="location" class="sr-only">Location</label> |
| <div class="relative"> |
| <i data-feather="map-pin" class="absolute left-3 top-3 text-gray-400"></i> |
| <input type="text" id="location" placeholder="University or location" class="pl-10 w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <label for="room-type" class="sr-only">Room Type</label> |
| <select id="room-type" class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| <option value="">Any type</option> |
| <option value="private">Private Room</option> |
| <option value="shared">Shared Room</option> |
| <option value="apartment">Apartment</option> |
| <option value="hostel">Hostel</option> |
| </select> |
| </div> |
| <button class="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 transition-colors"> |
| <i data-feather="search" class="inline mr-2"></i> Search |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="flex justify-between items-center mb-10"> |
| <h2 class="text-3xl font-bold text-gray-900">Featured Properties</h2> |
| <a href="listings.html" class="text-blue-600 hover:underline">View all</a> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <a href="property.html?id=1" class="property-card transition-all duration-300 ease-in-out"> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> |
| <div class="relative pb-2/3 h-48"> |
| <img src="https://images.unsplash.com/photo-1560448070-847cb1d99d26" alt="Modern Apartment" class="absolute h-full w-full object-cover"> |
| <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded-full text-sm font-medium">R8,500/mo</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Modern Campus Apartment</h3> |
| <p class="text-gray-600 mb-4"><i data-feather="map-pin" class="inline mr-1 w-4 h-4"></i> 0.8km from University of Western Cape</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Private</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Wi-Fi</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Furnished</span> |
| </div> |
| <button class="w-full mt-2 bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition-colors">View Details</button> |
| </div> |
| </div> |
| </a> |
|
|
| |
| <a href="property.html?id=2" class="property-card transition-all duration-300 ease-in-out"> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> |
| <div class="relative pb-2/3 h-48"> |
| <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c" alt="Shared House" class="absolute h-full w-full object-cover"> |
| <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded-full text-sm font-medium">R6,000/mo</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Cozy Shared House</h3> |
| <p class="text-gray-600 mb-4"><i data-feather="map-pin" class="inline mr-1 w-4 h-4"></i> 1.5km from Cape Peninsula University of Technology</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Shared</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Laundry</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Kitchen</span> |
| </div> |
| <button class="w-full mt-2 bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition-colors">View Details</button> |
| </div> |
| </div> |
| </a> |
|
|
| |
| <a href="property.html?id=3" class="property-card transition-all duration-300 ease-in-out"> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> |
| <div class="relative pb-2/3 h-48"> |
| <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914" alt="Private Room" class="absolute h-full w-full object-cover"> |
| <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded-full text-sm font-medium">R7,000/mo</div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">Private Room in Townhouse</h3> |
| <p class="text-gray-600 mb-4"><i data-feather="map-pin" class="inline mr-1 w-4 h-4"></i> 1km from University of Cape Town</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Private</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Parking</span> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Garden</span> |
| </div> |
| <button class="w-full mt-2 bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition-colors">View Details</button> |
| </div> |
| </div> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-blue-50 py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">How StudentStay Works</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center p-6 bg-white rounded-lg shadow-sm"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="search" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Find Your Place</h3> |
| <p class="text-gray-600">Browse hundreds of verified student accommodations near your campus</p> |
| </div> |
| <div class="text-center p-6 bg-white rounded-lg shadow-sm"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="message-square" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Contact the Landlord</h3> |
| <p class="text-gray-600">Message the property owner directly through our secure platform</p> |
| </div> |
| <div class="text-center p-6 bg-white rounded-lg shadow-sm"> |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="home" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Move In</h3> |
| <p class="text-gray-600">Complete your booking and move into your new student home</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">What Students Say</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-white p-8 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="h-12 w-12 rounded-full bg-gray-200 overflow-hidden mr-4"> |
| <img src="http://static.photos/people/200x200/1" alt="Student" class="h-full w-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-900">Sarah Johnson</h4> |
| <p class="text-gray-600">University of Western Cape</p> |
| </div> |
| </div> |
| <p class="text-gray-700">"Found my perfect shared house through StudentStay. The process was so easy and the landlord was really responsive. Highly recommend for any students looking for accommodation!"</p> |
| <div class="flex mt-4 text-yellow-400"> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| </div> |
| </div> |
| <div class="bg-white p-8 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="h-12 w-12 rounded-full bg-gray-200 overflow-hidden mr-4"> |
| <img src="http://static.photos/people/200x200/2" alt="Student" class="h-full w-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-900">Michael Chen</h4> |
| <p class="text-gray-600">Cape Peninsula University of Technology</p> |
| </div> |
| </div> |
| <p class="text-gray-700">"As an international student, I was nervous about finding housing. StudentStay made it simple with their verified listings and great search filters. My accommodation is perfect!"</p> |
| <div class="flex mt-4 text-yellow-400"> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-blue-600 text-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Ready to Find Your Student Home?</h2> |
| <p class="text-xl mb-8 text-blue-100">Join thousands of students who found their perfect accommodation through StudentStay</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="signup.html" class="px-6 py-3 bg-white text-blue-600 rounded-md font-medium hover:bg-blue-50 transition-colors">Sign Up Now</a> |
| <a href="listings.html" class="px-6 py-3 border-2 border-white text-white rounded-md font-medium hover:bg-blue-700 transition-colors">Browse Listings</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">StudentStay</h3> |
| <p class="text-gray-400">Helping students find safe, affordable housing near their campuses since 2020.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
| <li><a href="listings.html" class="text-gray-400 hover:text-white">Listings</a></li> |
| <li><a href="about.html" class="text-gray-400 hover:text-white">About Us</a></li> |
| <li><a href="faq.html" class="text-gray-400 hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">For Students</h3> |
| <ul class="space-y-2"> |
| <li><a href="login.html" class="text-gray-400 hover:text-white">Log In</a></li> |
| <li><a href="signup.html" class="text-gray-400 hover:text-white">Sign Up</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Safety Tips</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Moving Checklist</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Contact Us</h3> |
| <address class="not-italic text-gray-400"> |
| <p>123 Campus Road</p> |
| <p>Cape Town, South Africa</p> |
| <p class="mt-2"><i data-feather="mail" class="inline mr-2 w-4 h-4"></i> hello@studentstay.com</p> |
| <p><i data-feather="phone" class="inline mr-2 w-4 h-4"></i> +44 123 456 7890</p> |
| </address> |
| <div class="flex space-x-4 mt-4"> |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook" class="w-5 h-5"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter" class="w-5 h-5"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram" class="w-5 h-5"></i></a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm">© 2023 StudentStay. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const mobileMenuButton = document.querySelector('button.md\\:hidden'); |
| |
| }); |
| </script> |
| </body> |
| </html> |
|
|
