description = "Homepage Mechatrends"

[staticPage]
useContent = 0
default = 0

[builderList service]
modelClass = "Linus\Services\Models\Service"
scope = "-"
scopeValue = "{{ :slug }}"
displayColumn = "slug"
noRecordsMessage = "No records found"
detailsPage = "-"
detailsUrlParameter = "id"
pageNumber = "{{ :page }}"

[builderList projects]
modelClass = "Linus\Project\Models\Project"
scope = "-"
scopeValue = "{{ :scope }}"
displayColumn = "slug"
noRecordsMessage = "No records found"
detailsPage = "-"
detailsUrlParameter = "id"
recordsPerPage = 6
pageNumber = "{{ :page }}"
sortColumn = "created_at"
sortDirection = "desc"

[blogPosts]
pageNumber = "{{ :page }}"
postsPerPage = 4
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = 404
postPage = 404

[builderList hiring]
modelClass = "Linus\Careers\Models\Career"
scope = "-"
scopeValue = "{{ :scope }}"
displayColumn = "slug"
noRecordsMessage = "No records found"
detailsPage = "-"
detailsUrlParameter = "id"
pageNumber = "{{ :page }}"
sortColumn = "created_at"
sortDirection = "desc"

[cookieBanner]
include_css = 1
update_selector = "#gdpr-reload"
cookie_manager_page = "cookie-manager"
==
<?php
use System\Classes\CombineAssets;
  function onStart(){
    $css = ['assets/css/homepage.css', 'assets/video/videojs.min.css'];
    $scripts = ['assets/video/videojs.min.js', 'assets/video/youtube.min.js', 'assets/javascript/homepage.js'];
    $this->addCss(CombineAssets::combine($css, base_path('themes/linus')));
    $this->addJs(CombineAssets::combine($scripts, base_path('themes/linus')));
  }
?>
==
{% partial 'site/head' %}
{% partial 'site/header' %}
{% component 'cookieBanner' %}
<!--<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>-->
{% component 'staticPage' %}
{% set hire = hiring.records %}
<div class="play-text hidden-xs"><img src="{{'assets/svg/ico-hero-play.svg'|theme}}">PLAY OUR VIDEO</div>
<div class="hiring-base card-shadow trans-2 hidden-xs">
  <div class="btn-text hire-btn hire-open">WE ARE HIRING.</div>
  <h3 class="available-text">AVAILABLE POSITIONS</h3>
  <ul class="hiring-list">
    {% for job in hire if job.display == '1' %}
      <li class="job-con">
        <a href="{{url('/career/'~job.slug)}}">
          <p class="service-category-title">{{job.job}}</p>
          <p class="published-label">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.00002 1.16663C3.78002 1.16663 1.16669 3.77996 1.16669 6.99996C1.16669 10.22 3.78002 12.8333 7.00002 12.8333C10.22 12.8333 12.8334 10.22 12.8334 6.99996C12.8334 3.77996 10.22 1.16663 7.00002 1.16663ZM4.12418 10.6633C4.37502 10.1383 5.90335 9.62496 7.00002 9.62496C8.09668 9.62496 9.63085 10.1383 9.87585 10.6633C9.08252 11.2933 8.08502 11.6666 7.00002 11.6666C5.91502 11.6666 4.91752 11.2933 4.12418 10.6633ZM7.00002 8.45829C7.85169 8.45829 9.87585 8.80246 10.71 9.81746C11.305 9.03579 11.6667 8.06163 11.6667 6.99996C11.6667 4.42746 9.57252 2.33329 7.00002 2.33329C4.42752 2.33329 2.33335 4.42746 2.33335 6.99996C2.33335 8.06163 2.69502 9.03579 3.29002 9.81746C4.12419 8.80246 6.14835 8.45829 7.00002 8.45829ZM7.00002 3.49996C5.86835 3.49996 4.95835 4.40996 4.95835 5.54163C4.95835 6.67329 5.86835 7.58329 7.00002 7.58329C8.13169 7.58329 9.04169 6.67329 9.04169 5.54163C9.04169 4.40996 8.13169 3.49996 7.00002 3.49996ZM6.12502 5.54163C6.12502 6.02579 6.51585 6.41663 7.00002 6.41663C7.48419 6.41663 7.87502 6.02579 7.87502 5.54163C7.87502 5.05746 7.48419 4.66663 7.00002 4.66663C6.51585 4.66663 6.12502 5.05746 6.12502 5.54163Z" fill="#888888"/>
            </svg>
            {{job.job_type}}
          </p>
        </a>
      </li>
    {% endfor %}
  </ul>
  <div class="hover-effect cl-effect-10 text-center">
    <a href="{{url('/careers/')}}" data-hover="VIEW ALL AVAILABLE POSITIONS">
        <span class="btn-anc flex-con">VIEW ALL AVAILABLE POSITIONS
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="ico-arrow">
        <path id="icon/hardware/keyboard_backspace_24px" d="M3 13L17.17 13L13.59 16.59L15 18L21 12L15 6L13.59 7.41L17.17 11L3 11L3 13Z" fill="#D6312B"/>
        </g>
        </svg>
      </span>
    </a>
  </div>
