Hugging Face's logo

Spaces:
officeasiste
/
f6
Running

App Files Community
officeasiste commited on
Commit
8e7b21d
·
verified ·
1 Parent(s): 9b5163e

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +1126 -690
index.html CHANGED
@@ -3,761 +3,1197 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>10 Beautiful Footer Variations</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
- .footer-separator {
11
- margin: 5rem 0;
12
- border-top: 2px dashed #4b5563;
13
- position: relative;
 
 
14
  }
15
-
16
- .footer-separator::before {
17
- content: "NEXT FOOTER";
18
- position: absolute;
19
- top: -12px;
20
- left: 50%;
21
- transform: translateX(-50%);
22
- background: #1f2937;
 
 
 
 
 
 
 
 
23
  padding: 0 1rem;
24
- color: #9ca3af;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  font-size: 0.75rem;
 
 
 
 
 
 
 
26
  }
27
-
28
- .wave-shape {
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  position: absolute;
30
- top: 0;
31
  left: 0;
 
 
 
 
 
 
 
32
  width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  overflow: hidden;
34
- line-height: 0;
35
- transform: rotate(180deg);
 
 
 
 
 
36
  }
37
-
38
- .wave-shape svg {
39
  position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  display: block;
41
- width: calc(100% + 1.3px);
42
- height: 80px;
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
-
45
- .hover-grow {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  transition: transform 0.3s ease;
47
  }
48
-
49
- .hover-grow:hover {
50
- transform: scale(1.05);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  }
52
-
53
- .gradient-text {
54
- background-clip: text;
55
- -webkit-background-clip: text;
56
- color: transparent;
57
  }
58
-
59
- .potato-bg {
60
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%234b5563" fill-opacity="0.05" d="M30,15 Q50,5 70,15 Q85,30 85,50 Q95,50 85,70 Q70,85 50,85 Q30,95 30,70 Q15,70 15,50 Q5,50 15,30 Q30,15 30,15 Z"/></svg>');
61
- background-size: 100px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  }
63
  </style>
64
  </head>
65
- <body class="bg-gray-100">
66
- <div class="container mx-auto px-4 py-12">
67
- <h1 class="text-4xl font-bold text-center mb-12 text-gray-800">10 Beautiful Footer Variations</h1>
68
-
69
- <!-- Footer 1: Classic Green -->
70
- <footer class="bg-green-800 text-white pt-12 pb-8">
71
- <div class="container mx-auto px-4">
72
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
73
- <div>
74
- <h3 class="text-xl font-semibold mb-4 flex items-center">
75
- <div class="text-2xl mr-2 font-bold">
76
- ///<span class="text-yellow-300">PAPAS</span>///
77
- </div>
78
- </h3>
79
- <p class="text-gray-300">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
80
- </div>
81
-
82
- <div>
83
- <h3 class="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
84
- <ul class="space-y-2">
85
- <li><a href="#" class="text-gray-300 hover:text-yellow-300 transition duration-300">Productos</a></li>
86
- <li><a href="#" class="text-gray-300 hover:text-yellow-300 transition duration-300">Entrega</a></li>
87
- <li><a href="#" class="text-gray-300 hover:text-yellow-300 transition duration-300">Reseñas</a></li>
88
- <li><a href="#" class="text-gray-300 hover:text-yellow-300 transition duration-300">Contacto</a></li>
89
- </ul>
90
- </div>
91
-
92
- <div>
93
- <h3 class="text-lg font-semibold mb-4">Contacto</h3>
94
- <ul class="space-y-2 text-gray-300">
95
- <li class="flex items-start">
96
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-yellow-300"></i>
97
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
98
- </li>
99
- <li class="flex items-center">
100
- <i class="fas fa-phone-alt mr-3 text-yellow-300"></i>
101
- <span>+56 9 1234 5678</span>
102
- </li>
103
- <li class="flex items-center">
104
- <i class="fas fa-envelope mr-3 text-yellow-300"></i>
105
- <span>ventas@papasfrescas.cl</span>
106
- </li>
107
- </ul>
108
- </div>
109
-
110
- <div>
111
- <h3 class="text-lg font-semibold mb-4">WhatsApp</h3>
112
- <a href="https://wa.me/56912345678" class="bg-green-600 hover:bg-green-700 text-white font-medium px-6 py-3 rounded-lg transition duration-300 inline-flex items-center mb-4">
113
- <i class="fab fa-whatsapp mr-2 text-xl"></i> Chatear Ahora
114
- </a>
115
-
116
- <div class="bg-green-900 p-3 rounded-lg">
117
- <p class="text-sm text-gray-300 mb-1">Horario de atención:</p>
118
- <p class="text-yellow-300 text-sm">Lunes a Viernes: 8:00 - 18:00</p>
119
- </div>
120
- </div>
121
- </div>
122
-
123
- <div class="border-t border-green-700 pt-6 text-center text-gray-400 text-sm">
124
- <div class="flex flex-col md:flex-row justify-between items-center">
125
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
126
- <div class="mt-4 md:mt-0">
127
- <a href="#" class="hover:text-yellow-300 transition duration-300 mx-2">Política de Privacidad</a>
128
- <a href="#" class="hover:text-yellow-300 transition duration-300 mx-2">Términos de Servicio</a>
129
- <a href="#" class="hover:text-yellow-300 transition duration-300 mx-2">FAQ</a>
130
- </div>
131
- </div>
132
- <p class="mt-4">Desarrollado con <i class="fas fa-heart text-red-500"></i> en Santiago, Chile</p>
133
  </div>
134
  </div>
135
- </footer>
136
-
137
- <div class="footer-separator"></div>
138
-
139
- <!-- Footer 2: Dark with WhatsApp Highlight -->
140
- <footer class="bg-gray-900 text-white pt-12 pb-8">
141
- <div class="wave-shape">
142
- <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
143
- <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="#111827"></path>
144
- </svg>
145
  </div>
146
-
147
- <div class="container mx-auto px-4 pt-8">
148
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
149
- <div>
150
- <h3 class="text-xl font-semibold mb-4 flex items-center">
151
- <div class="text-2xl mr-2 font-bold">
152
- <span class="text-green-400">///</span>PAPAS<span class="text-green-400">///</span>
153
- </div>
154
- </h3>
155
- <p class="text-gray-400">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
156
- </div>
157
-
158
- <div>
159
- <h3 class="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
160
- <ul class="space-y-2">
161
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
162
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Productos
163
- </a></li>
164
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
165
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Entrega
166
- </a></li>
167
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
168
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Reseñas
169
- </a></li>
170
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
171
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Contacto
172
- </a></li>
173
- </ul>
174
- </div>
175
-
176
- <div>
177
- <h3 class="text-lg font-semibold mb-4">Contacto</h3>
178
- <ul class="space-y-2 text-gray-400">
179
- <li class="flex items-start">
180
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-400"></i>
181
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
182
- </li>
183
- <li class="flex items-center">
184
- <i class="fas fa-phone-alt mr-3 text-green-400"></i>
185
- <span>+56 9 1234 5678</span>
186
- </li>
187
- <li class="flex items-center">
188
- <i class="fas fa-envelope mr-3 text-green-400"></i>
189
- <span>ventas@papasfrescas.cl</span>
190
- </li>
191
- </ul>
192
- </div>
193
-
194
- <div>
195
- <h3 class="text-lg font-semibold mb-4">Contáctenos</h3>
196
- <a href="https://wa.me/56912345678" class="bg-green-500 hover:bg-green-600 text-white font-medium px-4 py-3 rounded-lg transition duration-300 inline-flex items-center w-full justify-center mb-4 hover-grow">
197
- <i class="fab fa-whatsapp mr-2 text-xl"></i> WhatsApp
198
- </a>
199
-
200
- <div class="flex space-x-4 justify-center">
201
- <a href="#" class="bg-gray-800 hover:bg-green-500 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300 hover-grow">
202
- <i class="fab fa-facebook-f"></i>
203
- </a>
204
- <a href="#" class="bg-gray-800 hover:bg-green-500 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300 hover-grow">
205
- <i class="fab fa-instagram"></i>
206
- </a>
207
- <a href="#" class="bg-gray-800 hover:bg-green-500 text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300 hover-grow">
208
- <i class="fas fa-map-marker-alt"></i>
209
- </a>
210
- </div>
211
- </div>
212
- </div>
213
-
214
- <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
215
- <div class="flex flex-col md:flex-row justify-between items-center">
216
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
217
- <div class="mt-4 md:mt-0">
218
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Política de Privacidad</a>
219
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Términos de Servicio</a>
220
- </div>
221
- </div>
222
- </div>
223
  </div>
224
- </footer>
225
-
226
- <div class="footer-separator"></div>
227
-
228
- <!-- Footer 3: Earthy Tones -->
229
- <footer class="bg-amber-900 text-white pt-12 pb-8">
230
- <div class="container mx-auto px-4">
231
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
232
- <div>
233
- <h3 class="text-xl font-semibold mb-4 flex items-center">
234
- <div class="text-2xl mr-2 font-bold">
235
- <span class="text-amber-300">PAPAS</span>FRESCAS
236
- </div>
237
- </h3>
238
- <p class="text-amber-200">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
239
- </div>
240
-
241
- <div>
242
- <h3 class="text-lg font-semibold mb-4 text-amber-300">Enlaces Rápidos</h3>
243
- <ul class="space-y-2">
244
- <li><a href="#" class="text-amber-200 hover:text-white transition duration-300">Productos</a></li>
245
- <li><a href="#" class="text-amber-200 hover:text-white transition duration-300">Entrega</a></li>
246
- <li><a href="#" class="text-amber-200 hover:text-white transition duration-300">Reseñas</a></li>
247
- <li><a href="#" class="text-amber-200 hover:text-white transition duration-300">Contacto</a></li>
248
- </ul>
249
- </div>
250
-
251
- <div>
252
- <h3 class="text-lg font-semibold mb-4 text-amber-300">Contacto</h3>
253
- <ul class="space-y-2 text-amber-200">
254
- <li class="flex items-start">
255
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-white"></i>
256
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
257
- </li>
258
- <li class="flex items-center">
259
- <i class="fas fa-phone-alt mr-3 text-white"></i>
260
- <span>+56 9 1234 5678</span>
261
- </li>
262
- <li class="flex items-center">
263
- <i class="fas fa-envelope mr-3 text-white"></i>
264
- <span>ventas@papasfrescas.cl</span>
265
- </li>
266
- </ul>
267
- </div>
268
-
269
- <div>
270
- <h3 class="text-lg font-semibold mb-4 text-amber-300">WhatsApp</h3>
271
- <div class="bg-amber-800 p-4 rounded-lg">
272
- <p class="text-amber-100 mb-3">¿Tienes preguntas? Escríbenos directamente:</p>
273
- <a href="https://wa.me/56912345678" class="bg-green-600 hover:bg-green-700 text-white font-medium px-4 py-2 rounded-lg transition duration-300 inline-flex items-center justify-center w-full">
274
- <i class="fab fa-whatsapp mr-2"></i> Enviar Mensaje
275
- </a>
276
- </div>
277
- </div>
278
- </div>
279
-
280
- <div class="border-t border-amber-800 pt-6 text-center text-amber-400 text-sm">
281
- <div class="flex flex-col md:flex-row justify-between items-center">
282
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
283
- <div class="mt-4 md:mt-0">
284
- <a href="#" class="hover:text-white transition duration-300 mx-2">Política de Privacidad</a>
285
- <a href="#" class="hover:text-white transition duration-300 mx-2">Términos de Servicio</a>
286
- </div>
287
- </div>
288
- <p class="mt-4">Desarrollado con <i class="fas fa-heart text-red-500"></i> en Santiago, Chile</p>
289
- </div>
290
  </div>
291
- </footer>
292
-
293
- <div class="footer-separator"></div>
294
-
295
- <!-- Footer 4: Minimalist White -->
296
- <footer class="bg-white text-gray-800 pt-12 pb-8 shadow-lg">
297
- <div class="container mx-auto px-4">
298
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
299
- <div>
300
- <h3 class="text-xl font-semibold mb-4 flex items-center">
301
- <div class="text-2xl mr-2 font-bold bg-green-600 text-white px-2 py-1 rounded">
302
- PAPAS
303
- </div>
304
- </h3>
305
- <p class="text-gray-600">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
306
- </div>
307
-
308
- <div>
309
- <h3 class="text-lg font-semibold mb-4 text-green-600">Enlaces Rápidos</h3>
310
- <ul class="space-y-2">
311
- <li><a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">Productos</a></li>
312
- <li><a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">Entrega</a></li>
313
- <li><a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">Reseñas</a></li>
314
- <li><a href="#" class="text-gray-600 hover:text-green-600 transition duration-300">Contacto</a></li>
315
- </ul>
316
- </div>
317
-
318
- <div>
319
- <h3 class="text-lg font-semibold mb-4 text-green-600">Contacto</h3>
320
- <ul class="space-y-2 text-gray-600">
321
- <li class="flex items-start">
322
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-600"></i>
323
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
324
- </li>
325
- <li class="flex items-center">
326
- <i class="fas fa-phone-alt mr-3 text-green-600"></i>
327
- <span>+56 9 1234 5678</span>
328
- </li>
329
- <li class="flex items-center">
330
- <i class="fas fa-envelope mr-3 text-green-600"></i>
331
- <span>ventas@papasfrescas.cl</span>
332
- </li>
333
- </ul>
334
- </div>
335
-
336
- <div>
337
- <h3 class="text-lg font-semibold mb-4 text-green-600">WhatsApp</h3>
338
- <a href="https://wa.me/56912345678" class="bg-green-600 hover:bg-green-700 text-white font-medium px-4 py-3 rounded-lg transition duration-300 inline-flex items-center justify-center w-full mb-4">
339
- <i class="fab fa-whatsapp mr-2 text-xl"></i> Contactar por WhatsApp
340
- </a>
341
- <p class="text-gray-500 text-sm">Respuesta en menos de 15 minutos</p>
342
  </div>
343
- </div>
344
-
345
- <div class="border-t border-gray-200 pt-6 text-center text-gray-500 text-sm">
346
- <div class="flex flex-col md:flex-row justify-between items-center">
347
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
348
- <div class="mt-4 md:mt-0">
349
- <a href="#" class="hover:text-green-600 transition duration-300 mx-2">Política de Privacidad</a>
350
- <a href="#" class="hover:text-green-600 transition duration-300 mx-2">Términos de Servicio</a>
351
  </div>
 
 
 
 
352
  </div>
353
  </div>
354
- </div>
355
- </footer>
356
-
357
- <div class="footer-separator"></div>
358
-
359
- <!-- Footer 5: Gradient Background -->
360
- <footer class="bg-gradient-to-r from-green-800 to-green-600 text-white pt-12 pb-8">
361
- <div class="container mx-auto px-4">
362
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
363
- <div>
364
- <h3 class="text-xl font-semibold mb-4 flex items-center">
365
- <div class="text-2xl mr-2 font-bold bg-white text-green-600 px-2 py-1 rounded">
366
- ///PAPAS///
367
- </div>
368
- </h3>
369
- <p class="text-green-100">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
370
- </div>
371
-
372
- <div>
373
- <h3 class="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
374
- <ul class="space-y-2">
375
- <li><a href="#" class="text-green-100 hover:text-white transition duration-300">Productos</a></li>
376
- <li><a href="#" class="text-green-100 hover:text-white transition duration-300">Entrega</a></li>
377
- <li><a href="#" class="text-green-100 hover:text-white transition duration-300">Reseñas</a></li>
378
- <li><a href="#" class="text-green-100 hover:text-white transition duration-300">Contacto</a></li>
379
- </ul>
380
  </div>
381
-
382
- <div>
383
- <h3 class="text-lg font-semibold mb-4">Contacto</h3>
384
- <ul class="space-y-2 text-green-100">
385
- <li class="flex items-start">
386
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-white"></i>
387
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
388
- </li>
389
- <li class="flex items-center">
390
- <i class="fas fa-phone-alt mr-3 text-white"></i>
391
- <span>+56 9 1234 5678</span>
392
- </li>
393
- <li class="flex items-center">
394
- <i class="fas fa-envelope mr-3 text-white"></i>
395
- <span>ventas@papasfrescas.cl</span>
396
- </li>
397
- </ul>
398
- </div>
399
-
400
- <div>
401
- <h3 class="text-lg font-semibold mb-4">Contacto Rápido</h3>
402
- <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm">
403
- <a href="https://wa.me/56912345678" class="bg-white hover:bg-gray-100 text-green-600 font-medium px-4 py-3 rounded-lg transition duration-300 inline-flex items-center justify-center w-full mb-3">
404
- <i class="fab fa-whatsapp mr-2 text-xl"></i> WhatsApp
405
- </a>
406
- <a href="tel:+56912345678" class="bg-green-700 hover:bg-green-800 text-white font-medium px-4 py-3 rounded-lg transition duration-300 inline-flex items-center justify-center w-full">
407
- <i class="fas fa-phone-alt mr-2"></i> Llamar Ahora
408
- </a>
409
  </div>
 
 
 
 
410
  </div>
411
  </div>
412
-
413
- <div class="border-t border-green-700 pt-6 text-center text-green-200 text-sm">
414
- <div class="flex flex-col md:flex-row justify-between items-center">
415
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
416
- <div class="mt-4 md:mt-0">
417
- <a href="#" class="hover:text-white transition duration-300 mx-2">Política de Privacidad</a>
418
- <a href="#" class="hover:text-white transition duration-300 mx-2">Términos de Servicio</a>
 
 
 
 
 
 
419
  </div>
 
 
 
 
420
  </div>
421
- <p class="mt-4">Desarrollado con <i class="fas fa-heart text-red-400"></i> en Santiago, Chile</p>
422
  </div>
423
  </div>
424
- </footer>
425
-
426
- <div class="footer-separator"></div>
427
-
428
- <!-- Footer 6: Dark with Floating WhatsApp -->
429
- <footer class="bg-gray-900 text-white pt-12 pb-8 relative">
430
- <!-- Floating WhatsApp Button -->
431
- <div class="fixed bottom-6 right-6 z-50">
432
- <a href="https://wa.me/56912345678" class="bg-green-500 hover:bg-green-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-lg transition duration-300 transform hover:scale-110">
433
- <i class="fab fa-whatsapp"></i>
434
- </a>
435
  </div>
436
-
437
- <div class="container mx-auto px-4">
438
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
439
- <div>
440
- <h3 class="text-xl font-semibold mb-4 flex items-center">
441
- <div class="text-2xl mr-2 font-bold gradient-text bg-gradient-to-r from-green-400 to-green-600">
442
- PAPAS FRESCAS
443
- </div>
444
- </h3>
445
- <p class="text-gray-400">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
446
- </div>
447
-
448
- <div>
449
- <h3 class="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
450
- <ul class="space-y-2">
451
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Productos</a></li>
452
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Entrega</a></li>
453
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Reseñas</a></li>
454
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Contacto</a></li>
455
- </ul>
456
- </div>
457
-
458
- <div>
459
- <h3 class="text-lg font-semibold mb-4">Contacto</h3>
460
- <ul class="space-y-2 text-gray-400">
461
- <li class="flex items-start">
462
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-400"></i>
463
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
464
- </li>
465
- <li class="flex items-center">
466
- <i class="fas fa-phone-alt mr-3 text-green-400"></i>
467
- <span>+56 9 1234 5678</span>
468
- </li>
469
- <li class="flex items-center">
470
- <i class="fas fa-envelope mr-3 text-green-400"></i>
471
- <span>ventas@papasfrescas.cl</span>
472
- </li>
473
- </ul>
474
  </div>
475
-
476
- <div>
477
- <h3 class="text-lg font-semibold mb-4">Horario</h3>
478
- <div class="bg-gray-800 p-4 rounded-lg">
479
- <ul class="space-y-2 text-gray-300">
480
- <li class="flex justify-between">
481
- <span>Lunes - Viernes:</span>
482
- <span class="text-green-400">8:00 - 18:00</span>
483
- </li>
484
- <li class="flex justify-between">
485
- <span>Sábado:</span>
486
- <span class="text-green-400">9:00 - 14:00</span>
487
- </li>
488
- <li class="flex justify-between">
489
- <span>Domingo:</span>
490
- <span class="text-red-400">Cerrado</span>
491
- </li>
492
- </ul>
493
- </div>
494
  </div>
 
 
 
495
  </div>
496
-
497
- <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
498
- <div class="flex flex-col md:flex-row justify-between items-center">
499
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
500
- <div class="mt-4 md:mt-0">
501
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Política de Privacidad</a>
502
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Términos de Servicio</a>
503
- </div>
504
  </div>
 
 
 
505
  </div>
506
  </div>
507
- </footer>
508
-
509
- <div class="footer-separator"></div>
510
-
511
- <!-- Footer 7: Potato Pattern -->
512
- <footer class="bg-gray-800 text-white pt-12 pb-8 potato-bg">
513
- <div class="container mx-auto px-4">
514
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
515
- <div>
516
- <h3 class="text-xl font-semibold mb-4 flex items-center">
517
- <div class="text-2xl mr-2 font-bold">
518
- <span class="text-green-400">PAPAS</span>CHILE
519
- </div>
520
- </h3>
521
- <p class="text-gray-300">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
522
- </div>
523
-
524
- <div>
525
- <h3 class="text-lg font-semibold mb-4 text-green-400">Enlaces Rápidos</h3>
526
- <ul class="space-y-2">
527
- <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Productos</a></li>
528
- <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Entrega</a></li>
529
- <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Reseñas</a></li>
530
- <li><a href="#" class="text-gray-300 hover:text-green-400 transition duration-300">Contacto</a></li>
531
- </ul>
532
  </div>
533
-
534
- <div>
535
- <h3 class="text-lg font-semibold mb-4 text-green-400">Contacto</h3>
536
- <ul class="space-y-2 text-gray-300">
537
- <li class="flex items-start">
538
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-400"></i>
539
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
540
- </li>
541
- <li class="flex items-center">
542
- <i class="fas fa-phone-alt mr-3 text-green-400"></i>
543
- <span>+56 9 1234 5678</span>
544
- </li>
545
- <li class="flex items-center">
546
- <i class="fas fa-envelope mr-3 text-green-400"></i>
547
- <span>ventas@papasfrescas.cl</span>
548
- </li>
549
- </ul>
550
  </div>
551
-
552
- <div>
553
- <h3 class="text-lg font-semibold mb-4 text-green-400">WhatsApp</h3>
554
- <div class="bg-gray-700 bg-opacity-70 p-4 rounded-lg backdrop-blur-sm">
555
- <p class="text-gray-300 mb-3">Escríbenos para pedidos y consultas:</p>
556
- <a href="https://wa.me/56912345678" class="bg-green-500 hover:bg-green-600 text-white font-medium px-4 py-2 rounded-lg transition duration-300 inline-flex items-center justify-center w-full">
557
- <i class="fab fa-whatsapp mr-2"></i> Abrir Chat
558
- </a>
559
  </div>
560
  </div>
561
  </div>
562
-
563
- <div class="border-t border-gray-700 pt-6 text-center text-gray-500 text-sm">
564
- <div class="flex flex-col md:flex-row justify-between items-center">
565
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
566
- <div class="mt-4 md:mt-0">
567
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Política de Privacidad</a>
568
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Términos de Servicio</a>
569
- </div>
570
  </div>
571
- <p class="mt-4">Desarrollado con <i class="fas fa-heart text-red-500"></i> en Santiago, Chile</p>
572
- </div>
573
- </div>
574
- </footer>
575
-
576
- <div class="footer-separator"></div>
577
-
578
- <!-- Footer 8: Split Color -->
579
- <footer class="bg-gray-900 text-white pt-12 pb-8">
580
- <div class="container mx-auto px-4">
581
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
582
- <div class="lg:col-span-2">
583
- <h3 class="text-xl font-semibold mb-4 flex items-center">
584
- <div class="text-2xl mr-2 font-bold bg-green-600 text-white px-3 py-1 rounded">
585
- ///PAPAS///
586
- </div>
587
- </h3>
588
- <p class="text-gray-400">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
589
-
590
- <div class="mt-6">
591
- <a href="https://wa.me/56912345678" class="bg-green-600 hover:bg-green-700 text-white font-medium px-6 py-3 rounded-lg transition duration-300 inline-flex items-center">
592
- <i class="fab fa-whatsapp mr-2 text-xl"></i> Contactar por WhatsApp
593
- </a>
594
- </div>
595
- </div>
596
-
597
- <div>
598
- <h3 class="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
599
- <ul class="space-y-2">
600
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Productos</a></li>
601
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Entrega</a></li>
602
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Reseñas</a></li>
603
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">Contacto</a></li>
604
- </ul>
605
  </div>
606
-
607
- <div>
608
- <h3 class="text-lg font-semibold mb-4">Contacto</h3>
609
- <ul class="space-y-2 text-gray-400">
610
- <li class="flex items-start">
611
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-400"></i>
612
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
613
- </li>
614
- <li class="flex items-center">
615
- <i class="fas fa-phone-alt mr-3 text-green-400"></i>
616
- <span>+56 9 1234 5678</span>
617
- </li>
618
- <li class="flex items-center">
619
- <i class="fas fa-envelope mr-3 text-green-400"></i>
620
- <span>ventas@papasfrescas.cl</span>
621
- </li>
622
- </ul>
623
- </div>
624
- </div>
625
-
626
- <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
627
- <div class="flex flex-col md:flex-row justify-between items-center">
628
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
629
- <div class="mt-4 md:mt-0">
630
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Política de Privacidad</a>
631
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Términos de Servicio</a>
632
  </div>
633
  </div>
634
- <p class="mt-4">Desarrollado con <i class="fas fa-heart text-red-500"></i> en Santiago, Chile</p>
635
  </div>
636
- </div>
637
- </footer>
638
-
639
- <div class="footer-separator"></div>
640
-
641
- <!-- Footer 9: Card Style -->
642
- <footer class="bg-gray-900 text-white pt-12 pb-8">
643
- <div class="container mx-auto px-4">
644
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
645
- <div class="bg-gray-800 p-6 rounded-lg">
646
- <h3 class="text-xl font-semibold mb-4 flex items-center">
647
- <div class="text-2xl mr-2 font-bold text-green-400">
648
- PAPAS
649
- </div>
650
- </h3>
651
- <p class="text-gray-400">Proveedores de papas frescas de la más alta calidad en Santiago. Directamente del campo a su negocio.</p>
652
- </div>
653
-
654
- <div class="bg-gray-800 p-6 rounded-lg">
655
- <h3 class="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
656
- <ul class="space-y-3">
657
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
658
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Productos
659
- </a></li>
660
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
661
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Entrega
662
- </a></li>
663
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
664
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Reseñas
665
- </a></li>
666
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300 flex items-center">
667
- <i class="fas fa-chevron-right text-xs mr-2 text-green-400"></i> Contacto
668
- </a></li>
669
- </ul>
670
  </div>
671
-
672
- <div class="bg-gray-800 p-6 rounded-lg">
673
- <h3 class="text-lg font-semibold mb-4">Contacto</h3>
674
- <ul class="space-y-3 text-gray-400">
675
- <li class="flex items-start">
676
- <i class="fas fa-map-marker-alt mt-1 mr-3 text-green-400"></i>
677
- <span>Av. Maipú 3301, 8470002 Pedro Aguirre Cerda</span>
678
- </li>
679
- <li class="flex items-center">
680
- <i class="fas fa-phone-alt mr-3 text-green-400"></i>
681
- <span>+56 9 1234 5678</span>
682
- </li>
683
- <li class="flex items-center">
684
- <i class="fas fa-envelope mr-3 text-green-400"></i>
685
- <span>ventas@papasfrescas.cl</span>
686
- </li>
687
- </ul>
688
  </div>
689
-
690
- <div class="bg-green-600 p-6 rounded-lg">
691
- <h3 class="text-lg font-semibold mb-4 text-white">WhatsApp</h3>
692
- <p class="text-green-100 mb-4">Contáctenos directamente para pedidos y consultas:</p>
693
- <a href="https://wa.me/56912345678" class="bg-white hover:bg-gray-100 text-green-600 font-bold px-6 py-3 rounded-lg transition duration-300 inline-flex items-center justify-center w-full">
694
- <i class="fab fa-whatsapp mr-2 text-xl"></i> Abrir Chat
695
- </a>
696
- </div>
697
- </div>
698
-
699
- <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
700
- <div class="flex flex-col md:flex-row justify-between items-center">
701
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
702
- <div class="mt-4 md:mt-0">
703
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Política de Privacidad</a>
704
- <a href="#" class="hover:text-green-400 transition duration-300 mx-2">Términos de Servicio</a>
705
  </div>
706
  </div>
707
  </div>
708
  </div>
709
- </footer>
710
-
711
- <div class="footer-separator"></div>
712
-
713
- <!-- Footer 10: Ultra Minimal -->
714
- <footer class="bg-white text-gray-800 pt-12 pb-8 border-t-4 border-green-500">
715
- <div class="container mx-auto px-4">
716
- <div class="flex flex-col md:flex-row justify-between items-start mb-8">
717
- <div class="mb-6 md:mb-0">
718
- <h3 class="text-xl font-bold mb-2">
719
- <span class="text-green-600">PAPAS</span>FRESCAS
720
- </h3>
721
- <p class="text-gray-600 max-w-md">Proveedores de papas frescas de la más alta calidad en Santiago.</p>
722
- </div>
723
-
724
- <div class="flex space-x-8">
725
- <div>
726
- <h4 class="font-semibold mb-3">Enlaces</h4>
727
- <ul class="space-y-2">
728
- <li><a href="#" class="text-gray-600 hover:text-green-600">Productos</a></li>
729
- <li><a href="#" class="text-gray-600 hover:text-green-600">Contacto</a></li>
730
- </ul>
 
 
 
731
  </div>
732
-
733
- <div>
734
- <h4 class="font-semibold mb-3">Contacto</h4>
735
- <ul class="space-y-2">
736
- <li class="text-gray-600">+56 9 1234 5678</li>
737
- <li><a href="mailto:ventas@papasfrescas.cl" class="text-gray-600 hover:text-green-600">ventas@papasfrescas.cl</a></li>
738
- </ul>
739
  </div>
740
  </div>
741
-
742
- <div>
743
- <h4 class="font-semibold mb-3">WhatsApp</h4>
744
- <a href="https://wa.me/56912345678" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded inline-flex items-center">
745
- <i class="fab fa-whatsapp mr-2"></i> Mensaje
746
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
747
  </div>
748
  </div>
749
-
750
- <div class="border-t border-gray-200 pt-6 text-center text-gray-500 text-sm">
751
- <div class="flex flex-col md:flex-row justify-between items-center">
752
- <p>&copy; 2023 Papas Frescas. Todos los derechos reservados.</p>
753
- <div class="mt-3 md:mt-0">
754
- <a href="#" class="text-gray-500 hover:text-green-600 mx-2">Privacidad</a>
755
- <a href="#" class="text-gray-500 hover:text-green-600 mx-2">Términos</a>
756
- </div>
757
- </div>
 
 
 
 
 
758
  </div>
759
  </div>
760
- </footer>
761
- </div>
762
- <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=officeasiste/f6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
763
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Inmobiliaria Casella & Casella - Villa Mercedes, San Luis</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
8
  <style>
9
+ :root {
10
+ --casella-dark: #3C2A21;
11
+ --casella-brown: #543A29;
12
+ --casella-gold: #AA8B56;
13
+ --casella-light: #D5CEA3;
14
+ --casella-cream: #E5E5CB;
15
  }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Poppins', sans-serif;
25
+ background-color: var(--casella-cream);
26
+ color: #333;
27
+ }
28
+
29
+ .container {
30
+ max-width: 1200px;
31
+ margin: 0 auto;
32
  padding: 0 1rem;
33
+ }
34
+
35
+ /* Navbar */
36
+ nav {
37
+ background-color: var(--casella-dark);
38
+ color: white;
39
+ position: sticky;
40
+ top: 0;
41
+ z-index: 50;
42
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
43
+ }
44
+
45
+ .navbar {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ padding: 1rem 2rem;
50
+ }
51
+
52
+ .logo {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 0.5rem;
56
+ }
57
+
58
+ .logo img {
59
+ width: 40px;
60
+ height: 40px;
61
+ background: var(--casella-gold);
62
+ border-radius: 50%;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ }
67
+
68
+ .logo span {
69
+ font-family: 'Playfair Display', serif;
70
+ font-weight: 700;
71
+ font-size: 1.2rem;
72
+ }
73
+
74
+ .logo .tagline {
75
  font-size: 0.75rem;
76
+ font-weight: 300;
77
+ }
78
+
79
+ .nav-links {
80
+ display: flex;
81
+ gap: 1.5rem;
82
+ list-style: none;
83
  }
