Hugging Face's logo

Spaces:
Cruzito99
/
mazatech
Running

App Files Community
Cruzito99 commited on
Commit
9d9aedc
路
verified 路
1 Parent(s): 7ac2279

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +466 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mazatech
3
- emoji: 馃搲
4
- colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mazatech
3
+ emoji: 馃惓
4
+ colorFrom: pink
5
+ colorTo: pink
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,466 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MazaTech - Servicios Profesionales de Mantenimiento de PCs</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
12
+ }
13
+ .service-card:hover {
14
+ transform: translateY(-10px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .floating {
18
+ animation: floating 3s ease-in-out infinite;
19
+ }
20
+ @keyframes floating {
21
+ 0% { transform: translateY(0px); }
22
+ 50% { transform: translateY(-15px); }
23
+ 100% { transform: translateY(0px); }
24
+ }
25
+ .glow {
26
+ text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="font-sans bg-gray-50">
31
+ <!-- Header/Navbar -->
32
+ <header class="bg-white shadow-md sticky top-0 z-50">
33
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
34
+ <div class="flex items-center">
35
+ <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mr-3">
36
+ <i class="fas fa-laptop-code text-white text-xl"></i>
37
+ </div>
38
+ <h1 class="text-2xl font-bold text-blue-600">Maza<span class="text-blue-800">Tech</span></h1>
39
+ </div>
40
+ <nav class="hidden md:flex space-x-8">
41
+ <a href="#servicios" class="text-gray-700 hover:text-blue-600 font-medium transition">Servicios</a>
42
+ <a href="#nosotros" class="text-gray-700 hover:text-blue-600 font-medium transition">Nosotros</a>
43
+ <a href="#testimonios" class="text-gray-700 hover:text-blue-600 font-medium transition">Clientes</a>
44
+ <a href="#contacto" class="text-gray-700 hover:text-blue-600 font-medium transition">Contacto</a>
45
+ </nav>
46
+ <button class="md:hidden text-gray-700">
47
+ <i class="fas fa-bars text-2xl"></i>
48
+ </button>
49
+ </div>
50
+ </header>
51
+
52
+ <!-- Hero Section -->
53
+ <section class="hero-gradient text-white py-20 md:py-32">
54
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
55
+ <div class="md:w-1/2 mb-12 md:mb-0">
56
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 glow">Soluciones Tecnol贸gicas a tu Alcance</h2>
57
+ <p class="text-xl mb-8 text-blue-100">Expertos en mantenimiento y reparaci贸n de computadoras. Tu equipo en las mejores manos.</p>
58
+ <div class="flex flex-col sm:flex-row gap-4">
59
+ <a href="#contacto" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg hover:bg-blue-50 transition duration-300 text-center">
60
+ <i class="fas fa-phone-alt mr-2"></i> Cont谩ctanos
61
+ </a>
62
+ <a href="#servicios" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-blue-600 transition duration-300 text-center">
63
+ <i class="fas fa-tools mr-2"></i> Nuestros Servicios
64
+ </a>
65
+ </div>
66
+ </div>
67
+ <div class="md:w-1/2 flex justify-center">
68
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80"
69
+ alt="T茅cnico reparando computadora"
70
+ class="rounded-xl shadow-2xl floating max-w-md w-full">
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <!-- Servicios Section -->
76
+ <section id="servicios" class="py-16 bg-white">
77
+ <div class="container mx-auto px-4">
78
+ <div class="text-center mb-16">
79
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nuestros <span class="text-blue-600">Servicios</span></h2>
80
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Ofrecemos soluciones integrales para mantener tu equipo funcionando al m谩ximo rendimiento.</p>
81
+ </div>
82
+
83
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
84
+ <!-- Servicio 1 -->
85
+ <div class="service-card bg-white rounded-xl shadow-lg p-6 transition duration-300 border-t-4 border-blue-500">
86
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
87
+ <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
88
+ </div>
89
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Mantenimiento Preventivo</h3>
90
+ <p class="text-gray-600 mb-4">Limpieza f铆sica, optimizaci贸n de sistema y verificaci贸n de componentes para prevenir fallos.</p>
91
+ <ul class="space-y-2 text-gray-600">
92
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Limpieza de hardware</li>
93
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Actualizaci贸n de drivers</li>
94
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Optimizaci贸n de sistema</li>
95
+ </ul>
96
+ </div>
97
+
98
+ <!-- Servicio 2 -->
99
+ <div class="service-card bg-white rounded-xl shadow-lg p-6 transition duration-300 border-t-4 border-blue-500">
100
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
101
+ <i class="fas fa-medal text-blue-600 text-2xl"></i>
102
+ </div>
103
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Reparaci贸n Correctiva</h3>
104
+ <p class="text-gray-600 mb-4">Diagn贸stico y soluci贸n de problemas hardware/software para recuperar tu equipo.</p>
105
+ <ul class="space-y-2 text-gray-600">
106
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Cambio de componentes</li>
107
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Eliminaci贸n de virus</li>
108
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Recuperaci贸n de datos</li>
109
+ </ul>
110
+ </div>
111
+
112
+ <!-- Servicio 3 -->
113
+ <div class="service-card bg-white rounded-xl shadow-lg p-6 transition duration-300 border-t-4 border-blue-500">
114
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
115
+ <i class="fas fa-rocket text-blue-600 text-2xl"></i>
116
+ </div>
117
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Actualizaci贸n de Hardware</h3>
118
+ <p class="text-gray-600 mb-4">Mejora el rendimiento de tu equipo con componentes modernos y de calidad.</p>
119
+ <ul class="space-y-2 text-gray-600">
120
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Ampliaci贸n de RAM</li>
121
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Discos SSD</li>
122
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Tarjetas gr谩ficas</li>
123
+ </ul>
124
+ </div>
125
+
126
+ <!-- Servicio 4 -->
127
+ <div class="service-card bg-white rounded-xl shadow-lg p-6 transition duration-300 border-t-4 border-blue-500">
128
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
129
+ <i class="fas fa-network-wired text-blue-600 text-2xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Redes y Conectividad</h3>
132
+ <p class="text-gray-600 mb-4">Soluciones para problemas de red, conexi贸n a internet y configuraci贸n de redes.</p>
133
+ <ul class="space-y-2 text-gray-600">
134
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Configuraci贸n de routers</li>
135
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Soluci贸n de problemas WiFi</li>
136
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Redes cableadas</li>
137
+ </ul>
138
+ </div>
139
+
140
+ <!-- Servicio 5 -->
141
+ <div class="service-card bg-white rounded-xl shadow-lg p-6 transition duration-300 border-t-4 border-blue-500">
142
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
143
+ <i class="fas fa-database text-blue-600 text-2xl"></i>
144
+ </div>
145
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Respaldo de Informaci贸n</h3>
146
+ <p class="text-gray-600 mb-4">Protege tus datos importantes con nuestros servicios de copia de seguridad.</p>
147
+ <ul class="space-y-2 text-gray-600">
148
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Backup en la nube</li>
149
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Discos externos</li>
150
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Recuperaci贸n de archivos</li>
151
+ </ul>
152
+ </div>
153
+
154
+ <!-- Servicio 6 -->
155
+ <div class="service-card bg-white rounded-xl shadow-lg p-6 transition duration-300 border-t-4 border-blue-500">
156
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
157
+ <i class="fas fa-home text-blue-600 text-2xl"></i>
158
+ </div>
159
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Servicio a Domicilio</h3>
160
+ <p class="text-gray-600 mb-4">Atendemos en tu hogar u oficina para mayor comodidad y rapidez.</p>
161
+ <ul class="space-y-2 text-gray-600">
162
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Diagn贸stico in situ</li>
163
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Reparaci贸n inmediata</li>
164
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Asesor铆a personalizada</li>
165
+ </ul>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Nosotros Section -->
172
+ <section id="nosotros" class="py-16 bg-gray-50">
173
+ <div class="container mx-auto px-4">
174
+ <div class="flex flex-col lg:flex-row items-center">
175
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
176
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
177
+ alt="Equipo MazaTech"
178
+ class="rounded-xl shadow-lg w-full">
179
+ </div>
180
+ <div class="lg:w-1/2">
181
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Sobre <span class="text-blue-600">MazaTech</span></h2>
182
+ <p class="text-gray-600 mb-6 text-lg">Somos un equipo de profesionales apasionados por la tecnolog铆a, con m谩s de 10 a帽os de experiencia en el mantenimiento y reparaci贸n de equipos inform谩ticos.</p>
183
+
184
+ <div class="space-y-6">
185
+ <div class="flex">
186
+ <div class="mr-4">
187
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
188
+ <i class="fas fa-bullseye text-blue-600 text-xl"></i>
189
+ </div>
190
+ </div>
191
+ <div>
192
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Nuestra Misi贸n</h3>
193
+ <p class="text-gray-600">Proporcionar soluciones tecnol贸gicas confiables que optimicen el rendimiento de tus equipos y prolonguen su vida 煤til.</p>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="flex">
198
+ <div class="mr-4">
199
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
200
+ <i class="fas fa-eye text-blue-600 text-xl"></i>
201
+ </div>
202
+ </div>
203
+ <div>
204
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Nuestra Visi贸n</h3>
205
+ <p class="text-gray-600">Ser reconocidos como l铆deres en servicios t茅cnicos inform谩ticos, destacando por nuestra calidad, honestidad y atenci贸n personalizada.</p>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="flex">
210
+ <div class="mr-4">
211
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
212
+ <i class="fas fa-gem text-blue-600 text-xl"></i>
213
+ </div>
214
+ </div>
215
+ <div>
216
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Nuestros Valores</h3>
217
+ <p class="text-gray-600">Honestidad, profesionalismo, responsabilidad y compromiso con nuestros clientes. Cada equipo que reparamos es tratado como si fuera nuestro.</p>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Testimonios Section -->
227
+ <section id="testimonios" class="py-16 bg-white">
228
+ <div class="container mx-auto px-4">
229
+ <div class="text-center mb-16">
230
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nuestros <span class="text-blue-600">Clientes</span> Hablan</h2>
231
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">La satisfacci贸n de nuestros clientes es nuestra mejor carta de presentaci贸n.</p>
232
+ </div>
233
+
234
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
235
+ <!-- Testimonio 1 -->
236
+ <div class="bg-gray-50 rounded-xl p-6 shadow-md">
237
+ <div class="flex items-center mb-4">
238
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
239
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente satisfecho" class="w-full h-full object-cover">
240
+ </div>
241
+ <div>
242
+ <h4 class="font-bold text-gray-800">Laura Mart铆nez</h4>
243
+ <div class="flex text-yellow-400">
244
+ <i class="fas fa-star"></i>
245
+ <i class="fas fa-star"></i>
246
+ <i class="fas fa-star"></i>
247
+ <i class="fas fa-star"></i>
248
+ <i class="fas fa-star"></i>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ <p class="text-gray-600 italic">"Mi computadora estaba muy lenta y con varios problemas. MazaTech no solo la dej贸 como nueva, sino que me explic贸 c贸mo mantenerla en buen estado. Excelente servicio!"</p>
253
+ </div>
254
+
255
+ <!-- Testimonio 2 -->
256
+ <div class="bg-gray-50 rounded-xl p-6 shadow-md">
257
+ <div class="flex items-center mb-4">
258
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
259
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente satisfecho" class="w-full h-full object-cover">
260
+ </div>
261
+ <div>
262
+ <h4 class="font-bold text-gray-800">Carlos Rodr铆guez</h4>
263
+ <div class="flex text-yellow-400">
264
+ <i class="fas fa-star"></i>
265
+ <i class="fas fa-star"></i>
266
+ <i class="fas fa-star"></i>
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ <p class="text-gray-600 italic">"Necesitaba actualizar mi equipo para trabajo remoto. MazaTech me asesor贸 perfectamente sobre los componentes que necesitaba y el resultado ha sido espectacular. Muy profesionales."</p>
273
+ </div>
274
+
275
+ <!-- Testimonio 3 -->
276
+ <div class="bg-gray-50 rounded-xl p-6 shadow-md">
277
+ <div class="flex items-center mb-4">
278
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
279
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente satisfecho" class="w-full h-full object-cover">
280
+ </div>
281
+ <div>
282
+ <h4 class="font-bold text-gray-800">Ana L贸pez</h4>
283
+ <div class="flex text-yellow-400">
284
+ <i class="fas fa-star"></i>
285
+ <i class="fas fa-star"></i>
286
+ <i class="fas fa-star"></i>
287
+ <i class="fas fa-star"></i>
288
+ <i class="fas fa-star-half-alt"></i>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ <p class="text-gray-600 italic">"Perd铆 todos mis archivos importantes por un virus. Pens茅 que no habr铆a soluci贸n, pero MazaTech recuper贸 el 100% de mi informaci贸n. Estoy eternamente agradecida!"</p>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </section>
297
+
298
+ <!-- Contacto Section -->
299
+ <section id="contacto" class="py-16 bg-gray-800 text-white">
300
+ <div class="container mx-auto px-4">
301
+ <div class="text-center mb-16">
302
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Cont谩cta a <span class="text-blue-400">MazaTech</span></h2>
303
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">Estamos listos para ayudarte con cualquier problema t茅cnico que tengas con tu equipo.</p>
304
+ </div>
305
+
306
+ <div class="flex flex-col lg:flex-row gap-12">
307
+ <div class="lg:w-1/2">
308
+ <form class="space-y-6">
309
+ <div>
310
+ <label for="nombre" class="block text-gray-300 mb-2">Nombre completo</label>
311
+ <input type="text" id="nombre" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
312
+ </div>
313
+
314
+ <div>
315
+ <label for="email" class="block text-gray-300 mb-2">Correo electr贸nico</label>
316
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
317
+ </div>
318
+
319
+ <div>
320
+ <label for="telefono" class="block text-gray-300 mb-2">Tel茅fono</label>
321
+ <input type="tel" id="telefono" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
322
+ </div>
323
+
324
+ <div>
325
+ <label for="servicio" class="block text-gray-300 mb-2">Servicio requerido</label>
326
+ <select id="servicio" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white">
327
+ <option value="">Selecciona un servicio</option>
328
+ <option value="mantenimiento">Mantenimiento Preventivo</option>
329
+ <option value="reparacion">Reparaci贸n Correctiva</option>
330
+ <option value="actualizacion">Actualizaci贸n de Hardware</option>
331
+ <option value="redes">Redes y Conectividad</option>
332
+ <option value="respaldo">Respaldo de Informaci贸n</option>
333
+ <option value="domicilio">Servicio a Domicilio</option>
334
+ </select>
335
+ </div>
336
+
337
+ <div>
338
+ <label for="mensaje" class="block text-gray-300 mb-2">Describe tu problema</label>
339
+ <textarea id="mensaje" rows="5" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"></textarea>
340
+ </div>
341
+
342
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
343
+ <i class="fas fa-paper-plane mr-2"></i> Enviar Mensaje
344
+ </button>
345
+ </form>
346
+ </div>
347
+
348
+ <div class="lg:w-1/2">
349
+ <div class="bg-gray-700 rounded-xl p-8 h-full">
350
+ <h3 class="text-2xl font-bold mb-6 text-blue-400">Informaci贸n de Contacto</h3>
351
+
352
+ <div class="space-y-6">
353
+ <div class="flex items-start">
354
+ <div class="bg-blue-500 p-3 rounded-full mr-4">
355
+ <i class="fas fa-map-marker-alt text-white"></i>
356
+ </div>
357
+ <div>
358
+ <h4 class="font-bold text-gray-300 mb-1">Direcci贸n</h4>
359
+ <p class="text-gray-400">Av. Tecnolog铆a #1234, Col. Innovaci贸n, Ciudad Tecnol贸gica</p>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="flex items-start">
364
+ <div class="bg-blue-500 p-3 rounded-full mr-4">
365
+ <i class="fas fa-phone-alt text-white"></i>
366
+ </div>
367
+ <div>
368
+ <h4 class="font-bold text-gray-300 mb-1">Tel茅fonos</h4>
369
+ <p class="text-gray-400">+52 55 1234 5678</p>
370
+ <p class="text-gray-400">+52 55 8765 4321</p>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="flex items-start">
375
+ <div class="bg-blue-500 p-3 rounded-full mr-4">
376
+ <i class="fas fa-envelope text-white"></i>
377
+ </div>
378
+ <div>
379
+ <h4 class="font-bold text-gray-300 mb-1">Correo electr贸nico</h4>
380
+ <p class="text-gray-400">contacto@mazatech.com</p>
381
+ <p class="text-gray-400">soporte@mazatech.com</p>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="flex items-start">
386
+ <div class="bg-blue-500 p-3 rounded-full mr-4">
387
+ <i class="fas fa-clock text-white"></i>
388
+ </div>
389
+ <div>
390
+ <h4 class="font-bold text-gray-300 mb-1">Horario de atenci贸n</h4>
391
+ <p class="text-gray-400">Lunes a Viernes: 9:00 am - 7:00 pm</p>
392
+ <p class="text-gray-400">S谩bados: 9:00 am - 2:00 pm</p>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="mt-8">
398
+ <h4 class="font-bold text-gray-300 mb-4">S铆guenos en redes sociales</h4>
399
+ <div class="flex space-x-4">
400
+ <a href="#" class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
401
+ <i class="fab fa-facebook-f"></i>
402
+ </a>
403
+ <a href="#" class="w-10 h-10 bg-blue-400 rounded-full flex items-center justify-center hover:bg-blue-300 transition">
404
+ <i class="fab fa-twitter"></i>
405
+ </a>
406
+ <a href="#" class="w-10 h-10 bg-pink-600 rounded-full flex items-center justify-center hover:bg-pink-500 transition">
407
+ <i class="fab fa-instagram"></i>
408
+ </a>
409
+ <a href="#" class="w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
410
+ <i class="fab fa-linkedin-in"></i>
411
+ </a>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </section>
419
+
420
+ <!-- Footer -->
421
+ <footer class="bg-gray-900 text-gray-400 py-8">
422
+ <div class="container mx-auto px-4">
423
+ <div class="flex flex-col md:flex-row justify-between items-center">
424
+ <div class="flex items-center mb-4 md:mb-0">
425
+ <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
426
+ <i class="fas fa-laptop-code text-white"></i>
427
+ </div>
428
+ <h2 class="text-xl font-bold text-white">Maza<span class="text-blue-400">Tech</span></h2>
429
+ </div>
430
+
431
+ <div class="text-center md:text-right">
432
+ <p class="mb-2">漏 2023 MazaTech. Todos los derechos reservados.</p>
433
+ <div class="flex justify-center md:justify-end space-x-4">
434
+ <a href="#" class="hover:text-white transition">T茅rminos y condiciones</a>
435
+ <a href="#" class="hover:text-white transition">Pol铆tica de privacidad</a>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </footer>
441
+
442
+ <!-- WhatsApp Float Button -->
443
+ <a href="https://wa.me/525512345678" target="_blank" class="fixed bottom-6 right-6 bg-green-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-green-600 transition z-50">
444
+ <i class="fab fa-whatsapp text-2xl"></i>
445
+ </a>
446
+
447
+ <script>
448
+ // Smooth scrolling for anchor links
449
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
450
+ anchor.addEventListener('click', function (e) {
451
+ e.preventDefault();
452
+
453
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
454
+ behavior: 'smooth'
455
+ });
456
+ });
457
+ });
458
+
459
+ // Mobile menu toggle (would need more JS for full functionality)
460
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
461
+ // This would toggle a mobile menu in a real implementation
462
+ alert('En una implementaci贸n real, esto mostrar铆a/ocultar铆a el men煤 m贸vil');
463
+ });
464
+ </script>
465
+ <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=Cruzito99/mazatech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
466
+ </html>