</div>
{% if heroPref == 0 %}
  <div class="row noPM hero hero-slider">
    <div class="bg-pattern"></div>
      <div class="container">
      <div class="noPL col-sm-7 col-xs-12">
      <div class="hero-slider-text">
        {% for slide in slider %}
          <div class="hero-slide flex-con">
            <div class="slide-text">
              <h1 class="home-hero-header" data-animation="fadeIn" data-delay="0.5s">{{slide.header}}</h1>
              <div class="hero-rotate-text" data-animation="fadeIn" data-delay="1s">
                <p>
                  {% for con in slide.rotate %}
                    <span class="word">{{con.title}}</span>
                  {% endfor %}
                </p>
              </div>
              <p class="home-hero-teaser" data-animation="fadeIn" data-delay="1.5s">{{slide.teaser}}</p>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="hover-effect cl-effect-10">
        <a href="{{url('/projects')}}" data-hover="VIEW OUR PROJECTS">
          <span class="btn-text flex-con">VIEW OUR PROJECTS
            <!--<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="ico-btn-arrow">
            <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
            </g>
            </svg>-->
          </span>
        </a>
      </div>
      {% if slider|length > 1 %}
        <ul class="hero-btn">
          <li id="prev"><svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="icon/action/trending_flat_24px">
          <path id="icon/action/trending_flat_24px_2" d="M2.29232 11.5L5.95899 7.83334V10.5833H19.709V12.4167H5.95899V15.1667L2.29232 11.5Z" fill="#181818"/>
          </g></svg></li>
          <li id="next"><svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="icon/action/trending_flat_24px"><path id="icon/action/trending_flat_24px_2" d="M19.7077 11.5L16.041 7.83334V10.5833H2.29102V12.4167H16.041V15.1667L19.7077 11.5Z" fill="#181818"/>
          </g></svg></li>
        </ul>
      {% endif %}
      </div>
    </div>
    <div class="col-sm-5 col-xs-12 hero-slider-base noP">
      <div class="hero-slider-image">
        {% for img in slider %}
          <div class="slide-image bg-img" style="background-image: url({{img.image|media}});">
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% else %}
  <div class="noPM hero hero-video">
    <div class="bg-pattern"></div>
    <div class="container">
    <div class="noPL col-sm-7 col-xs-12">
      <div class="hero-slide flex-con">
        <div class="slide-text">
          <h1 class="home-hero-header" data-animation="fadeIn" data-delay="0.5s">{{videoHeader}}</h1>
          <div class="hero-rotate-text" data-animation="fadeIn" data-delay="1s">
            <p>
              {% for con in videoTitles %}
                <span class="word">{{con.title}}</span>
              {% endfor %}
            </p>
          </div>
          <p class="home-hero-teaser" data-animation="fadeIn" data-delay="1.5s">{{videoTeaser}}</p>
        </div>
      </div>
      <div class="hover-effect cl-effect-10">
        <a href="{{url('/projects')}}" data-hover="VIEW OUR PROJECTS">
          <span class="btn-text flex-con">VIEW OUR PROJECTS
            <!--<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="ico-btn-arrow">
            <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
            </g>
            </svg>-->
          </span>
        </a>
      </div>
    </div>
    </div>
    <div class="col-sm-5 col-xs-12 noP hero-video-base">
      <video id="hero-video" class="hidden-xs video-js vjs-default-skin" muted mute loop autoplay
        data-setup='{ "controls": false, "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "{{videoLink}}", "muted": true, "youtube": { "modestbranding": 1, "showinfo": 0 } }] }'>
      </video>
      <div class="video-block hidden-xs"></div>
      <a class = "hidden-lg hidden-md hidden-sm" id = "videoPop" href="{{videoLink}}" target = "_blank">
        <div class="video-block-in bg-img" style="background-image: url({{videoPoster|media}})">
          <div class="video-block"></div><div class="play-text flex-con">PLAY OUR VIDEO</div>
        </div>
      </a>
    </div>
  </div>
{% endif %}
<div class="row noPM about-home bg-block section-pad-2">
  <div class="container">
    <div class="flex-con-stretch">
      {variable type="mediafinder" tab="About" mode="image" name="abtimage" label="Image" span="left" comment="400px x 500px (Portrait)"}{/variable}
      {variable type="mediafinder" tab="About" mode="image" name="abtimage2" label="Image2" span="right" comment="400px x 250px (Landscape)"}{/variable}
      {variable type="mediafinder" tab="About" mode="image" name="abtimage3" label="Image3" span="left" comment="400px x 250px (Landscape)"}{/variable}
      {variable type="mediafinder" tab="About" mode="image" name="abtimage4" label="Image4" span="right" comment="400px x 500px (Portrait)"}{/variable}
      {variable tab="About" type="text" name="abtHeader" label="Header"}{/variable}
      {variable tab="About" type="richeditor" size="large" name="abtDesc" label="Description"}{/variable}
      <div class="col-sm-6 col-xs-12 abt-det-con hidden-lg hidden-md hidden-sm">
        <h6 class="block-title">WE ARE EXPERTS</h6>
        <h3 class="home-hero-header" id="abt-header-mob">{{abtHeader|raw}}</h3>
        <div data-wow-delay=".75s" class="p-text wow fadeInUp">{{abtDesc|raw}}</div>
        <br /><br class = "hidden-xs" />
        <div class="hover-effect cl-effect-10 wow fadeInUp" data-wow-delay=".5s">
          <a href="{{url('/about')}}" data-hover="LEARN MORE ABOUT US">
            <span class="btn-text flex-con">LEARN MORE ABOUT US
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g id="ico-btn-arrow">
              <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
              </g>
              </svg>
            </span>
          </a>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12 abt-img-base noP">
        <div class="col-sm-6 col-xs-6 abt-img-con noPL">
          <div class="abt-img bg-img wows fadeInRight" data-wow-delay=".3s" style="background-image: url({{abtimage|media}})"></div>
          <div class="abt-img-2 bg-img wows fadeInLeft" data-wow-delay=".5s" style="background-image: url({{abtimage2|media}})"></div>
        </div>
        <div class="col-sm-6 col-xs-6 abt-img-con noPL">
          <div class="abt-img-3 bg-img wows fadeInRight" data-wow-delay=".6s" style="background-image: url({{abtimage3|media}})"></div>
          <div class="abt-img-4 bg-img wows fadeInLeft" data-wow-delay=".3s" style="background-image: url({{abtimage4|media}})"></div>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12 abt-det-con hidden-xs">
        <h6 id="abt-block-reveal" class="block-title">WE ARE EXPERTS</h6>
        <h3 id="abt-header" class="home-hero-header">{{abtHeader|raw}}</h3>
        <div data-wow-delay=".75s" class="p-text wow fadeInUp">{{abtDesc|raw}}</div>
        <br /><br />
        <div class="hover-effect cl-effect-10 wow fadeInUp" data-wow-delay=".5s">
          <a href="{{url('/about')}}" data-hover="LEARN MORE ABOUT US">
            <span class="btn-text flex-con">LEARN MORE ABOUT US
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g id="ico-btn-arrow">
              <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
              </g>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% set category = service.records %}
{variable tab="Service" type="text" name="srvHeader" label="Header"}{/variable}
<div class="row noPM service section-pad-3">
  <div class="bg-pattern"></div>
  <div class="container text-center">
    <h6 class="block-title">WHY CHOOSE US?</h6>
    <h3 class="block-header">{{srvHeader}}</h3>
  </div>
  <br>
  <div class="container noP flex-con-stretch justify-center">
    {% for cat in category %}
      <div class="col-sm-6 col-xs-12 home-serv-base wow fadeInUp" data-wow-delay="{{loop.index0 / 4}}s">
        <a href="{{url('/service/'~cat.slug)}}">
        <div class="col-sm-12 col-xs-12 noP home-serv-con flex-con trans">
          <div class="home-serv-arrow">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.16501 20.13L7.93501 21.9L17.835 12L7.93501 2.09998L6.16501 3.86998L14.295 12L6.16501 20.13H6.16501Z" fill="#888888"/>
            </svg>
          </div>
          <div class="col-sm-3 col-xs-3 bg-img home-serv-img" style = "background-image: url({{cat.serv_icon.path}})"></div>
          <div class="col-sm-9 col-xs-9 bg-img home-serv-det">
            <h5 class="service-category-title">{{cat.name}}</h5>
            <p class="p-text">{{str_limit(cat.content, 100)}}</p>
          </div>
        </div>
        </a>
      </div>
    {% endfor %}
  </div>