84
+
85
+ .nav-links a {
86
+ color: white;
87
+ text-decoration: none;
88
+ font-weight: 500;
89
+ position: relative;
90
+ transition: color 0.3s ease;
91
+ }
92
+
93
+ .nav-links a:hover {
94
+ color: var(--casella-gold);
95
+ }
96
+
97
+ .nav-links a::after {
98
+ content: '';
99
  position: absolute;
100
+ bottom: -5px;
101
  left: 0;
102
+ width: 0;
103
+ height: 2px;
104
+ background: var(--casella-gold);
105
+ transition: width 0.3s ease;
106
+ }
107
+
108
+ .nav-links a:hover::after {
109
  width: 100%;
110
+ }
111
+
112
+ .mobile-menu-btn {
113
+ display: none;
114
+ flex-direction: column;
115
+ gap: 4px;
116
+ cursor: pointer;
117
+ }
118
+
119
+ .mobile-menu-btn div {
120
+ width: 24px;
121
+ height: 2px;
122
+ background: white;
123
+ }
124
+
125
+ /* Hero Section */
126
+ .hero {
127
+ background: linear-gradient(rgba(60, 42, 33, 0.85), rgba(60, 42, 33, 0.9)), url('https://placehold.co/1200x630/42') no-repeat center center;
128
+ background-size: cover;
129
+ color: white;
130
+ text-align: center;
131
+ padding: 4rem 1rem;
132
+ }
133
+
134
+ .hero h1 {
135
+ font-family: 'Playfair Display', serif;
136
+ font-size: 2.5rem;
137
+ margin-bottom: 1rem;
138
+ }
139
+
140
+ .hero p {
141
+ font-size: 1.1rem;
142
+ margin-bottom: 2rem;
143
+ max-width: 600px;
144
+ margin-left: auto;
145
+ margin-right: auto;
146
+ }
147
+
148
+ .hero-buttons {
149
+ display: flex;
150
+ justify-content: center;
151
+ gap: 1rem;
152
+ flex-wrap: wrap;
153
+ }
154
+
155
+ .btn-primary {
156
+ background: linear-gradient(135deg, var(--casella-gold) 0%, var(--casella-brown) 100%);
157
+ color: white;
158
+ padding: 0.75rem 1.5rem;
159
+ border: none;
160
+ border-radius: 50px;
161
+ font-weight: 600;
162
+ text-decoration: none;
163
+ transition: all 0.3s ease;
164
+ box-shadow: 0 4px 15px rgba(170, 139, 86, 0.3);
165
+ }
166
+
167
+ .btn-primary:hover {
168
+ transform: translateY(-3px);
169
+ box-shadow: 0 7px 20px rgba(170, 139, 86, 0.4);
170
+ }
171
+
172
+ .btn-secondary {
173
+ background: transparent;
174
+ color: white;
175
+ padding: 0.75rem 1.5rem;
176
+ border: 2px solid white;
177
+ border-radius: 50px;
178
+ font-weight: 600;
179
+ text-decoration: none;
180
+ transition: all 0.3s ease;
181
+ }
182
+
183
+ .btn-secondary:hover {
184
+ background: white;
185
+ color: var(--casella-dark);
186
+ }
187
+
188
+ /* Stats Section */
189
+ .stats {
190
+ background-color: var(--casella-gold);
191
+ padding: 2rem 1rem;
192
+ text-align: center;
193
+ }
194
+
195
+ .stats-grid {
196
+ display: grid;
197
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
198
+ gap: 1rem;
199
+ }
200
+
201
+ .stat-card {
202
+ background: white;
203
+ padding: 1.5rem;
204
+ border-radius: 12px;
205
+ box-shadow: 0 4px 15px rgba(0,0,0,0.05);
206
+ transition: transform 0.3s ease;
207
+ }
208
+
209
+ .stat-card:hover {
210
+ transform: translateY(-5px);
211
+ }
212
+
213
+ .stat-number {
214
+ font-size: 2rem;
215
+ font-weight: 700;
216
+ color: var(--casella-brown);
217
+ margin-bottom: 0.5rem;
218
+ }
219
+
220
+ .stat-label {
221
+ font-size: 0.9rem;
222
+ color: #666;
223
+ }
224
+
225
+ /* Properties Section */
226
+ .properties {
227
+ padding: 3rem 1rem;
228
+ background-color: white;
229
+ }
230
+
231
+ .section-title {
232
+ font-family: 'Playfair Display', serif;
233
+ font-size: 2rem;
234
+ text-align: center;
235
+ margin-bottom: 1rem;
236
+ position: relative;
237
+ }
238
+
239
+ .section-title::after {
240
+ content: '';
241
+ position: absolute;
242
+ bottom: -10px;
243
+ left: 50%;
244
+ transform: translateX(-50%);
245
+ width: 50px;
246
+ height: 3px;
247
+ background: var(--casella-gold);
248
+ }
249
+
250
+ .section-subtitle {
251
+ text-align: center;
252
+ color: #666;
253
+ margin-bottom: 2rem;
254
+ max-width: 600px;
255
+ margin-left: auto;
256
+ margin-right: auto;
257
+ }
258
+
259
+ .properties-grid {
260
+ display: grid;
261
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
262
+ gap: 1.5rem;
263
+ }
264
+
265
+ .property-card {
266
+ background: white;
267
+ border-radius: 12px;
268
  overflow: hidden;
269
+ box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1);
270
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
271
+ }
272
+
273
+ .property-card:hover {
274
+ transform: translateY(-10px);
275
+ box-shadow: 0 20px 40px -10px rgba(84, 58, 41, 0.25);
276
  }
