@extends('layout.app')
@section('content')
<video autoplay muted loop id="myVideo">
  <source src="assets/video/sede_cnm.mp4" type="video/mp4">
</video> <!-- final myVideo -->

<section class="box-textoVideo">
  <h2>BEM-VINDOS</h2>
  <h1>A CASA DO MUNICIPALISMO BRASILEIRO</h1>
  <p>A nova sede conta com uma estrutura ampla e vai oferecer  mais comodidade aos gestores públicos municipais.</p>
  <div class="botoes-video">
    <!-- <a href="{{url('palavra-do-presidente')}}" class="btn-palavra-presidente"> -->
    <a href="{{url('palavra-do-fundador')}}" class="btn-palavra-presidente">
      <svg class="svg-palavra-presidente-dims">
        <use xlink:href="sprite-svg/sprite.svg#palavra-presidente"></use>
      </svg>
      Palavra do Presidente
    </a>

    <a href="{{url('conheca-a-sede')}}" class="link-video">Conheça a sede</a>

    <!-- <a href="{{url('palavra-do-fundador')}}" class="link-video">Palavra do fundador</a> -->


  </div>

  <div class="box-setaVideo">
   <div class="seta-video">
      <svg class="svg-seta-baixo-capa-dims">
        <use xlink:href="sprite-svg/sprite.svg#seta-baixo-capa"></use>
      </svg>
   </div>
</div> <!-- final box-setaVideo -->
</section> <!-- final box-textoVideo -->



