{% extends 'frontend/_base.html' %}
{% load static %}

{% block content_outer %}
  <div class="sec-LandingHero">
    <div class="sec-LandingHero_Inner">
      <div class="sec-LandingHero_Image" style="background-image: url('{% static 'img/sec-LandingHero.jpg' %}');"></div>
      <div class="sec-LandingHero_Content">
        <p class="sec-LandingHero_Page">Company</p>
        <h1 class="sec-LandingHero_Title">Leaders of data blending and analytics</h1>
      </div>
    </div>
  </div>

  <div class="sec-ContentBlocks">
    <div class="sec-ContentBlocks_Inner">
      <div class="sec-ContentBlocks_Content">
        <h2 class="sec-ContentBlocks_Title">A 12-year track record for excellence</h2>
        <p class="sec-ContentBlocks_Text">Aliquante sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante aliquet.</p>
      </div>

      <div class="sec-ContentBlocks_Items">
        <div class="sec-ContentBlocks_Item">
          <h4 class="sec-ContentBlocks_Title">Our culture 1</h4>
          <p class="sec-ContentBlocks_Text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada euismod.</p>
        </div>

        <div class="sec-ContentBlocks_Item">
          <h4 class="sec-ContentBlocks_Title">Our culture 2</h4>
          <p class="sec-ContentBlocks_Text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada euismod.</p>
        </div>

        <div class="sec-ContentBlocks_Item">
          <h4 class="sec-ContentBlocks_Title">Our culture 3</h4>
          <p class="sec-ContentBlocks_Text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada euismod.</p>
        </div>

        <div class="sec-ContentBlocks_Item">
          <h4 class="sec-ContentBlocks_Title">Our culture 4</h4>
          <p class="sec-ContentBlocks_Text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada euismod.</p>
        </div>

        <div class="sec-ContentBlocks_Item">
          <h4 class="sec-ContentBlocks_Title">Our culture 5</h4>
          <p class="sec-ContentBlocks_Text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada euismod.</p>
        </div>

        <div class="sec-ContentBlocks_Item">
          <h4 class="sec-ContentBlocks_Title">Our culture 6</h4>
          <p class="sec-ContentBlocks_Text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada euismod.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="sec-Split">
    <div class="sec-Split_Inner">
      <div class="sec-Split_Columns">
        <div class="sec-Split_Column">
          <div class="sec-Split_Icon"></div>
          <h3 class="sec-Split_Title">Our management team</h3>
          <p class="sec-Split_SubTitle">Alentociis natoque penatibus et sunt magmus erat a ante aliquet</p>
          <p class="sec-Split_Text">Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla blandit tempus porttitor. Aenean lacinia bibendum nulla blandit tempus porttitor.</p>
          <a class="sec-Split_Action" href="#">Learn more</a>
        </div>

        <div class="sec-Split_Column">
          <div class="sec-Split_Icon"></div>
          <h3 class="sec-Split_Title">Our career opportunities</h3>
          <p class="sec-Split_SubTitle">Alentociis natoque penatibus et sunt magmus erat a ante aliquet</p>
          <p class="sec-Split_Text">Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla blandit tempus porttitor. Aenean lacinia bibendum nulla blandit tempus porttitor.</p>
          <a class="sec-Split_Action" href="#">Learn more</a>
        </div>
      </div>
    </div>
  </div>

  <div class="sec-Timeline">
    <div class="sec-Timeline_Inner">
      <div class="sec-Timeline_Image" style="background-image: url({% static 'img/sec-Testimonials.jpg' %});"></div>
      <div class="sec-Timeline_Content">
        <blockquote class="sec-Timeline_Blockquote">
          <p class="sec-Timeline_Quote">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor.</p>
          <p class="sec-Timeline_Author">Alan Stewart, TESCO Chief Finacial Officer</p>
        </blockquote>
      </div>

      <div class="sec-Timeline_Carousel">
        <div class="car-Carousel">
          <div class="car-Control car-Control-prev"></div>

          <div class="car-Items">
            <div class="car-Item" aria-selected="false">
              <img class="car-Item_Image" src="{% static 'img/car-Item_Image1.png' %}">
            </div>

            <div class="car-Item" aria-selected="false">
              <img class="car-Item_Image" src="{% static 'img/car-Item_Image2.png' %}">
            </div>

            <div class="car-Item" aria-selected="true">
              <img class="car-Item_Image" src="{% static 'img/car-Item_Image3.png' %}">
            </div>

            <div class="car-Item" aria-selected="false">
              <img class="car-Item_Image" src="{% static 'img/car-Item_Image4.png' %}">
            </div>

            <div class="car-Item" aria-selected="false">
              <img class="car-Item_Image" src="{% static 'img/car-Item_Image5.png' %}">
            </div>
          </div>

          <div class="car-Control car-Control-next"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sec-News">
    <div class="sec-News_Inner">
      <div class="sec-News_Content">
        <h3 class="sec-News_Title">Re-imagining your data by design</h3>
        <p class="sec-News_Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam corporis cupiditate doloremque modi obcaecati porro recusandae, suscipit unde vitae.</p>
      </div>

      <div class="crd-Set">
        <div class="crd-Set_Item">
          <a class="crd-Card" href="#">
            <div class="crd-Icon" style="background-image: url({% static 'img/crd-Icon1.png' %});"></div>
            <div class="crd-Content">
              <h4 class="crd-Title">Scalable infrastructure</h4>
              <p class="crd-Text">Alternato natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis uismod mollis euismod tempestae grande.</p>
              <p class="crd-Action">Learn more</p>
            </div>
          </a>
        </div>

        <div class="crd-Set_Item">
          <a class="crd-Card" href="#">
            <div class="crd-Icon" style="background-image: url({% static 'img/crd-Icon1.png' %});"></div>
            <div class="crd-Content">
              <h4 class="crd-Title">IT-compliant</h4>
              <p class="crd-Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aliquid aspernatur et incidunt odit quae quia ratione tenetur vero? Aliquam, error, exercitationem.</p>
              <p class="crd-Action">Learn more</p>
            </div>
          </a>
        </div>

        <div class="crd-Set_Item">
          <a class="crd-Card" href="#">
            <div class="crd-Icon" style="background-image: url({% static 'img/crd-Icon1.png' %});"></div>
            <div class="crd-Content">
              <h4 class="crd-Title">Integration</h4>
              <p class="crd-Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis eligendi quas rem!</p>
              <p class="crd-Action">Learn more</p>
            </div>
          </a>
        </div>
      </div>

      <a class="sec-News_Action" href="#">View all news</a>
    </div>
  </div>

  <div class="sec-Cta">
    <div class="sec-Cta_Inner">
      <div class="sec-Cta_Columns">
        <div class="sec-Cta_Column">
          <h3 class="sec-Cta_Title">Preview the power of phixflow</h3>
          <p class="sec-Cta_Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quae quam tempore?</p>
          <a class="sec-Cta_Action" href="#">Request a demo</a>
        </div>

        <div class="sec-Cta_Column">
          <h3 class="sec-Cta_Title">Join our partner network</h3>
          <p class="sec-Cta_Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur hic officia ut veniam veritatis.</p>
          <a class="sec-Cta_Action" href="#">Become a partner</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}