277
+
278
+ .property-image {
279
  position: relative;
280
+ height: 200px;
281
+ overflow: hidden;
282
+ }
283
+
284
+ .property-image img {
285
+ width: 100%;
286
+ height: 100%;
287
+ object-fit: cover;
288
+ }
289
+
290
+ .property-badge {
291
+ position: absolute;
292
+ top: 10px;
293
+ right: 10px;
294
+ background: linear-gradient(135deg, var(--casella-gold) 0%, var(--casella-brown) 100%);
295
+ color: white;
296
+ padding: 0.25rem 0.5rem;
297
+ border-radius: 20px;
298
+ font-size: 0.75rem;
299
+ font-weight: 600;
300
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
301
+ }
302
+
303
+ .property-details {
304
+ padding: 1.5rem;
305
+ }
306
+
307
+ .property-title {
308
+ font-family: 'Playfair Display', serif;
309
+ font-size: 1.1rem;
310
+ font-weight: 700;
311
+ color: var(--casella-dark);
312
+ margin-bottom: 0.5rem;
313
+ }
314
+
315
+ .property-price {
316
+ font-size: 1.2rem;
317
+ font-weight: 700;
318
+ color: var(--casella-brown);
319
+ margin-bottom: 0.5rem;
320
+ }
321
+
322
+ .property-description {
323
+ color: #666;
324
+ font-size: 0.9rem;
325
+ margin-bottom: 1rem;
326
+ }
327
+
328
+ .property-location {
329
+ display: flex;
330
+ align-items: center;
331
+ color: #666;
332
+ font-size: 0.9rem;
333
+ margin-bottom: 1rem;
334
+ }
335
+
336
+ .property-location i {
337
+ margin-right: 0.5rem;
338
+ color: var(--casella-gold);
339
+ }
340
+
341
+ .property-button {
342
+ display: block;
343
+ width: 100%;
344
+ background: linear-gradient(135deg, var(--casella-gold) 0%, var(--casella-brown) 100%);
345
+ color: white;
346
+ text-align: center;
347
+ padding: 0.75rem;
348
+ border-radius: 8px;
349
+ text-decoration: none;
350
+ font-weight: 600;
351
+ transition: background 0.3s ease;
352
+ }
353
+
354
+ .property-button:hover {
355
+ background: linear-gradient(135deg, var(--casella-brown) 0%, var(--casella-gold) 100%);
356
+ }
357
+
358
+ .view-all-properties {
359
  display: block;
360
+ margin: 2rem auto 0;
361
+ padding: 0.75rem 1.5rem;
362
+ border: 2px solid var(--casella-brown);
363
+ border-radius: 50px;
364
+ text-decoration: none;
365
+ font-weight: 600;
366
+ color: var(--casella-brown);
367
+ transition: all 0.3s ease;
368
+ }
369
+
370
+ .view-all-properties:hover {
371
+ background: var(--casella-brown);
372
+ color: white;
373
+ transform: scale(1.02);
374
  }
