@include('header')

<header class="row align-items-center m-0 p-2 bg-black text-white text-small">
    <a class="h3 text-center m-0 col-lg-1 col-4" href="https://www.instagram.com/clubdecorusa">
        <i class="fab fa-instagram"></i>
    </a>
    <a class="h4 text-center m-0 col-lg-1 col-4 d-lg-none d-block" href="tel:786-801-4478">
        <i class="fas fa-phone"></i>
    </a>
    <a class="h4 text-center m-0 col-lg-1 col-4 d-lg-none d-block" href="mailto:CONTACT@CLUBDECORUSA.COM">
        <i class="fas fa-envelope"></i>
    </a>
    <a class="col-lg-1 col-12 text-white d-lg-block d-none" href="tel:786-801-4478">786 801-4478</a>
    <a class="col-lg-1 col-12 text-white d-lg-block d-none"
        href="mailto:CONTACT@CLUBDECORUSA.COM">CONTACT@CLUBDECORUSA.COM</a>
</header>

<div class="float-buttons">
    <a class="bg-fade text-white px-3 py-2" href="https://app.clubdecorusa.com/login"
        target="_blank">{{ __('LOGIN') }}</a>
    <a class="bg-red hover-red text-white px-3 py-2" href="https://app.clubdecorusa.com/register"
        target="_blank">{{ __('BECOME A MEMBER') }}</a>
</div>

<section class="row justify-content-center align-items-center mt-lg-0 mt-6 mb-5">
    <img src="/images/logo.png" class="col-lg-4 col-10">
    <div class="row justify-content-center text-center">
        <a href="#about" class="w-auto mx-5 split-letters font-weight-bold text-fade">{{ __('ABOUT') }}</a>
        <a href="#experiences"
            class="w-auto mx-5 split-letters font-weight-bold text-fade">{{ __('EXPERIENCES') }}</a>
        <a href="#vendors" class="w-auto mx-5 split-letters font-weight-bold text-fade">{{ __('OUR VENDORS') }}</a>
    </div>
</section>

<section class="row justify-content-center bg-black text-white">
    <div class="bd-example m-0">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0"
                    class=""></li>
                <li data-target=" #carouselExampleCaptions" data-slide-to="1"
                    class=""></li>
                <li data-target=" #carouselExampleCaptions" data-slide-to="2"
                    class="active"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="/images/slides/slidesclub.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="/images/slides/slidesclub2.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="/images/slides/slidesclub3.png">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</section>

<section id="about" class="bg-gray row justify-content-center pt-3 py-5 pb-5">
    <p class="h4 mt-lg-4 mt-1 col-12 text-center split-letters font-weight-bold">{{ __('ABOUT') }}</p>
    <div class="col-lg-6 col-11 mb-5 font-helvetica">
        <p class="text-center mt-lg-5 mt-1 h4">
            {{ __('CLUBDECOR USA is the first business relationship platform between architects, interior designers, landscapers and vendors in USA') }}.
        </p>
        <p class="text-center mt-3 h4">
            {{ __('The reward program is a loyalty tool to be used by companies associated to strengthen relations with architects and interior designers') }}.
        </p>
    </div>
</section>

<section class="d-flex justify-content-center align-items-center position-relative h-screen-80">
    <div class="w-100">
        <div class="row justify-content-evenly text-center font-roman mx-lg-5">
            <div class="square d-flex justify-content-center align-items-center h3">{{ __('QUALITY') }}</div>
            <div class="square d-flex justify-content-center align-items-center h3">{{ __('VISIBILITY') }}</div>
            <div class="square d-flex justify-content-center align-items-center h3">{{ __('BENEFITS') }}</div>
        </div>
        <div class="row justify-content-center mt-3 text-center">
            <a href="/#steps">
                <img class="col-1" src="images/iconarrow.png">
            </a>
        </div>
    </div>
    <div class="bg-letters font-helvetica">
        <p>CLUB</p>
        <p>DECOR</p>
    </div>
</section>

