templates/static-pages/about_us.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Quiénes somos{% endblock %}
  5. {% block body %}
  6. {% include 'components/header/categories.html.twig' %}
  7. <main>
  8.     <div class="relative flex flex-col bg-primary pt-32">
  10.         <img src="{{ asset('build/images/quienes_somos/bg.png') }}" class="absolute top-0 left-0 z-10 w-full opacity-20">
  12.         <section class="relative z-20 w-full px-8 py-10 desktop:py-0">
  13.             <div class="flex flex-col gap-3 m-auto max-w-7xl desktop:flex-row desktop:items-center desktop:min-h-[75vh]">
  14.                 <div class="flex flex-col items-start gap-2 text-white desktop:w-3/6 desktop:pr-10 desktop:gap-6">
  15.                     <span class="px-2 py-1 text-lg text-center uppercase rounded-md desktop:text-left desktop:text-xl bg-gradient-to-r from-alternative-red to-alternative-orange">La primera web de compra en grupo</span>
  16.                     <h1 class="text-4xl font-bold text-center desktop:text-left desktop:text-6xl">Para los amantes de la alimentación saludable y los productos de proximidad</h1>
  17.                     <p class="text-xl text-center desktop:text-left desktop:text-2xl">Para ti que disfrutas descubriendo nuevos sabores y productos y valoras el buen hacer.</p>
  18.                 </div>
  19.                 <figure class="desktop:absolute desktop:right-0 desktop:top-0 m-auto max-w-[50vw]">
  20.                     <img src="{{ asset('build/images/quienes_somos/quienes-somos-main.png') }}" class="hidden desktop:block"/>
  21.                     <img src="{{ asset('build/images/quienes_somos/quienes-somos-main-mobile.png') }}" class="desktop:hidden"/>
  22.                 </figure>
  23.             </div>
  24.         </section>
  26.         <section class="relative z-20 w-full gap-5 px-8 py-10 overflow-hidden desktop:pt-0 tablet:pb-40">
  27.             <div class="flex flex-col gap-3 m-auto max-w-7xl tablet:gap-20 desktop:items-center">
  28.                 <img src="{{ asset('build/images/quienes_somos/white-border-bottom.svg') }}" class="absolute bottom-0 left-0 z-10 w-full"/>
  29.                 <img src="{{ asset('build/images/quienes_somos/productos.svg') }}" class="absolute bottom-0 left-0 w-full"/>
  30.                 <div class="relative z-10 flex flex-col gap-2 text-white desktop:max-w-3xl desktop:mx-auto desktop:gap-4">
  31.                     <span class="text-lg text-center desktop:text-2xl">¿Qué te ofrece Triwu_u?</span>
  32.                     <h2 class="text-4xl font-bold text-center desktop:text-6xl">Calidad y Tradición en más de 100 productores</h2>
  33.                     <p class="text-xl text-center desktop:text-2xl">En Triwu_u, nos esforzamos por mantenerte al día con las últimas novedades de todas nuestras categorías. Navega, explora y déjate sorprender por la frescura y variedad que ofrecemos diariamente.</p>
  34.                 </div>
  35.                 <div class="relative z-10 grid grid-cols-3 gap-3 tablet:grid-cols-6 desktop:gap-6">
  36.                     <a href="/product/#cat-18" class="flex flex-col items-center gap-2">
  37.                         <figure class="w-[60%]">
  38.                             <img src="{{ asset('build/images/quienes_somos/icon-frescos.svg') }}" />
  39.                         </figure>
  40.                         <span class="text-xl font-bold text-center text-white">Frescos</span>
  41.                     </a>
  42.                     <a href="/product/#cat-1" class="flex flex-col items-center gap-2">
  43.                         <figure class="w-[60%]">
  44.                             <img src="{{ asset('build/images/quienes_somos/icon-despensa.svg') }}" />
  45.                         </figure>
  46.                         <span class="text-xl font-bold text-center text-white">Despensa</span>
  47.                     </a>
  48.                     <a href="/product/#cat-14" class="flex flex-col items-center gap-2">
  49.                         <figure class="w-[60%]">
  50.                             <img src="{{ asset('build/images/quienes_somos/icon-bebidas.svg') }}" />
  51.                         </figure>
  52.                         <span class="text-xl font-bold text-center text-white">Bebidas</span>
  53.                     </a>
  54.                     <a href="/product/#cat-21" class="flex flex-col items-center gap-2">
  55.                         <figure class="w-[60%]">
  56.                             <img src="{{ asset('build/images/quienes_somos/icon-originales.svg') }}" />
  57.                         </figure>
  58.                         <span class="text-xl font-bold text-center text-white">Originales</span>
  59.                     </a>
  60.                     <a href="/product/#cat-19" class="flex flex-col items-center gap-2">
  61.                         <figure class="w-[60%]">
  62.                             <img src="{{ asset('build/images/quienes_somos/icon-utiles.svg') }}" />
  63.                         </figure>
  64.                         <span class="text-xl font-bold text-center text-white">Útiles</span>
  65.                     </a>
  66.                     <a href="/product/#cat-20" class="flex flex-col items-center gap-2">
  67.                         <figure class="w-[60%]">
  68.                             <img src="{{ asset('build/images/quienes_somos/icon-menaje.svg') }}" />
  69.                         </figure>
  70.                         <span class="text-xl font-bold text-center text-white">Menaje</span>
  71.                     </a>
  72.                 </div>
  73.                 <div class="relative z-10 grid items-center grid-cols-3 gap-3 p-3 bg-white rounded-md desktop:flex tablet:grid-cols-6 tablet:gap-6">
  74.                     <img src="{{ asset('build/images/quienes_somos/biozaki.png') }}"/>
  75.                     <img src="{{ asset('build/images/quienes_somos/espinaler.png') }}"/>
  76.                     <img src="{{ asset('build/images/quienes_somos/kaiku-begetal.png') }}"/>
  77.                     <img src="{{ asset('build/images/quienes_somos/la-quince.png') }}"/>
  78.                     <img src="{{ asset('build/images/quienes_somos/campos.png') }}"/>
  79.                     <img src="{{ asset('build/images/quienes_somos/km0.png') }}"/>
  80.                 </div>
  81.             </div>
  82.         </section>
  84.         <section class="relative z-20 flex flex-col w-full gap-8 px-8 py-10 bg-white desktop:py-20">
  85.             <img src="{{ asset('build/images/quienes_somos/buble-right.svg') }}" class="absolute right-0 w-[50%] top-[10%] desktop:w-[500px] desktop:top-[5%]">
  86.             <img src="{{ asset('build/images/quienes_somos/buble-left.svg') }}" class="absolute left-0 w-[50%] bottom-[10%] desktop:w-[500px] desktop:bottom-[2%]">
  87.             <div class="flex flex-col gap-6 m-auto max-w-7xl tablet:gap-20 desktop:items-center">
  88.                 <div class="relative z-10 flex flex-col gap-2 desktop:max-w-3xl desktop:mx-auto desktop:gap-4">
  89.                     <span class="text-lg text-center desktop:text-2xl">Por qué elegirnos</span>
  90.                     <h2 class="text-4xl font-bold text-center desktop:text-7xl">¿Por qué Triwu_u?</h2>
  91.                 </div>
  92.                 <div class="relative z-10 flex flex-col-reverse items-center gap-4 desktop:gap-32 desktop:flex-row desktop:items-center">
  93.                     <div class="flex flex-col gap-2 desktop:flex-1 desktop:gap-4">
  94.                         <h2 class="text-3xl font-bold text-center desktop:text-6xl desktop:text-left">Ahorra <span class="text-primary">hasta un 60%</span> en alimentación de calidad.</h2>
  95.                         <p class="text-xl text-center text-shadow-600 desktop:text-2xl desktop:text-left desktop:leading-loose">Al unirte a la modalidad de compra en grupo, no solo te beneficias de los mejores precios en tus productos favoritos, sino que también tienes la oportunidad de descubrir nuevos sabores.Además, compartir direcciones y compras te permite ganar dinero. Es una forma innovadora de comprar, donde la unión hace la oferta y el ahorro.</p>
  96.                     </div>
  97.                     <figure class="w-[60%] desktop:w-auto relative">
  98.                         <img src="{{ asset('build/images/quienes_somos/ahorra-alimentacion.png') }}" class="desktop:w-[80%]"/>
  99.                     </figure>
  100.                 </div>
  101.                 <div class="relative z-10 flex flex-col-reverse items-center gap-4 desktop:gap-32 desktop:items-center desktop:flex-row-reverse">
  102.                     <div class="flex flex-col gap-2 desktop:flex-1 desktop:gap-4">
  103.                         <h2 class="text-3xl font-bold text-center desktop:text-6xl desktop:text-left"><span class="text-primary">Beneficios Exclusivos</span> de la Comunidad Triwu_u</h2>
  104.                         <p class="text-xl text-center text-shadow-600 desktop:text-2xl desktop:text-left desktop:leading-loose">También tienes posibilidad de una compra individual para conseguir tu producto favorito en otros formatos, con un descuento menor que en colectivo pero también con un menor tiempo de entrega.</p>
  105.                     </div>
  106.                     <figure class="w-[60%] desktop:w-auto">
  107.                         <img src="{{ asset('build/images/quienes_somos/beneficios-exclusivos.png') }}" class="desktop:w-[80%]"/>
  108.                     </figure>
  109.                 </div>
  110.             </div>
  111.         </section>
  113.         <section class="relative z-20 w-full px-8 py-10 bg-primary tablet:py-40">
  114.             <div class="flex flex-col gap-3 m-auto max-w-7xl desktop:gap-20 desktop:items-center">
  115.                 <img src="{{ asset('build/images/quienes_somos/white-border-top.svg') }}" class="absolute top-0 left-0 w-full"/>
  116.                 <div class="flex flex-col gap-2 text-white">
  117.                     <span class="text-lg text-center desktop:text-2xl">¿Qué te aporta Triwu_u?</span>
  118.                     <h2 class="text-4xl font-bold text-center desktop:text-7xl">Cosas que debes conocer</h2>
  119.                 </div>
  120.                 <div class="grid gap-8 tablet:grid-cols-3">
  121.                     <a href="" class="relative flex flex-col items-center gap-2">
  122.                         <img src="{{ asset('build/images/quienes_somos/buble-icon-box.svg') }}" class="w-[70%] absolute left-0 right-0 m-auto -translate-y-1/2 top-1/2"/>
  123.                         <figure class="w-[60%] flex justify-center relative z-10">
  124.                             <img src="{{ asset('build/images/quienes_somos/icon-comparte.svg') }}" />
  125.                         </figure>
  126.                         <h3 class="z-10 text-2xl font-bold text-center text-white">Comparte,ahorra y gana dinero</h3>
  127.                         <p class="relative z-10 text-base text-center text-white">Comparte tu enlace y consigue que otras personas se unan para ahorrar más y ganar dinero.</p>
  128.                     </a>
  129.                     <a href="" class="relative flex flex-col items-center gap-2">
  130.                         <img src="{{ asset('build/images/quienes_somos/buble-icon-box.svg') }}" class="w-[70%] absolute left-0 right-0 m-auto -translate-y-1/2 top-1/2"/>
  131.                         <figure class="w-[60%] flex justify-center relative z-10">
  132.                             <img src="{{ asset('build/images/quienes_somos/icon-envios-compartidos.svg') }}" />
  133.                         </figure>
  134.                         <h3 class="z-10 text-2xl font-bold text-center text-white">Envíos Compartidos</h3>
  135.                         <p class="relative z-10 text-base text-center text-white">Con triwu_u puedes compartir dirección con tus amigos para que tu pedido llegue a su casa o vicerversa y ahorrar aún más con los gastos de envío.</p>
  136.                     </a>
  137.                     <a href="" class="relative flex flex-col items-center gap-2">
  138.                         <img src="{{ asset('build/images/quienes_somos/buble-icon-box.svg') }}" class="w-[70%] absolute left-0 right-0 m-auto -translate-y-1/2 top-1/2"/>
  139.                         <figure class="w-[60%] flex justify-center relative z-10">
  140.                             <img src="{{ asset('build/images/quienes_somos/icon-beneficios-grupales.svg') }}" />
  141.                         </figure>
  142.                         <h3 class="z-10 text-2xl font-bold text-center text-white">Beneficios Grupales, Elección Individual</h3>
  143.                         <p class="relative z-10 text-base text-center text-white">En triwu_u te beneficias del grupo pero compras individualmente, por eso, puedes acceder a formatos más pequeños que en la compra individual.</p>
  144.                     </a>
  145.                 </div>
  146.             </div>
  147.         </section>
  148.         
  149.     </div>
  150. </main>
  151. {% endblock %}