{layout name="en/layout"}

<!-- banner -->
<div class="page-banner w-100" style="background-image: url({:getImgSrc($topCategory, '__IMG__/page_ban2.jpg')});">
    <div class="info">
        <div class="w-1200">
            <strong>{$topCategory.title_en}</strong>
            <p>{:nl2br($topCategory.description ?? '')}</p>
        </div>
    </div>
</div>
<!--  -->
<div class="all-center-box">
    <div class="service-box1 w-100" id="service1">
        <div class="w-1200">
            <div class="all-title-box2 w-100"><span>{$blocks['before']['title']['value'] ?? ''}</span><p>{:nl2br($blocks['before']['subtitle']['value'] ?? '')}</p></div>
            <div class="box-info w-100">
                <img src="{$blocks['before']['img']['value'] ?? ''}" >
            </div>
            <div class="w-100 text-center"><img src="__IMG__/ser1_bg.png" ></div>
        </div>
    </div>
    <div class="service-box1 w-100 service-box2" id="service2">
        <div class="w-1200">
            <div class="all-title-box2 w-100"><span>{$blocks['in_progress']['title']['value'] ?? ''}</span><p>{:nl2br($blocks['in_progress']['subtitle']['value'] ?? '')}</p></div>
            <div class="box-info w-100">
                <img src="{$blocks['in_progress']['img']['value'] ?? ''}" >
            </div>
            <div class="w-100 text-center"><img src="__IMG__/ser2_bg.png" ></div>
        </div>
    </div>
    <div class="service-box3 w-100" id="service3">
        <div class="w-1200">
            <div class="all-title-box2 w-100"><span>After-sales Technical Services</span><p>After sales technology service</p></div>
            <div class="box-info w-100">
                <div class="pull-right">
                    <img src="{$blocks['after']['img']['value'] ?? ''}" >
                </div>
            </div>
        </div>
    </div>
</div>