Hugging Face's logo

Spaces:
buddyplease
/
proptech-connect-hub
Running

App Files Community
buddyplease commited on
Commit
fa9d174
路
verified 路
1 Parent(s): a2c2352

Build a Full-stack webapp that solves a current problem which is :

Browse files

路 Unworkable
路 Unavoidable
路 Urgent
路 Underserved

#Target market - Middle East
#Scalable - Highly
#Investment - High Investment Potential instantly after GTM
#Complete Source Code
#Cost-Efficient
#Company to resolve for : "https://www.fcprop.net/"

Files changed (3) hide show
  1. README.md +8 -5
  2. dashboard.html +276 -0
  3. index.html +361 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Proptech Connect Hub
3
- emoji: 馃捇
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: PropTech Connect Hub 馃彚
3
+ colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 馃惓
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
dashboard.html ADDED
@@ -0,0 +1,276 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Investor Dashboard - 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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body { font-family: 'Inter', sans-serif; }
15
+ .sidebar { transition: all 0.3s ease; }
16
+ .dashboard-card { transition: all 0.3s ease; }
17
+ .dashboard-card:hover { transform: translateY(-2px); }
18
+ </style>
19
+ </head>
20
+ <body class="bg-gray-100">
21
+ <div class="flex h-screen">
22
+ <!-- Sidebar -->
23
+ <div class="sidebar bg-white w-64 shadow-lg">
24
+ <div class="p-6 border-b border-gray-200">
25
+ <div class="flex items-center">
26
+ <i data-feather="home" class="h-6 w-6 text-indigo-600"></i>
27
+ <span class="ml-2 text-xl font-bold">PropTech Connect</span>
28
+ </div>
29
+ </div>
30
+ <nav class="p-4">
31
+ <ul class="space-y-2">
32
+ <li><a href="dashboard.html" class="flex items-center p-3 bg-indigo-50 text-indigo-600 rounded-lg">
33
+ <i data-feather="grid" class="w-5 h-5 mr-3"></i>
34
+ Dashboard
35
+ </a></li>
36
+ <li><a href="properties.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
37
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
38
+ My Properties
39
+ </a></li>
40
+ <li><a href="investments.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
41
+ <i data-feather="trending-up" class="w-5 h-5 mr-3"></i>
42
+ Investments
43
+ </a></li>
44
+ <li><a href="market.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
45
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
46
+ Market Analysis
47
+ </a></li>
48
+ <li><a href="documents.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
49
+ <i data-feather="file-text" class="w-5 h-5 mr-3"></i>
50
+ Documents
51
+ </a></li>
52
+ <li><a href="settings.html" class="flex items-center p-3 text-gray-600 hover:bg-gray-50 rounded-lg">
53
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
54
+ Settings
55
+ </a></li>
56
+ </ul>
57
+ </nav>
58
+ </div>
59
+
60
+ <!-- Main Content -->
61
+ <div class="flex-1 flex flex-col overflow-hidden">
62
+ <!-- Header -->
63
+ <header class="bg-white shadow-sm z-10">
64
+ <div class="flex items-center justify-between px-6 py-4">
65
+ <div class="flex items-center">
66
+ <h1 class="text-2xl font-semibold text-gray-900">Investor Dashboard</h1>
67
+ </div>
68
+ <div class="flex items-center space-x-4">
69
+ <div class="relative">
70
+ <i data-feather="bell" class="w-6 h-6 text-gray-500"></i>
71
+ </div>
72
+ <div class="flex items-center">
73
+ <img src="http://static.photos/people/40x40/10" alt="Profile" class="w-8 h-8 rounded-full">
74
+ <span class="ml-2 text-sm font-medium text-gray-700">Ahmed Al-Mansoori</span>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Dashboard Content -->
81
+ <main class="flex-1 overflow-y-auto p-6">
82
+ <!-- Portfolio Overview -->
83
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
84
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
85
+ <div class="flex items-center justify-between">
86
+ <div>
87
+ <p class="text-sm font-medium text-gray-600">Total Portfolio Value</p>
88
+ <p class="text-2xl font-bold text-gray-900">$4,750,000</p>
89
+ <p class="text-sm text-green-600 mt-1">+12.5% this quarter</p>
90
+ </div>
91
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
92
+ <i data-feather="dollar-sign" class="w-6 h-6 text-green-600"></i>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
97
+ <div class="flex items-center justify-between">
98
+ <div>
99
+ <p class="text-sm font-medium text-gray-600">Active Investments</p>
100
+ <p class="text-2xl font-bold text-gray-900">8</div>
101
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
102
+ <i data-feather="briefcase" class="w-6 h-6 text-blue-600"></i>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
107
+ <div class="flex items-center justify-between">
108
+ <div>
109
+ <p class="text-sm font-medium text-gray-600">ROI Average</p>
110
+ <p class="text-2xl font-bold text-gray-900">18.2%</p>
111
+ <p class="text-sm text-green-600 mt-1">+2.3% vs last period</p>
112
+ </div>
113
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
114
+ <i data-feather="trending-up" class="w-6 h-6 text-purple-600"></i>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
119
+ <div class="flex items-center justify-between">
120
+ <div>
121
+ <p class="text-sm font-medium text-gray-600">Properties Owned</p>
122
+ <p class="text-2xl font-bold text-gray-900">12</p>
123
+ <p class="text-sm text-gray-600 mt-1">Across 3 countries</p>
124
+ </div>
125
+ <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
126
+ <i data-feather="map-pin" class="w-6 h-6 text-orange-600"></i>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Charts and Analytics -->
133
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
134
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
135
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Portfolio Performance</h3>
136
+ <canvas id="performanceChart" class="w-full h-64"></canvas>
137
+ </div>
138
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
139
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Market Trends</h3>
140
+ <canvas id="marketTrendsChart" class="w-full h-64"></canvas>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Recent Activity -->
145
+ <div class="dashboard-card bg-white p-6 rounded-xl shadow-sm">
146
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
147
+ <div class="space-y-4">
148
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
149
+ <div class="flex items-center">
150
+ <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
151
+ <i data-feather="home" class="w-4 h-4 text-indigo-600"></i>
152
+ </div>
153
+ <div class="ml-4">
154
+ <p class="text-sm font-medium text-gray-900">Property Purchase Completed</p>
155
+ <p class="text-xs text-gray-600">Luxury Apartment - Dubai Marina</div>
156
+ <div class="text-right">
157
+ <p class="text-sm font-medium text-green-600">+$850,000</p>
158
+ <p class="text-xs text-gray-600">2 hours ago</p>
159
+ </div>
160
+ </div>
161
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
162
+ <div class="flex items-center">
163
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
164
+ <i data-feather="trending-up" class="w-4 h-4 text-green-600"></i>
165
+ </div>
166
+ <div class="ml-4">
167
+ <p class="text-sm font-medium text-gray-900">Rental Income Received</p>
168
+ <p class="text-xs text-gray-600">Commercial Office - Doha</div>
169
+ <div class="text-right">
170
+ <p class="text-sm font-medium text-green-600">+$25,000</p>
171
+ <p class="text-xs text-gray-600">1 day ago</p>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
175
+ <div class="flex items-center">
176
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
177
+ <i data-feather="file-text" class="w-4 h-4 text-blue-600"></i>
178
+ </div>
179
+ <div class="ml-4">
180
+ <p class="text-sm font-medium text-gray-900">Document Verification</p>
181
+ <p class="text-xs text-gray-600">Property in Riyadh</div>
182
+ <div class="text-right">
183
+ <p class="text-sm font-medium text-yellow-600">Pending</p>
184
+ <p class="text-xs text-gray-600">3 days ago</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Quick Actions -->
191
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
192
+ <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300">
193
+ <i data-feather="plus" class="w-8 h-8 text-indigo-600 mb-3"></i>
194
+ <h4 class="font-semibold text-gray-900 mb-2">Add New Investment</h4>
195
+ <p class="text-sm text-gray-600">Explore new property opportunities</p>
196
+ </button>
197
+ <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300">
198
+ <i data-feather="search" class="w-8 h-8 text-indigo-600 mb-3"></i>
199
+ <h4 class="font-semibold text-gray-900 mb-2">Market Analysis</h2>
200
+ <p class="text-sm text-gray-600">Get detailed market insights</p>
201
+ </button>
202
+ <button class="dashboard-card bg-white p-6 rounded-xl shadow-sm text-left hover:shadow-md transition duration-300">
203
+ <i data-feather="download" class="w-8 h-8 text-indigo-600 mb-3"></i>
204
+ <h4 class="font-semibold text-gray-900 mb-2">Generate Reports</h4>
205
+ <p class="text-sm text-gray-600">Download portfolio performance</p>
206
+ </button>
207
+ </div>
208
+ </main>
209
+ </div>
210
+ </div>
211
+
212
+ <script>
213
+ document.addEventListener('DOMContentLoaded', function() {
214
+ // Performance Chart
215
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
216
+ new Chart(performanceCtx, {
217
+ type: 'line',
218
+ data: {
219
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
220
+ datasets: [{
221
+ label: 'Portfolio Value ($)',
222
+ data: [4200000, 4350000, 4500000, 4600000, 4700000, 4750000],
223
+ borderColor: '#4f46e5',
224
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
225
+ tension: 0.4,
226
+ fill: true
227
+ }]
228
+ },
229
+ options: {
230
+ responsive: true,
231
+ maintainAspectRatio: false,
232
+ plugins: {
233
+ legend: {
234
+ display: false
235
+ }
236
+ }
237
+ }
238
+ });
239
+
240
+ // Market Trends Chart
241
+ const marketTrendsCtx = document.getElementById('marketTrendsChart').getContext('2d');
242
+ new Chart(marketTrendsCtx, {
243
+ type: 'bar',
244
+ data: {
245
+ labels: ['UAE', 'Saudi', 'Qatar', 'Oman', 'Bahrain'],
246
+ datasets: [{
247
+ label: 'Market Growth %',
248
+ data: [12.5, 15.2, 8.7, 11.3, 9.8],
249
+ backgroundColor: [
250
+ 'rgba(79, 70, 229, 0.8)',
251
+ 'rgba(79, 70, 229, 0.6)',
252
+ 'rgba(79, 70, 229, 0.4)',
253
+ 'rgba(79, 70, 229, 0.6)',
254
+ 'rgba(79, 70, 229, 0.8)'
255
+ ],
256
+ borderColor: '#4f46e5',
257
+ borderWidth: 1
258
+ }]
259
+ },
260
+ options: {
261
+ responsive: true,
262
+ maintainAspectRatio: false,
263
+ plugins: {
264
+ legend: {
265
+ display: false
266
+ }
267
+ }
268
+ }
269
+ });
270
+
271
+ // Initialize Feather Icons
272
+ feather.replace();
273
+ });
274
+ </script>
275
+ </body>
276
+ </html>
index.html CHANGED
@@ -1,19 +1,362 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>PropTech Connect Hub - Revolutionizing Middle East Real Estate</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
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+ body { font-family: 'Inter', sans-serif; }
16
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
17
+ .property-card { transition: all 0.3s ease; }
18
+ .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); }
19
+ .stats-counter { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50">
23
+ <!-- Navigation -->
24
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
25
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
26
+ <div class="flex justify-between h-16">
27
+ <div class="flex items-center">
28
+ <div class="flex-shrink-0 flex items-center">
29
+ <i data-feather="home" class="h-8 w-8 text-indigo-600"></i>
30
+ <span class="ml-2 text-xl font-bold text-gray-900">PropTech Connect</span>
31
+ </div>
32
+ </div>
33
+ <div class="hidden md:flex items-center space-x-8">
34
+ <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Features</a>
35
+ <a href="#market" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Market Data</a>
36
+ <a href="#properties" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Properties</a>
37
+ <a href="#about" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
38
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">Get Started</button>
39
+ </div>
40
+ <div class="md:hidden flex items-center">
41
+ <button id="mobile-menu-button" class="text-gray-700 hover:text-indigo-600">
42
+ <i data-feather="menu"></i>
43
+ </button>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </nav>
48
+
49
+ <!-- Hero Section -->
50
+ <section class="gradient-bg text-white relative overflow-hidden">
51
+ <div id="vanta-bg" class="absolute inset-0 z-0"></div>
52
+ <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
53
+ <div class="text-center">
54
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Revolutionizing Middle East Real Estate</h1>
55
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">AI-powered property platform solving the region's most urgent real estate challenges with cutting-edge technology</p>
56
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
57
+ <button class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">Explore Properties</button>
58
+ <button class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">Join as Partner</button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </section>
63
+
64
+ <!-- Stats Section -->
65
+ <section class="bg-white py-16">
66
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
67
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
68
+ <div class="p-6">
69
+ <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="15000">0</div>
70
+ <div class="text-gray-600 mt-2">Properties Listed</div>
71
+ </div>
72
+ <div class="p-6">
73
+ <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="750">0</div>
74
+ <div class="text-gray-600 mt-2">Development Partners</div>
75
+ </div>
76
+ <div class="p-6">
77
+ <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="98">0</div>
78
+ <div class="text-gray-600 mt-2">Success Rate %</div>
79
+ </div>
80
+ <div class="p-6">
81
+ <div class="text-3xl md:text-4xl font-bold text-indigo-600 stats-counter" data-target="12">0</div>
82
+ <div class="text-gray-600 mt-2">Countries Served</div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Features Section -->
89
+ <section id="features" class="py-20 bg-gray-50">
90
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91
+ <div class="text-center mb-16">
92
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Solving the Impossible in Middle East Real Estate</h2>
93
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our platform addresses the four critical pain points that have plagued the region's property market for decades</p>
94
+ </div>
95
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
96
+ <div class="bg-white p-8 rounded-xl shadow-lg property-card">
97
+ <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
98
+ <i data-feather="x-circle" class="w-6 h-6 text-red-600"></i>
99
+ </div>
100
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Unworkable Solutions</h3>
101
+ <p class="text-gray-600">Traditional methods are broken. Our AI-driven platform automates property valuation, legal documentation, and transaction processing.</p>
102
+ </div>
103
+ <div class="bg-white p-8 rounded-xl shadow-lg property-card">
104
+ <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
105
+ <i data-feather="alert-triangle" class="w-6 h-6 text-yellow-600"></i>
106
+ </div>
107
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Unavoidable Complexity</h3>
108
+ <p class="text-gray-600">Navigating regional regulations, cultural differences, and market volatility made simple through intelligent algorithms.</p>
109
+ </div>
110
+ <div class="bg-white p-8 rounded-xl shadow-lg property-card">
111
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
112
+ <i data-feather="clock" class="w-6 h-6 text-blue-600"></i>
113
+ </div>
114
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Urgent Market Needs</h3>
115
+ <p class="text-gray-600">Rapid urbanization and investment demands require immediate solutions. Our platform delivers real-time market insights.</p>
116
+ </div>
117
+ <div class="bg-white p-8 rounded-xl shadow-lg property-card">
118
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
119
+ <i data-feather="users" class="w-6 h-6 text-green-600"></i>
120
+ </div>
121
+ <h3 class="text-xl font-semibold text-gray-900 mb-3">Underserved Communities</h3>
122
+ <p class="text-gray-600">Democratizing access to premium real estate opportunities for both local and international investors.</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Market Data Section -->
129
+ <section id="market" class="py-20 bg-white">
130
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
131
+ <div class="text-center mb-16">
132
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Live Middle East Market Intelligence</h2>
133
+ <p class="text-xl text-gray-600">Real-time data analytics driving smarter investment decisions</p>
134
+ </div>
135
+ <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-8 text-white">
136
+ <div class="grid md:grid-cols-3 gap-8">
137
+ <div class="text-center">
138
+ <div class="text-3xl font-bold mb-2">$2.3T</div>
139
+ <div class="text-indigo-100">Projected Market Value 2025</div>
140
+ </div>
141
+ <div class="text-center">
142
+ <div class="text-3xl font-bold mb-2">17.5%</div>
143
+ <div class="text-indigo-100">Annual Growth Rate</div>
144
+ </div>
145
+ <div class="text-center">
146
+ <div class="text-3xl font-bold mb-2">89%</div>
147
+ <div class="text-indigo-100">Digital Adoption Increase</div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Properties Section -->
155
+ <section id="properties" class="py-20 bg-gray-50">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="text-center mb-16">
158
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Featured Properties</h2>
159
+ <p class="text-xl text-gray-600">Curated selection of premium real estate opportunities across the Middle East</p>
160
+ </div>
161
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="properties-grid">
162
+ <!-- Properties will be loaded dynamically -->
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- CTA Section -->
168
+ <section class="py-20 gradient-bg text-white">
169
+ <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
170
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Middle East Real Estate?</h2>
171
+ <p class="text-xl mb-8">Join the revolution and be part of the region's most innovative property platform</p>
172
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
173
+ <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition duration-300">Start Investing Today</button>
174
+ <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-indigo-600 transition duration-300">Partner With Us</button>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Footer -->
180
+ <footer class="bg-gray-900 text-white py-12">
181
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
182
+ <div class="grid md:grid-cols-4 gap-8">
183
+ <div>
184
+ <div class="flex items-center mb-4">
185
+ <i data-feather="home" class="h-6 w-6 text-indigo-400"></i>
186
+ <span class="ml-2 text-xl font-bold">PropTech Connect</span>
187
+ </div>
188
+ <p class="text-gray-400">Revolutionizing real estate through technology and innovation.</p>
189
+ </div>
190
+ <div>
191
+ <h3 class="font-semibold text-lg mb-4">Quick Links</h3>
192
+ <ul class="space-y-2 text-gray-400">
193
+ <li><a href="#" class="hover:text-white transition duration-300">About Us</a></li>
194
+ <li><a href="#" class="hover:text-white transition duration-300">Properties</a></li>
195
+ <li><a href="#" class="hover:text-white transition duration-300">Market Data</a></li>
196
+ <li><a href="#" class="hover:text-white transition duration-300">Investor Portal</a></li>
197
+ </ul>
198
+ </div>
199
+ <div>
200
+ <h3 class="font-semibold text-lg mb-4">Contact</h3>
201
+ <ul class="space-y-2 text-gray-400">
202
+ <li class="flex items-center"><i data-feather="mail" class="w-4 h-4 mr-2"></i> contact@proptechconnect.me</li>
203
+ <li class="flex items-center"><i data-feather="phone" class="w-4 h-4 mr-2"></i> +971 4 123 4567</li>
204
+ <li class="flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Dubai, UAE</li>
205
+ </ul>
206
+ </div>
207
+ <div>
208
+ <h3 class="font-semibold text-lg mb-4">Stay Connected</h3>
209
+ <div class="flex space-x-4">
210
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i data-feather="facebook"></i></a>
211
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i data-feather="twitter"></i></a>
212
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i data-feather="linkedin"></i></a>
213
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i data-feather="instagram"></i></a>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
218
+ <p>&copy; 2024 PropTech Connect Hub. All rights reserved.</p>
219
+ </div>
220
+ </div>
221
+ </footer>
222
+
223
+ <script>
224
+ // Vanta.js Background
225
+ VANTA.GLOBE({
226
+ el: "#vanta-bg",
227
+ mouseControls: true,
228
+ touchControls: true,
229
+ gyroControls: false,
230
+ minHeight: 200.00,
231
+ minWidth: 200.00,
232
+ scale: 1.00,
233
+ scaleMobile: 1.00,
234
+ color: 0x667eea,
235
+ backgroundColor: 0x0,
236
+ size: 1.00
237
+ });
238
+
239
+ // Stats Counter Animation
240
+ document.addEventListener('DOMContentLoaded', function() {
241
+ const counters = document.querySelectorAll('.stats-counter');
242
+ const speed = 200;
243
+
244
+ counters.forEach(counter => {
245
+ const target = +counter.getAttribute('data-target');
246
+ const count = +counter.innerText;
247
+
248
+ const inc = target / speed;
249
+
250
+ if (count < target) {
251
+ const updateCount = () => {
252
+ const current = +counter.innerText;
253
+ const increment = inc;
254
+
255
+ if (current < target) {
256
+ counter.innerText = Math.ceil(current + increment);
257
+ } else {
258
+ counter.innerText = target;
259
+ }
260
+
261
+ if (current < target) {
262
+ setTimeout(updateCount, 1);
263
+ }
264
+ };
265
+ updateCount();
266
+ } else {
267
+ counter.innerText = target;
268
+ }
269
+ });
270
+
271
+ // Load sample properties
272
+ const propertiesGrid = document.getElementById('properties-grid');
273
+ const sampleProperties = [
274
+ {
275
+ image: 'http://static.photos/cityscape/640x360/1',
276
+ title: 'Luxury Downtown Apartment',
277
+ location: 'Dubai Marina, UAE',
278
+ price: 'AED 2,800,000',
279
+ type: 'Apartment'
280
+ },
281
+ {
282
+ image: 'http://static.photos/vintage/640x360/2',
283
+ title: 'Heritage Villa Compound',
284
+ location: 'Riyadh, Saudi Arabia',
285
+ price: 'SAR 12,500,000',
286
+ type: 'Villa'
287
+ },
288
+ {
289
+ image: 'http://static.photos/modern/640x360/3',
290
+ title: 'Commercial Office Space',
291
+ location: 'Doha, Qatar',
292
+ price: 'QAR 4,200,000',
293
+ type: 'Commercial'
294
+ },
295
+ {
296
+ image: 'http://static.photos/white/640x360/4',
297
+ title: 'Penthouse with Sea View',
298
+ location: 'Abu Dhabi, UAE',
299
+ price: 'AED 5,600,000',
300
+ type: 'Penthouse'
301
+ },
302
+ {
303
+ image: 'http://static.photos/gradient/640x360/5',
304
+ title: 'Investment Property Portfolio',
305
+ location: 'Manama, Bahrain',
306
+ price: 'BHD 850,000',
307
+ type: 'Mixed Use'
308
+ },
309
+ {
310
+ image: 'http://static.photos/blue/640x360/6',
311
+ title: 'Waterfront Development',
312
+ location: 'Muscat, Oman',
313
+ price: 'OMR 1,200,000',
314
+ type: 'Development'
315
+ }
316
+ ];
317
+
318
+ sampleProperties.forEach(property => {
319
+ const propertyCard = document.createElement('div');
320
+ propertyCard.className = 'bg-white rounded-xl shadow-lg overflow-hidden property-card';
321
+ propertyCard.innerHTML = `
322
+ <img src="${property.image}" alt="${property.title}" class="w-full h-48 object-cover">
323
+ <div class="p-6">
324
+ <div class="flex justify-between items-start mb-2">
325
+ <h3 class="text-lg font-semibold text-gray-900">${property.title}</h3>
326
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">${property.type}</span>
327
+ </div>
328
+ <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>
329
+ <div class="flex justify-between items-center">
330
+ <span class="text-xl font-bold text-indigo-600">${property.price}</span>
331
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition duration-300">View Details</button>
332
+ </div>
333
+ </div>
334
+ `;
335
+ propertiesGrid.appendChild(propertyCard);
336
+ });
337
+
338
+ // Mobile Menu Toggle
339
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
340
+ alert('Mobile menu would open here in a full implementation');
341
+ });
342
+
343
+ // Smooth scrolling
344
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
345
+ anchor.addEventListener('click', function (e) {
346
+ e.preventDefault();
347
+ const target = document.querySelector(this.getAttribute('href'));
348
+ if (target) {
349
+ target.scrollIntoView({
350
+ behavior: 'smooth',
351
+ block: 'start'
352
+ });
353
+ }
354
+ });
355
+ });
356
+ });
357
+
358
+ // Initialize Feather Icons
359
+ feather.replace();
360
+ </script>
361
+ </body>
362
  </html>