templates/services/sub-service.html.twig line 1

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

{% block title %}{{page.title|default('')}}{% endblock %}

{% block metas %}
    <meta name="title" content="{{meta.title|default('')}}">
    <meta name="description" content="{{meta.description}}">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block body %}
    {% include '/partials/header.html.twig' with {'header_theme': 'dark', 'current_page':'services'} %}
    <!-- Main Content -->
    <main class="main-content">
        <!-- Sub Service Intro Area -->
        <div class="tm-section subservices-introduction-area tm-padding-section bg-white pb-3">
            <div class="container position-relative">
                <div class="row">
                    <div class="col-lg-6 pt-lg-5">
                        <div class="subservice-title">{{page.content.title | raw}}</div>
                        <p>
                            {{page.content.description | raw}}
                        </p>
                    </div>
                    <div class="col-lg-6 text-center">
                        <img class="subservice-illustration" src="{{ asset(subservice_illustration_image) }}" alt="Pixelsior avatar">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="nav nav-tabs justify-content-center" id="subserviceTab" role="tablist">
                            {% for key, subservice in subservices %}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{subservice.active ? 'active':''}}"  id="{{subservice.nav.id}}" data-bs-toggle="tab" data-bs-target="{{subservice.nav.target}}" type="button" role="tab" aria-controls="{{subservice.nav.controls}}" aria-selected="true">{{subservice.title}}</button>
                            </li>
                            {% endfor %}
                        </ul>
                        <div class="tab-content" id="subserviceTabContent">
                            {% for subservice in subservices %}
                            <div class="tab-pane fade {{subservice.active ? 'show active':''}}" id="{{subservice.id}}" role="tabpanel" aria-labelledby="{{subservice.nav.id}}">
                                <p class="subservice-item-description text-center mt-3">{{subservice.description | raw}}</p>
                                <div class="feed-container mt-5">
                                    <div class="feed">
                                        {% for subservice_item in subservice.nav.items %}
                                        <div class="feed-item">
                                            <img src="{{ asset(subservice_item.img) }}" alt="Element du sous-service">
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Sub Service Intro Area -->

        <!-- Tarifs Area -->
        {# <div class="tm-section tarifs-area tm-padding-section bg-white">
            <div class="container position-relative">
                <h2 class="text-center">Nos tarifs<span class="text-yellow">.</span></h2>
                <p class="text-center mw-75">{{ tarifs.description | raw}}</p>
                <img class="leaf leaf-3" src="{{ asset('assets/images/webp/leaf-3.webp') }}" alt="Feuille n°3">
                <img class="leaf leaf-2" src="{{ asset('assets/images/webp/leaf-2.webp') }}" alt="Feuille n°2">
                <img class="leaf leaf-1" src="{{ asset('assets/images/webp/leaf-1.webp') }}" alt="Feuille n°1">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="tarifs">
                            {% for item in tarifs.items %}
                                <div class="tarif-item" {% if tarif_item_padding is defined and tarif_item_margin is defined %} style="padding: {{tarif_item_padding}}; margin: {{tarif_item_margin}};" {% endif %} >
                                    <h3 style="min-height: 65px;">{{item.product}}</h3>
                                    <div class="tarif_pricing_block mb-1" style="min-height: 85px;">
                                        {% if item.__price is defined %} <span> {{item.__price}} </span> {% endif %}
                                        <div class="tarif-pricing">{{item.price}} €</div>
                                    </div>
                                    
                                    {% if item.list_group|length > 1 %}
                                        <ul class="list-group">
                                            {% for _item in item.list_group %}
                                                <li class="list-group-item {% if tarif_item_text_align is defined %} {{tarif_item_text_align}} {% endif %} ">{{_item|raw}} <span><i class="fas fa-check-circle ms-2"></i></span></li>
                                            {% endfor %}
                                        </ul> 
                                    {% else %} 
                                        <ul class="list-group">
                                            <li class="list-group-item">{{item.list_group.0|raw}}<span></span></li>
                                        </ul> 
                                    {% endif %} 

                                    <a href="{{ custom_path('app_contact', {price: item.price, product: item.product}) }}" class="tm-button button-blu mt-3">Obtenir un devis</a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div> #}
        <!-- Tarifs Area -->


        {% include '/partials/contact_us.html.twig' %}

    </main>
    <!--// Main Content -->
   
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // $("._js_toogle_content").hover(mouseEnter, mouseLeave)
        // function mouseEnter() {
        //     $(this).animate({height: '100vh'}, "slow"); 
        // };
        // function mouseLeave() {
        //     $(this).animate({height: '300px'}, "slow");
        // };

      
        // $("._js_toogle_content").click(function(){
        //     if ($(this).hasClass('is_small') ) {
        //         $(this).animate({height: '100vh'}, "slow");
        //         $(this).removeClass('is_small');
        //         $(this).addClass('is_large');
        //     }else if($(this).hasClass('is_large')){
        //         $(this).animate({height: '300px'}, "slow");
        //         $(this).removeClass('is_large');
        //         $(this).addClass('is_small');
        //     }
        // });
    </script>
{% endblock %}