</div>
<div class="row noPM home-project bg-block">
  {variable tab="Project" type="text" name="prjHeader" label="Header"}{/variable}
  {variable tab="Project" type="textarea" name="prjTeaser" label="Teaser" size="small"}{/variable}
  <div class="container section-pad-3 text-center">
    <h6 class="block-title wowa fadeInUp">EXPERIENCED</h6>
    <h3 class="block-header wowa fadeInUp" data-wow-delay=".1s">{{prjHeader}}</h3>
    <p class="block-teaser p-text wowa fadeInUp" data-wow-delay="1.5s">{{prjTeaser}}</p>
  </div>
  <div class="row noPM">
    {% set projects = projects.records %}
    {% for prj in projects %}
    <a href="{{url('/project/'~prj.slug)}}">
      <div class="col-sm-4 col-xs-12 noP home-project-base hover-base trans-2">
        <div class="home-project-image bg-img hover-zoom" style="background-image: url('{{prj.proj_images[0].path}}')"></div>
        <div class="grd-overlay"></div>
        <div class="home-project-con">
          <h4 class="project-title">{{prj.name}}</h4>
          <p class="project-desc">{{prj.description}}</p>
          <div class="hover-effect cl-effect-10 cl-rev">
            <a href="{{url('/project/'~prj.slug)}}" data-hover="VIEW PROJECT">
              <span class="btn-text flex-con">VIEW PROJECT
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="ico-btn-arrow">
                <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
                </g>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
