Hugging Face's logo

Spaces:
sodipeng
/
site-model-1
Running

App Files Community
sodipeng commited on
Commit
a6a28a4
·
verified ·
1 Parent(s): ec23747

site immobilier pour une agence immobilier mghimmo , j'aimerai ajouter dans la page d'accueil , un hero, des icones rond style story instagram, nos dernieres videos, nos dernieres story , nos derniers biens, les avis clients google, Accueil, Acheter, Estimation, Vendre, Agence, Contact, ajoute tous les modules et bonnes idées que tu as vu sur les portails immobilier et reseaux sociaux du monde entier , du referencement dans le pied de page et le nombre d'avis aussi dans le pied de page, - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +624 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Site Model 1
3
- emoji: 📊
4
- colorFrom: yellow
5
- colorTo: pink
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: site-model-1
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,624 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mghimmo - Agence Immobilière d'Excellence</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
+ .story-circle {
11
+ width: 80px;
12
+ height: 80px;
13
+ border-radius: 50%;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
18
+ margin: 0 auto;
19
+ transition: transform 0.3s;
20
+ }
21
+ .story-circle:hover {
22
+ transform: scale(1.1);
23
+ }
24
+ .story-inner {
25
+ width: 72px;
26
+ height: 72px;
27
+ border-radius: 50%;
28
+ border: 2px solid white;
29
+ overflow: hidden;
30
+ }
31
+ .property-card {
32
+ transition: all 0.3s ease;
33
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34
+ }
35
+ .property-card:hover {
36
+ transform: translateY(-5px);
37
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
38
+ }
39
+ .video-thumbnail {
40
+ position: relative;
41
+ cursor: pointer;
42
+ }
43
+ .video-thumbnail::after {
44
+ content: '\f04b';
45
+ font-family: 'Font Awesome 6 Free';
46
+ font-weight: 900;
47
+ position: absolute;
48
+ top: 50%;
49
+ left: 50%;
50
+ transform: translate(-50%, -50%);
51
+ color: white;
52
+ font-size: 2rem;
53
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
54
+ }
55
+ .testimonial-card {
56
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
57
+ border-left: 4px solid #3b82f6;
58
+ }
59
+ .hero-section {
60
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80');
61
+ background-size: cover;
62
+ background-position: center;
63
+ }
64
+ .nav-link {
65
+ position: relative;
66
+ }
67
+ .nav-link::after {
68
+ content: '';
69
+ position: absolute;
70
+ width: 0;
71
+ height: 2px;
72
+ bottom: -2px;
73
+ left: 0;
74
+ background-color: #3b82f6;
75
+ transition: width 0.3s;
76
+ }
77
+ .nav-link:hover::after {
78
+ width: 100%;
79
+ }
80
+ .dropdown:hover .dropdown-menu {
81
+ display: block;
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="font-sans antialiased text-gray-800">
86
+ <!-- Header -->
87
+ <header class="bg-white shadow-sm sticky top-0 z-50">
88
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
89
+ <div class="flex items-center">
90
+ <a href="#" class="text-2xl font-bold text-blue-600">MGHIMMO</a>
91
+ <span class="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">25 avis ★★★★★</span>
92
+ </div>
93
+
94
+ <div class="hidden md:flex space-x-8">
95
+ <a href="#" class="nav-link font-medium">Accueil</a>
96
+ <div class="dropdown relative">
97
+ <a href="#" class="nav-link font-medium flex items-center">
98
+ Acheter <i class="fas fa-chevron-down ml-1 text-xs"></i>
99
+ </a>
100
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48">
101
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Appartements</a>
102
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Maisons</a>
103
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Terrains</a>
104
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Locaux commerciaux</a>
105
+ </div>
106
+ </div>
107
+ <a href="#" class="nav-link font-medium">Estimation</a>
108
+ <a href="#" class="nav-link font-medium">Vendre</a>
109
+ <a href="#" class="nav-link font-medium">Agence</a>
110
+ <a href="#" class="nav-link font-medium">Contact</a>
111
+ </div>
112
+
113
+ <div class="flex items-center space-x-4">
114
+ <a href="#" class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition">Espace client</a>
115
+ <button class="md:hidden text-gray-600">
116
+ <i class="fas fa-bars text-xl"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </header>
121
+
122
+ <!-- Hero Section -->
123
+ <section class="hero-section text-white py-20 md:py-32">
124
+ <div class="container mx-auto px-4 text-center">
125
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Trouvez votre bien immobilier idéal</h1>
126
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Notre expertise au service de vos projets immobiliers depuis 15 ans</p>
127
+
128
+ <div class="max-w-4xl mx-auto bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-6">
129
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
130
+ <div>
131
+ <select class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-90 text-gray-800">
132
+ <option>Type de bien</option>
133
+ <option>Appartement</option>
134
+ <option>Maison</option>
135
+ <option>Terrain</option>
136
+ <option>Local commercial</option>
137
+ </select>
138
+ </div>
139
+ <div>
140
+ <select class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-90 text-gray-800">
141
+ <option>Localisation</option>
142
+ <option>Casablanca</option>
143
+ <option>Rabat</option>
144
+ <option>Marrakech</option>
145
+ <option>Tanger</option>
146
+ </select>
147
+ </div>
148
+ <div>
149
+ <select class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-90 text-gray-800">
150
+ <option>Budget</option>
151
+ <option>Moins de 1M MAD</option>
152
+ <option>1M - 2M MAD</option>
153
+ <option>2M - 5M MAD</option>
154
+ <option>Plus de 5M MAD</option>
155
+ </select>
156
+ </div>
157
+ <div>
158
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">
159
+ <i class="fas fa-search mr-2"></i> Rechercher
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="mt-10 flex justify-center space-x-4">
166
+ <div class="bg-white bg-opacity-20 px-4 py-2 rounded-full flex items-center">
167
+ <i class="fas fa-home mr-2"></i> 1,250+ biens
168
+ </div>
169
+ <div class="bg-white bg-opacity-20 px-4 py-2 rounded-full flex items-center">
170
+ <i class="fas fa-users mr-2"></i> 950+ clients satisfaits
171
+ </div>
172
+ <div class="bg-white bg-opacity-20 px-4 py-2 rounded-full flex items-center">
173
+ <i class="fas fa-map-marker-alt mr-2"></i> 8 agences
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Stories Section -->
180
+ <section class="py-12 bg-gray-50">
181
+ <div class="container mx-auto px-4">
182
+ <h2 class="text-3xl font-bold text-center mb-10">Nos dernières actualités</h2>
183
+
184
+ <div class="grid grid-cols-2 md:grid-cols-6 gap-6">
185
+ <!-- Story 1 -->
186
+ <div class="text-center">
187
+ <div class="story-circle">
188
+ <div class="story-inner">
189
+ <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nouveau projet" class="w-full h-full object-cover">
190
+ </div>
191
+ </div>
192
+ <p class="mt-2 font-medium">Nouveau projet</p>
193
+ </div>
194
+
195
+ <!-- Story 2 -->
196
+ <div class="text-center">
197
+ <div class="story-circle">
198
+ <div class="story-inner">
199
+ <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="Vente flash" class="w-full h-full object-cover">
200
+ </div>
201
+ </div>
202
+ <p class="mt-2 font-medium">Vente flash</p>
203
+ </div>
204
+
205
+ <!-- Story 3 -->
206
+ <div class="text-center">
207
+ <div class="story-circle">
208
+ <div class="story-inner">
209
+ <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="Maison vendue" class="w-full h-full object-cover">
210
+ </div>
211
+ </div>
212
+ <p class="mt-2 font-medium">Maison vendue</p>
213
+ </div>
214
+
215
+ <!-- Story 4 -->
216
+ <div class="text-center">
217
+ <div class="story-circle">
218
+ <div class="story-inner">
219
+ <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Visite virtuelle" class="w-full h-full object-cover">
220
+ </div>
221
+ </div>
222
+ <p class="mt-2 font-medium">Visite virtuelle</p>
223
+ </div>
224
+
225
+ <!-- Story 5 -->
226
+ <div class="text-center">
227
+ <div class="story-circle">
228
+ <div class="story-inner">
229
+ <img src="https://images.unsplash.com/photo-1605146769289-440113cc3d00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Conseils" class="w-full h-full object-cover">
230
+ </div>
231
+ </div>
232
+ <p class="mt-2 font-medium">Conseils</p>
233
+ </div>
234
+
235
+ <!-- Story 6 -->
236
+ <div class="text-center">
237
+ <div class="story-circle">
238
+ <div class="story-inner">
239
+ <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Témoignage" class="w-full h-full object-cover">
240
+ </div>
241
+ </div>
242
+ <p class="mt-2 font-medium">Témoignage</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Latest Videos -->
249
+ <section class="py-12">
250
+ <div class="container mx-auto px-4">
251
+ <div class="flex justify-between items-center mb-8">
252
+ <h2 class="text-3xl font-bold">Nos dernières vidéos</h2>
253
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Voir toutes <i class="fas fa-arrow-right ml-1"></i></a>
254
+ </div>
255
+
256
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
257
+ <!-- Video 1 -->
258
+ <div class="video-thumbnail rounded-xl overflow-hidden">
259
+ <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Visite appartement" class="w-full h-48 object-cover">
260
+ <div class="p-4 bg-gray-50">
261
+ <h3 class="font-bold">Visite exclusive: Appartement de luxe à Casablanca</h3>
262
+ <p class="text-sm text-gray-600 mt-1">Il y a 2 jours • 1.2K vues</p>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Video 2 -->
267
+ <div class="video-thumbnail rounded-xl overflow-hidden">
268
+ <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Conseils achat" class="w-full h-48 object-cover">
269
+ <div class="p-4 bg-gray-50">
270
+ <h3 class="font-bold">5 conseils pour bien acheter votre première maison</h3>
271
+ <p class="text-sm text-gray-600 mt-1">Il y a 1 semaine • 3.4K vues</p>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Video 3 -->
276
+ <div class="video-thumbnail rounded-xl overflow-hidden">
277
+ <img src="https://images.unsplash.com/photo-1600566752227-8cf9a0c7b318?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Projet neuf" class="w-full h-48 object-cover">
278
+ <div class="p-4 bg-gray-50">
279
+ <h3 class="font-bold">Présentation de notre nouveau projet résidentiel</h3>
280
+ <p class="text-sm text-gray-600 mt-1">Il y a 2 semaines • 2.1K vues</p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Latest Properties -->
288
+ <section class="py-12 bg-gray-50">
289
+ <div class="container mx-auto px-4">
290
+ <div class="flex justify-between items-center mb-8">
291
+ <h2 class="text-3xl font-bold">Nos derniers biens</h2>
292
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Voir toutes nos offres <i class="fas fa-arrow-right ml-1"></i></a>
293
+ </div>
294
+
295
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
296
+ <!-- Property 1 -->
297
+ <div class="property-card bg-white rounded-xl overflow-hidden">
298
+ <div class="relative">
299
+ <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="Appartement Casablanca" class="w-full h-48 object-cover">
300
+ <div class="absolute top-4 left-4 bg-blue-600 text-white px-2 py-1 rounded text-xs font-medium">Nouveau</div>
301
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
302
+ <i class="far fa-heart text-gray-600"></i>
303
+ </div>
304
+ </div>
305
+ <div class="p-4">
306
+ <div class="flex justify-between items-start">
307
+ <div>
308
+ <h3 class="font-bold text-lg">Appartement 4 pièces</h3>
309
+ <p class="text-gray-600"><i class="fas fa-map-marker-alt mr-1 text-blue-600"></i> Casablanca, Maarif</p>
310
+ </div>
311
+ <div class="text-right">
312
+ <p class="text-sm text-gray-500">À partir de</p>
313
+ <p class="font-bold text-blue-600">2 450 000 MAD</p>
314
+ </div>
315
+ </div>
316
+ <div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
317
+ <div class="text-center">
318
+ <i class="fas fa-bed text-blue-600"></i>
319
+ <p class="text-sm mt-1">4 chambres</p>
320
+ </div>
321
+ <div class="text-center">
322
+ <i class="fas fa-bath text-blue-600"></i>
323
+ <p class="text-sm mt-1">2 salles de bain</p>
324
+ </div>
325
+ <div class="text-center">
326
+ <i class="fas fa-ruler-combined text-blue-600"></i>
327
+ <p class="text-sm mt-1">120 m²</p>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Property 2 -->
334
+ <div class="property-card bg-white rounded-xl overflow-hidden">
335
+ <div class="relative">
336
+ <img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Villa Rabat" class="w-full h-48 object-cover">
337
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
338
+ <i class="far fa-heart text-gray-600"></i>
339
+ </div>
340
+ </div>
341
+ <div class="p-4">
342
+ <div class="flex justify-between items-start">
343
+ <div>
344
+ <h3 class="font-bold text-lg">Villa avec jardin</h3>
345
+ <p class="text-gray-600"><i class="fas fa-map-marker-alt mr-1 text-blue-600"></i> Rabat, Souissi</p>
346
+ </div>
347
+ <div class="text-right">
348
+ <p class="text-sm text-gray-500">À partir de</p>
349
+ <p class="font-bold text-blue-600">4 800 000 MAD</p>
350
+ </div>
351
+ </div>
352
+ <div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
353
+ <div class="text-center">
354
+ <i class="fas fa-bed text-blue-600"></i>
355
+ <p class="text-sm mt-1">5 chambres</p>
356
+ </div>
357
+ <div class="text-center">
358
+ <i class="fas fa-bath text-blue-600"></i>
359
+ <p class="text-sm mt-1">3 salles de bain</p>
360
+ </div>
361
+ <div class="text-center">
362
+ <i class="fas fa-ruler-combined text-blue-600"></i>
363
+ <p class="text-sm mt-1">250 m²</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Property 3 -->
370
+ <div class="property-card bg-white rounded-xl overflow-hidden">
371
+ <div class="relative">
372
+ <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Studio Marrakech" class="w-full h-48 object-cover">
373
+ <div class="absolute top-4 left-4 bg-green-600 text-white px-2 py-1 rounded text-xs font-medium">Coup de cœur</div>
374
+ <div class="absolute top-4 right-4 bg-white p-2 rounded-full shadow-md">
375
+ <i class="far fa-heart text-gray-600"></i>
376
+ </div>
377
+ </div>
378
+ <div class="p-4">
379
+ <div class="flex justify-between items-start">
380
+ <div>
381
+ <h3 class="font-bold text-lg">Studio meublé</h3>
382
+ <p class="text-gray-600"><i class="fas fa-map-marker-alt mr-1 text-blue-600"></i> Marrakech, Guéliz</p>
383
+ </div>
384
+ <div class="text-right">
385
+ <p class="text-sm text-gray-500">À partir de</p>
386
+ <p class="font-bold text-blue-600">850 000 MAD</p>
387
+ </div>
388
+ </div>
389
+ <div class="flex justify-between mt-4 pt-4 border-t border-gray-100">
390
+ <div class="text-center">
391
+ <i class="fas fa-bed text-blue-600"></i>
392
+ <p class="text-sm mt-1">1 chambre</p>
393
+ </div>
394
+ <div class="text-center">
395
+ <i class="fas fa-bath text-blue-600"></i>
396
+ <p class="text-sm mt-1">1 salle de bain</p>
397
+ </div>
398
+ <div class="text-center">
399
+ <i class="fas fa-ruler-combined text-blue-600"></i>
400
+ <p class="text-sm mt-1">35 m²</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </section>
408
+
409
+ <!-- Testimonials -->
410
+ <section class="py-12">
411
+ <div class="container mx-auto px-4">
412
+ <h2 class="text-3xl font-bold text-center mb-10">Ce que disent nos clients</h2>
413
+
414
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
415
+ <!-- Testimonial 1 -->
416
+ <div class="testimonial-card p-6 rounded-lg">
417
+ <div class="flex items-center mb-4">
418
+ <div class="flex-shrink-0">
419
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="h-12 w-12 rounded-full">
420
+ </div>
421
+ <div class="ml-4">
422
+ <h4 class="font-bold">Amina El Fassi</h4>
423
+ <div class="flex mt-1">
424
+ <i class="fas fa-star text-yellow-400"></i>
425
+ <i class="fas fa-star text-yellow-400"></i>
426
+ <i class="fas fa-star text-yellow-400"></i>
427
+ <i class="fas fa-star text-yellow-400"></i>
428
+ <i class="fas fa-star text-yellow-400"></i>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <p class="text-gray-700">"L'équipe de Mghimmo a été d'une grande aide pour trouver notre maison idéale. Professionnalisme et écoute tout au long du processus. Je recommande vivement!"</p>
433
+ <p class="text-sm text-gray-500 mt-4">Posté le 15/06/2023</p>
434
+ </div>
435
+
436
+ <!-- Testimonial 2 -->
437
+ <div class="testimonial-card p-6 rounded-lg">
438
+ <div class="flex items-center mb-4">
439
+ <div class="flex-shrink-0">
440
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="h-12 w-12 rounded-full">
441
+ </div>
442
+ <div class="ml-4">
443
+ <h4 class="font-bold">Karim Benjelloun</h4>
444
+ <div class="flex mt-1">
445
+ <i class="fas fa-star text-yellow-400"></i>
446
+ <i class="fas fa-star text-yellow-400"></i>
447
+ <i class="fas fa-star text-yellow-400"></i>
448
+ <i class="fas fa-star text-yellow-400"></i>
449
+ <i class="fas fa-star text-yellow-400"></i>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ <p class="text-gray-700">"J'ai vendu mon appartement en moins d'une semaine grâce à Mghimmo. Le prix obtenu était au-dessus de mes attentes. Un service impeccable!"</p>
454
+ <p class="text-sm text-gray-500 mt-4">Posté le 02/07/2023</p>
455
+ </div>
456
+
457
+ <!-- Testimonial 3 -->
458
+ <div class="testimonial-card p-6 rounded-lg">
459
+ <div class="flex items-center mb-4">
460
+ <div class="flex-shrink-0">
461
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="h-12 w-12 rounded-full">
462
+ </div>
463
+ <div class="ml-4">
464
+ <h4 class="font-bold">Leila Zaoui</h4>
465
+ <div class="flex mt-1">
466
+ <i class="fas fa-star text-yellow-400"></i>
467
+ <i class="fas fa-star text-yellow-400"></i>
468
+ <i class="fas fa-star text-yellow-400"></i>
469
+ <i class="fas fa-star text-yellow-400"></i>
470
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ <p class="text-gray-700">"Nous avons fait appel à Mghimmo pour l'achat de notre première résidence. Le conseiller nous a guidés avec patience et expertise. Très satisfaite du résultat."</p>
475
+ <p class="text-sm text-gray-500 mt-4">Posté le 22/07/2023</p>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="text-center mt-10">
480
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 font-medium">
481
+ <i class="fab fa-google mr-2"></i> Lire tous nos avis Google (25)
482
+ </a>
483
+ </div>
484
+ </div>
485
+ </section>
486
+
487
+ <!-- Call to Action -->
488
+ <section class="py-16 bg-blue-600 text-white">
489
+ <div class="container mx-auto px-4 text-center">
490
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à concrétiser votre projet immobilier?</h2>
491
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Nos experts sont à votre disposition pour vous accompagner à chaque étape</p>
492
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
493
+ <a href="#" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold transition">Prendre rendez-vous</a>
494
+ <a href="#" class="border-2 border-white hover:bg-blue-700 px-8 py-3 rounded-lg font-bold transition">Nous contacter</a>
495
+ </div>
496
+ </div>
497
+ </section>
498
+
499
+ <!-- Footer -->
500
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
501
+ <div class="container mx-auto px-4">
502
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
503
+ <!-- About -->
504
+ <div>
505
+ <h3 class="text-xl font-bold mb-6">MGHIMMO</h3>
506
+ <p class="mb-4">Leader sur le marché immobilier marocain depuis 2008, nous mettons notre expertise à votre service pour tous vos projets.</p>
507
+ <div class="flex space-x-4">
508
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-facebook-f"></i></a>
509
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-instagram"></i></a>
510
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-linkedin-in"></i></a>
511
+ <a href="#" class="hover:text-blue-400"><i class="fab fa-youtube"></i></a>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Quick Links -->
516
+ <div>
517
+ <h3 class="text-lg font-bold mb-6">Liens rapides</h3>
518
+ <ul class="space-y-3">
519
+ <li><a href="#" class="hover:text-blue-400">Accueil</a></li>
520
+ <li><a href="#" class="hover:text-blue-400">Acheter un bien</a></li>
521
+ <li><a href="#" class="hover:text-blue-400">Vendre un bien</a></li>
522
+ <li><a href="#" class="hover:text-blue-400">Estimation gratuite</a></li>
523
+ <li><a href="#" class="hover:text-blue-400">Nos agences</a></li>
524
+ <li><a href="#" class="hover:text-blue-400">Contact</a></li>
525
+ </ul>
526
+ </div>
527
+
528
+ <!-- Contact -->
529
+ <div>
530
+ <h3 class="text-lg font-bold mb-6">Contactez-nous</h3>
531
+ <ul class="space-y-3">
532
+ <li class="flex items-start">
533
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
534
+ <span>123 Avenue Hassan II, Casablanca</span>
535
+ </li>
536
+ <li class="flex items-center">
537
+ <i class="fas fa-phone-alt mr-3 text-blue-400"></i>
538
+ <span>+212 522 123 456</span>
539
+ </li>
540
+ <li class="flex items-center">
541
+ <i class="fas fa-envelope mr-3 text-blue-400"></i>
542
+ <span>contact@mghimmo.ma</span>
543
+ </li>
544
+ <li class="flex items-center">
545
+ <i class="fas fa-clock mr-3 text-blue-400"></i>
546
+ <span>Lun-Ven: 9h-19h</span>
547
+ </li>
548
+ </ul>
549
+ </div>
550
+
551
+ <!-- Newsletter -->
552
+ <div>
553
+ <h3 class="text-lg font-bold mb-6">Newsletter</h3>
554
+ <p class="mb-4">Abonnez-vous pour recevoir nos dernières offres et actualités.</p>
555
+ <form class="flex">
556
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full">
557
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg">
558
+ <i class="fas fa-paper-plane"></i>
559
+ </button>
560
+ </form>
561
+ <div class="mt-6 flex items-center">
562
+ <i class="fab fa-google text-2xl mr-3"></i>
563
+ <div>
564
+ <div class="flex">
565
+ <i class="fas fa-star text-yellow-400"></i>
566
+ <i class="fas fa-star text-yellow-400"></i>
567
+ <i class="fas fa-star text-yellow-400"></i>
568
+ <i class="fas fa-star text-yellow-400"></i>
569
+ <i class="fas fa-star text-yellow-400"></i>
570
+ </div>
571
+ <p class="text-sm">4.9/5 sur 25 avis</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="border-t border-gray-800 mt-12 pt-8">
578
+ <div class="flex flex-col md:flex-row justify-between items-center">
579
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 MGHIMMO. Tous droits réservés.</p>
580
+ <div class="flex space-x-6">
581
+ <a href="#" class="text-gray-400 hover:text-white">Mentions légales</a>
582
+ <a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a>
583
+ <a href="#" class="text-gray-400 hover:text-white">CGU</a>
584
+ </div>
585
+ </div>
586
+
587
+ <!-- SEO Links -->
588
+ <div class="mt-6 text-center text-sm text-gray-500">
589
+ <p>Agence immobilière Casablanca | Achat appartement Casablanca | Vente maison Rabat | Location appartement Marrakech | Estimation bien immobilier | Investissement immobilier Maroc</p>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </footer>
594
+
595
+ <script>
596
+ // Mobile menu toggle
597
+ document.querySelector('button.md\\:hidden').addEventListener('click', function() {
598
+ // You would implement mobile menu toggle functionality here
599
+ alert('Mobile menu would open here');
600
+ });
601
+
602
+ // Property favorite toggle
603
+ document.querySelectorAll('.far.fa-heart').forEach(icon => {
604
+ icon.addEventListener('click', function(e) {
605
+ e.stopPropagation();
606
+ if (this.classList.contains('far')) {
607
+ this.classList.remove('far');
608
+ this.classList.add('fas', 'text-red-500');
609
+ } else {
610
+ this.classList.remove('fas', 'text-red-500');
611
+ this.classList.add('far');
612
+ }
613
+ });
614
+ });
615
+
616
+ // Video click handler
617
+ document.querySelectorAll('.video-thumbnail').forEach(thumb => {
618
+ thumb.addEventListener('click', function() {
619
+ alert('Video player would open here');
620
+ });
621
+ });
622
+ </script>
623
+ <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=sodipeng/site-model-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
624
+ </html>