-
Notifications
You must be signed in to change notification settings - Fork 0
/
frenos.html
218 lines (180 loc) · 15.9 KB
/
frenos.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
<!DOCTYPE html>
<html lang="es-MX" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<title>Leaf Spring México | Muelles</title>
<meta name="description" content="Seleccion de calidad en muelles multihoja, parabolicas y tipo zeta. Satisfacemos las necesidades para vehiculos de carga ligera y pesada" />
<meta name="keywords" content="Suspensiones,Leaf,Spring,Mexico,Muelles,Amortiguadores,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/frenos.html">
<link rel="alternate" hreflang="en-US" href="https://leafspringmexico.com/frenos.html">
<link rel="alternate" hreflang="en-MX" href="https://leafspringmexico.com/frenos.html">
<link rel="alternate" hreflang="es-MX" href="https://leafspringmexico.com/frenos.html">
<link rel="alternate" hreflang="x-default" href="https://leafspringmexico.com/frenos.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 rel="shortcut icon" href="img/logos/leaf-spring/ls-favicon-wht.svg" type="image/x-icon" />
</head>
<body class="flex flex-col w-full overflow-x-hidden antialiased bg-offWhite" tabindex="-1">
<!-- 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-verdeLeaf 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"><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"><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"><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"><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-zinc-100">
<div class="flex flex-row items-center justify-between flex-grow mx-auto align-middle laptop:justify-around">
<a href="index.html">
<img src="./img/logos/leaf-spring/ls-logo.svg" alt="logo leaf spring" class="h-16 pl-2 laptop:pl-0 laptop:h-24">
</a>
<!-- HAMBURGER MENU MOBILE -->
<div>
<!-- HAMBURGER MENU ICON -->
<div id="hamBtn" class="fixed flex flex-row p-2 text-4xl align-middle rounded-md cursor-pointer laptop:hidden right-3 top-6 bg-zinc-200">
<img onclick="Open(this)" src="img/icons/hamburger-md-svgrepo-com.svg" alt="hamburger menu" title="hamburger menu" class="h-6 duration-500 laptop:hidden">
</div>
<!-- MENU -->
<ul class="hidden laptop:flex-row laptop:gap-24 laptop:list-none laptop:flex">
<li class="items-center">
<a href="index.html" 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" 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-3 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" 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" 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 -->
<h1 class=" w-full py-3 text-xl font-semibold tracking-wide text-center uppercase bg-[#4C4C4C] text-offWhite h-30 font-roboto laptop:text-4xl laptop:py-6">
Sistemas de Frenos</h1>
<img src="./img/banner/leaf-spring-h-brakes.jpg" alt="banner principal muelles" class="object-cover w-full bg-black laptop:h-1/5 h-1/5 brightness-50">
<p class="p-6 text-xl font-normal text-center laptop:px-32 bg-neutral-200 drop-shadow-md laptop:pt-8 laptop:text-2xl font-oswald text-neutral-700 ">
Contamos con tambores de freno, zapatas y balatas. Como una línea adicional a la de suspensión, nos hemos dedicado a
brindarles a nuestros clientes componentes del sistema de frenos para tractocamión, autobús y remolques.</p>
<!-- FRENOS / MAIN -->
<section class="w-full h-auto bg-neutral-100">
<div class="grid grid-flow-row-dense grid-cols-1 gap-5 px-10 py-14 laptop:grid-cols-2 laptop:gap-10 laptop:py-20 laptop:px-32">
<!-- SECCIONES INTERNAS A SISTEMAS DE FRENOS -->
<!-- MODAL TAMBORES -->
<!-- Modal toggle -->
<button data-modal-target="defaultModalTambores" data-modal-toggle="defaultModalTambores" class="px-5 py-10 text-2xl font-medium text-center duration-500 rounded-lg text-offWhite hover:text-offWhite bg-verdeClaroLeaf hover:bg-verdeLeaf focus:ring-4 focus:outline-none focus:ring-blue-300 ipad:text-2xl font-roboto hover:drop-shadow-xl hover:-translate-y-1" type="button">Tambores</button>
<!-- Main modal -->
<div id="defaultModalTambores" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0">
<div class="relative w-full h-screen p-4 laptop:p-10">
<!-- Modal content -->
<div class="relative h-screen rounded-lg shadow bg-grisLeaf">
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t">
<h3 class="font-semibold laptop:text-3xl text-offWhite font-oswald">
Tambores
</h3>
<button type="button" class="text-offWhite bg-transparent hover:bg-red-400 hover:text-offWhite rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModalTambores">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Cerrar</span>
</button>
</div>
<!-- Modal body -->
<div class="w-full h-full p-10">
<object data="./assets/pdf/tamags/tamags-tambor.pdf" type="application/pdf" class="w-full h-full"></object>
</div>
</div>
</div>
</div>
<!-- FIN MODAL TAMBORES -->
<!-- MODAL ZAPATAS Y BALATAS -->
<!-- Modal toggle -->
<button data-modal-target="defaultModalZapatas" data-modal-toggle="defaultModalZapatas" class="px-5 py-10 text-2xl font-medium text-center duration-500 rounded-lg text-offWhite hover:text-offWhite bg-verdeClaroLeaf hover:bg-verdeLeaf focus:ring-4 focus:outline-none focus:ring-blue-300 ipad:text-2xl font-roboto hover:drop-shadow-xl hover:-translate-y-1" type="button">Zapatas y Balatas</button>
<!-- Main modal -->
<div id="defaultModalZapatas" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0">
<div class="relative w-full h-screen p-4 laptop:p-10">
<!-- Modal content -->
<div class="relative h-screen rounded-lg shadow bg-grisLeaf">
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t">
<h3 class="font-semibold laptop:text-3xl text-offWhite font-oswald">
Zapatas
</h3>
<button type="button" class="text-offWhite bg-transparent hover:bg-red-400 hover:text-offWhite rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModalZapatas">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="https://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Cerrar</span>
</button>
</div>
<!-- Modal body -->
<div class="w-full h-full p-10">
<object data="./assets/pdf/zapatas/zapatas-balatas-23.pdf" type="application/pdf" class="w-full h-full"></object>
</div>
</div>
</div>
</div>
<!-- FIN MODAL ZAPATAS Y BALATAS -->
</div>
</section>
<!-- MAPS / FOOTER -->
<div id="resume" class="items-center justify-center w-full h-0 align-middle text-offWhite font-roboto">
<!-- 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="#inicio">
<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" 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" 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" 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" 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" href="contacto.html">contacto</a></li>
</ul>
</div>
<div class="laptop:col-start-3 laptop:col-end-5">
<p class="pb-1 duration-500 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"><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"><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:leafspringmexico@gmail.com"><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>leafspringmexico@gmail.com</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://elbob-mx.github.io/website-webbygravy/" 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 w-28">
</div>
</a>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script src="js/actions.js"></script>
<script defer src="js/disallow.js"></script>
<script>AOS.init();</script>
<script src="js/actions.js"></script>
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
</body>
</html>