{% extends 'main.html.twig' %}
{% trans_default_domain 'web' %}
{% block head %}
<link rel="stylesheet" href="{{ asset('assets/css/home.css') }}?v={{ random() }}">
<!-- SPEAKERS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
{# Favicon #}
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{ asset('assets/images/favicon/ms-icon-144x144.png') }}">
<meta name="theme-color" content="#ffffff">
{% endblock %}
{% block body %}
{% set path = path('events') %}
{% if events[0] is defined and events[0] is not empty %}
{% set path = path('event-tickets', {'event':events[0].id}) %}
{% endif %}
<!-- SECTION 1 - DESCRIPTION -->
<main class="container" id="main">
<div class="col-md-12">
<img width="100%" class="back-img" src="{{ asset('assets/images/img/home/main-home.jpg') }}" alt="">
</div>
<div id="logo-grupo">
<img src="{{ asset('assets/images/img/home/logo-grupo.png') }}" alt="">
<div id="home-main-text" class="d-flex flex-row justify-content-between align-items-center mt-5">
<div class="d-flex justify-content-start align-items-center">
<p class="white-color clash-grotesk-light">
16 de Marzo, 2024<br>17:00pm - 0:00<br>(UTC -3hrs)
</p>
</div>
<div class="d-flex justify-content-end align-items-center">
<p class="white-color">
<a href="{{ path }}" class="btn-red">CONSIGUE TUS TICKETS</a>
</p>
</div>
</div>
</div>
</main>
<!-- SECTION 2 EVENTS -->
<div class="container mbottom-8" id="events">
<div class="img-stars-events">
<img src="{{ asset('assets/images/img/home/events.png') }}" alt="">
</div>
<div class="row">
<div class="col-md-4">
<h2 class="home-title dark-color">{{ 'home.events'|trans }}</h2>
<p class="home-text dark-color clash-grotesk-variable">
<b>Lo último.</b> Echa un vistazo a los nuevos eventos en Dow Center.
</p>
</div>
<div class="col-md-8 align-items-end justify-content-end d-flex see-all-btn">
<a href="{{ path }}" class="btn-degraded">VER EVENTOS</a>
</div>
</div>
<div class="row mt-5 desktop">
<div class="col-md-5">
{% if events[0] is defined and events[0] is not empty %}
<a href="{{ path('event-tickets', {'event':events[0].id}) }}">
<div class="section2-primary-event">
<div class="logo-color">
<img src="{{ asset('assets/images/logos/logo-colors.png') }}" alt="">
</div>
<div class="event-button">
<a href="{{ path('event-tickets', {'event':events[0].id}) }}" class="btn-degraded">VER TICKETS</a>
</div>
<div class="overlay"></div>
</div>
</a>
{% endif %}
</div>
<div class="col-md-6 pleft-2">
<div class="row">
<div class="col-md-6 section2-secondary-card">
{% if events[1] is defined and events[1] is not empty %}
<a href="{{ path('event-tickets', {'event':events[1].id}) }}">
<div class="section2-secondary-event" style="background-image: url('{{ events[1].images.thumb }}')">
<div class="event-location">
{{ events[1].location|raw }}
<p class="event-date">{{ events[1].dateDoors|date("d.m.Y") }}</p>
</div>
<div class="overlay"></div>
</div>
</a>
{% endif %}
</div>
<div class="col-md-6 section2-secondary-card">
{% if events[2] is defined and events[2] is not empty %}
<a href="{{ path('event-tickets', {'event':events[2].id}) }}">
<div class="section2-secondary-event" style="background-image: url('{{ events[2].images.thumb }}')">
<div class="event-location">
{{ events[2].location|raw }}
<p class="event-date">{{ events[2].dateDoors|date("d.m.Y") }}</p>
</div>
<div class="overlay"></div>
</div>
</a>
{% endif %}
</div>
<div class="col-md-12">
{% if events[3] is defined and events[3] is not empty %}
<a href="{{ path('event-tickets', {'event':events[3].id}) }}">
<div class="section2-end-event" style="background-image: url('{{ events[3].images.cover }}')">
<div class="event-location">
{{ events[3].location|raw }}
<p class="event-date">{{ events[3].dateDoors|date("d.m.Y") }}</p>
</div>
<div class="overlay"></div>
</div>
</a>
{% endif %}
</div>
</div>
</div>
</div>
<!-- MOBILE EVENTS -->
<div class="col-md-12 pleft-2 mobile-events">
<div class="row">
{% for event in events %}
<div class="col-md-4 section2-secondary-card">
<a href="{{ path('event-tickets', {'event':event.id}) }}">
<div class="section2-primary-event">
<div class="logo-color">
<img width="40%" src="{{ asset('assets/images/logos/logo-colors.png') }}" alt="">
</div>
<div class="event-button">
<a href="{{ path('event-tickets', {'event':event.id}) }}" class="btn-degraded">VER TICKETS</a>
</div>
<div class="overlay"></div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- SPEAKERS -->
<div class="container mt-5" id="speakers">
<div class="multiple-items">
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/ruben.png') }}')">
<div class="slider-content">
<h3>Rubén Guillermo Cordi|Host</h3>
<p>Actor. Improvisador. Músico. Productor artístico</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/ivan.png') }}')">
<div class="slider-content">
<h3>Ivan Bachi Pilotta</h3>
<p>Ingeniero. Fundador de N4VE.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/martin.png') }}')">
<div class="slider-content">
<h3>Martin González</h3>
<p>Ingeniero civil e hidráulico. Desarrollador de galería de arte NFT.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/gonzalo.png') }}')">
<div class="slider-content">
<h3>Gonzalo Iparraguirre</h3>
<p>Doctor en Antropología. Licenciado en Ciencias Antropológicas. Conferencista.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/noelia.png') }}')">
<div class="slider-content">
<h3>Noelia D'Elía</h3>
<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>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/ana.png') }}')">
<div class="slider-content">
<h3>Ana Montaner</h3>
<p>Creadora de «Los Chopen». Docente.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/fernando-chef.png') }}')">
<div class="slider-content">
<h3>Fernando Monachesi</h3>
<p>Cheff. Campeón mundial de pizza napoletana.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/virginia.png') }}')">
<div class="slider-content">
<h3>Virginia Falcón</h3>
<p>Actriz. Docente de teatro.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/fernando.png') }}')">
<div class="slider-content">
<h3>Fernando Cuello</h3>
<p>Músico.</p>
</div>
</div>
<div class="slider-item" style="background-image: url('{{ asset('assets/images/speakers/guillermo.png') }}')">
<div class="slider-content">
<h3>Guillermo Martínez</h3>
<p>Licenciado en Matemática. Doctor en Lógica. Escritor. Premio Nadal 2019 (de España)</p>
</div>
</div>
</div>
</div>
{# <div class="container mt-5" id="speakers">#}
{# <div class="row mbottom-5">#}
{# <div class="col-md-4">#}
{# <h2 class="home-title dark-color">PANEL DE ORADORES TEDX BAHÍA BLANCA</h2>#}
{# <p class="home-text dark-color clash-grotesk-variable">#}
{# Después de escuchar a los y las speakers, tendremos un panel muy especial.#}
{# Es bahiense e internacional, compuesto por tres grandes figuras: Emanuel <b>“Manu” Ginóbili</b>,#}
{# Juan Ignacio <b>“Pepe” Sánchez</b> y Agustín Radasgast <b>“Rada”</b>.#}
{# </p>#}
{# </div>#}
{# </div>#}
{# <div class="row">#}
{# <div class="col-md-6 d-flex flex-column speakers-cards">#}
{# <div id="speaker-card">#}
{# <img class="img-fluid" src="{{ asset('assets/images/img/home/speaker1.png') }}" alt="Juan Ignacio “Pepe” Sánchez">#}
{# <div id="speaker1-name">#}
{# Juan Ignacio “Pepe” Sánchez#}
{# </div>#}
{# </div>#}
{# <img class="img-fluid mt-auto" src="{{ asset('assets/images/img/home/speaker2.png') }}" alt="Agustín Radasgast “Rada”">#}
{# <div id="speaker-name-bottom">#}
{# Agustín Radasgast “Rada”#}
{# </div>#}
{# </div>#}
{# <div class="col-md-6 speakers-cards">#}
{# <img class="img-fluid h-100 d-flex" src="{{ asset('assets/images/img/home/speaker3.png') }}" alt="Emanuel “Manu” Ginóbili">#}
{# <div id="speaker-name-bottom">#}
{# Emanuel “Manu” Ginóbili#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="row mbottom-8 mtop-8 ">#}
{# <div class="col-md-12 align-items-end justify-content-end d-flex see-all-btn">#}
{# <a href="{{ path }}" class="btn-degraded">CONSIGUE TUS TICKETS</a>#}
{# </div>#}
{# </div>#}
{# </div>#}
<!-- SECTION 3 WEB 3 -->
<div class="container mt-5 mbottom-8" id="web3">
<div class="row">
<div class="col-md-12">
<h2 class="web3-title mb-4">TEDX BAHÍABLANCA EN DOW CENTER.</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6 web3-img">
<img src="{{ asset('assets/images/img/home/web3-img.png') }}" alt="">
</div>
<div class="col-md-4 pleft-2 web3-info">
<img src="{{ asset('assets/images/img/home/logo-grupo.png') }}" alt="">
<p class="p-bold">
El sábado 16 de Marzo 2024 se llevará a cabo TEDxBahíaBlanca en Dow Center.
Será una jornada interactiva donde se expondrán diversas charlas: 11 historias, 1 panel,
ideas que nos mueven y que vale la pena difundir.
</p>
<p class="mt-3">
Dow Center es un espacio flexible,
creado para inspirar disfrute, bienestar, alto rendimiento.
En este lugar conviven diferentes lenguajes y disciplinas.
Con este mismo espíritu, se organiza esta jornada TEDxBahíaBlanca.
</p>
</div>
</div>
<a href="{{ path }}" class="btn-degraded">CONSIGUE TUS TICKETS</a>
</div>
<!-- INSTAGRAM -->
<div class="container mt-5" id="instagram">
<div class="social-text">
<img src="{{ asset('assets/images/img/home/social-text.png') }}" alt="">
</div>
<div class="col-md-12 mt-5">
<h2 class="home-title mb-4">NUESTRAS REDES</h2>
</div>
<div class="col-md-12">
<div class="d-flex social-icons">
<a href="#"><img src="{{ asset('assets/images/icons/icn-instagram.svg') }}" alt=""></a>
<a href="#"><img src="{{ asset('assets/images/icons/icn-facebook.svg') }}" alt=""></a>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12 social-events">
<img src="{{ asset('assets/images/img/home/social-example.png') }}" alt="" class="img-fluid">
</div>
</div>
</div>
<!-- ABOUT US -->
<div class="container" id="about-us">
<div class="row mt-5">
<div class="col-md-4">
<h2 class="home-title mb-5">SOBRE DOW CENTER</h2>
<h3 class="mb-4 about-text">Somos un espacio flexible diseñado para inspirar bienestar, disfrute y alto rendimiento.</h3>
<p class="mb-4 home-text">
Dow Center es un sueño materializado en un espacio donde todo es flexible, nos permite modular y seguir creando todo el tiempo.
</p>
<p>
Nuestra infraestructura flexible permite que el espacio se adapte a múltiples necesidades y actividades.
Eventos culturales, deportivos y corporativos: conocelos haciendo click acá.
</p>
</div>
<div class="col-md-8">
<img src="{{ asset('assets/images/img/home/about-us-person.png') }}" alt="" class="img-fluid">
</div>
</div>
</div>
{% block javascripts %}
<script>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
autoplay: true,
autoplaySpeed: 2000,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
var tab = this.parentNode;
if (panel.style.display === "none") {
panel.style.display = "block";
tab.style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0, 0), #F8F8F8 100%)";
tab.style.boxShadow = "none";
} else {
panel.style.display = "none";
tab.style.background = "#d2e5eae8";
tab.style.boxShadow = "rgba(149, 157, 165, 0.2) 0px 8px 24px";
}
});
}
function scrollToDescSection() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#rt-desc-section").offset().top
}, 100);
}
</script>
{% endblock %}
{% endblock %}