<section class="row justify-content-center bg-gray py-5">
    <div class="row col-lg-4 col-12">
        <div class="col-lg-4 col-12 text-center">
            <img class="col-lg-12 col-6" src="images/icon.png">
        </div>
        <div class="col-lg-8 col-12">
            <p class="h4 text-lg-left text-center">
                {{ __('PROFESSIONAL BUYS IN OUR VENDORS') }}
            </p>
            <p class="text-lg-left text-center">
                {{ __('Each time the professional makes your order at the vendor convert in points') }}.
            </p>
        </div>
    </div>
    <div id="steps" class="row col-lg-4 col-12 my-lg-0 my-5">
        <div class="col-lg-4 col-12 text-center">
            <img class="col-lg-12 col-6" src="images/icon2.png">
        </div>
        <div class="col-lg-8 col-12">
            <p class="h4 text-lg-left text-center">
                {{ __('ASSOCIATED COMPANY REGISTER THE POINTS') }}
            </p>
            <p class="text-lg-left text-center">
                {{ __('In the system, the associated company registers the professional’s points') }}.
            </p>
        </div>
    </div>
    <div class="row col-lg-4 col-12">
        <div class="col-lg-4 col-12 text-center">
            <img class="col-lg-12 col-6" src="images/icon3.png">
        </div>
        <div class="col-lg-8 col-12">
            <p class="h4 text-lg-left text-center">
                {{ __('PROFESSIONAL CONVERTS POINTS IN TO BENEFITS') }}
            </p>
            <p class="text-lg-left text-center">
                {{ __('These points can be redeemed through benefits on the Club exclusive platform') }}.
            </p>
        </div>
    </div>
    <div class="row justify-content-center mt-3 text-center">
        <a href="/#experiences">
            <img class="col-1" src="images/iconarrow.png">
        </a>
    </div>
</section>

<section class="bg-black text-white font-roman py-5 text-center">
    <p class="big-text m-0 split-letters">U$1 = 1 {{ __('POINT') }}</p>
</section>

<section id="experiences" class="d-flex justify-content-center align-items-center position-relative h-screen-80">
    <div class="w-100 row text-center justify-content-center align-items-center">
        <p class="h4 col-12 mt-5 mb-4 col-12 text-center split-letters font-weight-bold">{{ __('EXPERIENCES') }}</p>
        <p class="h4 col-lg-6 col-11 font-helvetica">
            {{ __('Register now for CLUB DECOR USA, collect points and redeem for incomparable experiences. See now what you can do with your points and what experiences we have in our catalog') }}.
        </p>
        <div class="row justify-content-center mt-5 text-center">
            <a href="/#experiencecards">
                <img class="col-1" src="images/iconarrow.png">
            </a>
        </div>
    </div>
    <div class="bg-letters font-helvetica">
        <p>EXPERIE</p>
        <p>ENCES</p>
    </div>
</section>

<section id="experiencecards">
    <experience-list></experience-list>
</section>

<section class="row justify-content-center text-center">
    <p id="vendors" class="h4 col-12 mt-6 col-12 text-center split-letters font-weight-bold">{{ __('OUR VENDORS') }}
    </p>
    <div class="col-12 mt-3">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-2 col-5">
                <a href="https://www.allhome.store/" target="_blank"><img class="w-100"
                        src="images/parceiro.png"></a>
            </div>
            <div class="col-lg-2 col-5">
                <a href="https://bkfdecorsolutions.com/" target="_blank"><img class="w-100"
                        src="images/parceiro2.png"></a>
            </div>
            <div class="col-lg-2 col-5">
                <a href="https://www.citco.it/en" target="_blank"><img class="w-100"
                        src="images/parceiro3.png"></a>
            </div>
            <div class="col-lg-2 col-5">
                <a href="https://www.cosentino.com/" target="_blank"><img class="w-100"
                        src="images/parceiro4.png"></a>
            </div>
            <div class="col-lg-2 col-5">
                <a href="https://www.studiokazamiami.com/" target="_blank"><img class="w-100"
                        src="images/parceiro5.png"></a>
            </div>
        </div>
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-2 col-5">
                <a href="https://materiacollection.com/" target="_blank"><img class="w-100"
                        src="images/parceiro6.png"></a>
            </div>
            <div class="col-lg-2 col-5">
                <a href="https://primestones.com/" target="_blank"><img class="w-100"
                        src="images/parceiro7.png"></a>
            </div>
            <div class="col-lg-2 col-5">
                <a href="https://www.plywoodexpress.com/" target="_blank"><img class="w-100"
                        src="images/parceiro8.png"></a>
            </div>
            <!-- SNAIDEROUSA-->
            <div class="col-lg-2 col-5">
                <a href="http://www.snaidero-usa.com" target="_blank"><img class="w-100"
                        src="images/parceiro9.png"></a>
            </div>
            <!--STUDIOBECKER -->
            <div class="col-lg-2 col-5">
                <a href="https://studiobecker.com/" target="_blank"><img class="w-100"
                        src="images/parceiro10.png"></a>
            </div>
        </div>
        <div class="row justify-content-center align-items-center">
            <!--ROCCA -->
            <div class="col-lg-2 col-5">
                <a href="https://rocatileusa.com/" target="_blank"><img class="w-100"
                        src="images/parceiro11.png"></a>
            </div>
            <!--LACUISINEAPPLIANCES -->
            <div class="col-lg-2 col-5">
                <a href="https://www.lacuisineappliances.com/index.html" target="_blank"><img class="w-100"
                        src="images/logosvendors13.png"></a>
            </div>
            <!--MERIDIANI -->
            <div class="col-lg-2 col-5">
                <a href="https://www.meridiani.it/" target="_blank"><img class="w-100"
                        src="images/parceiro14.png"></a>
            </div>
            <!--ADDISONHOUSE -->
            <div class="col-lg-2 col-5">
                <a href="https://www.addisonhouse.com" target="_blank"><img class="w-100"
                        src="images/parceiro15.png"></a>
            </div>
            <!-- BRAMSTONES -->
            <div class="col-lg-2 col-5">
                <a href="https://bramstones.com/" target="_blank"><img class="w-100"
                        src="images/parceiro16.png"></a>
            </div>
        </div>
        <div class="row justify-content-center align-items-center">
            <!-- HABITUS -->
            <div class="col-lg-2 col-5">
                <a href="https://habitusfurniture.com/" target="_blank"><img class="w-100"
                        src="images/logosvendors-habitus.png"></a>
            </div>
        </div>
    </div>