<section class="conteudo-home">
  <h2 class="titulo-padrao">
    <span>A sua sede esta pronta</span>
  </h2>

  <section class="texto-carousel">
    <div class="centraliza">
      <article class="texto-sede">
        <p>Depois de quase 3 anos de início da obra da nova sede da <strong>CNM,</strong> finalmente chegamos ao fim. <span>Veja como tudo aconteceu.</spa></p>
      </article>
      <article class="box-descricao-carousel">
        <div class="carousel-sede owl-carousel owl-theme">
          <div class="item">
            <img src="assets/img/construcao/construcao-1.jpg" alt="" class="img-fluid">
          </div>
          <div class="item">
            <img src="assets/img/construcao/construcao-2.jpg" alt="" class="img-fluid">
          </div>
          <div class="item">
            <img src="assets/img/construcao/construcao-3.jpg" alt="" class="img-fluid">
          </div>
          <div class="item">
            <img src="assets/img/construcao/construcao-4.jpg" alt="" class="img-fluid">
          </div>
          <div class="item">
            <img src="assets/img/construcao/construcao-5.jpg" alt="" class="img-fluid">
          </div>
        </div><!-- final caurosel-sede -->

        <a href="{{url('construcao')}}" class="link-historico">
          <p>Histórico Completo </p>
          <svg class="svg-ver-mais-dims">
            <use xlink:href="sprite-svg/sprite.svg#ver-mais"></use>
          </svg>
        </a>
      </article> <!-- final box-descricao-carouse -->
    </div><!-- final centraliza -->
  </section> <!-- final texto-carousel -->

  <section class="dados-sede centraliza">
    <article class="item-dados">
      <h3>Área Construída</h3>
      <svg class="svg-area_construida-dims">
        <use xlink:href="sprite-svg/sprite.svg#area_construida"></use>
      </svg>
      <p>Utilizamos uma área de 11.885,14m² para a construção do prédio</p>
    </article>

    <article class="item-dados">
      <h3>PERFIS METÁLICOS</h3>
      <svg class="svg-perfis_metalicos-dims">
        <use xlink:href="sprite-svg/sprite.svg#perfis_metalicos"></use>
      </svg>
      <p>Utilização de mais de 388.490KG de perfis metálicos</p>
    </article>

    <article class="item-dados">
      <h3>PROFISSIONAIS ENVOLVIDOS</h3>
      <svg class="svg-construcao-dims">
        <use xlink:href="sprite-svg/sprite.svg#construcao"></use>
      </svg>
      <p>Foram mais de 197 profissionais envolvido na Obra da nova Sede</p>
    </article>
  </section> <!-- final dados-sede -->

  <section class="box-tour">
    <h2 class="titulo-padrao">
      <span>Faça um Tour pelas instalações</span>
    </h2>
    

    <div class="fotos-box-tour">
      <figure class="foto-grande">
        <!--<img src="assets/img/galeria_index/galeria-home-1.jpg" alt="">-->
        <!-- <img src="assets/img/galeria_fotos/lounge_municipalista-4-full.jpg"  alt="" class="img-fluid"> -->
        <img src="assets/img/galeria_fotos/lounge_municipalista-4.jpg"  alt="" class="img-fluid">
        
        <article class="descricao-foto-grande">
          <p class="titulo-foto-grande">
            Lounge Municipalista
          </p>
          <!-- <p class="texto-foto-grande">
            Aqui vai um decrição sobre a foto
          </p> -->
          <a href="{{url('conheca-a-sede#galeria')}}" class="link-galeria-completa">
            Galeria Completa
          </a>
        </article>
      </figure>
      <ul class="lista-miniaturas">
        <li class="item-miniatura">
          <img src="../assets/img/galeria_fotos/lounge_municipalista-4.jpg" class="img-fluid" alt="">
          <div class="descricao-miniatura">
            <p class="titulo-descricao-miniatura">
              Lounge Municipalista
            </p>
            <!-- <span class="texto-descricao-miniatura">Aqui vai um decrição sobre a foto</span> -->

            <!-- <a href="" class="link-navegar">
              <span>navegar</span>
              <svg class="svg-icone_360-dims">
                <use xlink:href="sprite-svg/sprite.svg#icone_360"></use>
              </svg>
            </a> -->
          </div> <!-- final descricao-miniatura -->
        </li>
        <li class="item-miniatura">
          <img src="assets/img/galeria_fotos/museu-2.jpg" class="img-fluid" alt="">
          <div class="descricao-miniatura">
            <p class="titulo-descricao-miniatura">
              Museu do Municipalismo
            </p>
            <!-- <span class="texto-descricao-miniatura">Aqui vai um decrição sobre a foto</span> -->

            <!-- <a href="" class="link-navegar">
              <span>navegar</span>
              <svg class="svg-icone_360-dims">
                <use xlink:href="sprite-svg/sprite.svg#icone_360"></use>
              </svg>
            </a> -->
          </div>
          <!-- final descricao-miniatura -->
        </li>
        <li class="item-miniatura">
          <img src="assets/img/galeria_fotos/estudio_tv_radio.jpg" class="img-fluid" alt="">
          <div class="descricao-miniatura">
            <p class="titulo-descricao-miniatura">
              Estúdio de TV/Rádio
            </p>
            <!-- <span class="texto-descricao-miniatura">Aqui vai um decrição sobre a foto</span> -->

          <!--  <a class="link-navegar">
              <span>navegar</span>
              <svg class="svg-icone_360-dims">
                <use xlink:href="sprite-svg/sprite.svg#icone_360"></use>
              </svg>
            </a>-->
          </div> <!-- final descricao-miniatura -->
        </li>

        <li class="item-miniatura">
          <img src="assets/img/galeria_fotos/biblioteca.jpg" class="img-fluid" alt="">
          <div class="descricao-miniatura">
            <p class="titulo-descricao-miniatura">
              Biblioteca Municipalista
            </p>
            <!-- <span class="texto-descricao-miniatura">Aqui vai um decrição sobre a foto</span> -->

            <!-- <a href="" class="link-navegar">
              <span>navegar</span>
              <svg class="svg-icone_360-dims">
                <use xlink:href="sprite-svg/sprite.svg#icone_360"></use>
              </svg>
            </a> -->
          </div> <!-- final descricao-miniatura -->
        </li>
      </ul>

    </div>
  </section> <!-- final box-tour -->

</section> <!-- final conteudo-home -->
@endsection