@extends('layouts.main')

@section('content')

<header>
    <div class="row m-0">
        <div class="col-lg-7 pr-0 w-auto">
            <div class="ml-lg-4 mt-4 mb-5">
                <img class="imageLogo" src="/image/clubecasa-alliance-logo.svg">
            </div>
            <h1 class=" mt-5 ml-lg-4">
                CLUB&CASA ALLIANCE
            </h1>
            <h2 class=" mt-3 ml-lg-4">
                O Clube dos Clubes
            </h2>
            <h3 class=" mt-3 ml-lg-4">
                O Club&Casa Alliance é a maior rede de clubes de relacionamentos para o setor do ArqDecor, com um modelo
                de negócios de sucesso, um aplicativo completo com diversos pacotes de experiências, viagens e eventos.
            </h3>
            <div class="textLink d-flex flex-column mt-3 ml-lg-4">
                <span><strong>Quer saber como levar o Club&Casa Alliance para a sua região?</strong></span>
                <button id="btnLevar" type="button"><a href="https://materiais.clubecasadesign.com.br/alliance-membro" target="_blank">CLIQUE AQUI</a></button>
            </div>
        </div>
        <div class="holdImages col-lg-5 col-12 w-auto p-0">
            <img class="mockup" src="/image/iphone-image.png">
            <div>
                <div class="linksTop">
                    <a class="link-system cursor-pointer" id="scrollToOwnSystem">nosso sistema</a>{{-- href="#sistema" --}}
                    <a class="link-history cursor-pointer" id="scrollToOwnHistory">nossa história</a>{{--  href="#historia" --}}
                </div>
                <img src="/image/bg-header-cellphone.png">
            </div>
        </div>
    </div>
</header>
<main class="container">
    <h2 class="container mt-5 text-center">CLUBES ASSOCIADOS</h2>
    <div class="clubs justify-content-center mt-3 container row-cols-4 d-flex">
        <img class="col p-2" src="/image/arqdecorclub-logo.svg">
        <img class="col p-2" src="/image/clubecasa-design-logo.svg">
        <img class="col p-2" src="/image/clubdecorusa-logo.svg">
        <img class="col p-2" src="/image/clubecasa-select-sorocaba.svg">
    </div>
    <h2 class="container mt-lg-5 text-center">EXPERIÊNCIAS</h2>
    <h3 class="textExperience container mt-5 text-center">Os associados ao Club&Casa Alliance recebem consultorias e
        assessoria na montagem de pacotes de viagens com experiências de valor intangível ao redor de todo o planeta!
    </h3>
</main>

<div class="slides_partners carrosel container">

    <button><i style="font-size: 35px;" class="fas fa-angle-left" id="prev"></i></button>

    <div class="slider videos" id="slider">
        <ul id="carousel">
            <li>
                <iframe width="" height="" class="noSelect" id="img1" src="https://www.youtube.com/embed/-9E8ZX2qmrI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </li>
            <li>
                <iframe width="" height="" class="selectVideo" id="img2" src="https://www.youtube.com/embed/-gJQCzyVevk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </li>
            <li>
                <iframe width="" height="" class="noSelect" id="img3" src="https://www.youtube.com/embed/f53ED-IH1TQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </li>
        </ul>
    </div>

    <button><i style="font-size: 35px;" class="fas fa-angle-right" id="next"></i></button>
</div>

<div id="ownSystem" class="center">
    <div class="row-cols-3 p-lg-5 d-flex justify-content-center align-items-center">
        <div class=" col-11 col-lg-6 col-md-10 align-items-center ml-lg-5">
            <h2>Plataforma Completa</h2>
            <h3>Fornecemos um sistema de aplicativo completo com integração entre o clube, os lojistas e os
                profissionais, com ferramentas de resgates, pagamento de pontuação, geração de novos negócios, chat
                integrado e muito mais.</h3>

        </div>
        <div class="dashboard col-12 col-sm-9 col-md-6 col-lg-6 p-0 align-items-center">
            <img class="menuDashboard" src="/image/MENU.png" alt="">
            <img class=" imgDashboard w-100" src="/image/dashboard.png" alt="">
        </div>
        <div class="budget p-0 col-2 col-sm-2 col-md-1 col-lg-1">
            <p>Olá Mariasa, gostaria de solicitar um orçamento!</p>
            <img src="/image/guilherme-stecanella-_dH-oQF9w-Y-unsplash.png" alt="">
        </div>
    </div>
