{% extends 'public_template.html' %}
{% load static %}

{% block titulo %}Gil Serrano{% endblock %}

{% block navbar %}
    {% include 'public_navbar.html' %}
{% endblock %}

{% block content %}
    <div class="row mr-0 justify-content-center" style="background-color:#093774;">
        <div class="col-md-7">
            <h1 class="text-bold text-white pt-5 ml-3">
                Administradora de condomínios
            </h1>
            <p class="lead ml-3 text-white">Nós organizamos o seu condomínio<br>Creci-SP 3896 J</p>
            <a href="https://api.whatsapp.com/send?phone=5511999664726&text=Ol%C3%A1...%20eu%20quero%20saber%20mais%20sobre%20a%20Gil%20Serrano" style="border-radius:20px 0px 20px 0px;" class="btn btn-outline-warning text-white btn-lg ml-3 mb-5"><i class="fas fa-comments mr-2"></i> Fale conosco!</a>
        </div>
        <div class="col-md-4 pt-0">
            <img src="{% static 'img/fundo_condo.png' %}" alt="" height="440" class="img-fluid p-0 m-0">
        </div>
    </div>


<section class="container">
    <div class="row mr-0">
        <div class="col-md-12 mt-5">
            <h2 class="text-center text-bold">Torne a gestão do seu condomínio mais ágil e produtiva</h2>
        </div>
    </div>
    <hr>
    <div class="row mr-0 justify-content-center">
        <div class="col-md-4">
            <div class="card elevation-3" style="background-color:#093774;">
                <div class="card-header">
                    <h1 class="display-3 text-center text-white"><i class="fas fa-balance-scale"></i></h1>
                    <h5 class="text-center text-bold text-white">Jurídico Próprio</h5>
                </div>
                <div class="card-body">
                    <p class="lead text-center text-white">Cuidamos de todos os trâmites legais do seu condomínio. Deixe a burocracia por nossa conta!</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card elevation-3" style="background-color:#093774;">
                <div class="card-header">
                    <h1 class="display-3 text-center text-white"><i class="fas fa-headset"></i></h1>
                    <h5 class="text-center text-bold text-white">Atendimento Personalizado</h5>
                </div>
                <div class="card-body">
                    <p class="lead text-center text-white">Cada condomínio é único! Prestamos o atendimento que se encaixa nas suas necessidades.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card elevation-3" style="background-color:#093774;">
                <div class="card-header">
                    <h1 class="display-3 text-center text-white"><i class="fas fa-user-tie"></i></h1>
                    <h5 class="text-center text-bold text-white">Síndico Profissional</h5>
                </div>
                <div class="card-body">
                    <p class="lead text-center text-white">Não quer ter o trabalho de ser síndico... sem problemas! Cuidamos disso pra você.</p>
                </div>
            </div>
        </div>
        
    </div>

    <div class="row mr-0">
        <div class="col-md-4">
            <div class="card elevation-3" style="background-color:#093774;">
                <div class="card-header">
                    <h1 class="display-3 text-center text-white"><i class="fas fa-hand-holding-usd"></i></h1>
                    <h5 class="text-center text-bold text-white">Assessoria Financeira</h5>
                </div>
                <div class="card-body">
                    <p class="lead text-center text-white">Oferecemos especialização em gestão financeira de condomínios para garantir o controle eficaz das finanças</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card elevation-3" style="background-color:#093774;">
                <div class="card-header">
                    <h1 class="display-3 text-center text-white"><i class="fas fa-search-dollar"></i></h1>
                    <h5 class="text-center text-bold text-white">Compras e Licitações</h5>
                </div>
                <div class="card-body">
                    <p class="lead text-center text-white">Encontramos os melhores preços do mercado em uma rede de parceiros comerciais de alta confiança.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card elevation-3" style="background-color:#093774;">
                <div class="card-header">
                    <h1 class="display-3 text-center text-white"><i class="fas fa-file-alt"></i></h1>
                    <h5 class="text-center text-bold text-white">2ª via Digital</h5>
                </div>
                <div class="card-body">
                    <p class="lead text-center text-white">Comodidade é fundamental! Acesso a segunda via do seu boleto online; simples e rápido.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    #textoContato {
        opacity: 0;
        transition: opacity 0.3s ease-in-out; /* Ajuste o tempo da animação conforme necessário */
    }

    #meuBotao:hover + #textoContato {
        opacity: 1;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="fixed-bottom">
                <h1 class="float-right mr-5">   
                    <a id="meuBotao" href="https://api.whatsapp.com/send?phone=5511999664726&text=Ol%C3%A1...%20eu%20quero%20saber%20mais%20sobre%20a%20Gil%20Serrano"><i class="fab fa-whatsapp-square text-success fa-lg"></i></a>
                </h1>
                <span id="textoContato" class="float-right">
                   <span class="p-2 text-bold bg-success mt-auto d-inline text-middle float-right" style=" border-radius:30px 0px 0px 30px;"><i class="fas fa-headset"></i> Fale conosco!</span>
                </span>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('meuBotao').addEventListener('mouseover', function() {
        document.getElementById('textoContato').style.opacity = '1';
    });

    document.getElementById('meuBotao').addEventListener('mouseout', function() {
        document.getElementById('textoContato').style.opacity = '0';
    });
</script>
{% endblock %}