
<!-- :: home-products :: -->
<div class="home-products bg-2 py-90">
  <div class="container">
    <!-- se-title -->
    <div class="se-title">
      <h3 class="sub-title">{lang key="clientHomePanels.ourProducts"}</h3>
      <h2 class="title">{lang key="clientHomePanels.productsText1"}
        {lang key="clientHomePanels.productsText2"}<br>{lang key="clientHomePanels.productsText3"}</h2>
    </div>
    <!-- row -->
    <div class="row" data-gap-y="30px">
      {* foreach *}
      {foreach $productGroups as $productGroup}
        <!-- col -->
        <div class="col-xl-3 col-lg-4 col-md-6">
          <!-- item -->
          <div class="item h-100">
            <!-- box -->
            <div class="box">
              <!-- text -->
              <div class="text">
                <!-- box-title -->
                <h3 class="box-title">{$productGroup->name}</h3>
                <!-- box-para -->
                <p class="box-para">{$productGroup->tagline}</p>
                <!-- box-link -->
                <a href="{$productGroup->getRoutePath()}" class="theme-btn --fill-primary --circle-btn --has-icon mt-lg-4 mt-3">
                  <img src="{$WEB_ROOT}/templates/hostgate/images/icons/right-arrow-w.png" class="dir-reflect img-fluid" alt="Arrow">
                </a>
              </div>
            </div>
          </div>
        </div>
      {/foreach}
    </div>
  </div>
</div>