</div>
<div class="section row-cols-2 d-flex p-0 justify-content-center align-items-center">
    <div class="col-lg-6 col-md-10 col-sm-10 col-10 p-0">
        <div class="rows-col-3">
            <div id="ownHistory" class="architects mt-5 ml-lg-3 p-0 d-flex flex-column justify-content-center align-items-center col">
                <div class="borderWrap">
                    <div class="borderCircle"></div>
                </div>
                <div class="elipse">
                    <img src="/image/guilherme-stecanella-_dH-oQF9w-Y-unsplash.png" alt="">
                </div>
                <strong>5045</strong>
                <h2>PROFISSIONAIS CADASTRADOS</h2>
                <h3>Temos mais de 5045 profissionais de arquitetura e decoração cadastrados e engajados nas ações dos
                    clubes.</h3>
            </div>
            <div class="stores p-0 d-flex flex-column justify-content-center align-items-center col">
                <div class="elipse">
                    <img src="/image/guilherme-stecanella-_dH-oQF9w-Y-unsplash.png" alt="">
                </div>
                <strong>410</strong>
                <h2>LOJAS PARTICIPANTES</h2>
                <h3>O Club&Casa Alliance conta com mais de 410 lojas de diversos segmentos ao redor de todo planeta.
                </h3>
            </div>
            <div class="negotiations p-0 d-flex flex-column justify-content-center align-items-center col">
                <div class="elipse">
                    <img src="/image/guilherme-stecanella-_dH-oQF9w-Y-unsplash.png" alt="">
                </div>
                <div class="borderWrap">
                    <div class="borderCircle"></div>
                </div>
                <strong>19285</strong>
                <h2>NEGOCIAÇÕES REALIZADAS</h2>
                <h3>Nós ja intermediamos milhares de negociações de compra entre nossos arquitetos e nossas lojas.</h3>
            </div>
        </div>
    </div>
    <div class="experience col-lg-5 col-md-10 col-sm-10 col-12 ml-lg-3 pr-lg-5">
        <h2>Nossa Historia</h2>
        <h3>São mais de 5 anos de conteúdos, aprendizados e sucessos acumulados, que compõem o modelo de negócios que
            aplicamos em nossa plataforma e em nossos clubes associados.</h3>
    </div>
</div>
<div class="growth container p-0">
    <div class="clubGrowth mt-lg-5 row-cols-2 d-flex justify-content-center align-items-center">
        <div class="col-lg-6 col-md-6 col-12">
            <h2>Crescimento</h2>
            <h3>O Club&Casa Alliance é o maior clube de relacionamentos do setor ArqDecor no mundo, movimentando milhões
                todos os anos e tendo o maior crescimento exponencial entre os clubes durante seus 5 anos.</h3>
        </div>
        <div class="graphic col-lg-6 col-md-6 col-10">
            <img src="/image/gráfico_club.png" alt="">
        </div>
    </div>
</div>
<div id="mod" class="mod hidden">

</div>
<div id="modal" class="borderPopup hidden container p-0 d-flex justify-content-center align-items-center">
    <div class=" d-flex flex-column justify-content-center align-items-center popup">
        <img src="/image/Grupo de máscara 11.svg" id="stop">
        <div class="textPopup container text-center">
            <div class="text1"><strong>Obrigado pelo seu interesse!</strong></div>
            <div class="text2"><strong>Este é o contato de nosso diretor comercial</strong></div>
        </div>
        <div class="dataDirector text-center container">
            <p>Vitor Martinelli Gomes</p>
            <p>+55 11 9 8242-1473</p>
            <p>aliance@clubcasadesign.com.br</p>
        </div>
        <button id="fechar" class="btnPopup">FECHAR</button>
    </div>
</div>
<div id="modal2" class="borderPopup hidden container p-0 d-flex justify-content-center align-items-center">
    <div class=" d-flex flex-column justify-content-center align-items-center popup">
        <img src="/image/Grupo de máscara 11.svg" id="stop2">
        <div class="textPopup container text-center">
            <div class="text1"><strong>Opss!</strong></div>
            <div class="text2"><strong>Você esqueceu de preencher algum campo!!</strong></div>
        </div>
        <div class="dataDirector text-center container">
            <p>Preencha todos os campos </p>
            <p>para podermos entrar</p>
            <p>em contato com você</p>
        </div>
        <button id="fechar2" class="btnPopup">FECHAR</button>
    </div>
</div>

<div class="footer">
    <div class="fundo">
        <div class="container p-lg-0">
            <h2>Quer conhecer mais?</h2>
            <h3>Deixe seu contato,<br> em breve entraremos em contato.</h3>
        </div>
        <form id="formContact">
            @csrf
            <div class="personalInformation container mt-5 p-0 rows-col-3 d-flex justify-content-center">
                <div class="col-lg-3 col p-lg-0 pr-3 d-flex flex-column">
                    <span>NOME</span>
                    <input type="text" required="required" name="name" id="name" placeholder="Nome">
                </div>
                <div class="col-lg-3 col d-flex flex-column">
                    <span>CELULAR</span>
                    <input type="text" required="required" name="telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}" id="telefone"
                        placeholder="(11) 99999-9999">
                </div>
                <div class="col-lg-6 col d-flex flex-column">
                    <span>E-MAIL</span>
                    <input type="email" required="required" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" id="email"
                        placeholder="E-mail">
                </div>
            </div>
            <div class="personalInformation container mt-4 p-0 rows-col-3 d-flex justify-content-center">
                <div class="col-lg-4 col p-lg-0 pr-3 d-flex flex-column">
                    <span>EMPRESA</span>
                    <input type="text" required="required" name="empresa" id="empresa" placeholder="Sua Empresa">
                </div>
                <div class="col-lg-4 col d-flex flex-column">
                    <span>COMO NOS CONHECEU?</span>
                    <input type="text" required="required" name="historico" id="historico">
                </div>
                <div class="col-lg-4 col d-flex flex-column">
                    <span>O QUE BUSCA?</span>
                    <input type="text" required="required" name="busca" id="busca">
                </div>
            </div>
            <div class="container d-flex justify-content-end">
                <button type="submit">FINALIZAR</button>
            </div>
        </form>
    </div>
</div>

@endsection