buddyplease/proptech-connect-hub
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Browse Properties - PropTech Connect</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');13 body { font-family: 'Inter', sans-serif; }14 .property-card { transition: all 0.3s ease; }15 .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); }16 </style>17</head>18<body class="bg-gray-50">19 <!-- Navigation -->20 <nav class="bg-white shadow-lg sticky top-0 z-50">21 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">22 <div class="flex justify-between h-16">23 <div class="flex items-center">24 <div class="flex-shrink-0 flex items-center">25 <i data-feather="home" class="h-8 w-8 text-blue-700"></i>26 <span class="ml-2 text-xl font-bold text-gray-900">PropTech Connect</span>27 </div>28 </div>29 <div class="hidden md:flex items-center space-x-8">30 <a href="index.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>31 <a href="dashboard.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>32 <a href="properties.html" class="text-blue-700 px-3 py-2 rounded-md text-sm font-medium border-b-2 border-blue-700">Properties</a>33 <a href="market.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Market Data</a>34 <a href="login.html" class="bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition duration-300">Login</a>35 </div>36 <div class="md:hidden flex items-center">37 <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-700">38 <i data-feather="menu"></i>39 </button>40 </div>41 </div>42 </div>43 </nav>44 45 <!-- Header -->46 <section class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16">47 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">48 <div class="text-center">49 <h1 class="text-4xl md:text-5xl font-bold mb-4">Browse Properties</h1>50 <p class="text-xl">Discover premium real estate opportunities across the Middle East</p>51 </div>52 </div>53 </section>54 55 <!-- Filters -->56 <section class="bg-white py-8 shadow-sm">57 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">58 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">59 <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700">60 <option>All Locations</option>61 <option>Dubai, UAE</option>62 <option>Abu Dhabi, UAE</option>63 <option>Riyadh, Saudi Arabia</option>64 <option>Doha, Qatar</option>65 </select>66 <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700">67 <option>All Types</option>68 <option>Apartment</option>69 <option>Villa</option>70 <option>Commercial</option>71 <option>Penthouse</option>72 </select>73 <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700">74 <option>Any Price</option>75 <option>Under $500,000</option>76 <option>$500,000 - $1M</option>77 <option>$1M - $5M</option>78 <option>Over $5M</option>79 </select>80 <button class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition duration-300">Search</button>81 </div>82 </div>83 </section>84 85 <!-- Properties Grid -->86 <section class="py-12">87 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">88 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="properties-grid">89 <!-- Properties loaded dynamically -->90 </div>91 </div>92 </section>93 94 <script>95 const properties = [96 {97 image: 'http://static.photos/cityscape/640x360/1',98 title: 'Luxury Downtown Apartment',99 location: 'Dubai Marina, UAE',100 price: 'AED 2,800,000',101 type: 'Apartment',102 beds: 3,103 baths: 3,104 area: '2,200 sqft'105 },106 {107 image: 'http://static.photos/vintage/640x360/2',108 title: 'Heritage Villa Compound',109 location: 'Riyadh, Saudi Arabia',110 price: 'SAR 12,500,000',111 type: 'Villa',112 beds: 5,113 baths: 6,114 area: '8,500 sqft'115 },116 {117 image: 'http://static.photos/modern/640x360/3',118 title: 'Commercial Office Space',119 location: 'Doha, Qatar',120 price: 'QAR 4,200,000',121 type: 'Commercial',122 beds: 'N/A',123 baths: 'N/A',124 area: '5,000 sqft'125 },126 {127 image: 'http://static.photos/white/640x360/4',128 title: 'Penthouse with Sea View',129 location: 'Abu Dhabi, UAE',130 price: 'AED 5,600,000',131 type: 'Penthouse',132 beds: 4,133 baths: 4,134 area: '3,800 sqft'135 },136 {137 image: 'http://static.photos/gradient/640x360/5',138 title: 'Investment Property Portfolio',139 location: 'Manama, Bahrain',140 price: 'BHD 850,000',141 type: 'Mixed Use',142 beds: 'Multiple',143 baths: 'Multiple',144 area: '15,000 sqft'145 },146 {147 image: 'http://static.photos/blue/640x360/6',148 title: 'Waterfront Development',149 location: 'Muscat, Oman',150 price: 'OMR 1,200,000',151 type: 'Development',152 beds: 'N/A',153 baths: 'N/A',154 area: '25,000 sqft'155 }156 ];157 158 function loadProperties() {159 const grid = document.getElementById('properties-grid');160 grid.innerHTML = '';161 162 properties.forEach(property => {163 const card = document.createElement('div');164 card.className = 'bg-white rounded-xl shadow-lg overflow-hidden property-card';165 card.innerHTML = `166 <img src="${property.image}" alt="${property.title}" class="w-full h-48 object-cover">167 <div class="p-6">168 <div class="flex justify-between items-start mb-2">169 <h3 class="text-lg font-semibold text-gray-900">${property.title}</h3>170 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">${property.type}</span>171 </div>172 <p class="text-gray-600 mb-4 flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-1"></i> ${property.location}</p>173 <div class="grid grid-cols-3 gap-4 mb-4 text-center text-sm text-gray-600">174 <div><i data-feather="home" class="w-4 h-4 mx-auto mb-1"></i> ${property.beds}</div>175 <div><i data-feather="droplet" class="w-4 h-4 mx-auto mb-1"></i> ${property.baths}</div>176 <div><i data-feather="maximize" class="w-4 h-4 mx-auto mb-1"></i> ${property.area}</div>177 </div>178 <div class="flex justify-between items-center">179 <span class="text-xl font-bold text-blue-700">${property.price}</span>180 <a href="property-details.html" class="bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-800 transition duration-300">View Details</a>181 </div>182 </div>183 `;184 grid.appendChild(card);185 });186 187 feather.replace();188 }189 190 document.addEventListener('DOMContentLoaded', loadProperties);191 </script>192</body>193</html>