Hugging Face's logo

Spaces:
xcodam3dia
/
directhouseconnect
Running

App Files Community
xcodam3dia commited on
Commit
dcbae72
·
verified ·
1 Parent(s): 69d1cd1

register as a tenant should be different from landlords - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +17 -660
index.html CHANGED
@@ -1,663 +1,20 @@
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>DirectHouseConnect - Tenant to Landlord Direct Platform</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- /* Custom CSS for elements that need more precise styling */
11
- .property-card:hover {
12
- transform: translateY(-5px);
13
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
14
- }
15
- .nav-link.active {
16
- border-bottom: 3px solid #3b82f6;
17
- }
18
- #propertyImageCarousel {
19
- scroll-behavior: smooth;
20
- }
21
- .drawer {
22
- transition: transform 0.3s ease-in-out;
23
- }
24
- .drawer.closed {
25
- transform: translateX(100%);
26
- }
27
- .verification-badge {
28
- position: relative;
29
- }
30
- .verification-badge::after {
31
- content: '✓';
32
- position: absolute;
33
- top: -5px;
34
- right: -5px;
35
- background-color: #10b981;
36
- color: white;
37
- border-radius: 50%;
38
- width: 18px;
39
- height: 18px;
40
- display: flex;
41
- align-items: center;
42
- justify-content: center;
43
- font-size: 10px;
44
- font-weight: bold;
45
- }
46
- </style>
47
- </head>
48
- <body class="bg-gray-50 font-sans">
49
- <!-- Top Navigation Bar -->
50
- <nav class="bg-white shadow-md sticky top-0 z-50">
51
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
52
- <div class="flex items-center space-x-2">
53
- <i class="fas fa-home text-blue-500 text-2xl"></i>
54
- <span class="text-xl font-bold text-blue-600">DirectHouseConnect</span>
55
- </div>
56
-
57
- <div class="hidden md:flex space-x-6">
58
- <a href="#" class="nav-link active text-blue-500 font-medium">Home</a>
59
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Properties</a>
60
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500 font-medium">For Landlords</a>
61
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Blog</a>
62
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Contact</a>
63
- </div>
64
-
65
- <div class="flex items-center space-x-4">
66
- <button id="loginBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
67
- Login
68
- </button>
69
- <button id="registerBtn" class="border border-blue-500 text-blue-500 hover:bg-blue-50 px-4 py-2 rounded-lg font-medium transition duration-300">
70
- Register
71
- </button>
72
- <button id="mobileMenuBtn" class="md:hidden text-gray-600">
73
- <i class="fas fa-bars text-xl"></i>
74
- </button>
75
- </div>
76
- </div>
77
- </nav>
78
-
79
- <!-- Mobile Menu Drawer -->
80
- <div id="mobileMenu" class="drawer fixed inset-y-0 right-0 w-64 bg-white shadow-xl z-50 p-4 closed">
81
- <div class="flex justify-between items-center mb-8">
82
- <span class="text-xl font-bold text-blue-600">Menu</span>
83
- <button id="closeMobileMenu" class="text-gray-500 hover:text-gray-700">
84
- <i class="fas fa-times"></i>
85
- </button>
86
- </div>
87
- <div class="flex flex-col space-y-4">
88
- <a href="#" class="text-blue-500 font-medium py-2 border-b border-gray-100">Home</a>
89
- <a href="#" class="text-gray-600 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Properties</a>
90
- <a href="#" class="text-gray-600 hover:text-blue-500 font-medium py-2 border-b border-gray-100">For Landlords</a>
91
- <a href="#" class="text-gray-600 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Blog</a>
92
- <a href="#" class="text-gray-600 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Contact</a>
93
- <div class="pt-4">
94
- <button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium mb-2">
95
- Login
96
- </button>
97
- <button class="w-full border border-blue-500 text-blue-500 hover:bg-blue-50 px-4 py-2 rounded-lg font-medium">
98
- Register
99
- </button>
100
- </div>
101
- </div>
102
  </div>
