-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
455 lines (426 loc) · 31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<!DOCTYPE html>
<html lang="es-MX" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Innovando en el comercio agrícola. Una solución integral a tus necesidades." />
<meta name="keywords"
content="Agricultura,Agricola,Soluciones,Solucion,Integral,Proteccion,Cultivo,Guarany,Fertilizantes,Pesticidas,Rentabilidad,Negocio,Siembra,Cosecha,Sembradio,Valor,Real,Integridad,Compromiso,Nutricion,Vegetal,Productos,Equipo,Riego,Consumibles,Aplicacion,Semillas,Servicios,Servicio,Asesoria,Programas,Capacitaciones,Nuestro;Objetivo,Suministro,Desarrollo,Agricolas,Trabajo,Experimentado,Campo,Comercializadora,Valores,Calibracion,Webbygravy,Diseño">
<link rel="canonical" href="https://www.agromega.com/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Inter:wght@300;400;500;600;700;800&family=Roboto+Condensed:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<title>Agromega | Innovando en el comercio agrícola</title>
<script src="https://kit.fontawesome.com/9846627988.js" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
<link rel="stylesheet" href="public/style.css">
</head>
<body class="w-full bg-offWhite font-inter text-offGray">
<main class="grid grid-cols-2 gap-0 laptop:grid-cols-6 bg-offWhite">
<!-- FIXED SIDEBAR -->
<nav
class="h-screen top-0 sticky hidden laptop:flex laptop:col-span-1 bg-offWhite border-r-[1px] border-transparent flex-col items-start justify-evenly flex-wrap drop-shadow-xl">
<!-- LOGO -->
<img src="img/logo-agromega.svg" alt="logotipo agromega" class="px-4 laptop:mt-0 laptop:mb-10">
<!-- MENU NAVBAR -->
<ul class="text-2xl text-left">
<li class="py-3"><a href="index.html"
class="px-4 py-2 duration-500 rounded-r-md hover:bg-azulAgro hover:text-offWhite">Inicio</a>
</li>
<li class="py-3"><a href="nosotros.html"
class="px-4 py-2 duration-500 rounded-r-md hover:bg-azulAgro hover:text-offWhite">Nosotros</a>
</li>
<li class="py-3"><a href="productos.html"
class="px-4 py-2 duration-500 rounded-r-md hover:bg-azulAgro hover:text-offWhite">Productos</a>
</li>
<li class="py-3"><a href="servicios.html"
class="px-4 py-2 duration-500 rounded-r-md hover:bg-azulAgro hover:text-offWhite">Servicios</a>
</li>
<li class="py-3"><a href="trabajo.html"
class="px-4 py-2 duration-500 rounded-r-md hover:bg-azulAgro hover:text-offWhite">Trabajo</a>
</li>
<li class="py-3"><a href="contacto.html"
class="px-4 py-2 duration-500 rounded-r-md hover:bg-azulAgro hover:text-offWhite">Contacto</a>
</li>
</ul>
<!-- LOCATION & SOCIAL -->
<section class="pl-4">
<div class="mt-10">
<i class="mr-1 text-xl text-right fa-solid fa-location-dot text-azulAgro"></i>
<a href="https://maps.app.goo.gl/Ft7n5tBCHGtr1uVB9"><span
class="p-1 text-base font-bold duration-500 rounded-md hover:bg-blue-200">Pedro Parra
Centeno
110</span><br><span class="text-sm">Tlajomulco de Zúñiga</span></a>
<div class="mt-6">
<i class="text-base fa-solid fa-phone text-azulAgro"></i><span
class="ml-2 text-base font-semibold">(33) 3798-1526</span><br>
<i class="text-base fa-solid fa-phone text-azulAgro"></i><span
class="ml-2 text-base font-semibold">(33) 3798-0637</span>
</div>
</div>
<div class="mt-12"><a href="https://www.facebook.com/profile.php?id=100063775232938"><i
class="mr-2 text-4xl fa-brands fa-square-facebook text-azulAgro hover:text-azulAgroClaro laptop:duration-500"></i></a>
</div>
</section>
</nav>
<!-- END OF DEKTOP SIDEBAR -->
<!-- MOBILE NAVBAR -->
<nav
class="fixed z-50 flex flex-row items-center justify-around w-full h-20 bg-offWhite laptop:hidden drop-shadow-md laptop:drop-shadow-none">
<img src="img/logo-agromega.svg" alt="logo agromega" class="h-12">
<a href="#"><i class="text-3xl fa-solid fa-bars text-azulAgro"></i></a>
</nav>
<!-- HOME MAIN CONTENT -->
<section id="main-banner-content"
class="col-span-2 m-6 mt-28 laptop:col-span-5 laptop:gap-20 laptop:m-20 bg-offWhite">
<!-- HOME BANNER -->
<div
class="p-4 rounded-md laptop:rounded-none laptop:p-0 laptop:relative bg-neutral-200 laptop:bg-transparent">
<!-- IMAGE -->
<img src="img/tinified/index-main-banner.jpg" alt="banner principal agromega"
class="object-cover w-full rounded-t-md laptop:rounded-xl brightness-75 laptop:brightness-90">
<!-- SLOGAN -->
<div
class="laptop:absolute flex flex-col laptop:w-3/4 w-full laptop:top-[12%] top-[30%] items-start flex-wrap ml-0 laptop:ml-20">
<h1
class="w-full p-4 text-3xl font-semibold uppercase laptop:p-0 bg-azulAgro laptop:bg-transparent laptop:text-9xl font-robotoCon text-offWhite laptop:ml-0">
innovando en el comercio agrícola</h1>
<!-- BENEFIT COPY -->
<h2
class="w-full px-4 py-4 text-base font-medium leading-relaxed rounded-b-md laptop:rounded-md laptop:mt-4 laptop:w-3/4 laptop:bg-offBlack bg-offGray laptop:opacity-80 laptop:text-lg text-offWhite">
¿Buscas una solución integral a las necesidades de nutrición y protección de cultivo y mayor
rentabilidad para tu negocio?</h2>
<!-- CONTACT US BUTTON -->
<button
class="w-full px-6 py-3 mt-2 text-xl font-bold duration-300 rounded-lg hover:text-offBlack laptop:mt-6 laptop:w-fit hover:bg-offWhite bg-azulAgroClaro active:bg-offGray active:text-offWhite text-offWhite hover:-translate-y-1"><a
href="contacto.html">Hablemos</a></button>
</div>
<!-- ARROW DOWN -->
<div class="flex-row justify-center hidden mt-2 laptop:flex"><a
class="duration-500 hover:text-azulAgro text-azulAgroClaro hover:translate-y-1"
href="#home-intro"><i class="text-3xl fa-solid fa-chevron-down"></i></a></div>
</div>
<!-- HOME SEC CONTENT -->
<section id="home-intro"
class="flex flex-col pt-8 mt-0 bg-transparent laptop:px-0 laptop:pt-10 laptop:mt-0 rounded-xl laptop:flex-row">
<!-- HOME SEC BANNER -->
<!-- IMAGE AS BKG -->
<img src="img/tinified/index-sec-banner.jpg" alt="banner guarany agromega"
class="hidden object-cover w-full origin-center laptop:flex rounded-xl laptop:w-1/4 brightness-100 laptop:brightness-100">
<!-- HOME SEC COPY CONTENT -->
<div class="p-0 laptop:pl-10">
<h3
class="pl-3 mb-4 text-3xl font-semibold border-l-2 laptop:font-thin laptop:pl-0 laptop:border-none border-azulAgro laptop:p-0 laptop:text-6xl">
Relaciones de confianza</h3>
<div class="flex flex-col gap-5 text-base leading-relaxed laptop:text-lg">
<p class="font-semibold text-azulAgro">Creemos que podemos hacer una gran diferencia en todo lo
que hacemos, desafiando el statu quo y añadiendo valor real a nuestros clientes.</p>
<p>Todo mediante una cultura orientada a la honestidad, la integridad, el
compromiso y la armonía entre los colaboradores que se convergen en la satisfacción del
cliente.</p>
</div>
</div>
</section>
<!-- MODAL PRODUCTOS SERVICIOS -->
<section>
<h2
class="p-4 mt-8 text-xl font-semibold text-center laptop:mt-20 laptop:text-2xl bg-neutral-600 text-offWhite laptop:p-4 rounded-t-xl">
Opciones al
alcance
de tus manos:
</h2>
<div
class="grid grid-flow-col grid-cols-2 gap-4 p-4 mx-auto mt-0 laptop:p-10 laptop:gap-10 laptop:grid-flow-row bg-neutral-200 laptop:grid-cols-2 rounded-b-xl">
<!-- Modal toggle -->
<button data-modal-target="default-modal" data-modal-toggle="default-modal"
class="col-span-1 px-2 py-1 text-lg font-medium duration-300 rounded-lg laptop:px-6 laptop:py-3 laptop:text-3xl hover:text-offWhite hover:bg-azulAgro bg-azulMid active:bg-offGray active:text-offWhite text-offWhite hover:-translate-y-1"
type="button">
Productos
</button>
<!-- Main modal -->
<div id="default-modal" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-11/12 h-full p-2 laptop:p-4 laptop:w-3/4 laptop:h-3/4">
<!-- Modal content -->
<div class="relative rounded-lg shadow bg-offWhite dark:bg-offWhite">
<!-- Modal header -->
<div class="flex items-center justify-between px-10 py-5 dark:border-gray-600">
<h3
class="mt-5 text-3xl font-semibold laptop:text-4xl text-neutral-500 dark:text-neutral-400">
Productos
</h3>
<button type="button"
class="inline-flex items-center justify-center w-8 h-8 text-base rounded-lg text-offGray bg-offWhite hover:bg-offWhite hover:text-offGray ms-auto dark:hover:bg-offWhite dark:hover:text-offGray"
data-modal-hide="default-modal">
<svg class="w-3 h-3 duration-500 laptop:w-6 laptop:h-6 hover:text-red-500"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Cerrar modal</span>
</button>
</div>
<!-- Modal body -->
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fa-wheat-awn-circle-exclamation text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Nutrición
vegetal:</h3>
</div>
<p
class="text-sm laptop:text-lg laptop:leading-normal text-offGray dark:text-offGray">
Tenemos una gran oferta de macronutrientes y micronutrientes esenciales para el
correcto desarrollo; clasificados en granulados, solubles y especialidades.
Hacemos
mezclas físicas.
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fa-shield text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Protección de
cultivo:</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Promovemos agroquímicos innovadores para la protección de cultivo; marcas
reconocidas y amigables con el medio ambiente.
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fas fa-faucet-drip text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Equipo de riego
+ consumibles:
</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Desarrollamos proyectos a la medida y de llave en mano.
Tenemos todos los consumibles y refacciones disponibles.
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fas fa-screwdriver-wrench text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Equipos de
aplicación:</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Importadores y distribuidores de una de las líneas de alta gama, más completas:
<span class="font-bold text-amber-500">GUARANY</span>
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fas fa-seedling text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Semillas para
siembra:</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Manejamos una oferta de calidad certificada, principalmente alfalfas, sorgos
forrajeros y hortalizas.
</p>
</div>
<!-- Modal footer -->
<div class="flex flex-row justify-end px-10 py-5">
<button data-modal-hide="default-modal" type="button"
class="px-6 py-2 text-base font-medium text-center text-white duration-500 bg-red-500 rounded-lg hover:bg-red-500 dark:bg-azulAgroClaro dark:hover:bg-azulAgro hover:text-offWhite">Regresar</button>
</div>
</div>
</div>
</div>
<!-- END MODAL PRODUCTOS -->
<!-- SERVICIOS MODAL -->
<button data-modal-target="default-modal-2" data-modal-toggle="default-modal-2"
class="col-span-1 px-2 py-1 text-lg font-medium duration-300 rounded-lg laptop:px-6 laptop:py-3 laptop:text-3xl hover:text-offWhite hover:bg-azulAgro bg-azulMid active:bg-offGray active:text-offWhite text-offWhite hover:-translate-y-1"
type="button">
Servicios
</button>
<div id="default-modal-2" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-11/12 h-full p-2 laptop:p-4 laptop:w-3/4 laptop:h-3/4">
<!-- Modal content -->
<div class="relative rounded-lg shadow bg-offWhite dark:bg-offWhite">
<!-- Modal header -->
<div class="flex items-center justify-between px-10 py-5 dark:border-gray-600">
<h3
class="mt-5 text-3xl font-semibold laptop:text-4xl text-neutral-500 dark:text-neutral-400">
Servicios
</h3>
<button type="button"
class="inline-flex items-center justify-center w-8 h-8 text-base rounded-lg text-offGray bg-offWhite hover:bg-offWhite hover:text-offGray ms-auto dark:hover:bg-offWhite dark:hover:text-offGray"
data-modal-hide="default-modal-2">
<svg class="w-3 h-3 duration-500 laptop:w-6 laptop:h-6 hover:text-red-500"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Cerrar modal</span>
</button>
</div>
<!-- Modal body -->
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fas fa-comment-medical text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Asesoría en
nutrición:</h3>
</div>
<p
class="text-sm laptop:text-lg laptop:leading-normal text-offGray dark:text-offGray">
Examinamos tu cultivo para detectar deficiencias nutricionales. Te otorgamos la
correcta recomendación de producto y su método de aplicación.
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fa-hands-holding-circle text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Asesoría en
protección:</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Examinamos tu cultivo para detectar plagas y enfermedades. Te otorgamos la
correcta recomendación de producto y su método de aplicación.
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-brands fas fab fa-nutritionix text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Programas de
nutrición:
</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Generamos un programa completo y detallado de las mezclas de producto necesarias
para el correcto desarrollo nutricional de tus cultivos.
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fas fa-screwdriver-wrench text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Mantenimiento de
equipos:</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Reparamos y renovamos tus equipos de aplicación <span
class="font-bold text-amber-500">GUARANY</span>. Te proveemos de las
refacciones necesarias para su óptimo desempeño.</span>
</p>
</div>
<div class="px-10 py-4 laptop:py-2">
<div class="flex flex-row items-center justify-start"><i
class="mr-2 text-xl fa-solid fas fa-chalkboard-user text-azulAgro"></i>
<h3 class="text-xl font-semibold laptop:text-2xl text-offBlack">Capacitaciones:
</h3>
</div>
<p class="text-sm leading-normal laptop:text-lg text-offGray dark:text-offGray">
Te capacitamos para el correcto uso y calibración de equipos Guarany. Te
capacitamos para la correcta aplicación de fertilizantes y agroquímicos.
</p>
</div>
<!-- Modal footer -->
<div class="flex flex-row justify-end px-10 py-5">
<button data-modal-hide="default-modal-2" type="button"
class="px-6 py-2 text-base font-medium text-center text-white duration-500 bg-red-500 rounded-lg hover:bg-red-500 dark:bg-azulAgroClaro dark:hover:bg-azulAgro hover:text-offWhite">Regresar</button>
</div>
</div>
</div>
</div>
<!-- END MODAL SERVICIOS -->
</div>
<button
class="w-full py-3 mt-3 text-xl font-semibold align-middle duration-500 laptop:mt-10 laptop:text-3xl hover:bg-azulAgroClaro active:bg-offGray rounded-xl bg-azulAgro text-offWhite hover:drop-shadow-md hover:-translate-y-1"><a
href="contacto.html">Pongámonos
en
contacto</a></button>
</section>
<footer
class="grid w-full grid-flow-row grid-cols-1 px-5 py-5 mt-10 border-t-2 laptop:mt-20 laptop:px-0 rounded-xl laptop:rounded-none bg-offGray laptop:bg-transparent border-azulAgro laptop:grid-cols-5 laptop:grid-flow-col">
<!-- SITEMAP -->
<div class="row-span-1 laptop:col-span-1">
<ul class="text-sm leading-[2.2] laptop:leading-[2.5] text-offWhite laptop:text-offBlack">
<li
class="duration-500 hover:border-l-2 border-azulAgro hover:translate-x-2 hover:text-azulAgro">
<a class="laptop:pl-2" href="index.html">inicio</a>
</li>
<li
class="duration-500 hover:border-l-2 border-azulAgro hover:translate-x-2 hover:text-azulAgro">
<a class="laptop:pl-2" href="public/nosotros.html">nosotros</a>
</li>
<li
class="duration-500 hover:border-l-2 border-azulAgro hover:translate-x-2 hover:text-azulAgro">
<a class="laptop:pl-2" href="public/productos.html">productos</a>
</li>
<li
class="duration-500 hover:border-l-2 border-azulAgro hover:translate-x-2 hover:text-azulAgro">
<a class="laptop:pl-2" href="public/servicios.html">servicios</a>
</li>
<li
class="duration-500 hover:border-l-2 border-azulAgro hover:translate-x-2 hover:text-azulAgro">
<a class="laptop:pl-2" href="public/trabajo.html">trabajo</a>
</li>
<li
class="duration-500 hover:border-l-2 border-azulAgro hover:translate-x-2 hover:text-azulAgro">
<a class="laptop:pl-2" href="public/contacto.html">contacto</a>
</li>
</ul>
</div>
<!-- NEWSLETTER -->
<div
class="row-span-1 pt-6 align-middle laptop:pt-0 laptop:px-4 laptop:col-span-2 text-offWhite laptop:text-offBlack">
<span class="text-lg font-semibold laptop:text-xl">
<p class="mb-3">Recibe información de
nuestros
productos.</p>
</span>
<p class="text-xs leading-relaxed laptop:text-sm">Regístrate con tu dirección de correo electrónico
para recibir
noticias y
actualizaciones.</p>
</div>
<!-- USER MAIL -->
<div class="row-span-1 px-0 pt-4 laptop:col-span-2 laptop:pt-0 laptop:px-4">
<label for="helper-text"
class="block mb-2 text-sm font-semibold font-inter text-offWhite laptop:text-offBlack dark:bg-transparent">Escribe
tu
correo:</label>
<input type="email" id="helper-text" aria-describedby="helper-text-explanation"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-neutral-200 dark:border-gray-600 dark:placeholder-gray-400 dark:text-offBlack dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="[email protected]" required>
<p id="helper-text-explanation" class="mt-2 text-xs text-gray-500 dark:text-gray-400">Nunca
compartiremos tus datos. Revisa nuestro <a href="public/acuerdo.html"
class="font-medium text-blue-600 hover:underline dark:text-blue-500">Acuerdo de
Privacidad</a>.</p>
<!-- ESTOY DE ACUERDO CHECKBOX -->
<div class="mt-3">
<input id="remember" type="checkbox" value=""
class="w-4 h-4 border border-gray-300 rounded bg-offWhite focus:ring-3 focus:ring-blue-300 dark:bg-offWhite dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
required>
<label for="remember"
class="text-xs font-medium laptop:text-offBlack text-offWhite ms-2 laptop:dark:text-offBlack dark:text-offWhite">Estoy
de
acuerdo
con los
<a href="public/terminos.html"
class="text-blue-600 hover:underline dark:text-blue-500">términos y
condiciones</a>.</label>
</div>
<button type="submit"
class="text-white bg-azulAgro hover:bg-azulAgro focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-xl font-semibold w-full sm:w-auto px-5 py-2.5 mt-4 text-center dark:bg-azulAgro dark:hover:bg-azulAgroClaro duration-500 hover:-translate-y-1 hover:drop-shadow-md dark:focus:ring-azulAgro">Enviar</button>
<!-- PRIVACIDAD -->
<p class="mt-3 text-[10px] leading-relaxed text-neutral-400 laptop:text-[12px] laptop:text-right">
Copyright
Agromega®
2024.
Todos
los derechos
reservados</p>
</div>
</footer>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
</body>
</html>