File: /var/www/linde/wp-content/themes/linde/templates/pages/how-it-works.twig
{% extends "base.twig" %}
{% block content %}
<div class="hero-how">
<div class="container">
<div class="hero-how__img-wrap">
<div class="bubble">
<div class="bubble__img-wrap">
<picture>
<source srcset="{{ site.theme.link }}/frontend/img/desktop-bubble.png" media="(min-width: 1200px)">
<img class="bubble__img" src="{{ site.theme.link }}/frontend/img/mobile-bubble.png" alt="" />
</picture>
</div>
<div class="bubble__content">
<h1 class="bubble__title">Hi! I am <span>Oxy</span>, your LVA guide</h1>
<p class="bubble__text">I am happy to show you the software & hardware set-up. It is very simple!</p>
</div>
</div>
<picture>
<source srcset="{{ site.theme.link }}/frontend/img/hero-how-desktop.png" media="(min-width: 768px)">
<img class="hero-how__img" src="{{ site.theme.link }}/frontend/img/hero-how-mobile.png" alt="" />
</picture>
</div>
</div>
</div>
<section class="get-started">
<div class="container">
<div class="text-gradient__wrap text-gradient__wrap--center get-started__title text-align-center">
<span class="text-gradient h2">Here are a few simple steps to get started...</span>
</div>
<div class="steps__wrap">
<div class="steps__row">
<div class="steps__item step-1">
<div class="steps__img-wrap">
<img class="steps__img" src="{{ site.theme.link }}/frontend/img/step-1.png" alt="" />
</div>
<div class="steps__content">
<h3 class="steps__title h3">Contact us</h3>
<h4 class="steps__text">get an offer that fits your training need</h4>
</div>
<img class="line-mobile" src="{{ site.theme.link }}/frontend/img/mobile-link.svg" alt="" />
<img class="line line-1" src="{{ site.theme.link }}/frontend/img/line-1.svg" alt="" />
<div class="line line-overlay" data-line></div>
</div>
<div class="steps__item step-2">
<div class="steps__img-wrap">
<img class="steps__img" src="{{ site.theme.link }}/frontend/img/step-2.png" alt="" />
</div>
<div class="steps__content">
<h3 class="steps__title h3">Subscribe</h3>
<h4 class="steps__text">sign on a subscription package</h4>
</div>
<img class="line-mobile line-mobile--alt" src="{{ site.theme.link }}/frontend/img/mobile-link.svg" alt="" />
<img class="line line-2" src="{{ site.theme.link }}/frontend/img/line-2.svg" alt="" />
<div class="line line-overlay" data-line></div>
</div>
<div class="steps__item step-3">
<div class="steps__img-wrap">
<img class="steps__img" src="{{ site.theme.link }}/frontend/img/step-3.png" alt="" />
</div>
<div class="steps__content">
<h3 class="steps__title h3">Get Confirmation</h3>
<h4 class="steps__text">receive a registration email with a download link</h4>
</div>
<img class="line-mobile" src="{{ site.theme.link }}/frontend/img/mobile-link.svg" alt="" />
</div>
</div>
<div class="steps__row">
<img class="line line-3" src="{{ site.theme.link }}/frontend/img/line-3.svg" alt="" />
<div class="line-overlay line-overlay-3" data-line></div>
<div class="steps__item step-4">
<div class="steps__img-wrap">
<img class="steps__img" src="{{ site.theme.link }}/frontend/img/step-4.png" alt="" />
</div>
<div class="steps__content">
<h3 class="steps__title h3">Set-up account</h3>
<h4 class="steps__text">set your password</h4>
</div>
<img class="line-mobile line-mobile--alt" src="{{ site.theme.link }}/frontend/img/mobile-link.svg" alt="" />
<img class="line line-4" src="{{ site.theme.link }}/frontend/img/line-4.svg" alt="" />
<div class="line line-overlay" data-line></div>
</div>
<div class="steps__item step-5">
<div class="steps__img-wrap">
<img class="steps__img" src="{{ site.theme.link }}/frontend/img/step-5.png" alt="" />
</div>
<div class="steps__content">
<h3 class="steps__title h3">Download App</h3>
<h4 class="steps__text">install the LVA app to your VR computer</h4>
</div>
<img class="line-mobile" src="{{ site.theme.link }}/frontend/img/mobile-link.svg" alt="" />
<img class="line line-5" src="{{ site.theme.link }}/frontend/img/line-5.svg" alt="" />
<div class="line line-overlay line-overlay-5" data-line></div>
</div>
<div class="steps__item step-6">
<div class="steps__img-wrap">
<img class="steps__img" src="{{ site.theme.link }}/frontend/img/step-6.png" alt="" />
</div>
<div class="steps__content">
<h3 class="steps__title h3">Log-in</h3>
<h4 class="steps__text">and start your LVA experience</h4>
</div>
</div>
</div>
</div>
<div class="text-gradient__wrap text-gradient__wrap--center get-started__title-alt text-align-center">
<span class="text-gradient h2">...and this is what you will need</span>
</div>
<div class="row requirements">
<div class="col-12 col-lg-4 requirements__left">
<img class="requirements__line-left" src="{{ site.theme.link }}/frontend/img/line-left.svg" alt="" />
<div class="requirements__line-overlay requirements__line-overlay--left" data-arrows></div>
<div>
<h2 class="requirements__title">{{ post.meta("lower_title_1") }}</h2>
<div class="post-content larger">
{{ post.meta("lower_description_1") }}
</div>
</div>
</div>
<div class="col-12 col-lg-4 requirements__middle">
<div class="requirements__img-wrap">
<picture>
<source srcset="{{ site.theme.link }}/frontend/img/oxy-laptop-desktop.png" media="(min-width: 768px)">
<img class="requirements__img" src="{{ site.theme.link }}/frontend/img/oxy-laptop-mobile.png" alt="" />
</picture>
</div>
</div>
<div class="col-12 col-lg-3 offset-lg-1 requirements__right">
<img class="requirements__line-right" src="{{ site.theme.link }}/frontend/img/line-right.svg" alt="" />
<div class="requirements__line-overlay requirements__line-overlay--right" data-arrows></div>
<div>
<h2 class="requirements__title">{{ post.meta("lower_title_2") }}</h2>
<div class="post-content larger">
{{ post.meta("lower_description_2") }}
</div>
</div>
</div>
</div>
</div>
</section>
<div class="get-started__block">
<div class="container">
<div class="row">
<div class="col-12">
<div class="get-started__content">
<p class="h3">Like what you see?</p>
<a class="btn btn--dark modal-form-trigger" onClick="gtag('event', 'form_open', {'event_category' : 'Get Started click', 'event_label' : 'Get started now - How it works' });">Get started now</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}