375
+
376
+ /* Services Section */
377
+ .services {
378
+ padding: 3rem 1rem;
379
+ background-color: var(--casella-cream);
380
+ }
381
+
382
+ .services-grid {
383
+ display: grid;
384
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
385
+ gap: 1.5rem;
386
+ }
387
+
388
+ .service-card {
389
+ background: white;
390
+ padding: 2rem;
391
+ border-radius: 12px;
392
+ text-align: center;
393
+ box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1);
394
  transition: transform 0.3s ease;
395
  }
396
+
397
+ .service-card:hover {
398
+ transform: translateY(-5px);
399
+ }
400
+
401
+ .service-icon {
402
+ background: var(--casella-gold);
403
+ width: 60px;
404
+ height: 60px;
405
+ border-radius: 50%;
406
+ display: flex;
407
+ align-items: center;
408
+ justify-content: center;
409
+ margin: 0 auto 1rem;
410
+ color: var(--casella-dark);
411
+ font-size: 1.5rem;
412
+ }
413
+
414
+ .service-title {
415
+ font-family: 'Playfair Display', serif;
416
+ font-size: 1.2rem;
417
+ font-weight: 700;
418
+ color: var(--casella-dark);
419
+ margin-bottom: 1rem;
420
+ }
421
+
422
+ .service-description {
423
+ color: #666;
424
+ font-size: 0.9rem;
425
+ margin-bottom: 1rem;
426
+ }
427
+
428
+ .service-link {
429
+ color: var(--casella-brown);
430
+ text-decoration: none;
431
+ font-weight: 600;
432
+ display: inline-flex;
433
+ align-items: center;
434
+ gap: 0.5rem;
435
+ }
436
+
437
+ .service-link:hover {
438
+ color: var(--casella-gold);
439
+ }
440
+
441
+ /* Testimonials Section */
442
+ .testimonials {
443
+ padding: 3rem 1rem;
444
+ background-color: var(--casella-dark);
445
+ color: white;
446
+ }
447
+
448
+ .testimonials-grid {
449
+ display: grid;
450
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
451
+ gap: 1.5rem;
452
+ }
453
+
454
+ .testimonial-card {
455
+ background: rgba(255, 255, 255, 0.05);
456
+ padding: 1.5rem;
457
+ border-radius: 12px;
458
+ box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1);
459
+ }
460
+
461
+ .testimonial-stars {
462
+ color: var(--casella-gold);
463
+ font-size: 1.2rem;
464
+ margin-bottom: 1rem;
465
+ }
466
+
467
+ .testimonial-text {
468
+ font-style: italic;
469
+ margin-bottom: 1rem;
470
+ }
471
+
472
+ .testimonial-author {
473
+ display: flex;
474
+ align-items: center;
475
+ gap: 1rem;
476
+ }
477
+
478
+ .author-avatar {
479
+ width: 50px;
480
+ height: 50px;
481
+ background: var(--casella-gold);
482
+ border-radius: 50%;
483
+ display: flex;
484
+ align-items: center;
485
+ justify-content: center;
486
+ font-weight: 700;
487
+ color: var(--casella-dark);
488
+ font-size: 1.2rem;
489
+ }
490
+
491
+ .author-info {
492
+ flex: 1;
493
+ }
494
+
495
+ .author-name {
496
+ font-weight: 700;
497
+ font-size: 0.9rem;
498
+ }
499
+
500
+ .author-role {
501
+ font-size: 0.75rem;
502
+ color: var(--casella-gold);
503
+ }
504
+
505
+ /* Contact Section */
506
+ .contact {
507
+ padding: 3rem 1rem;
508
+ background-color: white;
509
+ }
510
+
511
+ .contact-container {
512
+ max-width: 800px;
513
+ margin: 0 auto;
514
+ }
515
+
516
+ .contact-form {
517
+ background: var(--casella-cream);
518
+ padding: 2rem;
519
+ border-radius: 12px;
520
+ box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1);
521
+ display: grid;
522
+ grid-template-columns: 1fr;
523
+ gap: 1.5rem;
524
+ }
525
+
526
+ @media (min-width: 768px) {
527
+ .contact-form {
528
+ grid-template-columns: 1fr 2fr;
529
+ }
530
+ }
531
+
532
+ .contact-info {
533
+ background: var(--casella-brown);
534
+ padding: 2rem;
535
+ border-radius: 12px;
536
+ color: white;
537
+ }
538
+
539
+ .contact-info h3 {
540
+ font-family: 'Playfair Display', serif;
541
+ font-size: 1.2rem;
542
+ margin-bottom: 1rem;
543
+ }
544
+
545
+ .contact-info-item {
546
+ display: flex;
547
+ align-items: flex-start;
548
+ gap: 0.5rem;
549
+ margin-bottom: 1rem;
550
+ }
551
+
552
+ .contact-info-item i {
553
+ color: var(--casella-gold);
554
+ margin-top: 0.25rem;
555
+ }
556
+
557
+ .contact-form-fields {
558
+ display: grid;
559
+ gap: 1rem;
560
+ }
561
+
562
+ .form-group {
563
+ display: grid;
564
+ gap: 0.5rem;
565
+ }
566
+
567
+ .form-group label {
568
+ font-weight: 600;
569
+ }
570
+
571
+ .form-input {
572
+ width: 100%;
573
+ padding: 0.75rem;
574
+ border: 1px solid #ddd;
575
+ border-radius: 8px;
576
+ font-size: 1rem;
577
+ transition: border-color 0.3s ease;
578
+ }
579
+
580
+ .form-input:focus {
581
+ outline: none;
582
+ border-color: var(--casella-gold);
583
+ box-shadow: 0 0 0 3px rgba(170, 139, 86, 0.2);
584
+ }
585
+
586
+ .form-textarea {
587
+ min-height: 100px;
588
+ resize: vertical;
589
+ }
590
+
591
+ .submit-button {
592
+ width: 100%;
593
+ background: linear-gradient(135deg, var(--casella-gold) 0%, var(--casella-brown) 100%);
594
+ color: white;
595
+ padding: 0.75rem;
596
+ border: none;
597
+ border-radius: 8px;
598
+ font-weight: 600;
599
+ cursor: pointer;
600
+ transition: background 0.3s ease;
601
+ }
602
+
603
+ .submit-button:hover {
604
+ background: linear-gradient(135deg, var(--casella-brown) 0%, var(--casella-gold) 100%);
605
+ }
606
+
607
+ /* Footer */
608
+ footer {
609
+ background: var(--casella-dark);
610
+ color: white;
611
+ padding: 2rem 1rem;
612
+ text-align: center;
613
+ }
614
+
615
+ .footer-content {
616
+ max-width: 1200px;
617
+ margin: 0 auto;
618
+ display: grid;
619
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
620
+ gap: 2rem;
621
+ text-align: left;
622
+ }
623
+
624
+ .footer-column h4 {
625
+ font-family: 'Playfair Display', serif;
626
+ font-size: 1rem;
627
+ margin-bottom: 1rem;
628
+ color: var(--casella-gold);
629
+ }
630
+
631
+ .footer-column ul {
632
+ list-style: none;
633
+ }
634
+
635
+ .footer-column li {
636
+ margin-bottom: 0.5rem;
637
+ }
638
+
639
+ .footer-column a {
640
+ color: #ccc;
641
+ text-decoration: none;
642
+ transition: color 0.3s ease;
643
  }
