description = "About Mechatrends"

[staticPage]
useContent = 0
default = 0
==
<?php
use System\Classes\CombineAssets;
  function onStart(){
    $css = ['assets/css/about.css', 'assets/video/videojs.min.css'];
    $scripts = ['assets/video/videojs.min.js', 'assets/video/youtube.min.js', 'assets/javascript/scrollbooster.min.js', 'assets/javascript/about.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 'staticPage' %}
{variable tab="Hero" type="mediafinder" mode="image" name="heroImage" label="Image" span="full" comment="1300px X 500px"}{/variable}
{variable tab="Hero" label="Header" type="text" name="heroHeader" span="left"}{/variable}
<div class="play-text hidden-xs"><img src="{{'assets/svg/ico-hero-play.svg'|theme}}">PLAY OUR VIDEO</div>
{% partial 'hero-banner' %}
<div class="row noPM section-pad-3 history">
  <div class="bg-pattern"></div>
  <div class="container">
    <div class = "row">
      <ul class="nav-pill flex-con trans">
        <li>
          <a href="{{url('/about')}}">
            <div class = "btn-text-b pill-active">BRIEF HISTORY OF MECHATRENDS</div>
          </a>
        </li>
        <li>
          <a href="{{url('/mission-vision')}}">
            <div class = "btn-text-b">MISSION AND VISION</div>
          </a>
        </li>
        <li>
          <a href="{{url('/organization')}}">
            <div class = "btn-text-b">OUR ORGANIZATION</div>
          </a>
        </li>
        <li>
          <a href="{{url('/corporate-social-responsibility-policy')}}">
            <div class = "btn-text-b">CORPORATE SOCIAL RESPONSIBILITY POLICY</div>
          </a>
        </li>
      </ul>
    </div>
    <div class="row flex-con">
      {variable tab="History" label="Header" type="text" name="historyHeader" span="left"}{/variable}
      {variable tab="History" label="Content" type="richeditor" name="historyContent" span="full" size="large"}{/variable}
      <div class="col-sm-6 col-xs-12">
        <h5 class="block-title wow fadeInLeft" data-wow-delay="0.5s" id="abt-block-reveal">OUR STORY</h5>
        <h3 class="block-header wow fadeInLeft" data-wow-delay="0.75s" id="abt-header-reveal">{{historyHeader}}</h3>
        <br>
        <div class="p-text wow fadeInUp" data-wow-delay="1.5s">
          {{historyContent|raw}}
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        {variable name="videoLink" span="left" label="YouTube video link" tab="History" type="text"}{/variable}
        {variable tab="History" type="mediafinder" mode="image" name="videoPoster" label="Video Poster" span="full" comment="500px X 500px"}{/variable}
        <div class="abt-video-base-border"></div>
        <div class="abt-video-base {% if videoLink %}w-vid{% endif %} bg-img wow fadeInRight" data-wow-delay="1s" id="abt-video-reveal" style="background-image: url({{videoPoster|media}})">
          {% if videoLink %}
            <video id="abt-video" class="hidden-xs video-js vjs-default-skin" mute muted loop autoplay
              data-setup='{ "controls": false, "muted": true, "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "{{videoLink}}", "youtube": { "modestbranding": 1, "showinfo": 0 } }] }'>
            </video>
          {% endif %}
          <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>
    </div>
  </div>
</div>
{repeater tab="Timeline" label = "Timeline" name="timeline" prompt="Add New"}
  {variable name="timelineYear" label="Year" type="text"}{/variable}
  {variable name="timelineDesc" label="Description" type="text"}{/variable}
  {variable name="timelineImage" label="Image" type="mediafinder" mode="image" comment="500px X 250px"}{/variable}
{/repeater}
<div class="row noPM timeline section-pad-3">
    <div class="bg-pattern-2" style="background-image: none;"></div>
		<div class="timeline-base flex-con no-wrap" style = "width:{{ timeline|length * 480 }}px">
      {% for tl in timeline %}
				<!--<div class="timeline-con {% if loop.index % 2 == 0 %}time-even{% else %}time-odd{% endif %} wowa fadeInRight" data-wow-delay = "{{loop.index / 2}}s" id = "item-{{loop.index}}">-->
				<div class="timeline-con time-odd wowa fadeInRight" data-wow-delay = "{{loop.index / 2}}s" id = "item-{{loop.index}}">
					<div class="school-con bg-img" style="background-image: url({{tl.timelineImage|media}})">
					</div>
					<div class = "year-con">
            <h3 class="timeline-year">{{tl.timelineYear}}</h3>
						<p class="p-text">{{tl.timelineDesc}}</p>
					</div>
				</div>
      {% endfor %}
		</div>
</div>
<div class="row noPM certification section-pad-3 bg-block">
  <div class="container text-center">
    <h3 class="block-header">Certifications</h3>
    <ul class="cert-base flex-con">
      {repeater tab="Certifications" label = "Certifications" name="certs" prompt="Add New"}
        {variable name="certName" label="Title" type="text"}{/variable}
        {variable name="certImage" label="Image" type="mediafinder" mode="image" comment="200px X 200px"}{/variable}
        <li class="cert-con wow fadeIn" data-wow-delay="{{loop.index0 / 3}}">
          <div style="background-image: url({{fields.certImage|media}})" class="center-block bg-img"></div>
          <p class="published-label">{{fields.certName}}</p>
        </li>
      {/repeater}
    </ul>
  </div>
  <br>
  <br>
  <div class="container corp-members text-center">
    <h5 class="block-title">CORPORATE MEMBERSHIPS</h5>
    <ul class="cert-base flex-con-stretch">
      {repeater tab="Memberships" label = "Memberships" name="members" prompt="Add New"}
        {variable name="memName" label="Member" type="text"}{/variable}
        {variable name="memImage" label="Image" type="mediafinder" mode="image" comment="200px X 200px"}{/variable}
        <li class="cert-con wow fadeIn flex-item" data-wow-delay="{{loop.index0 / 3}}">
          <div style="background-image: url({{fields.memImage|media}})" class="center-block bg-img"></div>
          <p class="published-label">{{fields.memName}}</p>
        </li>
      {/repeater}
    </ul>
  </div>
</div>
<div class="row noPM section-pad-3 policy">
  <div class="bg-pattern"></div>
  <div class="container flex-con">
    {variable tab="Policy" label="Header" type="text" name="policyHeader" span="left"}{/variable}
    {variable tab="Policy" label="Content" type="richeditor" name="policyContent" span="full" size="large"}{/variable}
    <div class="col-sm-6 col-xs-12">
      <h5 class="block-title wow fadeInLeft" data-wow-delay="0.5s" id="abt-block-reveal">POLICY</h5>
      <h3 class="block-header wow fadeInLeft" data-wow-delay="0.75s" id="abt-header-reveal">{{policyHeader}}</h3>
      <br>
      <div class="p-text policy-content wow fadeInUp" data-wow-delay="1.5s">
        {{policyContent|raw}}
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 flex-con-stretch">
      {repeater tab="Policy" label = "Policy" name="policy" prompt="Add New"}
        {variable name="policyName" label="Title" type="text"}{/variable}
        {variable name="policyDesc" label="Description" type="text"}{/variable}
        {variable name="policyImage" label="Image" type="mediafinder" mode="image" comment="75px X 75px"}{/variable}
        <div class="col-sm-6 col-xs-6 policy-base wow fadeInRight" data-wow-delay="{{loop.index0 / 2}}">
          <div class="policy-con">
            <img src="{{fields.policyImage|media}}" alt="" class="center-block img-responsive">
            <h6 class="policy-title">{{fields.policyName}}</h6>
            <p class="p-text">{{fields.policyDesc}}</p>
          </div>
        </div>
      {/repeater}
    </div>
  </div>
</div>
{% partial 'site/footer' %}