</section>

<section class="row justify-content-center align-items-center text-center py-5 bg-gray text-center mt-6">
    <p class="h2 h-md-3 m-0 font-weight-bold col-lg-6 col-11 mb-lg-0 mb-3">{{ __('DO YOU WANT TO BE A VENDOR') }}?
    </p>
    <a href="/contact"
        class="btn bg-black text-white col-lg-2 col-10 border-radius-0 hover-red">{{ __('CLICK HERE') }}</a>

    {{-- <div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title text-center" id="exampleModalLabel">BE A VENDOR</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="/submit">
              <div class="modal-body text-left">
                <div class="form-group">
                    @csrf
                    <label for="name">Full Name</label>
                    <input type="name" class="form-control" id="name1" aria-describedby="namelHelp" placeholder="Enter Name">
                    <label for="name1">E-mail</label>
                    <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
                </div>
                <div class="form-group">
                  <label for="phone">Phone Number</label>
                  <input type="number" class="form-control" id="phone1" placeholder="Phone Number">
                </div>
              </div>
              <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="submit" class="bg-red hover-red text-white px-3 py-2">Submit</button>
              </div>
            </form>
          </div>
        </div>
    </div> --}}
</section>

<section class="text-center">
    <p class="h4 col-12 my-5 col-12 text-center split-letters font-weight-bold">{{ __('CLUB DECOR CHANNEL') }}</p>
    <youtube-slider></youtube-slider>
    {{-- <section id="videoSession" class="caixa">
        <div class="col-md-12 d-flex justify-content-center">
            <div class="carouselYT sectionvideocarousel">
                <div class="carousel__item carousel__item--visible">
                    <iframe class="carousel-iframe" src="https://www.youtube.com/embed/_af9UQOyH9M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="carousel__item">
                    <iframe class="carousel-iframe" src="https://www.youtube.com/embed/Vojy3fynh_k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="carousel__item">
                    <iframe class="carousel-iframe" src="https://www.youtube.com/embed/bd5T_YsmVhM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="carousel__item">
                    <iframe class="carousel-iframe" src="https://www.youtube.com/embed/zslyZuIffnQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="carousel__actions">
                    <button id="carousel__button--prev" aria-label="Previous slide">
                        <i class="fas fa-angle-left fa"></i>
                    </button>
                    <button id="carousel__button--next" aria-label="Next slide">
                        <i class="fas fa-angle-right fa"></i>
                    </button>
                </div>
            </div>
        </div>
    </section> --}}
</section>

</div>
<section class="text-center mb-5">
    <p class="h4 col-12 mt-5 mb-4 col-12 text-center split-letters font-weight-bold">{{ __('FOLLOW US') }}</p>
    <div data-mc-src="57e96de6-1872-4f8c-8140-0a019af908c7#instagram"></div>
    <script src="https://cdn2.woxo.tech/a.js#60a50f28073ebe00155a2bae" async data-usrc></script>
</section>

@include('footer')