{% extends 'base.html.twig' %}

{% block title %}Accueil{% endblock %}

{% block body %}

    <!-- Bnner Section -->
    <section class="banner-section">
        <div class="banner-carousel owl-carousel owl-theme">
            <div class="slide-item" style="background-image: url({{ asset('images/main-slider/0001.jpg') }});">
                <div class="auto-container">
                    <div class="content-box">
                        <center>
                            <h2>4 CR</h2>
                            <div class="text">Maîtrise D'Œuvre - Architecte d'Intérieur <br> Conseil - Conception - Coordination - Construction - Rénovation</div>
                            <div class="link-box">
                                <a href="{{ path('page.projets') }}" class="theme-btn btn-style-one">Voir Nos Réalisations</a>
                            </div>
                        </center>
                    </div>
                </div>
            </div>

            <div class="slide-item" style="background-image: url({{ asset('images/main-slider/0002.jpg') }});">
                <div class="auto-container">
                    <div class="content-box">
                        <center>
                            <h2>4 CR</h2>
                            <div class="text">Maîtrise D'Œuvre - Architecte d'Intérieur <br> Conseil - Conception - Coordination - Construction - Rénovation</div>
                            <div class="link-box">
                                <a href="{{ path('page.projets') }}" class="theme-btn btn-style-one">Voir Nos Réalisations</a>
                            </div>
                        </center>
                    </div>
                </div>
            </div>

            <div class="slide-item" style="background-image: url({{ asset('images/main-slider/image-4.jpg') }});">
                <div class="auto-container">
                    <div class="content-box">
                        <center>
                            <h2>4 CR</h2>
                            <div class="text">Maîtrise D'Œuvre - Architecte d'Intérieur <br> Conseil - Conception - Coordination - Construction - Rénovation</div>
                            <div class="link-box">
                                <a href="{{ path('page.projets') }}" class="theme-btn btn-style-one">Voir Nos Réalisations</a>
                            </div>
                        </center>
                    </div>>
                </div>
            </div>
        </div>

        <div class="bottom-box">
            <div class="auto-container clearfix">
                <ul class="contact-info">
                    <li><span>TEL :</span> (+33) 06 84 72 10 34</li>
                    <li><span>EMAIL :</span> <a href="#"> contact@4cr-mo.fr</a></li>
                    <li><span>ADRESSE :</span> <a href="#"> 4 Bis RUE DES POMMEREUES, 08140 BAZEILLES </a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- End Bnner Section -->

    <!-- About Section -->
    <section class="about-section" style="background-image: url({{ asset('images/background/1.jpg') }});">
        <div class="auto-container">
            <div class="row no-gutters">
                <!-- Image Column -->
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="title-box wow fadeInLeft" data-wow-delay='1200ms'>
                            <h2>À PROPOS<br></h2>
                        </div>
                        <div class="image-box">
                            <figure class="image wow fadeInRight" data-wow-delay='600ms'><img
                                    src="{{ asset('images/resource/image-1.jpg') }}" alt=""></figure>
                        </div>
                    </div>
                </div>

                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column wow fadeInLeft">
                        <div class="content-box">
                            <div class="title">
                                <h2>4CR Maîtrise d'Oeuvre</h2>
                            </div>
                            <p>Forte de plus de 15 ans d'expérience dans le domaine de la maîtrise d'œuvre, 4CR s'impose comme un acteur incontournable pour concrétiser vos projets de construction et de rénovation. Notre nom, 4CR, incarne nos valeurs fondamentales : Conseil, Conception, Coordination, et Construction, assurant une gestion de projet intégrée et optimisée.<br><br>

                            Choisir 4CR, c'est opter pour un partenaire de confiance, capable de transformer vos idées en réalités tangibles, avec une qualité irréprochable et une attention particulière portée aux détails. Laissez-nous vous accompagner dans votre prochain projet de construction ou de rénovation, et ensemble, bâtissons l'excellence.</p>
                            <br>
                            <div class="link-box"><a href="{{ path('page.about') }}" class="theme-btn btn-style-one">Lire
                                    D'avantage</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End About Section -->

    <!-- Services Section -->
    <section class="services-section" id="servicess">
        <div class="upper-box" style="background-image: url({{ asset('images/background/2.jpg') }});">
            <div class="auto-container">
                <div class="sec-title text-center light">
                    <span class="float-text">Services</span>
                    <h2>NOS SERVICES</h2>
                    <h3>Professionnels & Particuliers</h3>
                </div>
            </div>
        </div>

        <div class="services-box">
            <div class="auto-container">
                <div class="services-carousel owl-carousel owl-theme">
                    <!-- Service Block -->
                    <div class="service-block">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image"><a data-toggle="modal" href="#myModal"><img
                                            src="{{ asset('images/resource/service-1.jpg') }}" alt=""></a></figure>
                            </div>
                            <div class="lower-content">
                                <h3><a href="#">
                                        <center>Construction de maison / Réhabilitation / Extension</center>
                                    </a> </h3>
                                <div class="text">1. Constitution du dossier administratif (Déclaration de travaux,
                                    permis de construire, relevés des existants, réalisations plans, 3D)<br>
                                    2. Budgétisation du projet <br>
                                    3. Réalisation du projet
                                </div>
                                <div class="link-box">
                                    <center><button class="theme-btn btn-style-three" data-toggle="modal"
                                            href="#myModal">Professionnels</button> <br><br><button
                                            class="theme-btn btn-style-three" data-toggle="modal"
                                            href="#myModal">Particuliers</button></center>

                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Service Block -->
                    <div class="service-block">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image"><a href="#"><img src="{{ asset('images/resource/service-3.JPG') }}"
                                            alt=""></a></figure>
                            </div>
                            <div class="lower-content">
                                <center>
                                    <h3><a href="#"> Architecture d’intérieur </a> </h3>
                                </center>
                                <div class="text">1. Relevé des existants <br>
                                    2. Plans projets 2D et 3D<br>
                                    3. Budgétisation<br>
                                    4. Réalisation des travaux

                                </div>
                                <div class="link-box">
                                    <center><button class="theme-btn btn-style-three" data-toggle="modal"
                                            href="#myModal2">Professionnels</button> <br><br><button
                                            class="theme-btn btn-style-three" data-toggle="modal"
                                            href="#myModal2">Particuliers</button></center>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Service Block -->
                    <div class="service-block">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image"><a href="#"><img src="{{ asset('images/projet/152.jpg') }}" alt=""></a>
                                </figure>
                            </div>
                            <div class="lower-content">
                                <center>
                                    <h3><a href="#">Décoration d’intérieur</a> </h3>
                                </center>
                                <div class="text">1. Relevé des existants <br>
                                    2. Planches d’ambiance <br>
                                    3. Shopping list <br>
                                    4. Budgétisation <br>
                                    5. Réalisation du projet
                                </div>

                                <div class="link-box">
                                    <center><button class="theme-btn btn-style-three" data-toggle="modal"
                                            href="#myModal3">Professionnels</button> <br><br><button
                                            class="theme-btn btn-style-three" data-toggle="modal"
                                            href="#myModal3">Particuliers</button></center>
                                </div>
                            </div>
                        </div>
                    </div>

                   


                </div>
            </div>
        </div>
    </section>
    <!--End Services Section -->

    <!-- Fun Fact Section -->
    <section class="fun-fact-section">
        <div class="outer-box" style="background-image: url({{ asset('images/background/3.jpg') }});">
            <div class="auto-container">
                <div class="fact-counter">
                    <div class="row">
                        <!--Column-->
                        <div class="counter-column col-lg-3 col-md-6 col-sm-12 wow fadeInUp">
                            <div class="count-box">
                                <div class="count"><span class="count-text" data-speed="10000" data-stop="15">0</span>
                                </div>
                                <h4 class="counter-title">Années <br>D'experience</h4>
                            </div>
                        </div>

                        <!--Column-->
                        <div class="counter-column col-lg-3 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="400ms">
                            <div class="count-box">
                                <div class="count"><span class="count-text" data-speed="10000"
                                        data-stop="500">0</span></div>
                                <h4 class="counter-title">+ Projets <br>Réalisés</h4>
                            </div>
                        </div>

                        <!--Column-->
                        <div class="counter-column col-lg-3 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="800ms">
                            <div class="count-box">
                                <div class="count"><span class="count-text" data-speed="10000"
                                        data-stop="2000">0</span></div>
                                <h4 class="counter-title">3D <br> Réalisées</h4>
                            </div>
                        </div>

                        <!--Column-->
                        <div class="counter-column col-lg-3 col-md-6 col-sm-12 wow fadeInUp"
                            data-wow-delay="1200ms">
                            <div class="count-box">
                                <div class="count"><span class="count-text" data-speed="10000"
                                        data-stop="100">0</span>%</div>
                                <h4 class="counter-title"> De Clients <br>Satisfaits</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Fun Fact Section -->
    <br>


    <!-- Testimonial Section -->
    <section class="testimonial-section">
        <div class="outer-container clearfix">
            <!-- Title Column -->
            <div class="title-column clearfix">
                <div class="inner-column">
                    <div class="sec-title">
                        <span class="float-text">AVIS</span>
                        <h2>Ce Qu'on Pense de Nous !</h2>
                    </div>
                    <div class="text">Vos avis sont importants pour nous car ils nous poussent à réaliser des choses
                        toujours plus grandes !</div>
                </div>
            </div>

            <!-- Testimonial Column -->
            <div class="testimonial-column clearfix" style="background-image: url({{ asset('images/background/4.jpg') }});">
                <div class="inner-column">
                    <div class="testimonial-carousel owl-carousel owl-theme">
                        <!-- Testimonial Block -->
                        <div class="testimonial-block">
                            <div class="inner-box">
                                <div class="image-box"><img src="{{ asset('images/resource/thumb-1.jpg') }}" alt=""></div>
                                <div class="text">Merci à 4CR Maîtrise d'Oeuvre qui nous a permis de réaliser la maison de
                                    nos rêves, et en respectant notre budget et les délais ...</div>
                                <div class="info-box">
                                    <h4 class="name">Projet Sapogne-et-Feuchères</h4>
                                    <span class="designation">Construction</span>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial Block -->
                        <div class="testimonial-block">
                            <div class="inner-box">
                                <div class="image-box"><img src="{{ asset('images/resource/thumb-1.jpg') }}" alt=""></div>
                                <div class="text">Nous avons souhaité aménager notre petit restaurant. Et ce fût une
                                    grande réussite, nous ne regrettons pas notre choix d'avoir fais appel à Mme
                                    Bayot.</div>
                                <div class="info-box">
                                    <h4 class="name">Projet Restaurant</h4>
                                    <span class="designation">Architecture D'intérieur</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Testimonial Section -->



    <!--Clients Section-->
    
    <!--End Clients Section-->


