templates/areas/services/view.html.twig line 1

<!-- About Start -->
<div class="section sector-section section-padding">
    <div
        class="container">
        <!-- About Wrap Start -->
        <div class="about-wrap">
            <div class="row">
                <div
                    class="col-lg-12">
                    <!-- SECTOR HEADING -->
                    <h2>Centric assists businesses transform their digital presence through automation and innovation.</h2>
                </div>
                <div
                    class="col-lg-12">
                    <!-- About Content Start -->
                    <div class="sector-product--carousel">
                        {% for key ,service in services %}
                            <!-- Adding logo images to onclick function-->
                            <div class="sector-caresoul" data-name="infosection-{{key}}">
                                <div id="{{'/service/' ~ service.url}}" class="sectorproduct-wrapper {{loop.index == 1 ? 'activeCard' : ''}}">
                                    <div class="sectorproduct-icon">
                                        {% if service.logo  %}
                                            <img src="{{service.logo}}" alt="{{service.name}} logo">
                                        {% endif %}
                                    </div>
                                    <h3>
                                        <a href="#" id="">{{service.name}}</a>
                                    </h3>
                                </div>
                            </div>
                        {% endfor %}


                    </div>
                    <!-- About Content End -->
                </div>
            </div>
        </div>
        <!-- About Wrap End -->
    </div>
</div>
<!-- About End -->

{% for key, service in services %}

    <div id="infosection-{{key}}" class="section sector-wrapper infosection {{key == 0 ? '' : 'd-none'}}">

        {% if service.backgroundImage %}
            {% if (pimcore_device().isPhone) %}
                    <img src="{{service.backgroundImageMobile}}" class="mobile" alt="{{service.name}}">
            {% else %}    
            <img id="sectionImageBG" src="{{service.backgroundImage.thumbnail('service_BG_1920_1008')}}" alt="{{service.name}} background" class="desktop">
                
            {% endif %}
            
        {% endif %}

        <div class="sectorproduct-content-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-6">
                        <div class="sectorproduct-content">
                            <div class="sector-product--icon">
                                {% if service.logo %}
                                    <img id="sectionImage" src="{{service.logo}}" alt="{{service.name}} logo">
                                {% endif %}
                            </div>
                            <h2 id="sectionTitle">{{service.name}}</h2>
                            <p id="sectionDescription">{{service.shortDescription}}</p>
                            <ul class="car-brand--logos">
                                {% for key,logos in service.partnersBlock %}
                                    {% if logos.partnerslogo.data %}
                                        <li><img id="logo_{{key}}" src="{{logos.partnerslogo.data.thumbnail('partner_logo_thumbnail')}}" alt="{{service.name}} partners logo"></li>
                                    {% endif %}

                                {% endfor %}

                            </ul>
                            <a href="{{'/service/' ~ service.url}}" id="url" class="btn">Discover More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endfor %}