644
+
645
+ .footer-column a:hover {
646
+ color: var(--casella-gold);
 
 
647
  }
648
+
649
+ .social-icons {
650
+ display: flex;
651
+ gap: 1rem;
652
+ margin-top: 1rem;
653
+ }
654
+
655
+ .social-icon {
656
+ width: 32px;
657
+ height: 32px;
658
+ background: var(--casella-gold);
659
+ border-radius: 50%;
660
+ display: flex;
661
+ align-items: center;
662
+ justify-content: center;
663
+ color: var(--casella-dark);
664
+ text-decoration: none;
665
+ transition: background 0.3s ease;
666
+ }
667
+
668
+ .social-icon:hover {
669
+ background: var(--casella-brown);
670
+ }
671
+
672
+ .copyright {
673
+ margin-top: 2rem;
674
+ padding-top: 1rem;
675
+ border-top: 1px solid rgba(255,255,255,0.1);
676
+ font-size: 0.8rem;
677
+ color: #999;
678
+ }
679
+
680
+ /* Mobile Menu */
681
+ .mobile-menu {
682
+ display: none;
683
+ background: rgba(60, 42, 33, 0.95);
684
+ padding: 1rem;
685
+ border-top: 1px solid rgba(255,255,255,0.1);
686
+ }
687
+
688
+ .mobile-menu a {
689
+ display: block;
690
+ color: white;
691
+ padding: 0.5rem 1rem;
692
+ text-decoration: none;
693
+ border-radius: 8px;
694
+ transition: background 0.3s ease;
695
+ }
696
+
697
+ .mobile-menu a:hover {
698
+ background: rgba(255,255,255,0.1);
699
+ }
700
+
701
+ /* Responsive Design */
702
+ @media (max-width: 768px) {
703
+ .navbar {
704
+ padding: 1rem;
705
+ }
706
+
707
+ .logo span {
708
+ font-size: 1rem;
709
+ }
710
+
711
+ .nav-links {
712
+ display: none;
713
+ }
714
+
715
+ .mobile-menu-btn {
716
+ display: flex;
717
+ }
718
+
719
+ .hero h1 {
720
+ font-size: 2rem;
721
+ }
722
+
723
+ .hero p {
724
+ font-size: 1rem;
725
+ }
726
+
727
+ .section-title {
728
+ font-size: 1.5rem;
729
+ }
730
+
731
+ .properties-grid,
732
+ .services-grid,
733
+ .testimonials-grid {
734
+ grid-template-columns: 1fr;
735
+ }
736
+
737
+ .contact-form {
738
+ grid-template-columns: 1fr;
739
+ }
740
+
741
+ .contact-info {
742
+ padding: 1.5rem;
743
+ }
744
+
745
+ .footer-content {
746
+ grid-template-columns: 1fr;
747
+ }
748
+ }
749
+
750
+ /* Icon Styles for the navbar and cards */
751
+ .icon-home {
752
+ width: 20px;
753
+ height: 20px;
754
+ fill: currentColor;
755
+ }
756
+
757
+ .icon-map-pin {
758
+ width: 16px;
759
+ height: 16px;
760
+ fill: currentColor;
761
+ }
762
+
763
+ .icon-eye {
764
+ width: 16px;
765
+ height: 16px;
766
+ fill: currentColor;
767
+ }
768
+
769
+ .icon-key {
770
+ width: 20px;
771
+ height: 20px;
772
+ fill: currentColor;
773
+ }
774
+
775
+ .icon-dollar-sign {
776
+ width: 20px;
777
+ height: 20px;
778
+ fill: currentColor;
779
+ }
780
+
781
+ .icon-shield {
782
+ width: 20px;
783
+ height: 20px;
784
+ fill: currentColor;
785
+ }
786
+
787
+ .icon-star {
788
+ width: 16px;
789
+ height: 16px;
790
+ fill: currentColor;
791
+ }
792
+
793
+ .icon-user {
794
+ width: 20px;
795
+ height: 20px;
796
+ fill: currentColor;
797
+ }
798
+
799
+ .icon-mail {
800
+ width: 20px;
801
+ height: 20px;
802
+ fill: currentColor;
803
+ }
804
+
805
+ .icon-phone {
806
+ width: 20px;
807
+ height: 20px;
808
+ fill: currentColor;
809
+ }
810
+
811
+ .icon-location {
812
+ width: 20px;
813
+ height: 20px;
814
+ fill: currentColor;
815
+ }
816
+
817
+ .icon-facebook {
818
+ width: 20px;
819
+ height: 20px;
820
+ fill: currentColor;
821
+ }
822
+
823
+ .icon-instagram {
824
+ width: 20px;
825
+ height: 20px;
826
+ fill: currentColor;
827
+ }
828
+
829
+ .icon-twitter {
830
+ width: 20px;
831
+ height: 20px;
832
+ fill: currentColor;
833
  }
