deep-pr8ime/gosettle-relocation-made-rad
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>Services - GoSettle</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9</head>10<body class="bg-gray-50">11 <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">12 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">13 <div class="flex justify-between h-16">14 <div class="flex items-center">15 <div class="flex-shrink-0 flex items-center">16 <i data-feather="globe" class="text-indigo-600 w-8 h-8"></i>17 <span class="ml-2 text-xl font-bold text-gray-900">GoSettle</span>18 </div>19 </div>20 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">21 <a href="/" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a>22 <a href="/dashboard" class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Dashboard</a>23 <a href="/business/signup" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">For Businesses</a>24 </div>25 <div class="flex items-center">26 <a href="/auth/login" class="text-gray-700 text-sm font-medium mr-4">Log in</a>27 <a href="/auth/signup" class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">Sign up</a>28 </div>29 </div>30 </div>31 </nav>32 33 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">34 <div class="mb-8 flex justify-between items-center">35 <div>36 <h1 class="text-3xl font-bold text-gray-900">Housing in <span id="serviceCity">Nairobi</span></h1>37 <p class="text-gray-500 mt-2">Verified accommodation providers</p>38 </div>39 <div class="flex items-center">40 <div class="relative">41 <select class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-indigo-500">42 <option>Sort by: Verified first</option>43 <option>Highest rated</option>44 <option>Most affordable</option>45 </select>46 <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">47 <i data-feather="chevron-down" class="w-4 h-4"></i>48 </div>49 </div>50 </div>51 </div>52 53 <div class="grid grid-cols-1 gap-6">54 <!-- Provider 1 -->55 <div class="bg-white overflow-hidden shadow rounded-lg">56 <div class="px-4 py-5 sm:p-6">57 <div class="flex items-start">58 <div class="flex-shrink-0">59 <img class="h-16 w-16 rounded-lg object-cover" src="http://static.photos/housing/200x200/1" alt="Nairobi Student Housing">60 </div>61 <div class="ml-4 flex-1">62 <div class="flex items-center justify-between">63 <h3 class="text-lg font-medium text-gray-900">Nairobi Student Housing</h3>64 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">65 <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>66 Verified67 </span>68 </div>69 <p class="mt-1 text-sm text-gray-500">Affordable student rooms near UoN and Kenyatta University</p>70 <div class="mt-2 flex items-center">71 <div class="flex text-yellow-400">72 <i data-feather="star" class="w-4 h-4 fill-current"></i>73 <i data-feather="star" class="w-4 h-4 fill-current"></i>74 <i data-feather="star" class="w-4 h-4 fill-current"></i>75 <i data-feather="star" class="w-4 h-4 fill-current"></i>76 <i data-feather="star" class="w-4 h-4 fill-current text-gray-300"></i>77 </div>78 <span class="ml-2 text-sm text-gray-500">4.6 (42 reviews)</span>79 </div>80 <div class="mt-4">81 <span class="text-sm font-medium text-gray-900">From 5,000 KES/week</span>82 </div>83 </div>84 </div>85 </div>86 <div class="px-4 py-4 bg-gray-50 text-right">87 <a href="https://example.com/nsh" target="_blank" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">88 Visit Website89 </a>90 <button class="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">91 <i data-feather="message-square" class="-ml-1 mr-2 h-5 w-5 text-gray-500"></i>92 Contact93 </button>94 </div>95 </div>96 97 <!-- Provider 2 -->98 <div class="bg-white overflow-hidden shadow rounded-lg">99 <div class="px-4 py-5 sm:p-6">100 <div class="flex items-start">101 <div class="flex-shrink-0">102 <img class="h-16 w-16 rounded-lg object-cover" src="http://static.photos/housing/200x200/2" alt="Kileleshwa Apartments">103 </div>104 <div class="ml-4 flex-1">105 <div class="flex items-center justify-between">106 <h3 class="text-lg font-medium text-gray-900">Kileleshwa Apartments</h3>107 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">108 <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>109 Verified110 </span>111 </div>112 <p class="mt-1 text-sm text-gray-500">Modern apartments in Kileleshwa with 24/7 security</p>113 <div class="mt-2 flex items-center">114 <div class="flex text-yellow-400">115 <i data-feather="star" class="w-4 h-4 fill-current"></i>116 <i data-feather="star" class="w-4 h-4 fill-current"></i>117 <i data-feather="star" class="w-4 h-4 fill-current"></i>118 <i data-feather="star" class="w-4 h-4 fill-current"></i>119 <i data-feather="star" class="w-4 h-4 fill-current"></i>120 </div>121 <span class="ml-2 text-sm text-gray-500">4.9 (28 reviews)</span>122 </div>123 <div class="mt-4">124 <span class="text-sm font-medium text-gray-900">From 25,000 KES/month</span>125 </div>126 </div>127 </div>128 </div>129 <div class="px-4 py-4 bg-gray-50 text-right">130 <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">131 Visit Website132 </a>133 <button class="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">134 <i data-feather="message-square" class="-ml-1 mr-2 h-5 w-5 text-gray-500"></i>135 Contact136 </button>137 </div>138 </div>139 140 <!-- Provider 3 -->141 <div class="bg-white overflow-hidden shadow rounded-lg">142 <div class="px-4 py-5 sm:p-6">143 <div class="flex items-start">144 <div class="flex-shrink-0">145 <img class="h-16 w-16 rounded-lg object-cover" src="http://static.photos/housing/200x200/3" alt="Westlands Short Stays">146 </div>147 <div class="ml-4 flex-1">148 <div class="flex items-center justify-between">149 <h3 class="text-lg font-medium text-gray-900">Westlands Short Stays</h3>150 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">151 <i data-feather="alert-circle" class="w-3 h-3 mr-1"></i>152 Pending Verification153 </span>154 </div>155 <p class="mt-1 text-sm text-gray-500">Furnished apartments for short-term stays in Westlands</p>156 <div class="mt-2 flex items-center">157 <div class="flex text-yellow-400">158 <i data-feather="star" class="w-4 h-4 fill-current"></i>159 <i data-feather="star" class="w-4 h-4 fill-current"></i>160 <i data-feather="star" class="w-4 h-4 fill-current"></i>161 <i data-feather="star" class="w-4 h-4 fill-current text-gray-300"></i>162 <i data-feather="star" class="w-4 h-4 fill-current text-gray-300"></i>163 </div>164 <span class="ml-2 text-sm text-gray-500">3.2 (5 reviews)</span>165 </div>166 <div class="mt-4">167 <span class="text-sm font-medium text-gray-900">From 15,000 KES/week</span>168 </div>169 </div>170 </div>171 </div>172 <div class="px-4 py-4 bg-gray-50 text-right">173 <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">174 Visit Website175 </a>176 <button class="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">177 <i data-feather="message-square" class="-ml-1 mr-2 h-5 w-5 text-gray-500"></i>178 Contact179 </button>180 </div>181 </div>182 </div>183 </main>184 185 <footer class="bg-white border-t border-gray-200 mt-12">186 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">187 <p class="text-center text-gray-500 text-sm">188 © 2023 GoSettle. All rights reserved.189 </p>190 </div>191 </footer>192 193 <script>194 feather.replace();195 196 // Get city from URL197 const params = new URLSearchParams(window.location.search);198 const city = params.get('city') || 'Nairobi';199 document.getElementById('serviceCity').textContent = city;200 201 // Simulate lead creation when clicking Contact202 document.querySelectorAll('button').forEach(button => {203 if (button.textContent.includes('Contact')) {204 button.addEventListener('click', function() {205 alert('In the full app, this would open a contact form and create a lead in the database');206 });207 }208 });209 </script>210</body>211</html>