@extends('layouts.page')

@section('pageTitle', '¿Qué hacemos hoy?')

@section('content')
%body
  %header.header.header-inverse.h-fullscreen.p-0.overflow-hidden{"data-parallax" => "{{ asset('/assets/img/fondo-4.jpg')}}"}
    .container
      .row.h-full
        .col-8.offset-2.align-self-center.text-center
          %h1.display-4 ¿Qué hacemos hoy?
          %br/
          %p.super-lead.text-white Tudu es la primera aplicación que te ayuda a encontrar las mejores cosas que hacer en tu ciudad.
          %br/
          %br/
          %div
            %a.btn.btn-lg.btn-white.w-200{"data-scrollto" => "section-download", :href => "#"} DESCARGA AHORA
            %a.btn.btn-lg.btn-outline.btn-white.w-200.ml-8.hidden-sm-down{"data-scrollto" => "section-features", :href => "#"} CONOCE MÁS
  / END Header


%body
  %main.main-content
    %section#section-features.section.pb-0
      .container
        %header.section-header
          %h2 Para todo tipo de intereses
          %hr/
          %p.lead En Tudu podrás encontrar eventos, lugares a donde ir, paseos, atracciones turísticas y mucho más.
        .col-12.col-lg-12
          .row.gap-y
            .col-12.col-md-4.text-center.text-md-left
              %i.fas.fa-calendar-alt.icon-color.fs-35.mb-3
              %h6.text-uppercase.mb-3 Asiste a eventos
              %p.fs-14 Los mejores eventos estarán a tú disponibilidad para qué puedas crear una experiencia especial y diferente.
            .col-12.col-md-4.text-center.text-md-left
              %i.fas.fa-map-marker-alt.icon-color.fs-35.mb-3
              %h6.text-uppercase.mb-3 Atractivos turísticos
              %p.fs-14 También te mostramos sitios arquelógicos, lúgares historicos y sitios turísiticos qué visitar en tu ciudad.
            .col-12.col-md-4.text-center.text-md-left
              %i.fas.fa-clock.icon-color.fs-35.mb-3
              %h6.text-uppercase.mb-3 Información importante
              %p.fs-14 Encontrás también información de horarios, disponibilidad, teléfonos e instrucciones para llegar.
            .col-12.col-md-4.text-center.text-md-left
              %i.fas.fa-ticket-alt.icon-color.fs-35.mb-3
              %h6.text-uppercase.mb-3 Tickets
              %p.fs-14 Se proporciona también la manera de obtener las entradas para la atracción que se esté visitando.
            .col-12.col-md-4.text-center.text-md-left
              %i.fa.fa-rocket.icon-color.fs-35.mb-3
              %h6.text-uppercase.mb-3 Aventura
              %p.fs-14 Descubre las mejores opciones y lugares para practicar una variedad de  deportes extremos.
            .col-12.col-md-4.text-center.text-md-left
              %i.fas.fa-baseball-ball.icon-color.fs-35.mb-3
              %h6.text-uppercase.mb-3 Eventos deportivos
              %p.fs-14 Enamorate de distintos estadios, distintos equipos y distintas culturas.
    /
      |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
      | Screenshots
      |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
      \!
    %section#section-shot.section.pb-150
      .container
        %header.section-header
          %small ¡Conócelo tu mismo!
          %h2 Screenshots
          %hr/
          %p.lead Así podrás ver la aplicación en tu celular.
        .swiper-container.swiper-button-circular{"data-centered-slides" => "true", "data-slides-per-view" => "5", "data-space-between" => "50"}
          .swiper-wrapper.pb-0
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-1.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-2.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-3.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-4.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-5.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-6.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-8.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-9.jpg')}}"}/
            .swiper-slide
              %img{:alt => "app screenshot", :src => "{{ asset('/assets/img/pantalla-10.jpg')}}"}/
          .swiper-button-prev
          .swiper-button-next
    /
      |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
      | Download Now
      |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
      \!
    %section#section-download.section.section-inverse.py-120{"data-overlay" => "4", :style => "background-image: url(assets/img/travel.jpg); background-size: cover;"}
      .container
        .section-dialog.text-center{"data-aos" => "zoom-in", "data-aos-duration" => "1000"}
          %p
            %img.logo-footer{:alt => "logo", :src => "assets/img/logo-tudu-blanco.png"}/
          %br/
          %h2 Descarga ahora
          %p Empieza con tu experiencia de descubrir lo que te rodea!
          %hr.w-50/
          .text-center.gap-multiline-items-2.my-30
            %a{:href => "https://itunes.apple.com/us/app/tudu/id1279133862?mt=8"}
              %img.img-fadein{:alt => "download on app store", :src => "assets/img/badge-apple.png"}/
            %a{:href => "https://play.google.com/store/apps/details?id=com.tudu.tuduapp"}
              %img.img-fadein{:alt => "download on google play", :src => "assets/img/badge-google.png"}/
  / END Main container

/ Scripts
%script{:src => "assets/js/core.min.js"}
%script{:src => "assets/js/thesaas.min.js"}
%script{:src => "assets/js/script.js"}
%script{:defer => "defer", :src => "https://use.fontawesome.com/releases/v5.0.6/js/all.js"}

@endsection