834
  </style>
835
  </head>
836
+ <body>
837
+
838
+ <!-- Navbar -->
839
+ <nav>
840
+ <div class="container navbar">
841
+ <div class="logo">
842
+ <div><svg class="icon-home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 00-1-1h-2a1 1 0 00-1 1v4a1 1 0 001 1m-6 0h6"></path></svg></div>
843
+ <div>
844
+ <span>CASELLA & CASELLA</span>
845
+ <div class="tagline">INMOBILIARIA</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
846
  </div>
847
  </div>
848
+ <ul class="nav-links">
849
+ <li><a href="#inicio">Inicio</a></li>
850
+ <li><a href="#propiedades">Propiedades</a></li>
851
+ <li><a href="#servicios">Servicios</a></li>
852
+ <li><a href="#contacto">Contacto</a></li>
853
+ </ul>
854
+ <div class="mobile-menu-btn">
855
+ <div></div>
856
+ <div></div>
857
+ <div></div>
858
  </div>
859
+ </div>
860
+ <div class="mobile-menu">
861
+ <a href="#inicio">Inicio</a>
862
+ <a href="#propiedades">Propiedades</a>
863
+ <a href="#servicios">Servicios</a>
864
+ <a href="#contacto">Contacto</a>
865
+ </div>
866
+ </nav>
867
+
868
+ <!-- Hero Section -->
869
+ <section id="inicio" class="hero">
870
+ <h1>Encuentra tu <span style="color: var(--casella-gold)">hogar ideal</span> con nosotros</h1>
871
+ <p>Inmobiliaria líder en Villa Mercedes y toda la Provincia de San Luis. Más de 20 años de experiencia en el mercado inmobiliario.</p>
872
+ <div class="hero-buttons">
873
+ <a href="#propiedades" class="btn-primary">Ver Propiedades</a>
874
+ <a href="#contacto" class="btn-secondary">Contactar</a>
875
+ </div>
876
+ </section>
877
+
878
+ <!-- Stats Section -->
879
+ <section class="stats">
880
+ <div class="container stats-grid">
881
+ <div class="stat-card">
882
+ <div class="stat-number">20+</div>
883
+ <div class="stat-label">Años de Experiencia</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
884
  </div>
