infusionvlc/ConexionFelina

<section id="intro-video">
  <div class="container video-container">
    <img class="full-width" src="/covi_construccion.svg" />
  </div>
</section>
<section id ="intro" class="eter-section">
  <div class="container">
    <p class="orange"><%= t 'landing.home.intro' %></p>
    <p class="orange"><%= t 'landing.home.intro2' %></p>
    <span class="breathe"></span>
    <div class="center">
      <img src="ciudad.svg" class="landing-illustration-mini" />
    </div>
  </div>
</section>
<section id ="plagues">
  <div class="container row flex-center">
    <div class="col-sm-12 col-md-6 order-last order-lg-first">
      <div class="center">
        <img src="plagas.svg" class="full-width" />
      </div>
    </div>
    <div class="col-sm-12 col-md-6 spaced-bottom">
      <h2><%= t 'landing.home.plagues.title' %></h2>
      <p><%= t 'landing.home.plagues.paragraph1' %></p>
      <p><%= t 'landing.home.plagues.paragraph2' %></p>
    </div>
  </div>
</section>
<section id ="heroes" class="eter-section">
  <div class="container row flex-center">
    <div class="col-sm-12 col-md-6 spaced-bottom">
      <h2><%= t 'landing.home.heroes.title' %></h2>
      <p><%= t 'landing.home.heroes.paragraph1' %></p>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="center">
        <img src="sociable.svg" class="full-width" />
      </div>
    </div>
  </div>
</section>
<section id ="example" class="grey-section">
  <div class="container center">
    <img src="corazon.svg" class="landing-illustration" />
    <span class="breathe"></span>
    <h2><%= t 'landing.home.example.title' %></h2>
    <p class="min-spacing"><%= t 'landing.home.example.paragraph1' %></p>
    <p><%= t 'landing.home.example.paragraph2' %></p>
  </div>
</section>
<section id ="power">
  <div class="container row flex-center">
    <div class="col-sm-12 col-md-6 order-last order-lg-first">
      <div class="center">
        <img src="zen.gif" class="full-width" />
      </div>
    </div>
    <div class="col-sm-12 col-md-6 spaced-bottom">
      <h2><%= t 'landing.home.power.title' %></h2>
      <p><%= t 'landing.home.power.paragraph1' %></p>
      <p><%= t 'landing.home.power.paragraph2' %></p>
      <p><%= t 'landing.home.power.paragraph3' %></p>
    </div>
  </div>
</section>
<section id ="guardian" class="eter-section">
  <div class="container row flex-center">
    <div class="col-sm-12 col-md-6 spaced-bottom">
      <h2><%= t 'landing.home.guardian.title' %></h2>
      <p><%= t 'landing.home.guardian.paragraph1' %></p>
    </div>
    <div class="col-sm-12 col-md-6">
      <div class="center">
        <img src="seguridad.svg" class="full-width" />
      </div>
    </div>
  </div>
</section>
<section id ="adorable">
  <div class="container center">
    <img src="adorables.gif" class="landing-illustration" />
    <span class="breathe"></span>
    <h2 class="huge-title"><%= t 'landing.home.adorable.title' %></h2>
  </div>
</section>
<section id ="society" class="eter-section">
  <div class="container row flex-center">
    <div class="col-sm-12 col-md-6 order-last order-lg-first">
      <div class="center">
        <img src="medalla.svg" class="landing-illustration medal" />
      </div>
    </div>
    <div class="col-sm-12 col-md-6 spaced-bottom">
      <h2 class="orange-title"><%= t 'landing.home.society.title' %></h2>
      <p><%= t 'landing.home.society.paragraph1' %></p>
    </div>
  </div>
</section>
<section id ="action">
  <div class="container row flex-center">
    <div class="col-sm-12 col-md-6 center order-last order-md-first">
      <p><%= t 'landing.home.action' %></p>
      <a href="https://infusionvlc.github.io/covi_campaign/" target="_blank" class="action-button">
        <%= t 'landing.shared.action_button' %>
      </a>
    </div>
    <div class="col-sm-12 col-md-6 order-first order-md-last spaced-bottom">
      <div class="center">
        <img src="capa.gif" class="full-width" />
      </div>
    </div>
  </div>
</section>