-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
354 lines (294 loc) · 27.7 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
<!DOCTYPE html>
<html lang="es-MX" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<title>Leaf Spring México</title>
<meta name="description" content="Encuentra amortiguadores, bolsas de aire, productos de hule natural, muelles y sistemas de frenos. Con la confianza que tu mereces." />
<meta name="keywords" content="Suspensiones,Leaf,Spring,Mexico,Muelles,Amortiguadores,Seguro,ConfiablemExperiencia,Hule,Natural,Mecanico,Partes,Refacciones,Camion,Trailer,Vehiculo,Calidad,Solucion,Soluciones,Bolsa,Bolsas,Aire,Productos,Z,Muelles en Z,Sistema,Sistemas,Frenos,Sistemas de frenos,Banderin,Soporte,Deslizante,Trifuncional,Hendrickson,Dina,Toyota,Gabriel,Chrysler,Ford,Fruehauf,Buje,Contacto,Integral,Carga,Ligero,Pesado,Variedad,Accesorios,Nucleos,Tensor,Tambores,Zapatas,Balatas,Mercadoshop,Nosotros,Guadalajara,Exportacion,Importacion,Internacional,rrgo,design">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://leafspringmexico.com/">
<link rel="alternate" hreflang="en-US" href="https://leafspringmexico.com/index.html">
<link rel="alternate" hreflang="en-MX" href="https://leafspringmexico.com/index.html">
<link rel="alternate" hreflang="es-MX" href="https://leafspringmexico.com/index.html">
<link rel="alternate" hreflang="x-default" href="https://leafspringmexico.com/index.html">
<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=Oswald:wght@200;300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<script src="https://kit.fontawesome.com/9846627988.js" crossorigin="anonymous"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link rel="shortcut icon" href="img/logos/leaf-spring/ls-favicon-wht.svg" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<meta name="google-site-verification" content="Kgo1F9CzYDzz83QfKZfolOoWdWmE7psgzzJ4ZZb-CLg" />
</head>
<body class="flex flex-col w-full overflow-x-hidden antialiased bg-transparent text-grisLeaf" tabindex="-1" aria-live="polite">
<!-- MAIN MENU -->
<div id="ham" class="fixed z-50 flex flex-col items-center justify-center hidden w-full h-screen overflow-x-hidden overflow-y-hidden text-4xl tracking-wide duration-500 origin-left bg-gradient-to-b from-green-500 to-green-700 text-offWhite laptop:hidden">
<ul class="font-roboto">
<li class="pb-3 duration-500 hover:text-amber-400 hover:translate-x-4"><a href="index.html" aria-label="inicio"><i class="pr-4 fa-solid fa-house fa-xs" style="color: #F2F2F2;"></i>Inicio</a></li>
<li class="pb-3 duration-500 hover:text-amber-400 hover:translate-x-4"><a href="nosotros.html" aria-label="nosotros"><i class="pr-4 fa-solid fa-users fa-xs" style="color: #F2F2F2;"></i>Nosotros</a></li>
<li class="pb-3 duration-500 hover:text-amber-400 hover:translate-x-4"><a href="productos.html" aria-label="productos"><i class="pr-4 fa-solid fa-screwdriver-wrench fa-xs" style="color: #F2F2F2;"></i>Productos</a></li>
<li class="pb-3 duration-500 hover:text-amber-400 hover:translate-x-4"><a href="contacto.html" aria-label="contacto"><i class="pr-4 fa-solid fa-envelope fa-xs" style="color: #F2F2F2;"></i>Contacto</a></li>
</ul> <!-- BOTON CERRAR -->
<div id="closeBtn" class="absolute text-3xl cursor-pointer top-9 right-5">
<i name="cerrar" onclick="Close(this)" class="fa-solid fa-xmark text-offWhite"></i>
</div>
</div>
<!-- NAVBAR -->
<nav id="inicio" class="sticky top-0 z-50 flex flex-row self-center w-full p-3 drop-shadow-lg laptop:items-center laptop:justify-around laptop:p-6 laptop:w-full bg-offWhite">
<div class="flex flex-row items-center justify-between flex-grow mx-auto align-middle laptop:justify-around">
<a href="index.html" aria-label="inicio">
<figure>
<img src="./img/logos/leaf-spring/ls-logo.svg" alt="logo leaf spring" class="h-12 py-2 laptop:pl-0 laptop:h-20 ">
</figure>
</a>
<!-- HAMBURGER MENU MOBILE -->
<div>
<!-- HAMBURGER MENU ICON -->
<div id="hamBtn" class="flex flex-row p-2 text-4xl align-middle rounded-md cursor-pointer laptop:hidden right-3 top-6 border-[1px] border-verdeClaroLeaf">
<figure>
<img onclick="Open(this)" src="img/icons/hamburger-md-svgrepo-com.svg" alt="hamburger menu" title="hamburger menu" class="h-4 laptop:hidden ">
</figure>
</div>
<!-- MENU -->
<ul class="hidden laptop:flex-row laptop:gap-24 laptop:list-none laptop:flex">
<li class="items-center">
<a href="index.html" aria-label="inicio" class="items-center self-center hidden laptop:flex laptop:flex-row laptop:text-2xl laptop:font-semibold laptop:tracking-wide laptop:transition-all laptop:duration-500 laptop:ease-in-out laptop:font-roboto laptop:text-zinc-500 group"><i class="pr-2 fa-solid fa-house fa-xs" style="color: #029673;"></i><span class="bg-left-bottom bg-gradient-to-r from-verdeClaroLeaf pl-0 pr-4 py-1 to-verdeLeaf bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out hover:text-verdeClaroLeaf">Inicio</span></a>
</li>
<li class="items-center">
<a href="nosotros.html" aria-label="nosotros" class="items-center hidden laptop:flex laptop:flex-row laptop:text-2xl laptop:font-semibold laptop:tracking-wide laptop:transition-all laptop:duration-500 laptop:ease-in-out laptop:font-roboto laptop:text-zinc-500 group"><i class="pr-2 fa-solid fa-users fa-sm" style="color: #029673;"></i><span class="bg-left-bottom bg-gradient-to-r from-verdeClaroLeaf pl-0 pr-4 py-1 to-verdeLeaf bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out hover:text-verdeClaroLeaf">Nosotros</span></a>
</li>
<li class="items-center">
<a href="productos.html" aria-label="productos" class="items-center hidden laptop:flex laptop:flex-row laptop:text-2xl laptop:font-semibold laptop:tracking-wide laptop:transition-all laptop:duration-500 laptop:ease-in-out laptop:font-roboto laptop:text-zinc-500 group"><i class="pr-2 fa-solid fa-screwdriver-wrench fa-sm" style="color: #029673;"></i><span class="bg-left-bottom bg-gradient-to-r from-verdeClaroLeaf pl-0 pr-4 py-1 to-verdeLeaf bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out hover:text-verdeClaroLeaf">Productos</span></a>
</li>
<li class="items-center">
<a href="contacto.html" aria-label="contacto" class="items-center hidden laptop:flex laptop:flex-row laptop:text-2xl laptop:font-semibold laptop:tracking-wide laptop:transition-all laptop:duration-500 laptop:ease-in-out laptop:font-roboto laptop:text-zinc-500 group"><i class="pr-2 fa-solid fa-envelope fa-sm" style="color: #029673;"></i><span class="bg-left-bottom bg-gradient-to-r from-verdeClaroLeaf pl-0 pr-4 py-1 to-verdeLeaf bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out hover:text-verdeClaroLeaf">Contacto</span></a>
</li>
</ul>
</div>
</nav>
<!-- BANNER / SLOGAN -->
<div class="relative flex flex-col w-full">
<figure><img src="./img/banner/ls-inicio-main-banner.jpg" alt="banner principal leaf spring mexico" class=" w-full object-cover laptop:h-[calc(100vh-144px)] h-[calc(100vh-64px)] brightness-50 bg-black">
</figure>
<h1 id="main-title" data-aos="fade-down" data-aos-duration="1500" class="absolute z-40 flex flex-col self-center ml-0 text-3xl tracking-wider text-center uppercase tablet:text-8xl laptop:self-center laptop:mx-auto laptop:text-center font-oswald bigHor:text-xl mobileHor:text-3xl vertIpadMini:text-7xl laptop:block laptop:text-6xl hd:text-8xl fhd:text-8xl ipad:text-6xl text-offWhite laptop:top-[40%] top-[10%] box-border flex-wrap w-full mobile:text-5xl mobile:px-6 mobile:top-1/4 mobileHor:top-[15%] bigHor:top-[12%] mobileHorSmall:text-sm mobileHorSmall:top-[6%]" aria-hidden="true">
la solución en suspensiones</h1>
<h2 class="absolute flex flex-col font-roboto laptop:m-0 self-center bg-transparent laptop:py-2 laptop:px-4 px-10 py-2 text-sm bigHor:text-xs small:bottom-[30%] bigHor:self-center laptop:text-2xl tracking-wide bg-gradient-to-r from-green-500 to-green-700 laptop:bg-gradient-to-r mx-6 rounded-lg my-0 laptop:bottom-[35%] mobile:bottom-[28%] mobile:text-base bigHor:bottom-[33%] bottom-[35%] ipad:m-0 ipad:text-lg hd:text- fhd:text-xl fhd:px-8 fhd:py-3 fhd:mt-3 hd:mt-3 text-center text-offWhite mobileHorSmall:text-xs mobileHorSmall:bottom-[40%] mobileHor:text-xs mobileHor:bottom-[33%] mobileHor:self-center vertIpadMini:text-lg hd:self-center tablet:text-2xl hd:m-0">
La mejor y más segura selección en productos, con la experimentada atencion que tú mereces.</h2>
<button role="button" data-aos="fade-right" data-aos-duration="1500" aria-label="WhastApp" class="absolute flex flex-col self-center px-3 py-2 tablet:px-6 tablet:py-3 align-middle duration-500 rounded-lg font-roboto bg-offWhite hover:scale-150 hover:shadow-lg hover:shadow-verdeClaroLeaf bottom-[18%]">
<p class="text-base font-bold tablet:text-xl text-verdeClaroLeaf" title="contactar en WhastApp"><a href="https://wa.me/523325787385?text=" target="_blank" aria-label="contactar mediante whatsapp" aria-relevant="text"><i class="pr-2 align-middle fa-xl fa-brands fa-whatsapp text-verdeClaroLeaf"></i>
Hablemos</p>
</button>
<a href="#productos" aria-label="ir a productos" class="absolute self-center justify-center p-3 tablet:text-xl mobileHor:text-base bigHor:text-base vertIpadMini:text-xl laptop:text-xl text-xl text-center duration-500 text-neonPurple hover:text-yellow-400 text-offWhite hover:translate-y-2 font-roboto z-40 laptop:bottom-[3%] bottom-[8%] font-medium tracking-wider rounded-lg">
<p class="tracking-widest"></p>
<i class="text-3xl fa-solid fa-chevron-down"></i>
</a>
</div>
<!-- PRODUCTOS / MAIN -->
<div id="productos" class="bg-transparent laptop:w-full laptop:h-screen">
<!-- CATEGORIAS -->
<div id="categorias" class="grid items-center justify-center h-auto grid-cols-2 gap-4 p-4 bg-gray-200 laptop:mt-0 laptop:gap-2 laptop:bg-neutral-100 bigHor:h-auto mobileHor:h-auto bigHor:grid-cols-3 justify-items-center laptop:justify-evenly laptop:flex laptop:flex-row laptop:h-1/5">
<div class="items-center justify-center col-span-2 my-4 ml-0 text-center rounded-lg laptop:px-0 laptop:py-0 bg-grisLeaf laptop:bg-transparent laptop:text-left justify-items-center laptop:ml-10">
<p class="px-10 py-2 text-xl font-semibold tracking-wide text-center hd:p-0 laptop:px-0 tablet:px-10 bigHor:text-2xl mobileHor:text-2xl font-roboto laptop:text-verdeLeaf text-offWhite tablet:text-4xl laptop:text-2xl">
Categorías
</p>
</div>
<button tabindex="-1" role="button" aria-label="amortiguadores">
<a target="_self" aria-label="nuestros amortiguadores en mercado libre" href="https://leafspringmexico.mercadoshops.com.mx/listado/accesorios-vehiculos/refacciones-autos-camionetas/suspension-direccion/amortiguadores/amortiguadores#applied_filter_id%3Dcategory%26applied_filter_name%3DCategor%C3%ADas%26applied_filter_order%3D1%26applied_value_id%3DMLM45878%26applied_value_name%3DAmortiguadores%26applied_value_order%3D1%26applied_value_results%3D11%26is_custom%3Dfalse" tabindex="0">
<div>
<img src="./img/icons/iconos-leaf-amortiguadores.svg" class="duration-500 rounded-lg h-36 mobile:h-40 hover:bg-gray-200 hover:drop-shadow-xl tablet:h-56 laptop:h-36 hd:h-32 hover:scale-105 hover:bg-transparent opacity-70" alt="amortiguadores" title="amortiguadores">
</div>
</a>
</button>
<button tabindex="-1" role="button" aria-label="bolsas de aire">
<a target="_self" href="https://leafspringmexico.mercadoshops.com.mx/bolsa-aire" tabindex="0" aria-label="nuestras bolsas de aire en mercado libre">
<div>
<img src="./img/icons/iconos-leaf-bolsas-aire.svg" class="duration-500 rounded-lg h-36 mobile:h-40 hover:bg-gray-200 hover:drop-shadow-xl tablet:h-56 laptop:h-36 hd:h-32 hover:scale-105 hover:bg-transparent opacity-70" alt="bolsas de aire" title="bolsas de aire">
</div>
</a>
</button>
<button tabindex="-1" role="button" aria-label="hule natural">
<a target="_self" href="https://leafspringmexico.mercadoshops.com.mx/buje" tabindex="0" aria-label="nuestros productos de hule natural en mercado libre">
<div>
<img src="./img/icons/iconos-leaf-prods-hule-natural.svg" class="duration-500 rounded-lg h-36 mobile:h-40 hover:bg-gray-200 hover:drop-shadow-xl tablet:h-56 laptop:h-36 hd:h-32 hover:scale-105 hover:bg-transparent opacity-70" alt="productos de hule natural" title="productos de hule natural">
</div>
</a>
</button>
<button tabindex="-1" role="button" aria-label="muelles">
<a target="_self" href="https://leafspringmexico.mercadoshops.com.mx/listado/accesorios-vehiculos/refacciones-autos-camionetas/suspension-direccion/otros/" tabindex="0" aria-label="nuestras suspensiones en mercado libre">
<div>
<img src="./img/icons/iconos-leaf-muelles.svg" class="duration-500 rounded-lg h-36 mobile:h-40 hover:bg-gray-200 hover:drop-shadow-xl tablet:h-56 laptop:h-36 hd:h-32 hover:scale-105 hover:bg-transparent opacity-70" alt="muelles" title="muelles">
</div>
</a>
</button>
<button tabindex="-1" role="button" aria-label="muelles en zeta">
<a target="_self" href="https://leafspringmexico.mercadoshops.com.mx/muelle-z" tabindex="0" aria-label="nuestros muelles en mercado libre">
<div>
<img src="./img/icons/iconos-leaf-muelles-z.svg" class="duration-500 rounded-lg h-36 mobile:h-40 hover:bg-gray-200 hover:drop-shadow-xl tablet:h-56 laptop:h-36 hd:h-32 hover:scale-105 hover:bg-transparent opacity-70" alt="muelles en z" title="muelles en z">
</div>
</a>
</button>
<button tabindex="-1" role="button" aria-label="sistemas de frenos">
<a target="_self" href="https://leafspringmexico.mercadoshops.com.mx/" tabindex="0" aria-label="nuestros sistemas de frenos en mercado libre">
<div>
<img src="./img/icons/iconos-leaf-frenos.svg" class="duration-500 rounded-lg h-36 mobile:h-40 hover:bg-gray-200 hover:drop-shadow-xl tablet:h-56 laptop:h-36 hd:h-32 hover:scale-105 hover:bg-transparent opacity-70" alt="sistemas de frenos" title="sistemas de frenos">
</div>
</a>
</button>
<!-- CONTINUAR -->
<button class="col-span-2 laptop:hidden" role="button" aria-label="continuar" value="continuar">
<a href="#destacados" class="p-0 m-0 text-base tablet:text-2xl" aria-label="ir a la seccion de destacados">
<i class="fa-solid fa-chevron-down"></i>
</a>
</button>
</div>
<!-- SECCION DESTACADOS -->
<div id="destacados" class="grid items-center w-full h-screen grid-cols-2 gap-4 bg-white justify-evenly small:h-auto bigHor:pt-4 bigHor:pb-4 bigHor:h-auto justify-items-center laptop:justify-evenly laptop:p-4 laptop:flex laptop:flex-row laptop:flex-grow laptop:h-2/5 small:pt-6">
<div class="items-center justify-center col-span-2 my-4 ml-0 text-center rounded-lg laptop:px-0 laptop:py-0 bg-grisLeaf laptop:bg-transparent laptop:text-left justify-items-center laptop:ml-10">
<p class="px-10 py-2 text-2xl font-semibold tracking-wide hd:p-0 tablet:px-10 laptop:pr-10 bigHor:text-2xl mobileHor:text-2xl font-roboto laptop:text-verdeLeaf text-offWhite tablet:text-4xl laptop:text-2xl">
Destacados
</p>
</div>
<!-- BANDERIN -->
<button class="flex flex-col items-center align-middle" tabindex="-1" role="button">
<a target="_self" href="https://articulo.mercadolibre.com.mx/MLM-773023487-banderin-banderola-senalamiento-defensa-_JM" tabindex="0" aria-label="banderin">
<div>
<img src="./img/destacados-ml/dest-band-05.jpg" class="h-32 pt-6 duration-500 rounded-lg laptop:pt-0 hd:h-36 tablet:h-52 ipad:h-32 laptop:h-32 hover:scale-110" alt="banderin" title="banderin">
</div>
</a>
<p class="w-32 mx-auto text-base text-center font-oswald">Banderín / Señalamiento Defensa</p>
</button>
<!-- SOPORTE COJINETE -->
<button class="flex flex-col items-center self-center align-middle" tabindex="-1" role="button">
<a target="_self" href="https://articulo.mercadolibre.com.mx/MLM-777140914-soporte-cojinete-deslizante-almohadilla-freightliner-m2-_JM" tabindex="0" aria-label="soporte cojinete">
<div>
<img src="./img/destacados-ml/dest-cojinete-m2.jpg" class="h-32 pt-6 duration-500 rounded-lg laptop:pt-0 hd:h-36 tablet:h-52 ipad:h-32 laptop:h-32 hover:scale-110" alt="soporte cojinete freightliner" title="soporte cojinete freightliner">
</div>
</a>
<p class="w-32 mx-auto mt-3 text-base text-center font-oswald">Soporte Deslizante Freightliner M2</p>
</button>
<!-- SISTEMA RETRACTIL TRIFUNCIONAL UBL HENDRICKSON -->
<button class="flex flex-col items-center self-center align-middle" tabindex="-1" role="button">
<a target="_self" href="https://articulo.mercadolibre.com.mx/MLM-1415873899-sistema-retractil-suspension-hendrickson-trifuncional-ubl-_JM" tabindex="0" aria-label="trifuncional hendrickson">
<div>
<img src="./img/destacados-ml/dest-trifuncional-hendrickson.jpg" class="h-32 pt-6 duration-500 rounded-lg laptop:pt-0 hd:h-36 tablet:h-52 ipad:h-32 laptop:h-32 hover:scale-110" alt="sist retractil trifuncional hendrickson" title="sist retractil trifuncional hendrickson">
</div>
</a>
<p class="w-32 mx-auto mt-3 text-base text-center font-oswald">Sistema Trifuncional Hendrickson</p>
</button>
<!-- BUJE TRIFUNCIONAL HENDRICKSON -->
<button class="flex flex-col items-center self-center align-middle" tabindex="-1" role="button">
<a target="_self" href="https://articulo.mercadolibre.com.mx/MLM-772924859-buje-trifuncional-suspension-hendrickson-hka-180-kit-_JM" tabindex="0" aria-label="buje trifuncional hendrickson">
<div>
<img src="./img/destacados-ml/dest-buje-trifuncional-hendrickson.jpg" class="h-32 pt-6 duration-500 rounded-lg laptop:pt-0 hd:h-36 tablet:h-52 ipad:h-32 laptop:h-32 hover:scale-110" alt="buje trifuncional hendrickson" title="buje trifuncional hendrickson">
</div>
</a>
<p class="w-32 mx-auto mt-3 text-base text-center font-oswald">Buje Trifuncional Hendrickson</p>
</button>
<!-- BOLSA AIRE GABRIEL -->
<button class="flex flex-col items-center self-center align-middle" tabindex="-1" role="button">
<a target="_self" href="https://articulo.mercadolibre.com.mx/MLM-817313984-bolsa-aire-8050-1r14-039-suspension-ht300-marca-gabriel-_JM" tabindex="0" aria-label="bolsa de aire gabriel 8050 ht300">
<div>
<img src="./img/destacados-ml/dest-bolsa-gabriel-ga8050a.jpg" class="h-32 pt-6 duration-500 rounded-lg laptop:pt-0 hd:h-36 tablet:h-52 ipad:h-32 laptop:h-32 hover:scale-110" alt="bolsa aire 8050 gabriel" title="bolsa aire 8050 gabriel">
</div>
</a>
<p class="w-32 mx-auto mt-3 text-base text-center font-oswald">Bolsa Aire 8050 HT300 Gabriel</p>
</button>
<div class="col-span-2 duration-500 text-verdeLeaf hover:translate-x-2">
<div class="w-auto col-span-2 p-3 mt-0 text-center bg-transparent rounded-lg bigHor:mb-4 laptop:hidden">
<a href="#resume" aria-label="bajar a la seccion de google mapas">
<i class="col-span-2 text-base fa-solid fa-chevron-down text-grisLeaf"><span class="text-xl font-medium tracking-wider align-middle font-roboto text-grisLeaf">
</span></i></a>
</div>
</div>
</div>
<!-- MERCADOSHOPS -->
<div class="items-center grid-cols-6 grid-rows-2 laptop:grid h-2/5 bg-verdeLeaf small:hidden" tabindex="-1">
<div class="col-span-5 row-span-2 duration-500 hover:translate-x-3">
<a target="_self" href="https://leafspringmexico.mercadoshops.com.mx/" tabindex="0" aria-label="ir a nuestro mercado libre oficial">
<p class="tracking-wider text-center duration-500 laptop:text-6xl small:text-2xl font-roboto text-zinc-300 hover:text-amber-400 font-extralight">
Ir a mercadoshop <span class="font-semibold">Leaf Spring MX</span></p>
<p class="font-roboto text-amber-400 laptop:text-sm small:text-xs text-center tracking-[0.2em] pt-4">
Encuentra la solución que necesitas. <span class="text-base font-bold">Fácil. Rápido. Seguro.</span></p>
</a>
</div>
<div class="grid items-center justify-center w-full h-full grid-flow-col col-span-1 row-span-2 align-middle bg-verdeClaroLeaf">
<a href="#resume" aria-label="bajar a seccion contacto" title="bajar">
<div class="text-xl font-medium tracking-wider text-center duration-500 font-roboto tablet:text-2xl hover:translate-y-2 text-offWhite hover:text-amber-400">
<p class="">contacto</p>
<i class="fa-solid fa-chevron-down"></i>
</div>
</a>
</div>
</div>
</div>
<!-- MAPS / FOOTER -->
<div id="resume" class="items-center justify-center w-full h-screen text-white align-middle bg-offWhite font-roboto">
<div class="grid items-center justify-center laptop:grid-cols-2 small:grid-cols-1 ipad:h-screen laptop:h-2/3 bg-offWhite">
<div class="flex flex-col items-center justify-center h-full py-8 text-center bg-gray-200 laptop:p-10">
<p class="pb-8 text-2xl font-medium tracking-wide laptop:text-4xl text-grisLeaf"><i class="text-3xl laptop:text-4xl text-verdeLeaf fa-solid fa-building"></i> Nuestras oficinas:</p>
<iframe title="ubicacion oficinas leaf spring mexico" class="items-center justify-center w-5/6 align-middle rounded-lg h-2/3" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3733.1340018219994!2d-103.34668838464898!3d20.6641266055009!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8428b21d0bda0f4b%3A0x39e7705f2d9aae6!2sC.%20Gante%20156%2C%20Las%20Conchas%2C%2044460%20Guadalajara%2C%20Jal.!5e0!3m2!1ses-419!2smx!4v1680376441582!5m2!1ses-419!2smx" width="400" height="400" style="border:1" frameborder=”1″ allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p class="px-8 pt-4 text-xl font-medium tracking-wide laptop:px-0 text-grisLeaf font-"><i class="text-xl text-red-500 fa-solid fa-location-dot"></i> Gante 156 / Las Conchas / Guadalajara, Jal. MX.
</p>
<p class="pt-4 text-xl font-medium tracking-wide text-grisLeaf font-roboto"><i class="text-xl fa-brands fa-whatsapp text-[#075E54]"></i> (33) 2578-7385</p>
</div>
<div class="p-8 laptop:p-20 laptop:flex laptop:flex-col laptop:h-full laptop:justify-center laptop:items-start">
<h2 class="pb-2 text-2xl font-medium tracking-wide laptop:text-4xl laptop:pb-8 text-verdeLeaf"><i class="text-5xl fa-solid fa-people-group" style="color: #025541;"></i> Quienes somos</h2>
<p class="text-base leading-relaxed tracking-wide laptop:leading-loose laptop:text-lg text-grisLeaf">
<span class="font-bold text-verdeClaroLeaf">Leaf Spring Mexico S.A. de C.V.</span> es una solución integral en
el campo de
suspensiones para equipo de carga ligero, pesado y extra pesado,
respaldada con personal con más de treinta años de experiencia.
<br><br>
Además de nuestra línea de muelles, contamos con una gran variedad
de accesorios tales como: bolsas de aire para suspensión,
amortiguadores, núcleos para tensor, bujes de hule natural, así como,
tambores de freno, zapatas y balatas.
</p>
</div>
</div>
<!-- FOOTER -->
<footer id="footer" class="grid grid-cols-1 gap-5 p-8 bg-grisLeaf laptop:grid-cols-6 laptop:grid-rows-1 laptop:gap-10 laptop:p-10">
<!-- LOGO FOOTER -->
<div class="justify-center laptop:col-start-1 laptop:col-end-1">
<a href="./index.html">
<img class="h-16 pb-6 laptop:h-20" src="./img/logos/leaf-spring/ls-logo-wht.svg" alt="logo leaf spring mexico"></a>
</div>
<div class="pb-6 laptop:pb-0 rounded-xl laptop:col-start-2 laptop:col-end-2">
<ul>
<li class="laptop:pb-3"><a class="pb-2 text-gray-200 duration-500 laptop:pb-0 laptop:hover:pl-2 hover:text-verdeClaroLeaf w-fit" href="index.html">inicio</a></li>
<li class="laptop:pb-3"><a class="pb-2 text-gray-200 duration-500 laptop:pb-0 laptop:hover:pl-2 hover:text-verdeClaroLeaf w-fit" href="nosotros.html">nosotros</a></li>
<li class="laptop:pb-3"><a class="pb-2 text-gray-200 duration-500 laptop:pb-0 laptop:hover:pl-2 hover:text-verdeClaroLeaf w-fit" href="productos.html">productos</a></li>
<li class="laptop:pb-3"><a class="pb-2 text-gray-200 duration-500 laptop:pb-0 laptop:hover:pl-2 hover:text-amber-400 w-fit" href="https://leafspringmexico.mercadoshops.com.mx/">mercadoshop</a></li>
<li><a class="pb-2 text-gray-200 duration-500 laptop:pb-0 laptop:hover:pl-2 hover:text-verdeClaroLeaf w-fit" href="contacto.html">contacto</a></li>
</ul>
</div>
<div class="laptop:col-start-3 laptop:col-end-5 w-fit">
<p class="pb-1 duration-500 w-fit laptop:pb-3 hover:text-amber-400" title="contactar en WhastApp"><a href="https://wa.me/523325787385?text=Gracias por ponerte en contacto, ¿En qué te podemos ayudar?" target="_blank" aria-label="contactar mediante whatsapp"><i class="pr-2 text-base align-middle laptop:text-4xl fa-brands fa-whatsapp text-verdeClaroLeaf"></i> (33)
2578-7385</p>
<p class="pb-1 laptop:pb-3 w-fit"><i class="pr-2 text-base align-middle laptop:text-3xl fa-solid fa-phone text-verdeClaroLeaf"></i> (33)
3645-0696</p>
<p class="pb-1 laptop:pb-3 w-fit"><i class="pr-2 text-base align-middle laptop:text-3xl fa-solid fa-fax text-verdeClaroLeaf"></i> (33) 3144-8289
</p>
<p title="enviar correo a leaf spring mexico" class="tracking-wide duration-500 laptop:hover:pl-2 laptop:hover:text-yellow-400"><a href="mailto:[email protected]"><i class="pr-3 text-base align-middle duration-500 laptop:text-3xl ipad:text-lg hd:text-3xl fa-solid fa-envelope text-verdeClaroLeaf"></i>[email protected]</a>
</p>
</div>
<div class="py-0 laptop:col-span-1 small:pt-8 laptop:pt-0 laptop:col-start-5 laptop:col-end-7">
<p class="col-span-1 text-xs tracking-wide text-center laptop:text-right laptop:text-sm small:pt-8 laptop:pt-0 tablet:col-span-2 laptop:py-5 text-zinc-400 laptop:col-span-6 font-roboto">
Copyright© 2023 Leaf Spring México. Todos los derechos reservados.</p>
<div class="flex pt-10 mx-auto justify-center align-middle text-[12px] font-light tracking-wide text-center laptop:justify-end laptop:text-right laptop:text-[12px] small:pt-3 tablet:col-span-2 text-neutral-300 laptop:col-span-2 font-roboto">
<a href="https://webbygravy.com/" class="flex items-center text-offWhite">creado por:
<div>
<img src="./img/logos/webbyGravy-logo.svg" alt="webbyGravy diseño" class="p-0 ml-2 duration-300 w-28 hd:hover:translate-x-1">
</div>
</a>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script src="js/actions.js"></script>
<script defer src="js/disallow.js"></script>
<script>AOS.init();</script>
</body>
</html>