885
+ <div class="stat-card">
886
+ <div class="stat-number">500+</div>
887
+ <div class="stat-label">Transacciones</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
888
  </div>
889
+ <div class="stat-card">
890
+ <div class="stat-number">150+</div>
891
+ <div class="stat-label">Clientes Satisfechos</div>
892
+ </div>
893
+ <div class="stat-card">
894
+ <div class="stat-number">24/7</div>
895
+ <div class="stat-label">Atención Personalizada</div>
896
+ </div>
897
+ </div>
898
+ </section>
899
+
900
+ <!-- Properties Section -->
901
+ <section id="propiedades" class="properties">
902
+ <div class="container">
903
+ <h2 class="section-title">Propiedades Destacadas</h2>
904
+ <p class="section-subtitle">Descubre nuestras propiedades más exclusivas seleccionadas especialmente para ti.</p>
905
+ <div class="properties-grid">
906
+ <!-- Property 1 -->
907
+ <div class="property-card">
908
+ <div class="property-image">
909
+ <img src="https://placehold.co/640x360/f2f2e8/543A29?text=Casa+en+Barrio+Jardín" alt="Casa en alquiler">
910
+ <div class="property-badge">ALQUILER</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
911
  </div>
912
+ <div class="property-details">
913
+ <h3 class="property-title">Casa en Barrio Jardín</h3>
914
+ <div class="property-price">$45.000</div>
915
+ <p class="property-description">3 dormitorios, 2 baños, 120m² cubiertos.</p>
916
+ <div class="property-location">
917
+ <svg class="icon-map-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"/></svg>
918
+ <span>Barrio Jardín, Villa Mercedes</span>
 
919
  </div>
920
+ <a href="#" class="property-button">
921
+ <svg class="icon-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/></svg>
922
+ Ver detalles
923
+ </a>
924
  </div>
925
  </div>
926
+ <!-- Property 2 -->
927
+ <div class="property-card">
928
+ <div class="property-image">
929
+ <img src="https://placehold.co/640x360/f2f2e8/543A29?text=Departamento+Centro" alt="Departamento en venta">
930
+ <div class="property-badge">VENTA</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
931
  </div>
932
+ <div class="property-details">
933
+ <h3 class="property-title">Departamento Centro</h3>
934
+ <div class="property-price">$35.000</div>
935
+ <p class="property-description">2 dormitorios, 1 baño, 80m², excelente ubicación.</p>
936
+ <div class="property-location">
937
+ <svg class="icon-map-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"/></svg>
938
+ <span>Centro, Villa Mercedes</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
939
  </div>
940
+ <a href="#" class="property-button">
941
+ <svg class="icon-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/></svg>
942
+ Ver detalles
943
+ </a>
944
  </div>
945
  </div>
946
+ <!-- Property 3 -->
947
+ <div class="property-card">
948
+ <div class="property-image">
949
+ <img src="https://placehold.co/640x360/f2f2e8/543A29?text=Lote+en+Juana+Koslay" alt="Lote en venta">
950
+ <div class="property-badge">VENTA</div>
951
+ </div>
952
+ <div class="property-details">
953
+ <h3 class="property-title">Lote en Juana Koslay</h3>
954
+ <div class="property-price">Consultar</div>
955
+ <p class="property-description">Amplio lote de 800m² listo para construir.</p>
956
+ <div class="property-location">
957
+ <svg class="icon-map-pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"/></svg>
958
+ <span>Juana Koslay, San Luis Capital</span>
959
  </div>
960
+ <a href="#" class="property-button">
961
+ <svg class="icon-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/></svg>
962
+ Ver detalles
963
+ </a>
964
  </div>
 
965
  </div>
966
  </div>
967
+ <div class="text-center">
968
+ <a href="#" class="view-all-properties">Ver todas las propiedades</a>
 
 
 
 
 
 
 
 
 
969
  </div>
970
+ </div>
971
+ </section>
972
+
973
+ <!-- Services Section -->
974
+ <section id="servicios" class="services">
975
+ <div class="container">
976
+ <h2 class="section-title">Nuestros Servicios</h2>
977
+ <p class="section-subtitle">Ofrecemos soluciones integrales para todas tus necesidades inmobiliarias.</p>
978
+ <div class="services-grid">
979
+ <!-- Service 1 -->
980
+ <div class="service-card">
981
+ <div class="service-icon">
982
+ <svg class="icon-key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
983
  </div>
984
+ <h3 class="service-title">Alquiler y Venta</h3>
985
+ <p class="service-description">Gestión integral de propiedades para alquiler o venta con la mejor rentabilidad.</p>
986
+ <a href="#" class="service-link">Saber más →</a>
987
+ </div>
988
+ <!-- Service 2 -->
989
+ <div class="service-card">
990
+ <div class="service-icon">
991
+ <svg class="icon-dollar-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
 
 
 
 
 
 
 
 
 
 
 
992
  </div>
993
+ <h3 class="service-title">Tasaciones Oficiales</h3>
994
+ <p class="service-description">Tasaciones a cargo de Martillero Público M.P. 1062 (Casella Horacio).</p>
995
+ <a href="#" class="service-link">Saber más →</a>
996
  </div>