103
-
104
- <!-- Hero Section -->
105
- <section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-16">
106
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
107
- <div class="md:w-1/2 mb-8 md:mb-0">
108
- <h1 class="text-4xl md:text-5xl font-bold mb-4">Find Your Perfect Home Directly From Landlords</h1>
109
- <p class="text-xl mb-6">No agents. No hidden fees. Just transparent connections between tenants and property owners.</p>
110
- <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
111
- <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-lg">
112
- Browse Properties
113
- </button>
114
- <button class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-bold text-lg">
115
- List Your Property
116
- </button>
117
- </div>
118
- </div>
119
- <div class="md:w-1/2 flex justify-center">
120
- <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
121
- alt="Modern apartment" class="rounded-xl shadow-2xl max-w-full h-auto">
122
- </div>
123
- </div>
124
- </section>
125
-
126
- <!-- Search Filters Section -->
127
- <section class="bg-white py-8 shadow-md -mt-8 mx-4 rounded-xl relative z-10">
128
- <div class="container mx-auto px-4">
129
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
130
- <div>
131
- <label class="block text-gray-700 font-medium mb-2">Location</label>
132
- <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
133
- <option>Select Location</option>
134
- <option>Lagos Mainland</option>
135
- <option>Lagos Island</option>
136
- <option>Abuja</option>
137
- <option>Port Harcourt</option>
138
- <option>Ibadan</option>
139
- </select>
140
- </div>
141
- <div>
142
- <label class="block text-gray-700 font-medium mb-2">Price Range</label>
143
- <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
144
- <option>Select Price Range</option>
145
- <option>₦50,000 - ₦100,000</option>
146
- <option>₦100,000 - ₦200,000</option>
147
- <option>₦200,000 - ₦500,000</option>
148
- <option>₦500,000+</option>
149
- </select>
150
- </div>
151
- <div>
152
- <label class="block text-gray-700 font-medium mb-2">Property Type</label>
153
- <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
154
- <option>Select Type</option>
155
- <option>Apartment</option>
156
- <option>Duplex</option>
157
- <option>Bungalow</option>
158
- <option>Self-Contain</option>
159
- <option>Flat</option>
160
- </select>
161
- </div>
162
- <div class="flex items-end">
163
- <button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg font-medium">
164
- Search Properties
165
- </button>
166
- </div>
167
- </div>
168
- </div>
169
- </section>
170
-
171
- <!-- How It Works Section -->
172
- <section class="py-16 bg-gray-50">
173
- <div class="container mx-auto px-4">
174
- <h2 class="text-3xl font-bold text-center mb-12">How DirectHouseConnect Works</h2>
175
-
176
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
177
- <div class="bg-white p-6 rounded-xl shadow-md text-center">
178
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
179
- <i class="fas fa-user-check text-blue-500 text-2xl"></i>
180
- </div>
181
- <h3 class="text-xl font-bold mb-2">1. Register & Verify</h3>
182
- <p class="text-gray-600">Create an account and complete ID verification to access verified listings or tenants.</p>
183
- </div>
184
-
185
- <div class="bg-white p-6 rounded-xl shadow-md text-center">
186
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
187
- <i class="fas fa-search text-blue-500 text-2xl"></i>
188
- </div>
189
- <h3 class="text-xl font-bold mb-2">2. Find or List</h3>
190
- <p class="text-gray-600">Tenants search properties with detailed filters. Landlords list properties with photos and details.</p>
191
- </div>
192
-
193
- <div class="bg-white p-6 rounded-xl shadow-md text-center">
194
- <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
195
- <i class="fas fa-handshake text-blue-500 text-2xl"></i>
196
- </div>
197
- <h3 class="text-xl font-bold mb-2">3. Connect Directly</h3>
198
- <p class="text-gray-600">Communicate directly with landlords/tenants through our secure messaging system.</p>
199
- </div>
200
- </div>
201
- </div>
202
- </section>
203
-
204
- <!-- Featured Properties Section -->
205
- <section class="py-16 bg-white">
206
- <div class="container mx-auto px-4">
207
- <div class="flex justify-between items-center mb-8">
208
- <h2 class="text-3xl font-bold">Featured Properties</h2>
209
- <a href="#" class="text-blue-500 font-medium hover:underline">View All Properties</a>
210
- </div>
211
-
212
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
213
- <!-- Property Card 1 -->
214
- <div class="property-card bg-white rounded-xl overflow-hidden shadow-md border border-gray-100 transition duration-300">
215
- <div class="relative">
216
- <div id="propertyImageCarousel1" class="flex overflow-hidden">
217
- <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
218
- alt="Property image" class="w-full h-48 object-cover">
219
- </div>
220
- <div class="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded text-sm font-medium">
221
- Verified
222
- </div>
223
- </div>
224
- <div class="p-4">
225
- <div class="flex justify-between items-start mb-2">
226
- <h3 class="text-xl font-bold">3-Bedroom Apartment</h3>
227
- <span class="text-lg font-bold text-blue-600">₦250,000/mo</span>
228
- </div>
229
- <div class="flex items-center text-gray-600 mb-3">
230
- <i class="fas fa-map-marker-alt mr-2"></i>
231
- <span>Lekki Phase 1, Lagos</span>
232
- </div>
233
- <div class="flex flex-wrap gap-2 mb-4">
234
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
235
- <i class="fas fa-bed mr-1 text-blue-500"></i> 3 Beds
236
- </span>
237
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
238
- <i class="fas fa-bath mr-1 text-blue-500"></i> 2 Baths
239
- </span>
240
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
241
- <i class="fas fa-ruler-combined mr-1 text-blue-500"></i> 1200 sqft
242
- </span>
243
- </div>
244
- <div class="flex justify-between items-center">
245
- <div class="flex items-center">
246
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Landlord" class="w-8 h-8 rounded-full mr-2 verification-badge">
247
- <span class="text-sm font-medium">James K.</span>
248
- </div>
249
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
250
- View Details
251
- </button>
252
- </div>
253
- </div>
254
- </div>
255
-
256
- <!-- Property Card 2 -->
257
- <div class="property-card bg-white rounded-xl overflow-hidden shadow-md border border-gray-100 transition duration-300">
258
- <div class="relative">
259
- <div id="propertyImageCarousel2" class="flex overflow-hidden">
260
- <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
261
- alt="Property image" class="w-full h-48 object-cover">
262
- </div>
263
- <div class="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded text-sm font-medium">
264
- Verified
265
- </div>
266
- </div>
267
- <div class="p-4">
268
- <div class="flex justify-between items-start mb-2">
269
- <h3 class="text-xl font-bold">Modern Duplex</h3>
270
- <span class="text-lg font-bold text-blue-600">₦450,000/mo</span>
271
- </div>
272
- <div class="flex items-center text-gray-600 mb-3">
273
- <i class="fas fa-map-marker-alt mr-2"></i>
274
- <span>Victoria Island, Lagos</span>
275
- </div>
276
- <div class="flex flex-wrap gap-2 mb-4">
277
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
278
- <i class="fas fa-bed mr-1 text-blue-500"></i> 4 Beds
279
- </span>
280
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
281
- <i class="fas fa-bath mr-1 text-blue-500"></i> 3 Baths
282
- </span>
283
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
284
- <i class="fas fa-ruler-combined mr-1 text-blue-500"></i> 1800 sqft
285
- </span>
286
- </div>
287
- <div class="flex justify-between items-center">
288
- <div class="flex items-center">
289
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Landlord" class="w-8 h-8 rounded-full mr-2 verification-badge">
290
- <span class="text-sm font-medium">Amina B.</span>
291
- </div>
292
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
293
- View Details
294
- </button>
295
- </div>
296
- </div>
297
- </div>
298
-
299
- <!-- Property Card 3 -->
300
- <div class="property-card bg-white rounded-xl overflow-hidden shadow-md border border-gray-100 transition duration-300">
301
- <div class="relative">
302
- <div id="propertyImageCarousel3" class="flex overflow-hidden">
303
- <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
304
- alt="Property image" class="w-full h-48 object-cover">
305
- </div>
306
- <div class="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded text-sm font-medium">
307
- Verified
308
- </div>
309
- </div>
310
- <div class="p-4">
311
- <div class="flex justify-between items-start mb-2">
312
- <h3 class="text-xl font-bold">Cozy Bungalow</h3>
313
- <span class="text-lg font-bold text-blue-600">₦180,000/mo</span>
314
- </div>
315
- <div class="flex items-center text-gray-600 mb-3">
316
- <i class="fas fa-map-marker-alt mr-2"></i>
317
- <span>Gwarinpa, Abuja</span>
318
- </div>
319
- <div class="flex flex-wrap gap-2 mb-4">
320
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
321
- <i class="fas fa-bed mr-1 text-blue-500"></i> 2 Beds
322
- </span>
323
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
324
- <i class="fas fa-bath mr-1 text-blue-500"></i> 1 Bath
325
- </span>
326
- <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center">
327
- <i class="fas fa-ruler-combined mr-1 text-blue-500"></i> 850 sqft
328
- </span>
329
- </div>
330
- <div class="flex justify-between items-center">
331
- <div class="flex items-center">
332
- <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Landlord" class="w-8 h-8 rounded-full mr-2 verification-badge">
333
- <span class="text-sm font-medium">Emeka O.</span>
334
- </div>
335
- <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
336
- View Details
337
- </button>
338
- </div>
339
- </div>
340
- </div>
341
- </div>
342
- </div>
343
- </section>
344
-
345
- <!-- Why Choose Us Section -->
346
- <section class="py-16 bg-gray-50">
347
- <div class="container mx-auto px-4">
348
- <h2 class="text-3xl font-bold text-center mb-12">Why Choose DirectHouseConnect?</h2>
349
-
350
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
351
- <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
352
- <i class="fas fa-money-bill-wave text-blue-500 text-3xl mb-4"></i>
353
- <h3 class="text-xl font-bold mb-2">Save Money</h3>
354
- <p class="text-gray-600">No agent fees or hidden charges. Our 5% commission is only charged after successful rental.</p>
355
- </div>
356
-
357
- <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
358
- <i class="fas fa-shield-alt text-blue-500 text-3xl mb-4"></i>
359
- <h3 class="text-xl font-bold mb-2">Verified Users</h3>
360
- <p class="text-gray-600">All landlords and tenants are ID-verified to ensure safety and reduce scams.</p>
361
- </div>
362
-
363
- <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
364
- <i class="fas fa-comments text-blue-500 text-3xl mb-4"></i>
365
- <h3 class="text-xl font-bold mb-2">Direct Communication</h3>
366
- <p class="text-gray-600">Chat directly with landlords/tenants without middlemen distorting information.</p>
367
- </div>
368
-
369
- <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
370
- <i class="fas fa-star text-blue-500 text-3xl mb-4"></i>
371
- <h3 class="text-xl font-bold mb-2">Honest Reviews</h3>
372
- <p class="text-gray-600">Read and leave reviews about properties and tenants to help others make informed decisions.</p>
373
- </div>
374
- </div>
375
- </div>
376
- </section>
377
-
378
- <!-- CTA Section -->
379
- <section class="py-16 bg-blue-600 text-white">
380
- <div class="container mx-auto px-4 text-center">
381
- <h2 class="text-3xl font-bold mb-4">Ready to Find or List Your Property?</h2>
382
- <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of satisfied tenants and landlords who are enjoying transparent, agent-free property rentals.</p>
383
- <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
384
- <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg">
385
- Register as Tenant
386
- </button>
387
- <button class="border-2 border-white text-white hover:bg-blue-700 px-8 py-3 rounded-lg font-bold text-lg">
388
- List Your Property
389
- </button>
390
- </div>
391
- </div>
392
- </section>
393
-
394
- <!-- Footer -->
395
- <footer class="bg-gray-900 text-white py-12">
396
- <div class="container mx-auto px-4">
397
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
398
- <div>
399
- <div class="flex items-center space-x-2 mb-4">
400
- <i class="fas fa-home text-blue-400 text-2xl"></i>
401
- <span class="text-xl font-bold">DirectHouseConnect</span>
402
- </div>
403
- <p class="text-gray-400 mb-4">Connecting tenants directly with landlords for a transparent, agent-free rental experience.</p>
404
- <div class="flex space-x-4">
405
- <a href="#" class="text-gray-400 hover:text-white">
406
- <i class="fab fa-facebook-f"></i>
407
- </a>
408
- <a href="#" class="text-gray-400 hover:text-white">
409
- <i class="fab fa-twitter"></i>
410
- </a>
411
- <a href="#" class="text-gray-400 hover:text-white">
412
- <i class="fab fa-instagram"></i>
413
- </a>
414
- <a href="#" class="text-gray-400 hover:text-white">
415
- <i class="fab fa-linkedin-in"></i>
416
- </a>
417
- </div>
418
- </div>
419
-
420
- <div>
421
- <h3 class="text-lg font-bold mb-4">For Tenants</h3>
422
- <ul class="space-y-2">
423
- <li><a href="#" class="text-gray-400 hover:text-white">Browse Properties</a></li>
424
- <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>
425
- <li><a href="#" class="text-gray-400 hover:text-white">Tenant Verification</a></li>
426
- <li><a href="#" class="text-gray-400 hover:text-white">Renting Tips</a></li>
427
- <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
428
- </ul>
429
- </div>
430
-
431
- <div>
432
- <h3 class="text-lg font-bold mb-4">For Landlords</h3>
433
- <ul class="space-y-2">
434
- <li><a href="#" class="text-gray-400 hover:text-white">List Your Property</a></li>
435
- <li><a href="#" class="text-gray-400 hover:text-white">Landlord Verification</a></li>
436
- <li><a href="#" class="text-gray-400 hover:text-white">Commission Policy</a></li>
437
- <li><a href="#" class="text-gray-400 hover:text-white">Tenant Screening</a></li>
438
- <li><a href="#" class="text-gray-400 hover:text-white">Landlord Resources</a></li>
439
- </ul>
440
- </div>
441
-
442
- <div>
443
- <h3 class="text-lg font-bold mb-4">Contact Us</h3>
444
- <ul class="space-y-2">
445
- <li class="flex items-center text-gray-400">
446
- <i class="fas fa-phone-alt mr-2 text-blue-400"></i>
447
- <span>+234 813 559 1721</span>
448
- </li>
449
- <li class="flex items-center text-gray-400">
450
- <i class="fas fa-envelope mr-2 text-blue-400"></i>
451
- <span>directhouseconnect@gmail.com</span>
452
- </li>
453
- </ul>
454
- <div class="mt-4">
455
- <h4 class="font-medium mb-2">Subscribe to Newsletter</h4>
456
- <div class="flex">
457
- <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none w-full">
458
- <button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-lg">
459
- <i class="fas fa-paper-plane"></i>
460
- </button>
461
- </div>
462
- </div>
463
- </div>
464
- </div>
465
-
466
- <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
467
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 DirectHouseConnect. All rights reserved.</p>
468
- <div class="flex space-x-6">
469
- <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
470
- <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
471
- <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
472
- </div>
473
- </div>
474
- </div>
475
- </footer>
476
-
477
- <!-- Login Modal -->
478
- <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
479
- <div class="bg-white rounded-xl p-6 w-full max-w-md">
480
- <div class="flex justify-between items-center mb-6">
481
- <h3 class="text-2xl font-bold">Login to Your Account</h3>
482
- <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700">
483
- <i class="fas fa-times"></i>
484
- </button>
485
- </div>
486
-
487
- <form>
488
- <div class="mb-4">
489
- <label class="block text-gray-700 font-medium mb-2">Email Address</label>
490
- <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
491
- </div>
492
-
493
- <div class="mb-6">
494
- <label class="block text-gray-700 font-medium mb-2">Password</label>
495
- <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
496
- <div class="flex justify-end mt-2">
497
- <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
498
- </div>
499
- </div>
500
-
501
- <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-bold mb-4">
502
- Login
503
- </button>
504
-
505
- <div class="text-center">
506
- <p class="text-gray-600">Don't have an account? <a href="#" class="text-blue-500 hover:underline font-medium">Register</a></p>
507
- </div>
508
- </form>
509
- </div>
510
- </div>
511
-
512
- <!-- Register Modal -->
513
- <div id="registerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
514
- <div class="bg-white rounded-xl p-6 w-full max-w-md overflow-y-auto" style="max-height: 90vh;">
515
- <div class="flex justify-between items-center mb-6">
516
- <h3 class="text-2xl font-bold">Create Your Account</h3>
517
- <button id="closeRegisterModal" class="text-gray-500 hover:text-gray-700">
518
- <i class="fas fa-times"></i>
519
- </button>
520
- </div>
521
-
522
- <form>
523
- <div class="mb-4">
524
- <label class="block text-gray-700 font-medium mb-2">I am a:</label>
525
- <div class="flex space-x-4">
526
- <label class="flex items-center">
527
- <input type="radio" name="userType" checked class="mr-2">
528
- <span>Tenant</span>
529
- </label>
530
- <label class="flex items-center">
531
- <input type="radio" name="userType" class="mr-2">
532
- <span>Landlord</span>
533
- </label>
534
- </div>
535
- </div>
536
-
537
- <div class="mb-4">
538
- <label class="block text-gray-700 font-medium mb-2">Full Name</label>
539
- <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
540
- </div>
541
-
542
- <div class="mb-4">
543
- <label class="block text-gray-700 font-medium mb-2">Email Address</label>
544
- <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
545
- </div>
546
-
547
- <div class="mb-4">
548
- <label class="block text-gray-700 font-medium mb-2">Phone Number</label>
549
- <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
550
- </div>
551
-
552
- <div class="mb-4">
553
- <label class="block text-gray-700 font-medium mb-2">Password</label>
554
- <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
555
- </div>
556
-
557
- <div class="mb-6">
558
- <label class="block text-gray-700 font-medium mb-2">Confirm Password</label>
559
- <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
560
- </div>
561
-
562
- <div class="mb-6">
563
- <label class="flex items-start">
564
- <input type="checkbox" class="mt-1 mr-2">
565
- <span class="text-gray-600 text-sm">I agree to the <a href="#" class="text-blue-500 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a></span>
566
- </label>
567
- </div>
568
-
569
- <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-bold mb-4">
570
- Create Account
571
- </button>
572
-
573
- <div class="text-center">
574
- <p class="text-gray-600">Already have an account? <a href="#" class="text-blue-500 hover:underline font-medium">Login</a></p>
575
- </div>
576
- </form>
577
- </div>
578
- </div>
579
-
580
- <script>
581
- // Mobile Menu Toggle
582
- const mobileMenuBtn = document.getElementById('mobileMenuBtn');
583
- const mobileMenu = document.getElementById('mobileMenu');
584
- const closeMobileMenu = document.getElementById('closeMobileMenu');
585
-
586
- mobileMenuBtn.addEventListener('click', () => {
587
- mobileMenu.classList.remove('closed');
588
- });
589
-
590
- closeMobileMenu.addEventListener('click', () => {
591
- mobileMenu.classList.add('closed');
592
- });
593
-
594
- // Login Modal
595
- const loginBtn = document.getElementById('loginBtn');
596
- const loginModal = document.getElementById('loginModal');
597
- const closeLoginModal = document.getElementById('closeLoginModal');
598
-
599
- loginBtn.addEventListener('click', () => {
600
- loginModal.classList.remove('hidden');
601
- });
602
-
603
- closeLoginModal.addEventListener('click', () => {
604
- loginModal.classList.add('hidden');
605
- });
606
-
607
- // Register Modal
608
- const registerBtn = document.getElementById('registerBtn');
609
- const registerModal = document.getElementById('registerModal');
610
- const closeRegisterModal = document.getElementById('closeRegisterModal');
611
-
612
- registerBtn.addEventListener('click', () => {
613
- registerModal.classList.remove('hidden');
614
- });
615
-
616
- closeRegisterModal.addEventListener('click', () => {
617
- registerModal.classList.add('hidden');
618
- });
619
-
620
- // Close modals when clicking outside
621
- window.addEventListener('click', (e) => {
622
- if (e.target === loginModal) {
623
- loginModal.classList.add('hidden');
624
- }
625
- if (e.target === registerModal) {
626
- registerModal.classList.add('hidden');
627
- }
628
- });
629
-
630
- // Active nav link indicator
631
- const navLinks = document.querySelectorAll('.nav-link');
632
- navLinks.forEach(link => {
633
- link.addEventListener('click', () => {
634
- navLinks.forEach(l => l.classList.remove('active', 'text-blue-500'));
635
- navLinks.forEach(l => l.classList.add('text-gray-600'));
636
- link.classList.add('active', 'text-blue-500');
637
- link.classList.remove('text-gray-600');
638
- });
639
- });
640
-
641
- // Simple property image carousel (would be more robust in a real implementation)
642
- const propertyCarousels = ['propertyImageCarousel1', 'propertyImageCarousel2', 'propertyImageCarousel3'];
643
-
644
- propertyCarousels.forEach(carouselId => {
645
- const carousel = document.getElementById(carouselId);
646
- if (carousel) {
647
- let currentIndex = 0;
648
- const images = [
649
- 'https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
650
- 'https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
651
- 'https://images.unsplash.com/photo-1605146769289-440113cc3d00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'
652
- ];
653
-
654
- // Set interval to change images (would be buttons in a real implementation)
655
- setInterval(() => {
656
- currentIndex = (currentIndex + 1) % images.length;
657
- carousel.innerHTML = `<img src="${images[currentIndex]}" alt="Property image" class="w-full h-48 object-cover">`;
658
- }, 3000);
659
- }
660
- });
661
- </script>
662
- <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=xcodam3dia/directhouseconnect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
663
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>My app</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
+ <div class="w-full">
11
+ <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
+ <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
+ <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
+ Ask me anything.
15
+ </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </div>
17
+ <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
+ <script></script>
19
+ <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=xcodam3dia/directhouseconnect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
20
+ </html>