<?php

/* @var $this yii\web\View
 * @var \common\models\slider\Slide[] $slides;
 * @var \common\models\blog\Article[] $articles
 */
    
    use artbox\core\helpers\ImageHelper;
    use artbox\core\helpers\Url;
    
    $this->title = 'My Yii Application';
?>

<?php if (!empty($slides)){?>
<section class="hidden-xs hidden-sm">
  <!-- *** HOMEPAGE CAROUSEL ***
_________________________________________________________ -->
  
  <div class="home-carousel">
    
    <div class="dark-mask"></div>
    
    <div class="container">
      <div class="homepage owl-carousel">
        <?php foreach ($slides as $slide){?>
        <div class="item">
          <div class="row">
            <div class="col-sm-6 right">
              <h1><?=$slide->title?></h1>
              </div>
            <div class="col-sm-6">
              <a href="<?=$slide->link?>"><?=ImageHelper::set($slide->language->image->getPath())
                                                        ->cropResize(650, 380)
                                                        ->quality(84)
                                                        ->renderImage()?></a>
            </div>
          </div>
        </div>
        <?php }?>
      </div>
      <!-- /.project owl-slider -->
    </div>
  </div>
  
  <!-- *** HOMEPAGE CAROUSEL END *** -->
</section>
<?php }?>

<section class="bar background-white">
  <div class="container">
    <div class="col-md-12">
      <div class="heading text-center">
        <h2>Our main focus</h2>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-desktop"></i>
            </div>
            <h3>Webdesign</h3>
            <p>Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-print"></i>
            </div>
            <h3>Print</h3>
            <p>Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is justice. Six draw you him full not mean evil. Prepare garrets it expense windows shewing do an.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-globe"></i>
            </div>
            <h3>SEO and SEM</h3>
            <p>Am terminated it excellence invitation projection as. She graceful shy believed distance use nay. Lively is people so basket ladies window expect.</p>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-lightbulb-o"></i>
            </div>
            <h3>Consulting</h3>
            <p>Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-envelope-o"></i>
            </div>
            <h3>Email Marketing</h3>
            <p>Advantage old had otherwise sincerity dependent additions. It in adapted natural hastily is justice. Six draw you him full not mean evil. Prepare garrets it expense windows shewing do an.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-simple">
            <div class="icon">
              <i class="fa fa-user"></i>
            </div>
            <h3>UX</h3>
            <p>Am terminated it excellence invitation projection as. She graceful shy believed distance use nay. Lively is people so basket ladies window expect.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bar background-pentagon no-mb">
  <div class="container">
    <div class="row showcase">
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-align-justify"></i>
          </div>
          <h4><span class="counter">580</span><br>
            
            Websites</h4>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-users"></i>
          </div>
          <h4><span class="counter">100</span><br>
            
            Satisfied Clients</h4>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-copy"></i>
          </div>
          <h4><span class="counter">320</span><br>
            
            Projects</h4>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="item">
          <div class="icon"><i class="fa fa-font"></i>
          </div>
          <h4><span class="counter">923</span><br>
            
            Magazines and Brochures</h4>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /.bar -->


<section class="bar background-gray no-mb">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="heading text-center">
          <h2>Our clients</h2>
        </div>
        
        <ul class="owl-carousel customers">
          <li class="item">
            <img src="/img/customer-1.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-2.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-3.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-4.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-5.png" alt="" class="img-responsive">
          </li>
          <li class="item">
            <img src="/img/customer-6.png" alt="" class="img-responsive">
          </li>
        </ul>
        <!-- /.owl-carousel -->
      </div>
    
    </div>
  </div>
</section>
<?php if (!empty($articles)){?>
<section class="bar background-white no-mb">
  <div class="container">
    
    <div class="col-md-12">
      <div class="heading text-center">
        <h2><?=\Yii::t('app', 'Blog')?></h2>
      </div>
      
      
      <!-- *** BLOG HOMEPAGE ***
_________________________________________________________ -->
      
      <div class="row articles-flex">
        <?php foreach ($articles as $article){?>
        <div class="col-md-3 col-sm-6">
          <div class="box-image-text blog">
            <div class="top">
              <div class="image">
                <?=ImageHelper::set($article->image->getPath())
                              ->cropResize(255, 191)
                              ->quality(84)
                              ->renderImage(
                                  [
                                      'alt' => $article->image->lang ? ( $article->image->lang->title || $article->title ) : $article->title,
                                  ]
                              )?>
              </div>
              <div class="bg"></div>
              <div class="text">
                <p class="buttons">
                  <a href="<?=Url::to(['alias' => $article->alias])?>" class="btn btn-template-transparent-primary"><i class="fa fa-link"></i><?=\Yii::t('app', 'Читать далее')?></a>
                </p>
              </div>
            </div>
            <div class="content">
              <h4><a href="<?=Url::to(['alias' => $article->alias])?>"><?=$article->title?></a></h4>
              <p class="intro"><?=$article->body_preview?></p>
              <p class="read-more"><a href="<?=Url::to([ 'alias' => $article->alias])?>" class="btn btn-template-main"><?=\Yii::t('app', 'Читать далее')?></a>
              </p>
            </div>
          </div>
          <!-- /.box-image-text -->
        
        </div>
        <?php }?>
      </div>
      <!-- /.row -->
      
      <!-- *** BLOG HOMEPAGE END *** -->
    
    </div>
  
  </div>
  <!-- /.container -->
</section>
<?php }?>
<!-- /.bar -->