997
+ <!-- Service 3 -->
998
+ <div class="service-card">
999
+ <div class="service-icon">
1000
+ <svg class="icon-shield" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
 
 
 
 
1001
  </div>
1002
+ <h3 class="service-title">Asesoría Legal</h3>
1003
+ <p class="service-description">Asesoramiento legal y notarial para asegurar transacciones transparentes.</p>
1004
+ <a href="#" class="service-link">Saber más →</a>
1005
  </div>
1006
  </div>
1007
+ </div>
1008
+ </section>
1009
+
1010
+ <!-- Testimonials Section -->
1011
+ <section class="testimonials">
1012
+ <div class="container">
1013
+ <h2 class="section-title">Lo que dicen nuestros clientes</h2>
1014
+ <div class="testimonials-grid">
1015
+ <!-- Testimonial 1 -->
1016
+ <div class="testimonial-card">
1017
+ <div class="testimonial-stars">
1018
+ ★★★★★
 
 
 
 
 
 
 
 
 
 
 
 
 
1019
  </div>
1020
+ <div class="testimonial-text">
1021
+ "Excelente servicio, encontraron exactamente lo que necesitaba para mi familia. Muy profesionales y atentos en todo momento."
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1022
  </div>
1023
+ <div class="testimonial-author">
1024
+ <div class="author-avatar">M</div>
1025
+ <div class="author-info">
1026
+ <div class="author-name">María González</div>
1027
+ <div class="author-role">Cliente satisfecho</div>
 
 
 
1028
  </div>
1029
  </div>
1030
  </div>
1031
+ <!-- Testimonial 2 -->
1032
+ <div class="testimonial-card">
1033
+ <div class="testimonial-stars">
1034
+ ★★★★★
 
 
 
 
1035
  </div>
1036
+ <div class="testimonial-text">
1037
+ "La tasación de mi propiedad fue rápida y profesional. Recomendaría sus servicios sin duda alguna."
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1038
  </div>
1039
+ <div class="testimonial-author">
1040
+ <div class="author-avatar">C</div>
1041
+ <div class="author-info">
1042
+ <div class="author-name">Carlos Rodríguez</div>
1043
+ <div class="author-role">Cliente satisfecho</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1044
  </div>
1045
  </div>
 
1046
  </div>
1047
+ <!-- Testimonial 3 -->
1048
+ <div class="testimonial-card">
1049
+ <div class="testimonial-stars">
1050
+ ★★★★★
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1051
  </div>
1052
+ <div class="testimonial-text">
1053
+ "Profesionales comprometidos con su trabajo. Me ayudaron a vender mi departamento en menos de una semana."
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1054
  </div>
1055
+ <div class="testimonial-author">
1056
+ <div class="author-avatar">A</div>
1057
+ <div class="author-info">
1058
+ <div class="author-name">Ana Martínez</div>
1059
+ <div class="author-role">Cliente satisfecha</div>
 
 
 
 
 
 
 
 
 
 
 
1060
  </div>
1061
  </div>
1062
  </div>
1063
  </div>
1064
+ </div>
1065
+ </section>
1066
+
1067
+ <!-- Contact Section -->
1068
+ <section id="contacto" class="contact">
1069
+ <div class="container">
1070
+ <h2 class="section-title">Contáctanos</h2>
1071
+ <p class="section-subtitle">Escribenos para comenzar la búsqueda de tu propiedad ideal o solicitar una tasación.</p>
1072
+ <div class="contact-container">
1073
+ <div class="contact-form">
1074
+ <div class="contact-info">
1075
+ <h3>Información de Contacto</h3>
1076
+ <div class="contact-info-item">
1077
+ <svg class="icon-phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 00-1-1h-2a1 1 0 00-1 1v4a1 1 0 001 1m-6 0h6"></path></svg>
1078
+ <div>
1079
+ <strong>Teléfono</strong><br>
1080
+ 2657-609278
1081
+ </div>
1082
+ </div>
1083
+ <div class="contact-info-item">
1084
+ <svg class="icon-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
1085
+ <div>
1086
+ <strong>Email</strong><br>
1087
+ horaciocasella@yahoo.com.ar
1088
+ </div>
1089
  </div>
1090
+ <div class="contact-info-item">
1091
+ <svg class="icon-location" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="12" r="3"/></svg>
1092
+ <div>
1093
+ <strong>Ubicación</strong><br>
1094
+ Betbeder 46 - Villa Mercedes San Luis
1095
+ </div>
 
1096
  </div>
1097
  </div>
1098
+ <div class="contact-form-fields">
1099
+ <form>
1100
+ <div class="form-group">
1101
+ <label for="nombre">Nombre</label>
1102
+ <input type="text" id="nombre" class="form-input" required>
1103
+ </div>
1104
+ <div class="form-group">
1105
+ <label for="email">Email</label>
1106
+ <input type="email" id="email" class="form-input" required>
1107
+ </div>
1108
+ <div class="form-group">
1109
+ <label for="telefono">Teléfono</label>
1110
+ <input type="tel" id="telefono" class="form-input" required>
1111
+ </div>
1112
+ <div class="form-group">
1113
+ <label for="mensaje">Mensaje</label>
1114
+ <textarea id="mensaje" class="form-input form-textarea" required></textarea>
1115
+ </div>
1116
+ <button type="submit" class="submit-button">Enviar Mensaje</button>
1117
+ </form>
1118
  </div>
1119
  </div>
1120
+ </div>
1121
+ </div>
1122
+ </section>
1123
+
1124
+ <!-- Footer -->
1125
+ <footer>
1126
+ <div class="container footer-content">
1127
+ <div class="footer-column">
1128
+ <h4>CASELLA & CASELLA</h4>
1129
+ <p>Martillero Público M.P. 1062. Confianza y transparencia en bienes raíces de San Luis.</p>
1130
+ <div class="social-icons">
1131
+ <a href="#" class="social-icon"><svg class="icon-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg></a>
1132
+ <a href="#" class="social-icon"><svg class="icon-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>
1133
+ <a href="#" class="social-icon"><svg class="icon-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
1134
  </div>
1135
  </div>
1136
+ <div class="footer-column">
1137
+ <h4>Enlaces</h4>
1138
+ <ul>
1139
+ <li><a href="#inicio">Inicio</a></li>
1140
+ <li><a href="#propiedades">Propiedades</a></li>
1141
+ <li><a href="#servicios">Servicios</a></li>
1142
+ <li><a href="#contacto">Contacto</a></li>
1143
+ </ul>
1144
+ </div>
1145
+ <div class="footer-column">
1146
+ <h4>Servicios</h4>
1147
+ <ul>
1148
+ <li><a href="#">Venta de Propiedades</a></li>
1149
+ <li><a href="#">Alquiler de Propiedades</a></li>
1150
+ <li><a href="#">Tasaciones Oficiales</a></li>
1151
+ <li><a href="#">Asesoría Legal</a></li>
1152
+ </ul>
1153
+ </div>
1154
+ <div class="footer-column">
1155
+ <h4>Horario de Atención</h4>
1156
+ <ul>
1157
+ <li>Lunes - Viernes <span style="float: right;">9:00 - 18:00</span></li>
1158
+ <li>Sábado <span style="float: right;">10:00 - 14:00</span></li>
1159
+ <li>Domingo <span style="float: right;">Cerrado</span></li>
1160
+ </ul>
1161
+ </div>
1162
+ </div>
1163
+ <div class="copyright">
1164
+ &copy; 2024 Inmobiliaria Casella & Casella. Todos los derechos reservados.
1165
+ </div>
1166
+ </footer>
1167
+
1168
+ <!-- JavaScript for Mobile Menu -->
1169
+ <script>
1170
+ // Toggle mobile menu
1171
+ document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
1172
+ const mobileMenu = document.querySelector('.mobile-menu');
1173
+ if (mobileMenu.style.display === 'block') {
1174
+ mobileMenu.style.display = 'none';
1175
+ } else {
1176
+ mobileMenu.style.display = 'block';
1177
+ }
1178
+ });
1179
+
1180
+ // Close mobile menu when clicking on a link
1181
+ document.querySelectorAll('.mobile-menu a').forEach(link => {
1182
+ link.addEventListener('click', () => {
1183
+ document.querySelector('.mobile-menu').style.display = 'none';
1184
+ });
1185
+ });
1186
+
1187
+ // Smooth scrolling for anchor links
1188
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1189
+ anchor.addEventListener('click', function(e) {
1190
+ e.preventDefault();
1191
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1192
+ behavior: 'smooth'
1193
+ });
1194
+ });
1195
+ });
1196
+ </script>
1197
+
1198
+ </body>
1199
  </html>