</div>
<div class="row noPM clients section-pad-3">
  {variable tab="Clients" type="text" name="clientHeader" label="Header"}{/variable}
  {variable tab="Clients" type="textarea" name="clientTeaser" label="Teaser" size="small"}{/variable}
  <div class="bg-pattern"></div>
  <div class="container text-center">
    <h6 class="block-title wow fadeInUp" data-wow-delay=".5s">TRUSTED</h6>
    <h3 class="block-header wow fadeInUp" data-wow-delay="1s">{{clientHeader}}</h3>
    <p class="block-teaser p-text wow fadeInUp" data-wow-delay="1.5s">{{clientTeaser}}</p>
    <div class="client-slider">
      {repeater tab="Clients" name="clients" prompt="Add" label="Clients"}
        {variable name="clientName" type="text" label="Name"}{/variable}
        {variable name="clientLogo" type="mediafinder" label="Logo" mode="image" comment="240px x 240px"}{/variable}
        <div class="client-slide">
          <div class="client-img bg-img wow fadeIn trans" data-wow-delay="{{loop.index0 / 4}}s" style="background-image: url({{fields.clientLogo|media}})" title="{{fields.clientName}}"></div>
        </div>
      {/repeater}
    </div>
    {% if clients|length > 12 %}
      <ul class="mecha-arrows trans">
        <li id="prev">
          <img src="{{'assets/svg/ico-btn-arrow.svg'|theme}}" alt="" class="center-block img-responsive">
        </li>
        <li id="next">
          <img src="{{'assets/svg/ico-btn-arrow.svg'|theme}}" alt="" class="center-block img-responsive">
        </li>
      </ul>
    {% endif %}
    <div class="col-sm-12 col-xs-12">
      <div class="home-partner wow fadeInUp" data-wow-delay=".5s">
        {variable tab="Partnership" label="Teaser" name="partnerTeaser" type="textarea"}{/variable}
        <h6 class="block-title">PARTNERSHIP</h6>
        <p class="p-text">{{partnerTeaser}}</p>
        <br>
        <div class="hover-effect cl-effect-10">
          <a href="{{url('/projects')}}" data-hover="BE OUR PARTNER NOW">
            <span class="btn-text flex-con">BE OUR PARTNER NOW
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g id="ico-btn-arrow">
              <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
              </g>
              </svg>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% set posts = blogPosts.posts %}
