templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% use "shared/media_partners.html.twig" %}
  4. {% use "shared/schedule_content.html.twig" %}
  6. {% block head %}
  7.     <link rel="stylesheet" href="{{ asset('assetsv2/css/card.min.css') }}">
  8.     <link rel="stylesheet" href="{{ asset('assetsv2/css/scroll.min.css') }}">
  9.     <link rel="stylesheet" href="{{ asset('assetsv2/css/homepage.min.css') }}">
  10.     <link rel="stylesheet" href="{{ asset('assetsv2/css/homeicons.min.css') }}">
  11.     <link rel="stylesheet" href="{{ asset('assetsv2/js/bxslider/jquery.bxslider.min.css') }}" media="none" onload="if(media!='all')media='all'">
  12.     <noscript><link rel="stylesheet" href="{{ asset('assetsv2/js/bxslider/jquery.bxslider.min.css') }}"></noscript>
  13.     {{ block('mediapartners_assets') }}
  14.     {{ block('schedule_assets') }}
  15. {% endblock %}
  17. {% block scripts_body %}
  18.     <script src="{{ asset('assetsv2/js/bxslider/jquery.bxslider.min.js') }}"></script>
  19.     <script src="{{ asset('assetsv2/js/jquery.lazyload.min.js') }}"></script>
  20.     <script>
  21.         $(document).ready(function(){
  22.             lazyload();
  23.             /*$('#main-slider').bxSlider({
  24.                 speed: 0,
  25.                 prevText: '<span aria-hidden="true" class="carousel-control-prev-icon"></span>',
  26.                 nextText: '<span aria-hidden="true" class="carousel-control-next-icon"></span>'
  27.             });*/
  28.             var projectSlider = $('#project-slider').bxSlider({
  29.                 speed: 0,
  30.                 controls: false,
  31.                 pager: false,
  32.                 onSlideAfter: function($slideElement, oldIndex, newIndex) {
  33.                     var title = $slideElement.find('img').attr('data-name');
  34.                     var purl = $slideElement.find('img').attr('data-url');
  35.                     $('.home-projects .project-name').html('<a href="' + purl + '" title="' + title + '">' + title + '</a>');
  36.                 }
  37.             });
  38.             $('.project-left').click(function(){
  39.                projectSlider.goToPrevSlide();
  40.             });
  41.             $('.project-right').click(function(){
  42.                 projectSlider.goToNextSlide();
  43.             });
  44.             menuOpaque();
  45.             $(window).scroll(function(){
  46.                 menuOpaque();
  47.             });
  48.         });
  49.         function menuOpaque(){
  50.             if($(window).scrollTop() == 0){
  51.                 //$('.navbar.white-bg').css('background-color','rgba(255, 255, 255, 0.7)');
  52.                 $('.navbar-brand.d-none').removeClass('tiny');
  53.             }else{
  54.                 //$('.navbar.white-bg').css('background-color','rgba(255, 255, 255, 1)');
  55.                 $('.navbar-brand.d-none').addClass('tiny');
  56.             }
  57.         }
  58.     </script>
  59.     {{ block('schedule_scripts') }}
  60. {% endblock %}
  62. {% block body %}
  63. <div class="homepage">
  64.     {#<div class="header">
  65.         <div class="mask"></div>
  66.         <h1>
  67.             Tectónica
  68.             <span class="header-subtitle">Conocimiento que construye y transforma</span>
  69.         </h1>
  70.         <div id="main-slider" class="carousel slide">
  71.             {% for image in images %}
  72.                 <div class="carousel-slide">
  73.                     <picture>
  74.                         <source srcset="{{image.src}}" type="image/webp" media="(min-width: 1px)">
  75.                         <img src="{{image.src_fallback}}" alt="" class="img-slide">
  76.                     </picture>
  77.                     <div class="carousel-caption"><p>{{image.copy}}</p></div>
  78.                 </div>
  79.             {% endfor %}
  80.         </div>
  81.     </div>
  82.     <div class="container">
  83.         <div class="row d-flex justify-content-center">
  84.             <div class="col-12 col-sm-8 mt-5 mb-3">
  85.                 <div class='text-center'>
  86.                     <h2>¿Qué es Tectónica?</h2>
  87.                     <p class="text-left">Tectónica es una plataforma de conocimiento sobre arquitectura, diseño, tecnología y construcción que pone en relación a todos los actores que intervienen en una obra. El detalle constructivo es la pieza central de este engranaje a través del que el autor explica de primera mano el proyecto y en el que la industria participa aportando las mejores soluciones constructivas.</p>
  88.                     <p class="text-left">El rigor de los análisis y de la selección de Tectónica hacen de la plataforma una herramienta imprescindible para el profesional más comprometido con la calidad en la edificación.</p>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </div>#}
  95.     <!-- Últimos proyectos -->
  96.     <div class="container articles-section mt-4 mb-4">
  97.         <div class="row d-flex justify-content-center">
  98.             <div class="col-12">
  99.                 <div class='text-center'>
  100.                     <h2><a href="{{absolute_url('/projects')}}">Últimos proyectos en Tectónica</a></h2>
  101.                     
  102.                     <div class="row">
  103.                         {% for article in lastProjects.data %}
  104.                         <div class="col-sm-4">
  105.                             <div class="card">
  106.                                 <div class="card-image">
  107.                                     <div class="d-flex align-items-center h-100">
  108.                                         <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  109.                                             {% if article.headerImage %}
  110.                                             <img class="card-img-top lazyload" src="{{asset('assetsv2/img/white.gif')}}" data-src="{{article.headerImage.url}}">
  111.                                             {% else %}
  112.                                             <img class="card-img-top" src="{{asset('assetsv2/img/white.gif')}}">
  113.                                             {% endif %}
  114.                                         </a>
  115.                                         <div class="icon">
  116.                                             {% if article.createdByTectonica %}
  117.                                                 <div class="logo ng-star-inserted">
  118.                                                     <img alt="" src="/assetsv2/img/logos/logo-mbl.png">
  119.                                                 </div>
  120.                                             {% endif %}
  121.                                         </div>
  122.                                     </div>
  123.                                 </div>
  124.                                 <div class="card-body"><!---->
  125.                                     {% if article.typeArticle.name %}
  126.                                         <p class="line1">
  127.                                             {{article.typeArticle.name|upper}}
  128.                                         </p>
  129.                                     {% endif %}
  130.                                     {% if article.opened %}
  131.                                     <p class="line2 c-pointer opened">
  132.                                         {% else %}
  133.                                     <p class="line2 c-pointer">
  134.                                         {% endif %}
  135.                                         <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  136.                                             {{article.title.es}}
  137.                                         </a>
  138.                                     </p>
  139.                                     <p class="line3">
  140.                                         {{article.author}}
  141.                                     </p>
  142.                                     {#<p class="line4">
  144.                                     </p>#}
  145.                                     <!---->
  146.                                 </div>
  147.                             </div>
  148.                         </div>
  149.                         {% endfor %}
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </div>
  155.     
  156.     <!-- Últimos artículos -->
  157.     <div class="container articles-section mt-4 mb-4">
  158.         <div class="row d-flex justify-content-center">
  159.             <div class="col-12">
  160.                 <div class='text-center'>
  161.                     <h2><a href="{{absolute_url('/articles')}}">Últimos artículos en Tectónica</a></h2>
  162.                     
  163.                     <div class="row">
  164.                         {% for article in lastArticles.data %}
  165.                         <div class="col-sm-4">
  166.                             <div class="card">
  167.                                 <div class="card-image">
  168.                                     <div class="d-flex align-items-center h-100">
  169.                                         <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  170.                                             {% if article.headerImage %}
  171.                                             <img class="card-img-top lazyload" src="{{asset('assetsv2/img/white.gif')}}" data-src="{{article.headerImage.url}}">
  172.                                             {% else %}
  173.                                             <img class="card-img-top" src="{{asset('assetsv2/img/white.gif')}}">
  174.                                             {% endif %}
  175.                                         </a>
  176.                                         <div class="icon">
  177.                                             {% if article.createdByTectonica %}
  178.                                                 <div class="logo ng-star-inserted">
  179.                                                     <img alt="" src="/assetsv2/img/logos/logo-mbl.png">
  180.                                                 </div>
  181.                                             {% endif %}
  182.                                         </div>
  183.                                     </div>
  184.                                 </div>
  185.                                 <div class="card-body"><!---->
  186.                                     {% if article.typeArticle.name %}
  187.                                         <p class="line1">
  188.                                             {{article.typeArticle.name|upper}}
  189.                                         </p>
  190.                                     {% endif %}
  191.                                     {% if article.opened %}
  192.                                     <p class="line2 c-pointer opened">
  193.                                         {% else %}
  194.                                     <p class="line2 c-pointer">
  195.                                         {% endif %}
  196.                                         <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  197.                                             {{article.title.es}}
  198.                                         </a>
  199.                                     </p>
  200.                                     <p class="line3">
  201.                                         {{article.author}}
  202.                                     </p>
  203.                                     {#<p class="line4">
  204.                                         {{ article.datePublish | localizeddate('medium', 'none', app.request.locale ) }}
  205.                                     </p>#}
  206.                                     <!---->
  207.                                 </div>
  208.                             </div>
  209.                         </div>
  210.                         {% endfor %}
  211.                     </div>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </div>
  217.     <!-- Últimos detalles constructivos -->
  218.     <div class="container articles-section mt-4 mb-4">
  219.         <div class="row d-flex justify-content-center">
  220.             <div class="col-12">
  221.                 <div class='text-center'>
  222.                     <h2><a href="{{absolute_url('/constructive-details')}}">Últimos detalles constructivos en Tectónica</a></h2>
  224.                     <div class="row">
  225.                         {% for article in lastDetails.data %}
  226.                             <div class="col-sm-4">
  227.                                 <div class="card">
  228.                                     <div class="card-image">
  229.                                         <div class="d-flex align-items-center h-100">
  230.                                             <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  231.                                                 {% if article.headerImage %}
  232.                                                     <img class="card-img-top lazyload" src="{{asset('assetsv2/img/white.gif')}}" data-src="{{article.headerImage.url}}">
  233.                                                 {% else %}
  234.                                                     <img class="card-img-top" src="{{asset('assetsv2/img/white.gif')}}">
  235.                                                 {% endif %}
  236.                                             </a>
  237.                                             <div class="icon">
  238.                                                 {% if article.createdByTectonica %}
  239.                                                     <div class="logo ng-star-inserted">
  240.                                                         <img alt="" src="/assetsv2/img/logos/logo-mbl.png">
  241.                                                     </div>
  242.                                                 {% endif %}
  243.                                             </div>
  244.                                         </div>
  245.                                     </div>
  246.                                     <div class="card-body"><!---->
  247.                                         {% if article.opened %}
  248.                                         <p class="line2 c-pointer opened">
  249.                                             {% else %}
  250.                                         <p class="line2 c-pointer">
  251.                                             {% endif %}
  252.                                             <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  253.                                                 {{article.title.es}}
  254.                                             </a>
  255.                                         </p>
  256.                                         <p class="line3">
  257.                                             {{article.author}}
  258.                                         </p>
  259.                                         {#<p class="line4">
  261.                                         </p>#}
  262.                                         <!---->
  263.                                     </div>
  264.                                 </div>
  265.                             </div>
  266.                         {% endfor %}
  267.                     </div>
  268.                 </div>
  269.             </div>
  270.         </div>
  271.     </div>
  273.     <!-- Últimos materiales -->
  274.     <div class="container articles-section mt-4 mb-4">
  275.         <div class="row d-flex justify-content-center">
  276.             <div class="col-12">
  277.                 <div class='text-center'>
  278.                     <h2><a href="{{absolute_url('/materials')}}">Últimos materiales y soluciones constructivas en Tectónica</a></h2>
  280.                     <div class="row">
  281.                         {% for article in lastMaterials.data %}
  282.                             <div class="col-sm-4">
  283.                                 <div class="card">
  284.                                     <div class="card-image">
  285.                                         <div class="d-flex align-items-center h-100">
  286.                                             <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  287.                                                 {% if article.headerImage %}
  288.                                                     <img class="card-img-top lazyload" src="{{asset('assetsv2/img/white.gif')}}" data-src="{{article.headerImage.url}}">
  289.                                                 {% else %}
  290.                                                     <img class="card-img-top" src="{{asset('assetsv2/img/white.gif')}}">
  291.                                                 {% endif %}
  292.                                             </a>
  293.                                             <div class="icon">
  294.                                                 {% if article.createdByTectonica %}
  295.                                                     <div class="logo ng-star-inserted">
  296.                                                         <img alt="" src="/assetsv2/img/logos/logo-mbl.png">
  297.                                                     </div>
  298.                                                 {% endif %}
  299.                                             </div>
  300.                                         </div>
  301.                                     </div>
  302.                                     <div class="card-body"><!---->
  303.                                         {% if article.opened %}
  304.                                         <p class="line2 c-pointer opened">
  305.                                             {% else %}
  306.                                         <p class="line2 c-pointer">
  307.                                             {% endif %}
  308.                                             <a href="{{absolute_url('/' ~ article.type|type_slug ~ '/' ~ article.slug ~ '/')|add_ssl}}" title="{{article.title.es}}">
  309.                                                 {{article.title.es}}
  310.                                             </a>
  311.                                         </p>
  312.                                         <p class="line3">
  313.                                             {{article.company.title.es}}
  314.                                         </p>
  315.                                         <p class="line4" style="color:#171c24;">
  316.                                             {{article.description.es|html_entity_decode|striptags|truncate(90)}}
  317.                                         </p>
  318.                                         <!---->
  319.                                     </div>
  320.                                 </div>
  321.                             </div>
  322.                         {% endfor %}
  323.                     </div>
  324.                 </div>
  325.             </div>
  326.         </div>
  327.     </div>
  329.     {% with { 'items': calendar, 'isHome': true } %}
  330.         {{ block('schedule_content') }}
  331.     {% endwith %}
  333.     {#
  334.     <div class="container">
  335.         <h2 class="text-center">Búsqueda por categorías</h2>
  336.         <div class="icons-grid mb-5">
  337.             {% for icon in icons %}
  338.             <div class="icon">
  339.                 <a href="{{absolute_url('/search/' ~ icon.slug ~ '/')|add_ssl}}" title="{{icon.name}}">
  340.                     <span class="icon-container">
  341.                         <img class="icon lazyload" src="{{asset('assetsv2/img/white.gif')}}" data-src="{{icon.image}}" alt="{{icon.name}}">
  342.                     </span>
  343.                     <span class="icon-name">{{icon.name}}</span>
  344.                 </a>
  345.             </div>
  346.             {% endfor %}
  347.         </div>
  348.     </div>
  349.     #}
  351.     <div class="container-fluid home-projects mt-5 mb-4">
  352.         <div class="carousel-card">
  353.             <h2>Proyectos: selección y análisis de la mejor arquitectura</h2>
  354.             <p>El objetivo de Tectónica es ofrecer el mejor análisis de la arquitectura contado de primera mano por sus autores, mediante el seguimiento paso a paso de la ejecución de la obra, el análisis de las soluciones constructivas del proyecto a través de axonometrías y modelos BIM y con referencias a materiales y sistemas utilizados.</p>
  355.             <a class="btn btn-secondary"  href="{{absolute_url('/projects/')|add_ssl}}" title="Proyectos">
  356.                 VER PROYECTOS
  357.             </a>
  358.         </div>
  359.         <div class="project-name d-none d-sm-inline c-pointer">
  360.             <a href="{{absolute_url('/projects/' ~ projects[0].slug ~ '/')|add_ssl}}" title="{{projects[0].title.es}}">
  361.                 {{projects[0].title.es}}
  362.             </a>
  363.         </div>
  364.         <div class="arrows d-none d-sm-inline">
  365.             <div class="chevron-left project-left"></div>
  366.             <div class="chevron-right project-right"></div>
  367.         </div>
  368.         <div id="project-slider" class="carousel slide">
  369.             {% for project in projects %}
  370.                 <div class="carousel-slide">
  371.                     <img src="{{asset('assetsv2/img/white.gif')}}" data-src="{{project.headerImage.url}}" alt="" class="img-slide lazyload" data-name="{{project.title.es}}" data-url="{{absolute_url('/projects/' ~ project.slug ~ '/')}}">
  372.                 </div>
  373.             {% endfor %}
  374.         </div>
  375.     </div>
  377.     <div class="container card-sections my-5">
  378.         <div class="row">
  379.             <div class="col-12 d-flex justify-content-between">
  380.                 <div class="card-section articles lazyload" style="background:url('{{asset('assetsv2/img/white.gif')}}') no-repeat; background-size: cover;" data-src="{{featured.article.0.headerImage.url}}">
  381.                     <div class="btn-section">
  382.                         <a class="boton btn btn-secondary" href="{{absolute_url('/articles/')|add_ssl}}" title="Artículos">
  383.                             Artículos
  384.                         </a>
  385.                     </div>
  386.                 </div>
  387.                 <div class="card-section details lazyload" style="background:url('{{asset('assetsv2/img/white.gif')}}') no-repeat; background-size: cover;" data-src="{{featured.constructiveDetail.0.headerImage.url}}">
  388.                     <div class="btn-section">
  389.                         <a class="boton btn btn-secondary" href="{{absolute_url('/constructive-details/')|add_ssl}}" title="Detalles constructivos">
  390.                             Detalles constructivos
  391.                         </a>
  392.                     </div>
  393.                 </div>
  394.                 <div class="card-section materials lazyload" style="background:url('{{asset('assetsv2/img/white.gif')}}') no-repeat; background-size: cover;" data-src="{{featured.material.0.headerImage.url}}">
  395.                     <div class="btn-section">
  396.                         <a class="boton btn btn-secondary" href="{{absolute_url('/materials/')|add_ssl}}" title="Materiales">
  397.                             Materiales
  398.                         </a>
  399.                     </div>
  400.                 </div>
  401.             </div>
  402.         </div>
  403.     </div>
  405.     <div class="manufacturers py-5">
  406.         <div class="container">
  407.             <div class="row">
  408.                 <div class="col-12">
  409.                     <h2 class="title">Empresas en Tectónica</h2>
  410.                     <p>La búsqueda de una relación directa y eficaz entre profesionales de la construcción y el hábitat y los fabricantes, es un objetivo clave en Tectónica</p>
  412.                     <div class="text-center">
  413.                         <a class="boton" href="{{absolute_url('/manufacturers/')|add_ssl}}" title="Ver fabricantes">VER EMPRESAS</a>
  414.                     </div>
  415.                     <hr>
  416.                     <p>
  417.                         <strong>¿Eres fabricante? Publica contenido, consulta estadísticas y mantén contacto directo con los usuarios, <a href="{{absolute_url('/manufacturers/register/')|add_ssl}}" title="Tectónica para fabricantes">únete ahora</a></strong>
  418.                     </p>
  419.                 </div>
  420.             </div>
  421.         </div>
  422.     </div>    
  424.     {% with { 'home': true, 'mediaPartners': mediaPartners } %}
  425.         {{ block('mediapartners_content') }}
  426.     {% endwith %}
  427. </div>
  428. {% endblock %}