Apppublic

JudeG/property-finder-xy

sourceHugging Faceupdated 1y agoView on Hugging Face

0likes

2 commits on main

f6a288c1y ago

Rename index.html to <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Property Finder XY - Find Your Dream Property</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> .property-card:hover .property-image { transform: scale(1.03); transition: transform 0.3s ease; } .gallery-image { height: 400px; object-fit: cover; } @media (max-width: 768px) { .gallery-image { height: 250px; } } .search-dropdown { display: none; } .search-container:hover .search-dropdown { display: block; } .heart-icon { transition: all 0.3s ease; } .heart-icon:hover { transform: scale(1.2); } .heart-icon.active { color: red; } .brand-gradient { background: linear-gradient(90deg, #4f46e5 0%, #10b981 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } </style> </head> <body class="bg-gray-50 font-sans">  <nav class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <a href="#" class="text-2xl font-bold brand-gradient">Property<span>Finder</span> <span class="text-gray-800">XY</span></a> </div> <div class="hidden md:flex space-x-8"> <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">Home</a> <a href="#listings" class="text-gray-600 hover:text-indigo-600">Listings</a> <a href="#about" class="text-gray-600 hover:text-indigo-600">About</a> <a href="#contact" class="text-gray-600 hover:text-indigo-600">Contact</a> <a href="#blog" class="text-gray-600 hover:text-indigo-600">Blog</a> </div> <div class="flex items-center space-x-4"> <a href="#" class="text-gray-600 hover:text-indigo-600"><i class="fas fa-user"></i></a> <button class="md:hidden text-gray-600" id="mobile-menu-button"> <i class="fas fa-bars text-xl"></i> </button> </div> </div>  <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu"> <a href="#" class="block py-2 text-indigo-600 font-medium">Home</a> <a href="#listings" class="block py-2 text-gray-600 hover:text-indigo-600">Listings</a> <a href="#about" class="block py-2 text-gray-600 hover:text-indigo-600">About</a> <a href="#contact" class="block py-2 text-gray-600 hover:text-indigo-600">Contact</a> <a href="#blog" class="block py-2 text-gray-600 hover:text-indigo-600">Blog</a> </div> </nav>  <section class="relative bg-indigo-900 text-white"> <div class="absolute inset-0 bg-black opacity-40"></div> <div class="bg-cover bg-center h-96" style="background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"></div> <div class="container mx-auto px-4 relative z-10 flex items-center h-96"> <div class="w-full md:w-2/3"> <h1 class="text-4xl md:text-5xl font-bold mb-4">Find Your Dream Home</h1> <p class="text-xl mb-8">Discover the perfect property that matches your lifestyle and budget</p>  <div class="bg-white rounded-lg shadow-lg p-4 text-gray-800"> <div class="flex flex-col md:flex-row gap-2"> <div class="relative flex-1 search-container"> <input type="text" placeholder="Location" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <div class="search-dropdown absolute left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-10"> <div class="p-2 hover:bg-gray-100 cursor-pointer">New York</div> <div class="p-2 hover:bg-gray-100 cursor-pointer">Los Angeles</div> <div class="p-2 hover:bg-gray-100 cursor-pointer">Chicago</div> <div class="p-2 hover:bg-gray-100 cursor-pointer">Miami</div> </div> </div> <select class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option>Property Type</option> <option>House</option> <option>Apartment</option> <option>Condo</option> <option>Villa</option> </select> <select class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option>Price Range</option> <option>$100,000 - $200,000</option> <option>$200,000 - $300,000</option> <option>$300,000 - $500,000</option> <option>$500,000+</option> </select> <button class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-lg font-medium transition duration-300"> <i class="fas fa-search mr-2"></i> Search </button> </div> </div> </div> </div> </section>  <section class="py-16 bg-white" id="listings"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center mb-10"> <h2 class="text-3xl font-bold text-gray-800">Featured Properties</h2> <div class="flex space-x-2"> <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">For Sale</button> <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-300">For Rent</button> </div> </div>  <div class="mb-8 bg-gray-100 p-4 rounded-lg"> <div class="flex flex-col md:flex-row gap-4"> <select class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option>Sort by: Default</option> <option>Price: Low to High</option> <option>Price: High to Low</option> <option>Newest First</option> <option>Most Popular</option> </select> <select class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option>All Bedrooms</option> <option>1 Bedroom</option> <option>2 Bedrooms</option> <option>3 Bedrooms</option> <option>4+ Bedrooms</option> </select> <select class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option>All Bathrooms</option> <option>1 Bathroom</option> <option>2 Bathrooms</option> <option>3+ Bathrooms</option> </select> <button class="p-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300 flex items-center"> <i class="fas fa-filter mr-2"></i> More Filters </button> </div> </div>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">  <div class="property-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Modern House" class="w-full h-64 object-cover property-image"> <div class="absolute top-4 left-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">For Sale</div> <button class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md heart-icon"> <i class="far fa-heart text-gray-600"></i> </button> </div> <div class="p-6"> <div class="flex justify-between items-start"> <div> <h3 class="text-xl font-bold text-gray-800">Modern Family Home</h3> <p class="text-gray-600"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> Beverly Hills, CA</p> </div> <div class="text-right"> <p class="text-2xl font-bold text-indigo-600">$1,250,000</p> <p class="text-sm text-gray-500">$3,200/sqft</p> </div> </div> <div class="border-t border-gray-200 my-4"></div> <div class="flex justify-between text-gray-600"> <div class="flex items-center"> <i class="fas fa-bed text-indigo-500 mr-2"></i> <span>4 Beds</span> </div> <div class="flex items-center"> <i class="fas fa-bath text-indigo-500 mr-2"></i> <span>3 Baths</span> </div> <div class="flex items-center"> <i class="fas fa-vector-square text-indigo-500 mr-2"></i> <span>2,500 sqft</span> </div> </div> <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg font-medium transition duration-300"> View Details </button> </div> </div>  <div class="property-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Luxury Apartment" class="w-full h-64 object-cover property-image"> <div class="absolute top-4 left-4 bg-emerald-600 text-white px-3 py-1 rounded-full text-sm font-medium">For Rent</div> <button class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md heart-icon"> <i class="far fa-heart text-gray-600"></i> </button> </div> <div class="p-6"> <div class="flex justify-between items-start"> <div> <h3 class="text-xl font-bold text-gray-800">Luxury Downtown Apartment</h3> <p class="text-gray-600"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> Manhattan, NY</p> </div> <div class="text-right"> <p class="text-2xl font-bold text-indigo-600">$4,500/mo</p> <p class="text-sm text-gray-500">$3.50/sqft</p> </div> </div> <div class="border-t border-gray-200 my-4"></div> <div class="flex justify-between text-gray-600"> <div class="flex items-center"> <i class="fas fa-bed text-indigo-500 mr-2"></i> <span>2 Beds</span> </div> <div class="flex items-center"> <i class="fas fa-bath text-indigo-500 mr-2"></i> <span>2 Baths</span> </div> <div class="flex items-center"> <i class="fas fa-vector-square text-indigo-500 mr-2"></i> <span>1,200 sqft</span> </div> </div> <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg font-medium transition duration-300"> View Details </button> </div> </div>  <div class="property-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Suburban House" class="w-full h-64 object-cover property-image"> <div class="absolute top-4 left-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">For Sale</div> <button class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md heart-icon"> <i class="far fa-heart text-gray-600"></i> </button> </div> <div class="p-6"> <div class="flex justify-between items-start"> <div> <h3 class="text-xl font-bold text-gray-800">Suburban Family Home</h3> <p class="text-gray-600"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> Austin, TX</p> </div> <div class="text-right"> <p class="text-2xl font-bold text-indigo-600">$750,000</p> <p class="text-sm text-gray-500">$2,100/sqft</p> </div> </div> <div class="border-t border-gray-200 my-4"></div> <div class="flex justify-between text-gray-600"> <div class="flex items-center"> <i class="fas fa-bed text-indigo-500 mr-2"></i> <span>3 Beds</span> </div> <div class="flex items-center"> <i class="fas fa-bath text-indigo-500 mr-2"></i> <span>2.5 Baths</span> </div> <div class="flex items-center"> <i class="fas fa-vector-square text-indigo-500 mr-2"></i> <span>3,200 sqft</span> </div> </div> <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg font-medium transition duration-300"> View Details </button> </div> </div> </div>  <div class="mt-12 flex justify-center"> <nav class="flex items-center space-x-2"> <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100"> <i class="fas fa-chevron-left"></i> </button> <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">1</button> <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">2</button> <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">3</button> <span class="px-2">...</span> <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">10</button> <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100"> <i class="fas fa-chevron-right"></i> </button> </nav> </div> </div> </section>  <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" id="propertyModal"> <div class="container mx-auto p-4 max-w-6xl h-full flex items-center"> <div class="bg-white rounded-lg shadow-xl w-full max-h-screen overflow-y-auto"> <div class="flex justify-between items-center p-4 border-b"> <h3 class="text-2xl font-bold">Property Details</h3> <button class="text-gray-500 hover:text-gray-700" id="closeModal"> <i class="fas fa-times text-xl"></i> </button> </div> <div class="p-6">  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> <div class="md:col-span-2"> <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Main Image" class="w-full h-full gallery-image rounded-lg"> </div> <div class="grid grid-cols-2 gap-4"> <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1400&q=80" alt="Kitchen" class="w-full gallery-image rounded-lg"> <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Bedroom" class="w-full gallery-image rounded-lg"> <img src="https://images.unsplash.com/photo-1600566752227-8f3b1a3f5a3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bathroom" class="w-full gallery-image rounded-lg"> <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Living Room" class="w-full gallery-image rounded-lg"> </div> </div>  <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="md:col-span-2"> <h2 class="text-3xl font-bold mb-4">Modern Family Home in Beverly Hills</h2> <p class="text-gray-600 mb-6"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 123 Luxury Lane, Beverly Hills, CA 90210</p> <div class="flex flex-wrap gap-4 mb-8"> <div class="bg-gray-100 px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-bed text-indigo-500 mr-2"></i> <span>4 Bedrooms</span> </div> <div class="bg-gray-100 px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-bath text-indigo-500 mr-2"></i> <span>3 Bathrooms</span> </div> <div class="bg-gray-100 px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-vector-square text-indigo-500 mr-2"></i> <span>2,500 sqft</span> </div> <div class="bg-gray-100 px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-car text-indigo-500 mr-2"></i> <span>2 Garage</span> </div> <div class="bg-gray-100 px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-calendar text-indigo-500 mr-2"></i> <span>Built in 2018</span> </div> </div> <h3 class="text-xl font-bold mb-4">Description</h3> <p class="text-gray-700 mb-6"> This stunning modern home in the heart of Beverly Hills offers luxury living at its finest. The open floor plan features floor-to-ceiling windows that flood the space with natural light, showcasing the beautiful finishes and designer details throughout. The gourmet kitchen is equipped with top-of-the-line appliances, custom cabinetry, and a large center island. The master suite is a true retreat with a spa-like bathroom and walk-in closet. Enjoy outdoor living at its best with a resort-style pool, outdoor kitchen, and lush landscaping. Located in one of the most prestigious neighborhoods with top-rated schools and convenient access to shopping and dining. </p> <h3 class="text-xl font-bold mb-4">Amenities</h3> <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8"> <div class="flex items-center"> <i class="fas fa-check text-emerald-500 mr-2"></i> <span>Swimming Pool</span> </div> <div class="flex items-center"> <i class="fas fa-check text-emerald-500 mr-2"></i> <span>Gym</span> </div> <div class="flex items-center"> <i class="fas fa-check text-emerald-500 mr-2"></i> <span>Security System</span> </div> <div class="flex items-center"> <i class="fas fa-check text-emerald-500 mr-2"></i> <span>Central AC</span> </div> <div class="flex items-center"> <i class="fas fa-check text-emerald-500 mr-2"></i> <span>Fireplace</span> </div> <div class="flex items-center"> <i class="fas fa-check text-emerald-500 mr-2"></i> <span>Walk-in Closet</span> </div> </div> <h3 class="text-xl font-bold mb-4">Location</h3> <div class="h-64 bg-gray-200 rounded-lg mb-4" id="map">  </div> <p class="text-gray-700"> Located in the prestigious Beverly Hills neighborhood, this property is just minutes away from Rodeo Drive, world-class restaurants, and top-rated schools. Easy access to major freeways and only 30 minutes from Los Angeles International Airport. </p> </div>  <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> <h3 class="text-xl font-bold mb-4">Schedule a Viewing</h3> <p class="text-2xl font-bold text-indigo-600 mb-6">$1,250,000</p> <form> <div class="mb-4"> <label class="block text-gray-700 mb-2">Name</label> <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Email</label> <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Phone</label> <input type="tel" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Preferred Date</label> <input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Message</label> <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3"></textarea> </div> <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition duration-300"> Send Inquiry </button> </form> <div class="mt-6 border-t pt-6"> <h4 class="font-bold mb-2">Contact Agent</h4> <div class="flex items-center mb-4"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Agent" class="w-12 h-12 rounded-full mr-3"> <div> <p class="font-medium">Sarah Johnson</p> <p class="text-sm text-gray-600">Property Finder XY Realty</p> </div> </div> <div class="flex flex-col space-y-2"> <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center"> <i class="fas fa-phone-alt mr-2"></i> (310) 555-1234 </a> <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center"> <i class="fas fa-envelope mr-2"></i> sarah@propertyfinderxy.com </a> </div> </div> </div> </div> </div> </div> </div> </div>  <section class="py-16 bg-gray-100" id="about"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div> <h2 class="text-3xl font-bold mb-6">About Property Finder XY</h2> <p class="text-gray-700 mb-6"> Property Finder XY is a premier real estate agency dedicated to helping clients find their perfect property. With over 15 years of experience in the industry, our team of expert agents provides personalized service to meet your unique needs. </p> <p class="text-gray-700 mb-8"> We specialize in luxury properties, investment opportunities, and first-time home buying. Our extensive network and market knowledge ensure you get the best deals and the most suitable properties for your lifestyle and budget. </p> <div class="grid grid-cols-2 gap-4 mb-8"> <div class="bg-white p-4 rounded-lg shadow-sm"> <div class="text-indigo-600 text-3xl mb-2"> <i class="fas fa-home"></i> </div> <h4 class="font-bold mb-1">500+</h4> <p class="text-gray-600 text-sm">Properties Sold</p> </div> <div class="bg-white p-4 rounded-lg shadow-sm"> <div class="text-indigo-600 text-3xl mb-2"> <i class="fas fa-users"></i> </div> <h4 class="font-bold mb-1">250+</h4> <p class="text-gray-600 text-sm">Happy Clients</p> </div> </div> <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition duration-300"> Learn More About Us </button> </div> <div> <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="w-full rounded-lg shadow-lg"> </div> </div> </div> </section>  <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">What Our Clients Say</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">  <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-2"> <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> </div> <p class="text-gray-700 mb-6"> "Property Finder XY made the entire home buying process seamless. Their attention to detail and understanding of our needs was exceptional. We found our dream home within weeks!" </p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> <div> <p class="font-medium">Michael Thompson</p> <p class="text-sm text-gray-600">Beverly Hills, CA</p> </div> </div> </div>  <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-2"> <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> </div> <p class="text-gray-700 mb-6"> "As first-time home buyers, we were nervous about the process. The team at Property Finder XY guided us every step of the way and found us a perfect starter home within our budget." </p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> <div> <p class="font-medium">Jessica Williams</p> <div class="text-sm text-gray-600">Austin, TX</div> </div> </div> </div>  <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-2"> <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> </div> <p class="text-gray-700 mb-6"> "I've worked with many real estate agents over the years, but Property Finder XY stands out for their professionalism and market knowledge. They secured an excellent price for my property." </p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> <div> <p class="font-medium">Robert Chen</p> <p class="text-sm text-gray-600">Manhattan, NY</p> </div> </div> </div> </div> </div> </section>  <section class="py-16 bg-gray-100" id="blog"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center mb-10"> <h2 class="text-3xl font-bold">Latest Blog Posts</h2> <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View All Posts <i class="fas fa-arrow-right ml-1"></i></a> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">  <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Blog Post" class="w-full h-48 object-cover"> <div class="p-6"> <div class="flex items-center text-sm text-gray-500 mb-2"> <span>June 15, 2023</span> <span class="mx-2">•</span> <span>5 min read</span> </div> <h3 class="text-xl font-bold mb-3">How to Stage Your Home for a Quick Sale</h3> <p class="text-gray-600 mb-4"> Learn professional staging techniques that can help your home sell faster and for a higher price in today's competitive market. </p> <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read More <i class="fas fa-arrow-right ml-1"></i></a> </div> </div>  <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Blog Post" class="w-full h-48 object-cover"> <div class="p-6"> <div class="flex items-center text-sm text-gray-500 mb-2"> <span>May 28, 2023</span> <span class="mx-2">•</span> <span>7 min read</span> </div> <h3 class="text-xl font-bold mb-3">First-Time Home Buyer's Guide: What You Need to Know</h3> <p class="text-gray-600 mb-4"> Everything you need to know about buying your first home, from securing financing to closing the deal and moving in. </p> <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read More <i class="fas fa-arrow-right ml-1"></i></a> </div> </div>  <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300"> <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Blog Post" class="w-full h-48 object-cover"> <div class="p-6"> <div class="flex items-center text-sm text-gray-500 mb-2"> <span>April 10, 2023</span> <span class="mx-2">•</span> <span>4 min read</span> </div> <h3 class="text-xl font-bold mb-3">Neighborhood Spotlight: The Best Areas for Families</h3> <p class="text-gray-600 mb-4"> Discover the top neighborhoods with excellent schools, parks, and family-friendly amenities in our city. </p> <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Read More <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> </div> </div> </section>  <section class="py-16 bg-white" id="contact"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Contact Us</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <div> <h3 class="text-xl font-bold mb-6">Get In Touch</h3> <p class="text-gray-700 mb-8"> Have questions about our properties or services? Fill out the form and our team will get back to you within 24 hours. </p> <form> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> <div> <label class="block text-gray-700 mb-2">First Name</label> <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div> <label class="block text-gray-700 mb-2">Last Name</label> <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Email</label> <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Phone</label> <input type="tel" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Subject</label> <select class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option>General Inquiry</option> <option>Property Viewing</option> <option>List My Property</option> <option>Other</option> </select> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Message</label> <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="4"></textarea> </div> <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition duration-300"> Send Message </button> </form> </div> <div> <h3 class="text-xl font-bold mb-6">Our Offices</h3> <div class="bg-gray-50 p-6 rounded-lg shadow-sm mb-8"> <h4 class="font-bold mb-4 flex items-center"> <i class="fas fa-map-marker-alt text-indigo-500 mr-2"></i> Beverly Hills Office </h4> <p class="text-gray-700 mb-2">456 Luxury Avenue</p> <p class="text-gray-700 mb-4">Beverly Hills, CA 90210</p> <div class="flex flex-col space-y-2"> <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center"> <i class="fas fa-phone-alt mr-2"></i> (310) 555-1234 </a> <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center"> <i class="fas fa-envelope mr-2"></i> bh@propertyfinderxy.com </a> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow-sm mb-8"> <h4 class="font-bold mb-4 flex items-center"> <i class="fas fa-map-marker-alt text-indigo-500 mr-2"></i> New York Office </h4> <p class="text-gray-700 mb-2">789 Park Avenue</p> <p class="text-gray-700 mb-4">New York, NY 10022</p> <div class="flex flex-col space-y-2"> <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center"> <i class="fas fa-phone-alt mr-2"></i> (212) 555-5678 </a> <a href="#" class="text-indigo-600 hover:text-indigo-800 flex items-center"> <i class="fas fa-envelope mr-2"></i> ny@propertyfinderxy.com </a> </div> </div> <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> <h4 class="font-bold mb-4">Business Hours</h4> <div class="space-y-2"> <div class="flex justify-between"> <span class="text-gray-700">Monday - Friday</span> <span class="font-medium">9:00 AM - 6:00 PM</span> </div> <div class="flex justify-between"> <span class="text-gray-700">Saturday</span> <span class="font-medium">10:00 AM - 4:00 PM</span> </div> <div class="flex justify-between"> <span class="text-gray-700">Sunday</span> <span class="font-medium">Closed</span> </div> </div> </div> </div> </div> </div> </section>  <section class="py-12 bg-indigo-900 text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-2xl font-bold mb-4">Subscribe to Our Newsletter</h2> <p class="mb-8 max-w-2xl mx-auto">Get the latest property listings, market updates, and real estate tips delivered straight to your inbox.</p> <form class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-1 p-3 rounded-l-lg focus:outline-none text-gray-800"> <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg font-medium transition duration-300"> Subscribe </button> </form> </div> </section>  <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4 brand-gradient">PropertyFinder XY</h3> <p class="text-gray-400 mb-4"> Your trusted partner in finding the perfect property for your needs and lifestyle. </p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-twitter"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-instagram"></i> </a> <a href="#" class="text-gray-400 hover:text-white"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div> <h4 class="font-bold mb-4">Quick Links</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> <li><a href="#listings" class="text-gray-400 hover:text-white">Properties</a></li> <li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li> <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> <li><a href="#blog" class="text-gray-400 hover:text-white">Blog</a></li> </ul> </div> <div> <h4 class="font-bold mb-4">Services</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Buy a Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Sell a Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Rent a Property</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Property Management</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Investment Properties</a></li> </ul> </div> <div> <h4 class="font-bold mb-4">Contact Info</h4> <ul class="space-y-2 text-gray-400"> <li class="flex items-center"> <i class="fas fa-map-marker-alt text-indigo-500 mr-2"></i> <span>456 Luxury Avenue, Beverly Hills, CA 90210</span> </li> <li class="flex items-center"> <i class="fas fa-phone-alt text-indigo-500 mr-2"></i> <span>(310) 555-1234</span> </li> <li class="flex items-center"> <i class="fas fa-envelope text-indigo-500 mr-2"></i> <span>info@propertyfinderxy.com</span> </li> </ul> </div> </div> <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> <p>© 2023 Property Finder XY. All rights reserved.</p> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // Property modal functionality const viewButtons = document.querySelectorAll('.property-card button:not(.heart-icon)'); const modal = document.getElementById('propertyModal'); const closeModal = document.getElementById('closeModal'); viewButtons.forEach(button => { button.addEventListener('click', function() { modal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); }); closeModal.addEventListener('click', function() { modal.classList.add('hidden'); document.body.style.overflow = 'auto'; }); // Favorite button functionality const heartButtons = document.querySelectorAll('.heart-icon'); heartButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const icon = this.querySelector('i'); icon.classList.toggle('far'); icon.classList.toggle('fas'); icon.classList.toggle('active'); }); }); // Simple map implementation (would be replaced with Google Maps API in production) function initMap() { const mapElement = document.getElementById('map'); if (mapElement) { mapElement.innerHTML = '<div class="h-full w-full bg-gray-300 flex items-center justify-center">Map would display here with Google Maps API</div>'; } } // Initialize map when modal opens modal.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.add('hidden'); document.body.style.overflow = 'auto'; } }); document.querySelectorAll('[href="#listings"], [href="#about"], [href="#contact"], [href="#blog"]').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); // Initialize map when page loads window.addEventListener('load', initMap); </script> </body> </html>

JudeG

5dbbbd51y ago

initial commit

JudeG