{% endblock %}


{% block modal %}

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <center>
                        <h3>
                            <font color="#40E0D0">Construction, Réhabilitation et Extension</font>
                        </h3>
                    </center><br><br>
                    <h5>
                        <font color="#40E0D0">Mission Partielle :</font>
                    </h5>
                    <ul>
                        <li>• Ecoute de votre cahier des charges.</li>
                        <li>• Relevé des existants si besoin.</li>
                        <li>• Esquisse comportant plans et façades.</li>
                        <li>• Plan avant-projet comportant : plans, coupes, façades.</li>
                        <li>• Plans définitifs comportant : plans, coupes, façades, 3D.</li>
                        <li>• Dossier administratif : permis ou déclaration de travaux comportant plans de situation,
                            plan de masse, coupe, façade, notice, photos, attestations RT 2012.</li>
                    </ul><br><br>
                    <h5>
                        <font color="#40E0D0">Mission Complète :</font>
                    </h5>
                    <ul>
                        <li>• Ecoute de votre cahier des charges.</li>
                        <li>• Relevé des existants si besoin.</li>
                        <li>• Esquisse comportant plans et façades.</li>
                        <li>• Plan avant-projet comportant : plans, coupes, façades.</li>
                        <li>• Plans définitifs comportant : plans, coupes, façades, 3D.</li>
                        <li>• Dossier administratif : permis ou déclaration de travaux comportant plans de situation,
                            plan de masse, coupe, façade, notice, photos, attestations RT 2012.</li>
                        <li>• Budgétisation : descriptif des travaux, consultation d’entreprises, analyse des offres.
                        </li>
                        <li>• Réalisation des travaux : établissement d’un planning des travaux, suivi de chantier
                            comportant une réunion et compte rendu de chantier.</li>
                    </ul>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <center>
                        <h3>
                            <font color="#40E0D0">Architecture d’intérieur </font>
                        </h3>
                    </center><br><br>
                    <h5>
                        <font color="#40E0D0">Mission Partielle :</font>
                    </h5>
                    <ul>
                        <li>• Ecoute de votre cahier des charges.</li>
                        <li>• Relevé des existants si besoin.</li>
                        <li>• Esquisse avec plan 2D.</li>
                        <li>• Plan avant-projet comportant les 3D des différentes pièces.</li>
                        <li>• Plans définitifs comportant : 2D et 3D validés par vos soins.</li>
                        <li>• Possibilité de shopping list.</li>
                    </ul><br><br>
                    <h5>
                        <font color="#40E0D0">Mission Complète :</font>
                    </h5>
                    <ul>
                        <li>• Ecoute de votre cahier des charges.</li>
                        <li>• Relevé des existants si besoin.</li>
                        <li>• Esquisse avec plan 2D.</li>
                        <li>• Plan avant-projet comportant les 3D des différentes pièces.</li>
                        <li>• Plans définitifs comportant : 2D et 3D validés par vos soins.</li>
                        <li>• Possibilité de shopping list.</li>
                        <li>• Budgétisation : descriptif des travaux, consultation d’entreprises, analyse des offres.
                        </li>
                        <li>• Réalisation des travaux : établissement d’un planning des travaux, suivi de chantier
                            comportant une réunion et compte rendu de chantier.</li>
                    </ul>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>

        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal3" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <center>
                        <h3>
                            <font color="#40E0D0">Décoration d’intérieur </font>
                        </h3>
                    </center><br><br>
                    <h5>
                        <font color="#40E0D0">Mission Complètes :</font>
                    </h5>
                    <ul>
                        <li>• Ecoute de votre cahier des charges.</li>
                        <li>• Relevé des existants si besoin.</li>
                        <li>• Planche d’ambiance.</li>
                        <li>• Shopping list.</li>
                        <li>• Plans définitifs comportant : 2D et 3D validés par vos soins.</li>
                        <li>• Budgétisation.</li>
                    </ul>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>

        </div>
    </div>


{% endblock %}