<div class="noPM row bg-block latest-news section-pad-3">
  <div class="container">
    <h3 class="block-header text-center wow fadeInUp" data-wow-delay=".5s">LATEST NEWS AND UPDATES</h3>
    <p class="block-teaser p-text text-center wow fadeInUp" data-wow-delay="1s">Our knowledge and experience are at your service</p>
    <br>
    <div class="flex-con">
      {% for latest in posts %}
        <div class="col-sm-3 col-xs-6 home-news-base hover-base trans wow fadeIn" data-wow-delay="{{loop.index / 2}}s">
          <a href="{{url('/article/'~latest.slug)}}">
            <div class="home-news-con hover-base card-shadow ">
              <div class="home-news-image bg-img hover-zoom" style="{% if latest.featured_images.count %}background-image: url('{{latest.featured_images[0].path}}'){% else %}background-image: url({{'assets/img/mecha-grayscale.png'|theme}}); background-size: 200px; background-color: white;{% endif %}"></div>
              <div class="home-news-det">
                <h6 class="service-category-title">{{latest.title}}</h6>
                <p class="published-label">Published on <span>{{latest.published_at|date('M d, Y')}}</span></p>
              </div>
            </div>
          </a>
        </div>
      {% endfor %}
    </div>
    <br><br>
    <div class="hover-effect cl-effect-10 text-center wow fadeInUp" data-wow-delay="1.5s">
      <a href="{{url('/news/')}}" data-hover="VIEW LATEST NEWS">
        <span class="btn-text flex-con">VIEW LATEST NEWS
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="ico-btn-arrow">
          <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
          </g>
          </svg>
        </span>
      </a>
    </div>
  </div>
</div>
<div class="row noPM home-social section-pad-3">
  <div class="bg-pattern-2"></div>
  <div class="container">
    <h3 class="block-header text-center wow fadeInUp" data-wow-delay=".5s">CONNECT WITH US</h3>
    <div class="block-hr wow fadeIn" data-wow-delay=".5s"></div>
    <br>
    <div class="col-sm-7 col-xs-12"></div>
    <div class="col-sm-5 col-xs-12">
      <!--
      <div class="fb-page" data-href="https://www.facebook.com/MechatrendsContractorsCorporation" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/MechatrendsContractorsCorporation" class="fb-xfbml-parse-ignore">
      <a href="https://www.facebook.com/MechatrendsContractorsCorporation">Mechatrends Contractors Corporation</a></blockquote></div>
      -->
    </div>
  </div>
</div>
{% partial 'site/footer' %}