templates/index/basico.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  2. {% block servicio %}
  4. <header class="header-box fixed-header">
  5. <div class="container">
  6. <div class="row">
  7. <div class="col-12">
  8. <div class="navbar-brand logo-box" href="/" id="logo">
  9. <img src="/images/logo-belios.svg" alt="Logo Belios" height="60">
  10. </div>
  11. <ul class="navbar-nav">
  12. <li class="tlf">
  13. <a href="tel:{{ phone|replace({' ':''}) }}" class="telefono-enlace gtm_phone">
  14. <img class="icon-tlf-blanco" src="/images/icon-tlf-white.svg" alt="Teléfono">
  15. <span>{{ phone }}</span>
  16. </a>
  17. </li>
  18. <li class="nav-item">
  19. <a class="boton" href="#contacto">Contacta</a>
  20. </li>
  21. </ul>
  22. </div>
  23. </div>
  24. </div>
  25. <!--<a href="https://wa.me/34689274038" class="whatsapp-float" target="_blank" aria-label="Habla con nosotros por WhatsApp">-->
  26. <a href="https://wa.me/34603693683?text=Hola%2C+he+visto+su+servicio+de+pantallas+ac%C3%BAsticas+y+quiero+m%C3%A1s+informaci%C3%B3n."
  27. class="whatsapp-float"
  28. aria-label="Habla con nosotros por WhatsApp"
  29. target="_blank">
  30. <i class="fab fa-whatsapp"></i>
  31. </a>
  32. </header>
  34. <section class="section-hero">
  35. <div class="container">
  36. <div class="row">
  37. <div class="col-12 content-wrapper text-center">
  38. <h1>Especialistas en <span class="azul">Pantallas acústicas</span> en {{service.name}}</h1>
  39. <p class="post-titulo p-mediciones">Estudiamos, diseñamos y ejecutamos cualquier tipología de barrera acústica con paneles sandwich metálicos, de hormigón, metacrilato o mixtas.</p>
  40. </div>
  41. </div>
  42. <div class="row justify-content-center">
  43. <div class="puntos-clave justify-content-center">
  44. <div class="col-md-4 d-flex flex-column align-items-center">
  45. <img src="/images/icon-mediciones-2.svg" alt="estudios" class="img-fluid">
  46. <p class="text-center">Máquinas e Instalaciones en Edificación</p>
  47. </div>
  48. <div class="col-md-4 d-flex flex-column align-items-center">
  49. <img src="/images/carretera.svg" alt="planeamiento" class="img-fluid">
  50. <p class="text-center">Infraestructuras: Carreteras y Ferrocarril</p>
  51. </div>
  52. <div class="col-md-4 d-flex flex-column align-items-center">
  53. <img src="/images/icon-mediciones.svg" alt="acondicionamiento" class="img-fluid">
  54. <p class="text-center">Entornos Industriales</p>
  55. </div>
  56. </div>
  57. <a href="#contacto" class="btn">Solicita tu presupuesto</a>
  58. </div>
  59. </div>
  60. </section>
  62. <section class="beneficios">
  63. <div class="container">
  64. <div class="row">
  65. <div class="col-6 col-md-3"><p>Transparencia y profesionalidad</p></div>
  66. <div class="col-6 col-md-3"><p>Fabricación a medida</p></div>
  67. <div class="col-6 col-md-3"><p>Más de 60 proyectos de obra de control de ruido al año</p></div>
  68. <div class="col-6 col-md-3"><p>Asesoramiento personalizado</p></div>
  69. </div>
  70. </div>
  71. </section>
  73. <!-- BLOQUE 1: Cubiertas -->
  74. <section class="img-texto primera-ocupacion">
  75. <div class="container">
  76. <div class="row justify-content-start">
  77. <div class="col-lg-6 contenido">
  78. <h2>Evita y soluciona problemas acústicos en cubiertas de edificios</h2>
  79. <p>Evaluamos el comportamiento acústico de instalaciones ruidosas de climatización (enfriadoras, VRV, compresores), unidades de tratamiento de aire, ventilación, grupos electrógenos, etc. y diseñamos soluciones a medida.</p>
  80. <span class="check-icon"><i class="fas fa-check"></i> Comprobamos cumplimiento normativo de niveles de ruido</span>
  81. <span class="check-icon"><i class="fas fa-check"></i> Elude sanciones o informes desfavorables</span>
  82. <a href="#contacto" class="btn mt-4">Solicita tu estudio o presupuesto</a>
  83. </div>
  84. <div class="col-lg-6 img">
  85. <img src="/images/imagen1.png" alt="Pantallas acústicas en cubiertas" class="img-fluid redonda">
  86. </div>
  87. </div>
  88. </div>
  89. </section>
  92. <!-- BLOQUE 3: Industria -->
  93. <section class="img-texto medicion-acustica">
  94. <div class="container">
  95. <div class="row justify-content-end">
  96. <div class="col-lg-6 img">
  97. <img src="/images/imagen2.png" alt="Pantallas acústicas en industria" class="img-fluid redonda">
  98. </div>
  99. <div class="col-lg-6 align-items-end contenido">
  100. <h2 class="text-end">Control y reducción de ruido en industria y fabricación</h2>
  101. <p class="text-end">Desarrollamos proyectos de soluciones acústicas para reducir el ruido de turbinas, ruido de calderas, ruidos de torres de refrigeración, ruidos de hornos, ruidos de molinos, ruidos de válvulas, ruidos de motores, ruidos de ventiladores, ruidos de transformadores, ruidos de compresores, etc.</p>
  102. <span class="check-icon"><i class="fas fa-check"></i> Consultoría y supervisión técnica durante el proceso</span>
  103. <span class="check-icon"><i class="fas fa-check"></i> Exterior de plantas industriales e interior de fábricas</span>
  104. <a href="#contacto" class="btn mt-4">Solicita un presupuesto personalizado</a>
  105. </div>
  106. </div>
  107. </div>
  108. </section>
  110. <!-- BLOQUE 2: Planeamiento -->
  111. <section class="img-texto primera-ocupacion">
  112. <div class="container">
  113. <div class="row justify-content-start">
  114. <div class="col-lg-6 contenido">
  115. <h2>Protege tu planeamiento o proyecto desde la fase previa</h2>
  116. <p>Desarrollamos estudios acústicos para proyectos urbanísticos y grandes trazados. Definimos y ejecutamos medidas correctoras antes de que el ruido se convierta en un problema legal, medioambiental o vecinal.</p>
  117. <span class="check-icon"><i class="fas fa-check"></i> Menos contaminación acústica</span>
  118. <span class="check-icon"><i class="fas fa-check"></i> Soluciones técnicas con impacto real</span>
  119. <span class="check-icon"><i class="fas fa-check"></i> Anticípate a los requisitos</span>
  120. <a href="#contacto" class="btn mt-4">Solicita tu presupuesto</a>
  121. </div>
  122. <div class="col-lg-6 img">
  123. <img src="/images/imagen3.png" alt="Planeamiento y trazados" class="img-fluid redonda">
  124. </div>
  125. </div>
  126. </div>
  127. </section>
  130. <section class="como-trabajamos">
  131. <div class="container">
  132. <div class="row">
  133. <div class="col-12 text-center">
  134. <h3>¿Cómo trabajamos?</h3>
  135. </div>
  136. </div>
  137. <div class="row">
  138. <div class="col-md-4">
  139. <div class="card">
  140. <span>1</span>
  141. <div>
  142. <h4>Cuéntanos tu necesidad</h4>
  143. <p>Definimos exactamente qué necesitas según tu caso.</p>
  144. </div>
  145. </div>
  146. </div>
  147. <div class="col-md-4">
  148. <div class="card">
  149. <span>2</span>
  150. <div>
  151. <h4>Estudio y diseño de pantalla</h4>
  152. <p>Con software de predicción acústica</p>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="col-md-4">
  157. <div class="card">
  158. <span>3</span>
  159. <div>
  160. <h4>Presupuesto de Ejecución</h4>
  161. <p>Con partidas definidas e indicación de plazos, sin retrasos ni sorpresas</p>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </section>
  169. <section class="section-block" id="contacto">
  170. <div class="container">
  171. <div class="row">
  172. <div class="col-md-5">
  173. <h4>Envíanos tu consulta</h4>
  174. <p class="section-subtitle">Si quieres saber más sobre nuestros servicios, contáctanos. Te atenderemos por WhatsApp, teléfono o email.</p>
  175. <div class="iconos-contacto">
  176. <div class="box-icono">
  177. <img src="/images/icon-tlf.svg" alt="" width="45" height="45">
  178. <div class="contenido-icono">
  179. <a href="tel:{{ phone|replace({' ':''}) }}" class="telefono-enlace gtm_phone">{{ phone }}</a>
  180. <small>teléfono</small>
  181. </div>
  182. </div>
  183. <div class="box-icono">
  184. <img src="/images/icon-time.svg" alt="" width="45" height="45">
  185. <div class="contenido-icono">
  186. <span>L a V de 8:30 a 14:00h y de 15:30 a 18:00 h</span>
  187. <small>horario de atención al cliente</small>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. <div class="col-md-7 col-lg-6 offsetlg-1 form_box">
  193. {% include 'front/parts/forms/contact_form.html.twig' %}
  194. </div>
  195. </div>
  196. </div>
  197. </section>
  199. <footer class="footer">
  200. <section class="container">
  201. <div class="row align-items-center">
  202. <div class="col-md-6 first-col-footer">
  203. <ul class="footer-list d-flex">
  204. <li>
  205. <!-- Botón para lanzar la página legal en un modal -->
  206. <button type="button" class="link" data-bs-toggle="modal" data-bs-target="#aviso-legal">
  207. Aviso legal
  208. </button>
  209. </li>
  210. <li>
  211. <!-- Botón para lanzar la página COOKIE en un modal -->
  212. <button type="button" class="link" data-bs-toggle="modal" data-bs-target="#politica-cookies">
  213. Política de cookies
  214. </button>
  215. </li>
  216. <li>
  217. <!-- Botón para lanzar la página legal en un modal -->
  218. <button type="button" class="link" data-bs-toggle="modal" data-bs-target="#politica-privacidad">
  219. Política de privacidad
  220. </button>
  221. </li>
  222. </ul>
  224. <!-- Modal para /aviso-legal -->
  225. <div class="modal fade" id="aviso-legal" tabindex="-1" aria-hidden="true" aria-labelledby="aviso-legal"
  226. aria-hidden="true">
  227. <div class="modal-dialog modal-dialog-centered" role="document">
  228. <div class="modal-content">
  229. <div class="modal-header">
  230. <h5 class="modal-title" id="ModalLongTitle">Aviso legal</h5>
  231. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
  232. </div>
  233. <!--Body-->
  234. <div class="modal-body mb-0 p-0">
  236. <!--Iframe que carga la página, hay que cambiar la dirección src-->
  237. <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
  238. <iframe class="embed-responsive-item" src="/aviso-legal"></iframe>
  239. </div>
  241. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <!-- FIN modal para /aviso-legal -->
  248. <!-- Modal para /politica-privacidad -->
  249. <div class="modal fade" id="politica-cookies" tabindex="-1" role="dialog" aria-labelledby="politica-cookies"
  250. aria-hidden="true">
  251. <div class="modal-dialog modal-dialog-centered" role="document">
  252. <div class="modal-content">
  253. <div class="modal-header">
  254. <h5 class="modal-title" id="ModalLongTitle">Política de cookies</h5>
  255. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
  256. </div>
  257. <!--Body-->
  258. <div class="modal-body mb-0 p-0">
  260. <!--Iframe que carga la página, hay que cambiar la dirección src-->
  261. <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
  262. <iframe class="embed-responsive-item" src="/politica-cookies"></iframe>
  263. </div>
  265. </div>
  267. </div>
  268. </div>
  269. </div>
  271. <!-- Modal para /politica-privacidad -->
  272. <div class="modal fade" id="politica-privacidad" tabindex="-1" role="dialog"
  273. aria-labelledby="politica-privacidad" aria-hidden="true">
  274. <div class="modal-dialog modal-dialog-centered" role="document">
  275. <div class="modal-content">
  276. <div class="modal-header">
  277. <h5 class="modal-title" id="ModalLongTitle">Política de privacidad</h5>
  278. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
  279. </div>
  280. <!--Body-->
  281. <div class="modal-body mb-0 p-0">
  283. <!--Iframe que carga la página, hay que cambiar la dirección src-->
  284. <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
  285. <iframe class="embed-responsive-item" src="/politica-privacidad"></iframe>
  286. </div>
  288. </div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. <div class="col-md-6 second-col-footer text-end">
  295. <a class="firma-idento" title="Idento - Agencia Marketing Online y Desarrollo web" href="https://www.idento.es"
  296. target="_blank"></a>
  298. </div>
  299. </div>
  300. </section>
  301. </footer>
  303. {% endblock %}