templates/home.html.twig line 1

Open in your IDE?
  1. {% extends 'main.html.twig' %}
  2. {% trans_default_domain 'web' %}
  3. {% block head %}
  4.     <link rel="stylesheet" href="{{ asset('assets/css/home.css') }}?v={{ random() }}">
  5.     <!-- SPEAKERS -->
  6.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  7.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
  8.     {# Favicon #}
  9.     <meta name="msapplication-TileColor" content="#ffffff">
  10.     <meta name="msapplication-TileImage" content="{{ asset('assets/images/favicon/ms-icon-144x144.png') }}">
  11.     <meta name="theme-color" content="#ffffff">
  12. {% endblock %}
  13. {% block body %}
  14.     {% set path = path('events') %}
  15.     {% if events[0] is defined and events[0] is not empty %}
  16.         {% set path = path('event-tickets', {'event':events[0].id}) %}
  17.     {% endif %}
  18.     <!-- SECTION 1 - DESCRIPTION -->
  19.     <main class="container" id="main">
  20.        <div class="col-md-12">
  21.             <img width="100%" class="back-img" src="{{ asset('assets/images/img/home/main-home.jpg') }}" alt="">
  22.        </div>
  23.         <div id="logo-grupo">
  24.             <img src="{{ asset('assets/images/img/home/logo-grupo.png') }}" alt="">
  25.             <div id="home-main-text" class="d-flex flex-row justify-content-between align-items-center mt-5">
  26.                 <div class="d-flex justify-content-start align-items-center">
  27.                     <p class="white-color clash-grotesk-light">
  28.                         16 de Marzo, 2024<br>17:00pm - 0:00<br>(UTC -3hrs)
  29.                     </p>
  30.                 </div>
  31.                 <div class="d-flex justify-content-end align-items-center">
  32.                     <p class="white-color">
  33.                         <a href="{{ path }}" class="btn-red">CONSIGUE TUS TICKETS</a>
  34.                     </p>
  35.                 </div>
  36.             </div>
  37.         </div>
  38.     </main>
  39.     <!-- SECTION 2 EVENTS -->
  40.     <div class="container mbottom-8" id="events">
  41.         <div class="img-stars-events">
  42.             <img src="{{ asset('assets/images/img/home/events.png') }}" alt="">
  43.         </div>
  44.         <div class="row">
  45.             <div class="col-md-4">
  46.                 <h2 class="home-title dark-color">{{ 'home.events'|trans }}</h2>
  47.                 <p class="home-text dark-color clash-grotesk-variable">
  48.                     <b>Lo último.</b> Echa un vistazo a los nuevos eventos en Dow Center.
  49.                 </p>
  50.             </div>
  51.             <div class="col-md-8 align-items-end justify-content-end d-flex see-all-btn">
  52.                 <a href="{{ path }}" class="btn-degraded">VER EVENTOS</a>
  53.             </div>
  54.         </div>
  55.         <div class="row mt-5 desktop">
  56.             <div class="col-md-5">
  57.                 {% if events[0] is defined and events[0] is not empty %}
  58.                     <a href="{{ path('event-tickets', {'event':events[0].id}) }}">
  59.                         <div class="section2-primary-event">
  60.                             <div class="logo-color">
  61.                                 <img src="{{ asset('assets/images/logos/logo-colors.png') }}" alt="">
  62.                             </div>
  63.                             <div class="event-button">
  64.                                 <a href="{{ path('event-tickets', {'event':events[0].id}) }}" class="btn-degraded">VER TICKETS</a>
  65.                             </div>
  66.                             <div class="overlay"></div>
  67.                         </div>
  68.                     </a>
  69.                 {% endif %}
  70.             </div>
  71.             <div class="col-md-6 pleft-2">
  72.                 <div class="row">
  73.                     <div class="col-md-6 section2-secondary-card">
  74.                         {% if events[1] is defined and events[1] is not empty %}
  75.                             <a href="{{ path('event-tickets', {'event':events[1].id}) }}">
  76.                                 <div class="section2-secondary-event" style="background-image: url('{{ events[1].images.thumb }}')">
  77.                                     <div class="event-location">
  78.                                         {{ events[1].location|raw }}
  79.                                         <p class="event-date">{{ events[1].dateDoors|date("d.m.Y") }}</p>
  80.                                     </div>
  81.                                     <div class="overlay"></div>
  82.                                 </div>
  83.                             </a>
  84.                         {% endif %}
  85.                     </div>
  86.                     <div class="col-md-6 section2-secondary-card">
  87.                         {% if events[2] is defined and events[2] is not empty %}
  88.                             <a href="{{ path('event-tickets', {'event':events[2].id}) }}">
  89.                                 <div class="section2-secondary-event" style="background-image: url('{{ events[2].images.thumb }}')">
  90.                                     <div class="event-location">
  91.                                         {{ events[2].location|raw }}
  92.                                         <p class="event-date">{{ events[2].dateDoors|date("d.m.Y") }}</p>
  93.                                     </div>
  94.                                     <div class="overlay"></div>
  95.                                 </div>
  96.                             </a>
  97.                         {% endif %}
  98.                     </div>
  99.                     <div class="col-md-12">
  100.                         {% if events[3] is defined and events[3] is not empty %}
  101.                             <a href="{{ path('event-tickets', {'event':events[3].id}) }}">
  102.                                 <div class="section2-end-event" style="background-image: url('{{ events[3].images.cover }}')">
  103.                                     <div class="event-location">
  104.                                         {{ events[3].location|raw }}
  105.                                         <p class="event-date">{{ events[3].dateDoors|date("d.m.Y") }}</p>
  106.                                     </div>
  107.                                     <div class="overlay"></div>
  108.                                 </div>
  109.                             </a>
  110.                         {% endif %}
  111.                     </div>
  112.                 </div>
  113.             </div>
  114.         </div>
  115.         <!-- MOBILE EVENTS -->
  116.         <div class="col-md-12 pleft-2 mobile-events">
  117.             <div class="row">
  118.                 {% for event in events %}
  119.                     <div class="col-md-4 section2-secondary-card">
  120.                         <a href="{{ path('event-tickets', {'event':event.id}) }}">
  121.                             <div class="section2-primary-event">
  122.                                 <div class="logo-color">
  123.                                     <img width="40%" src="{{ asset('assets/images/logos/logo-colors.png') }}" alt="">
  124.                                 </div>
  125.                                 <div class="event-button">
  126.                                     <a href="{{ path('event-tickets', {'event':event.id}) }}" class="btn-degraded">VER TICKETS</a>
  127.                                 </div>
  128.                                 <div class="overlay"></div>
  129.                             </div>
  130.                         </a>
  131.                     </div>
  132.                 {% endfor %}
  133.             </div>
  134.         </div>
  135.     </div>
  136.     <!-- SPEAKERS -->
  137.     <div class="container mt-5" id="speakers">
  138.         <div class="multiple-items">
  139.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/ruben.png') }}')">
  140.                 <div class="slider-content">
  141.                     <h3>Rubén Guillermo Cordi|Host</h3>
  142.                     <p>Actor. Improvisador. Músico. Productor artístico</p>
  143.                 </div>
  144.             </div>
  145.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/ivan.png') }}')">
  146.                 <div class="slider-content">
  147.                     <h3>Ivan Bachi Pilotta</h3>
  148.                     <p>Ingeniero. Fundador de N4VE.</p>
  149.                 </div>
  150.             </div>
  151.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/martin.png') }}')">
  152.                 <div class="slider-content">
  153.                     <h3>Martin González</h3>
  154.                     <p>Ingeniero civil e hidráulico. Desarrollador de galería de arte NFT.</p>
  155.                 </div>
  156.             </div>
  157.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/gonzalo.png') }}')">
  158.                 <div class="slider-content">
  159.                     <h3>Gonzalo Iparraguirre</h3>
  160.                     <p>Doctor en Antropología. Licenciado en Ciencias Antropológicas. Conferencista.</p>
  161.                 </div>
  162.             </div>
  163.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/noelia.png') }}')">
  164.                 <div class="slider-content">
  165.                     <h3>Noelia D'Elía</h3>
  166.                     <p>Investigarora Asistente en CONICET, Bahía Blanca, Doctora en Ciencia y Tecnología de los Materiales. Licenciada en Ciencias Biológicas. Ayudante de cátedra. Premio L'oreal 2022.</p>
  167.                 </div>
  168.             </div>
  169.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/ana.png') }}')">
  170.                 <div class="slider-content">
  171.                     <h3>Ana Montaner</h3>
  172.                     <p>Creadora de «Los Chopen». Docente.</p>
  173.                 </div>
  174.             </div>
  175.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/fernando-chef.png') }}')">
  176.                 <div class="slider-content">
  177.                     <h3>Fernando Monachesi</h3>
  178.                     <p>Cheff. Campeón mundial de pizza napoletana.</p>
  179.                 </div>
  180.             </div>
  181.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/virginia.png') }}')">
  182.                 <div class="slider-content">
  183.                     <h3>Virginia Falcón</h3>
  184.                     <p>Actriz. Docente de teatro.</p>
  185.                 </div>
  186.             </div>
  187.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/fernando.png') }}')">
  188.                 <div class="slider-content">
  189.                     <h3>Fernando Cuello</h3>
  190.                     <p>Músico.</p>
  191.                 </div>
  192.             </div>
  193.             <div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/guillermo.png') }}')">
  194.                 <div class="slider-content">
  195.                     <h3>Guillermo Martínez</h3>
  196.                     <p>Licenciado en Matemática. Doctor en Lógica. Escritor. Premio Nadal 2019 (de España)</p>
  197.                 </div>
  198.             </div>
  199.         </div>
  200.     </div>
  201. {#    <div class="container mt-5" id="speakers">#}
  202. {#        <div class="row mbottom-5">#}
  203. {#            <div class="col-md-4">#}
  204. {#                <h2 class="home-title dark-color">PANEL DE ORADORES TEDX BAHÍA BLANCA</h2>#}
  205. {#                <p class="home-text dark-color clash-grotesk-variable">#}
  206. {#                    Después de escuchar a los y las speakers, tendremos un panel muy especial.#}
  207. {#                    Es bahiense e internacional, compuesto por tres grandes figuras: Emanuel <b>“Manu” Ginóbili</b>,#}
  208. {#                    Juan Ignacio <b>“Pepe” Sánchez</b> y Agustín Radasgast <b>“Rada”</b>.#}
  209. {#                </p>#}
  210. {#            </div>#}
  211. {#        </div>#}
  212. {#        <div class="row">#}
  213. {#            <div class="col-md-6 d-flex flex-column speakers-cards">#}
  214. {#                <div id="speaker-card">#}
  215. {#                    <img class="img-fluid" src="{{ asset('assets/images/img/home/speaker1.png') }}" alt="Juan Ignacio “Pepe” Sánchez">#}
  216. {#                    <div id="speaker1-name">#}
  217. {#                        Juan Ignacio “Pepe” Sánchez#}
  218. {#                    </div>#}
  219. {#                </div>#}
  220. {#                <img class="img-fluid mt-auto" src="{{ asset('assets/images/img/home/speaker2.png') }}" alt="Agustín Radasgast “Rada”">#}
  221. {#                <div id="speaker-name-bottom">#}
  222. {#                    Agustín Radasgast “Rada”#}
  223. {#                </div>#}
  224. {#            </div>#}
  225. {#            <div class="col-md-6 speakers-cards">#}
  226. {#                <img class="img-fluid h-100 d-flex" src="{{ asset('assets/images/img/home/speaker3.png') }}" alt="Emanuel “Manu” Ginóbili">#}
  227. {#                <div id="speaker-name-bottom">#}
  228. {#                    Emanuel “Manu” Ginóbili#}
  229. {#                </div>#}
  230. {#            </div>#}
  231. {#        </div>#}
  232. {#        <div class="row mbottom-8 mtop-8 ">#}
  233. {#            <div class="col-md-12 align-items-end justify-content-end d-flex see-all-btn">#}
  234. {#                <a href="{{ path }}" class="btn-degraded">CONSIGUE TUS TICKETS</a>#}
  235. {#            </div>#}
  236. {#        </div>#}
  237. {#    </div>#}
  238.     <!-- SECTION 3 WEB 3 -->
  239.     <div class="container mt-5 mbottom-8" id="web3">
  240.         <div class="row">
  241.             <div class="col-md-12">
  242.                 <h2 class="web3-title mb-4">TEDX BAHÍABLANCA EN DOW CENTER.</h2>
  243.             </div>
  244.         </div>
  245.         <div class="row mt-4">
  246.             <div class="col-md-6 web3-img">
  247.                 <img src="{{ asset('assets/images/img/home/web3-img.png') }}" alt="">
  248.             </div>
  249.             <div class="col-md-4 pleft-2 web3-info">
  250.                 <img src="{{ asset('assets/images/img/home/logo-grupo.png') }}" alt="">
  251.                 <p class="p-bold">
  252.                     El sábado 16 de Marzo 2024 se llevará a cabo TEDxBahíaBlanca en Dow Center.
  253.                     Será una jornada interactiva donde se expondrán diversas charlas: 11 historias, 1 panel,
  254.                     ideas que nos mueven y que vale la pena difundir.
  255.                 </p>
  256.                 <p class="mt-3">
  257.                     Dow Center es un espacio flexible,
  258.                     creado para inspirar disfrute, bienestar, alto rendimiento.
  259.                     En este lugar conviven diferentes lenguajes y disciplinas.
  260.                     Con este mismo espíritu, se organiza esta jornada TEDxBahíaBlanca.
  261.                 </p>
  262.             </div>
  263.         </div>
  264.             <a href="{{ path }}" class="btn-degraded">CONSIGUE TUS TICKETS</a>
  265.     </div>
  266.     <!-- INSTAGRAM -->
  267.     <div class="container mt-5" id="instagram">
  268.         <div class="social-text">
  269.             <img src="{{ asset('assets/images/img/home/social-text.png') }}" alt="">
  270.         </div>
  271.         <div class="col-md-12 mt-5">
  272.             <h2 class="home-title mb-4">NUESTRAS REDES</h2>
  273.         </div>
  274.         <div class="col-md-12">
  275.             <div class="d-flex social-icons">
  276.                 <a href="#"><img src="{{ asset('assets/images/icons/icn-instagram.svg') }}" alt=""></a>
  277.                 <a href="#"><img src="{{ asset('assets/images/icons/icn-facebook.svg') }}" alt=""></a>
  278.             </div>
  279.         </div>
  280.         <div class="row mt-5">
  281.             <div class="col-md-12 social-events">
  282.                 <img src="{{ asset('assets/images/img/home/social-example.png') }}" alt="" class="img-fluid">
  283.             </div>
  284.         </div>
  285.     </div>
  286.     <!-- ABOUT US -->
  287.     <div class="container" id="about-us">
  288.         <div class="row mt-5">
  289.             <div class="col-md-4">
  290.                 <h2 class="home-title mb-5">SOBRE DOW CENTER</h2>
  291.                 <h3 class="mb-4 about-text">Somos un espacio flexible diseñado para inspirar bienestar, disfrute y alto rendimiento.</h3>
  292.                 <p class="mb-4 home-text">
  293.                     Dow Center es un sueño materializado en un espacio donde todo es flexible, nos permite modular y seguir creando todo el tiempo.
  294.                 </p>
  295.                 <p>
  296.                     Nuestra infraestructura flexible permite que el espacio se adapte a múltiples necesidades y actividades.
  297.                     Eventos culturales, deportivos y corporativos: conocelos haciendo click acá.
  298.                 </p>
  299.             </div>
  300.             <div class="col-md-8">
  301.                 <img src="{{ asset('assets/images/img/home/about-us-person.png') }}" alt="" class="img-fluid">
  302.             </div>
  303.         </div>
  304.     </div>
  305.     {% block javascripts %}
  306.         <script>
  307.             $(document).ready(function(){
  308.                 $('.multiple-items').slick({
  309.                     infinite: true,
  310.                     slidesToShow: 4,
  311.                     slidesToScroll: 4,
  312.                     autoplay: true,
  313.                     autoplaySpeed: 2000,
  314.                     dots: true,
  315.                     responsive: [
  316.                         {
  317.                             breakpoint: 1024,
  318.                             settings: {
  319.                                 slidesToShow: 3,
  320.                                 slidesToScroll: 3,
  321.                             }
  322.                         },
  323.                         {
  324.                             breakpoint: 600,
  325.                             settings: {
  326.                                 slidesToShow: 2,
  327.                                 slidesToScroll: 2
  328.                             }
  329.                         },
  330.                         {
  331.                             breakpoint: 480,
  332.                             settings: {
  333.                                 slidesToShow: 1,
  334.                                 slidesToScroll: 1
  335.                             }
  336.                         }
  337.                     ]
  338.                 });
  339.         });
  340.             var acc = document.getElementsByClassName("accordion");
  341.             var i;
  342.             for (i = 0; i < acc.length; i++) {
  343.                 acc[i].addEventListener("click", function() {
  344.                     var panel = this.nextElementSibling;
  345.                     var tab = this.parentNode;
  346.                     if (panel.style.display === "none") {
  347.                         panel.style.display = "block";
  348.                         tab.style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0, 0), #F8F8F8 100%)";
  349.                         tab.style.boxShadow = "none";
  350.                     } else {
  351.                         panel.style.display = "none";
  352.                         tab.style.background = "#d2e5eae8";
  353.                         tab.style.boxShadow = "rgba(149, 157, 165, 0.2) 0px 8px 24px";
  354.                     }
  355.                 });
  356.             }
  357.             function scrollToDescSection() {
  358.             $([document.documentElement, document.body]).animate({
  359.                 scrollTop: $("#rt-desc-section").offset().top
  360.             }, 100);
  361.         }
  362.         </script>
  363.     {% endblock %}
  364. {% endblock %}