templates/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block vue_content %}
  4. <nav-Component></nav-Component>
  6. <div id="inicio" class="swiper logistics-swiper mySwiper">
  7.     <div class="swiper-wrapper">
  9.       <!-- Slide 1 -->
  10.       <div class="swiper-slide banner-slide">
  11.         <div class="banner-container">
  12.           <div class="left-side">
  13.             <img src="{{ asset('img/banner/logo-Empaques-Matamoros.svg') }}" alt="Empaques Matamoros" class="logo-img">
  14.             <div class="vertical-line"></div>
  15.             <div class="text-content">
  16.               <h2>SOLUCIONES DE<br>EMPAQUE</h2>
  17.             </div>
  18.             <div class="vertical-line bottom-line"></div>
  19.             <a href="#somos" style=" text-decoration: none;" class="arrow-link">
  20.                 <img src="{{ asset('img/banner/arrow-banner.svg') }}" alt="Empaques Matamoros" class="arrow-img">
  21.             </a>
  23.           </div>
  24.           <div class="right-side">
  25.             <img src="{{ asset('img/banner/banner-soluciones-empaques-01.png') }}" alt="Empaque de galletas" class="cookies-img">
  26.           </div>
  27.         </div>
  28.       </div>
  30.       <!-- Slide 2 
  31.       <div class="swiper-slide banner-slide">
  32.         <div class="banner-container">
  33.           <div class="left-side">
  34.             <img src="{{ asset('img/banner/logo-Empaques-Matamoros.svg') }}" alt="Empaques Matamoros" class="logo-img">
  35.             <div class="vertical-line"></div>
  36.             <div class="text-content">
  37.               <h2>SOLUCIONES DE<br>EMPAQUE</h2>
  38.             </div>
  39.             <div class="vertical-line bottom-line"></div>
  40.               <a href="#somos" style=" text-decoration: none;" class="arrow-link">
  41.                   <img src="{{ asset('img/banner/arrow-banner.svg') }}" alt="Empaques Matamoros" class="arrow-img">
  42.               </a>
  43.           </div>
  44.           <div class="right-side">
  45.             <img src="{{ asset('img/banner/banner-soluciones-empaques-01.png') }}" alt="Empaque innovador" class="cookies-img">
  46.           </div>
  47.         </div>
  48.       </div>-->
  50.     </div>
  52.     <div class="swiper-button-next"></div>
  53.     <div class="swiper-button-prev"></div>
  54.   </div>
  56. <section id="somos" class="somos-section">
  57.   <div class="somos-top">
  58.     <div class="somos-img">
  59.       <img src="{{ asset('img/somos/somos.png') }}" alt="Imagen de empresa">
  60.     </div>
  61.     <div class="somos-texto">
  62.       <h2>SOMOS</h2>
  63.       <p class="d-none d-md-block">
  64.         Una empresa mexicana de manufactura de empaques,<br> bolsas y sobres de papel transparente y celofán
  65.         enfocada<br> a dar soluciones a sus clientes cuidando la calidad y desempeño<br>  de nuestros materiales,
  66.         desarrollando empaques prácticos para<br>  la optimización de los productos.
  67.       </p>
  69.       <p class="d-block d-md-none">
  70.         Una empresa mexicana de manufactura de empaques, bolsas y sobres de papel transparente y celofán
  71.         enfocada a dar soluciones a sus clientes cuidando la calidad y desempeño de nuestros materiales,
  72.         desarrollando empaques prácticos para la optimización de los productos.
  73.       </p>
  74.     </div>
  75.   </div>
  77.   <div class="somos-bottom">
  78.     <div class="card mision">
  79.       <h3>MISIÓN</h3>
  80.       <p>
  81.         Fabricar productos de calidad bajo la mentalidad de trabajo en equipo, ofreciendo productos e
  82.         insumos que aportan soluciones a nuestros clientes.
  83.       </p>
  84.     </div>
  85.     <div class="card vision">
  86.       <h3>VISIÓN</h3>
  87.       <p>
  88.         Ser una empresa que genera valor como proveedor dentro de la industria manufacturera 
  89.         de papel celofan a nivel nacional que garantiza relaciones comerciales de satisfaccion total.
  90.       </p>
  91.     </div>
  92.   </div>
  93. </section>
  96. <section id="" class="valores-section">
  97.   <h2>VALORES</h2>
  98.   <div class="valores-grid">
  99.     <div class="valor-item">
  100.       <img src="{{ asset('img/somos/calidad.svg') }}" alt="Calidad">
  101.       <p>CALIDAD</p>
  102.     </div>
  103.     <div class="valor-item">
  104.       <img src="{{ asset('img/somos/confianza.svg') }}" alt="Confianza">
  105.       <p>CONFIANZA</p>
  106.     </div>
  107.     <div class="valor-item">
  108.       <img src="{{ asset('img/somos/honestidad.svg') }}" alt="Honestidad">
  109.       <p>HONESTIDAD</p>
  110.     </div>
  111.     <div class="valor-item">
  112.       <img src="{{ asset('img/somos/compromiso.svg') }}" alt="Compromiso">
  113.       <p>COMPROMISO</p>
  114.     </div>
  115.   </div>
  116. </section>
  120. <section class="servicios-section" id="servicios">
  121.   <div class="servicios-texto">
  122.     <div class="vertical-line2"></div>
  123.     <div class="bottom-line2"></div>
  124.     <div class="text-content2 text-start">
  125.       <h2>SERVICIOS</h2>
  126.     </div>
  128.     <div class="contenido">
  129.       <ul>
  130.         <li><strong>SERVICIO DE CORTE</strong>, película flexible en rollo para envasadora.</li>
  131.         <li><strong>MAQUILA DE CORTE</strong>, reducción de diámetro o cortes a medida.</li>
  132.         <li><strong>MAQUILA DE BOLSEO</strong>, para material transparente o de registro (aplican restricciones).</li>
  133.       </ul>
  135.       <p>Fabricamos medidas especiales en diferentes calibres <br>
  136.          <strong>30, 35, 40 y 50 micras.</strong>
  137.       </p>
  139.       <blockquote>
  140.         “Todos los materiales utilizados cumplen con la normatividad de calidad de FDA para empaque de alimentos”.
  141.       </blockquote>
  142.     </div>
  143.   </div>
  145.   <div class="servicios-imagen">
  146.     <img src="{{ asset('img/servicios/Servicios-Empaques-Matamoros.png') }}" alt="Película en rollo">
  147.   </div>
  148. </section>
  150. <section class="productos-carousel" id="productos">
  151.   <!-- Lado izquierdo -->
  152.   <div class="productos-left">
  153.     <div class="linea-vertical top"></div>
  154.     <h2 class="productos-title">PRODUCTOS</h2>
  155.     <div class="linea-vertical bottom"></div>
  157.     <div class="productos-info">
  158.       <h3>BOLSAS Y SOBRES DE PAPEL<br>TRANSPARENTE PARA EMPAQUE</h3>
  159.       <ul>
  160.         <li>En sello de fondo</li>
  161.         <li>Con fuelle</li>
  162.         <li>Sello lateral</li>
  163.         <li>Sobres con adhesivo</li>
  164.       </ul>
  165.     </div>
  167.     <div class="nav-buttons">
  168.       <div class="swiper-button-prev-productos">
  169.         <img src="{{ asset('img/productos/flecha-izq.svg') }}" alt="Flecha izquierda">
  170.       </div>
  171.       <div class="swiper-button-next-productos">
  172.         <img src="{{ asset('img/productos/flecha-der.svg') }}" alt="Flecha derecha">
  173.       </div>
  174.     </div>
  175.   </div>
  177.   <!-- Lado derecho (carrusel) -->
  178.   <div class="productos-right swiper productos-swiper">
  179.     <div class="swiper-wrapper">
  180.       <!-- Slide -->
  181.        <div class="swiper-slide">
  182.          <div class="producto-card">
  183.             <div  class="header">
  184.               <img src="{{ asset('img/productos/bolsa-celofan-plana.png') }}" alt="Bolsa celofán" class="prod-img" style="border-radius: 0 !important;">
  185.               <h3 class="producto-nombre">BOLSA DE PAPEL CELOFÁN<br>PLANA CON SELLO DE FONDO</h3>
  186.             </div>
  187.             <div class="producto-tabla">
  188.               <div class="tabla-header">MEDIDAS DE LÍNEA</div>
  189.               <div class="tabla-row tabla-head">
  190.                 <div>MEDIDA</div><div>MEDIDA</div><div>MEDIDA</div>
  191.               </div>
  192.               <div class="tabla-body">
  193.                 <div>5 x 10</div><div>10 x 18</div><div>20 x 30</div>
  194.                 <div>5 x 21</div><div>12 x 20</div><div>20 x 35</div>
  195.                 <div>6 x 12</div><div>13 x 33</div><div>20 x 45</div>
  196.                 <div>6 x 14</div><div>14 x 20</div><div>25 x 35</div>
  197.                 <div>7 x 14</div><div>15 x 30</div><div>25 x 40</div>
  198.                 <div>8 x 16</div><div>16 x 30</div><div>26 x 40</div>
  199.                 <div>9 x 15</div><div>18 x 25</div><div>18 x 30</div>
  200.                 <div> </div><div>18 x 30</div><div> </div>
  202.               </div>
  203.             </div>
  204.          </div>
  205.        </div>
  207.        <div class="swiper-slide">
  208.          <div class="producto-card">
  209.             <div  class="header">
  210.               <img src="{{ asset('img/productos/bolsa-celofan-fuelles.png') }}" alt="Bolsa celofán" class="prod-img" style="border-radius: 0 !important;">
  211.               <h3 class="producto-nombre">BOLSA DE PAPEL CELOFAN<br>CON FUELLES Y SELLO<br>DE FONDO</h3>
  212.             </div>
  213.             <div class="producto-tabla">
  214.               <div class="tabla-header">MEDIDAS DE LÍNEA</div>
  215.               <div class="tabla-row tabla-head">
  216.                 <div>MEDIDA</div>
  217.               </div>
  218.               <div class="tabla-body1">
  219.                 <div>100 GR</div><div>150 GR</div>
  220.                 <div>250 GR</div><div>500 GR</div>
  221.                 <div>1 KG</div><div>1.5 KG</div>
  222.                 <div>2 KG</div><div>3 KG</div>
  223.                 <div>4 KG</div>
  225.               </div>
  226.             </div>
  227.          </div>
  228.        </div>
  230.       <div class="swiper-slide">
  231.         <div class="producto-card">
  232.         <div  class="header">
  233.           <img src="{{ asset('img/productos/bolsa-celofan-sello-lateral.png') }}" alt="Bolsa celofán" class="prod-img" style="border-radius: 0 !important;">
  234.           <h3 class="producto-nombre">BOLSA DE CELOFAN<br>SELLO LATERAL</h3>
  235.         </div>
  236.           <div class="producto-tabla">
  237.             <div class="tabla-header">MEDIDAS DE LÍNEA</div>
  238.             <div class="tabla-row2 tabla-head">
  239.               <div>MEDIDA</div><div>MEDIDA</div>
  240.             </div>
  241.             <div class="tabla-body2">
  242.               <div>5 x 20</div><div>8 x 26</div>
  243.               <div>8 x 20</div><div>6 x 30</div>
  244.               <div>10 x 20</div><div>8 x 30</div>
  245.               <div>12 x 20</div><div>10 x 30</div>
  246.               <div>15 x 20</div><div>20 x 30</div>
  247.               <div>5 x 26</div><div>20 x 35</div>
  248.               <div>6 x 26</div><div>22 x 50</div>
  249.               <div>7 x 26</div><div>35 x 50</div>
  250.               <div> </div><div> </div>
  251.               <div> </div><div> </div>
  252.               <div> </div><div> </div>
  254.             </div>
  255.           </div>
  256.         </div>
  257.       </div>
  260.       <div class="swiper-slide">
  261.         <div class="producto-card">
  262.         <div  class="header">
  263.           <img src="{{ asset('img/productos/bolsa-sobre.png') }}" alt="Bolsa celofán" class="prod-img" style="border-radius: 0 !important;">
  264.           <h3 class="producto-nombre">BOLSA TIPO SOBRE<br>CON ADHESIVO</h3>
  265.         </div>
  266.           <div class="producto-tabla">
  267.             <div class="tabla-header">MEDIDAS DE LÍNEA</div>
  268.             <div class="tabla-row2 tabla-head">
  269.               <div>MEDIDA</div><div>MEDIDA</div>
  270.             </div>
  271.             <div class="tabla-body2">
  272.               <div>5 x 10 +3</div><div>15 X 15 + 3</div>
  273.               <div>7 x 10 +3</div><div>17 x 23 +3</div>
  274.               <div>8 x 10 +3</div><div>12 X 18 +3</div>
  275.               <div>10 x 12 +3</div><div>7 x 25 +3</div>
  276.               <div>12 x 12 +3</div><div>8 X 25 + 3</div>
  277.               <div>13 x 13 +3</div><div>10 X 30 +5</div>
  278.               <div>10 x 15 +3</div><div> </div>
  279.               <div>12 x 15 +3</div><div> </div>
  280.               <div> </div><div> </div>
  281.               <div> </div><div> </div>
  282.               <div> </div><div> </div>
  284.             </div>
  285.           </div>
  286.         </div>
  287.       </div>
  289.     </div>
  290.   </div>
  291. </section>
  294. <section class="contacto-section" id="contacto">
  295.   <div class="contacto-container">
  296.     <!-- FORMULARIO -->
  297.     <div class="formulario">
  298.       <h2 class="titulo">CONTACTO</h2>
  299.       <p class="subtitulo">Envía tus comentarios y con gusto<br>nos pondremos en contacto</p>
  300.          <form id="contactForm">
  301.             <input type="hidden" name="_token" value="{{ csrf_token }}">
  302.             <input type="text" name="nombre" placeholder="Nombre completo*" required>
  303.             <input type="email" name="email" placeholder="Email*" required>
  304.             <input type="text" name="phone" placeholder="Móvil*" required>
  305.             <textarea name="comments" placeholder="Comentarios"></textarea>
  307.             <div class="form-footer">
  308.                 <p class="obligatorio">* Campos obligatorios</p>
  309.                 <button type="submit">
  310.                     ENVIAR
  311.                     <img src="img/productos/arrow-img.svg" alt="Flecha" class="flecha-img">
  312.                 </button>
  313.             </div>
  314.          </form>
  316.         <div id="mensaje"></div>
  318.     </div>
  320.     <div class="info-contacto">
  321.       <div class="item">
  322.         <img src="{{ asset('img/productos/ubicacion-contact.svg') }}" alt="Ubicación">
  323.         <div>
  324.           <strong>SUCURSAL</strong>
  325.           <p>Ecatepec Estado de México, C.P. 55130</p>
  326.         </div>
  327.       </div>
  328.       <div class="item">
  329.         <img src="{{ asset('img/productos/tel-contact.svg') }}" alt="Tel">
  330.         <div>
  331.           <strong>TEL</strong>
  332.           <a href="tel:5547984206">554798.4206</a>
  333.         </div>
  334.       </div>
  335.       <div class="item">
  336.         <img src="{{ asset('img/productos/reloj-contact.svg') }}" alt="Horario">
  337.         <div>
  338.           <strong>HORARIO DE ATENCIÓN</strong>
  339.           <p>Lunes a Viernes 9:00 AM a 5:00 PM<br>Sábado 9:00 AM a 1:00 PM</p>
  340.         </div>
  341.       </div>
  342.       <div class="social-icons">
  343.         <a href="mailto:violeta.matamoros@gmail.com" target="_blank"><img src="{{ asset('img/social/mail.svg') }}" alt="Email"></a>
  344.         <a href="https://www.facebook.com/violeta.matamoroszuniga" target="_blank"><img src="{{ asset('img/social/facebook.svg') }}" alt="Facebook"></a>
  345.         <a href="https://www.instagram.com/violetamatamoroszuniga/" target="_blank"><img src="{{ asset('img/social/instagram.svg') }}" alt="Instagram"></a>
  346.         <a href="https://wa.me/525541776072?text=Me%20gustaría%20obtener%20más%20información" target="_blank" rel="noopener">
  347.           <img src="{{ asset('img/social/whatsapp.svg') }}" alt="WhatsApp">
  348.         </a>
  349.       </div>
  350.       <hr class="linea-separadora">
  351.       <div class="aviso">
  352.         <img src="{{ asset('img/social/privacidad.svg') }}" alt="Aviso">
  353.         <a href="{{ asset('avisodeprivacidad.pdf') }}" download="AvisoDePrivacidad.pdf">Aviso de privacidad</a>
  354.       </div>
  355.     </div>
  356.   </div>
  357. </section>
  362. <footer class="footer">
  363.   <div class="footer-inner">
  364.     <div class="footer-left">
  365.       © Todos los derechos reservados EMPAQUES MATAMOROS
  366.     </div>
  368.     <div class="footer-center">
  369.       <a href="#"><img src="{{ asset('img/social/arrow-footer.svg') }}" alt="Subir" class="footer-arrow"></a>
  370.     </div>
  372.     <div class="footer-right">
  373.       <a href="https://www.zipvisual.com/es" target="_blank">Developed by<img src="{{ asset('img/social/zip-logo.svg') }}"  alt="ZIP" class="footer-logo"></a>
  374.     </div>
  375.   </div>
  376. </footer>
  378. {% endblock %}