File: /var/www/linde-ai/wp-content/themes/linde/static-templates/how-it-works-static.php
<?php
/*
* Template Name: How it works static
*
*/
get_header("static");
?>
<main>
<div class="hero-how">
<div class="container">
<div class="hero-how__img-wrap">
<div class="bubble">
<div class="bubble__img-wrap">
<picture>
<source srcset="<?= THEMEROOT ?>/frontend/img/desktop-bubble.png" media="(min-width: 1200px)">
<img class="bubble__img" src="<?= THEMEROOT ?>/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="<?= THEMEROOT ?>/frontend/img/hero-how-desktop.png" media="(min-width: 768px)">
<img class="hero-how__img" src="<?= THEMEROOT ?>/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">
<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="<?= THEMEROOT ?>/frontend/img/step-1.png" alt="" />
</div>
<div class="steps__content">
<h1 class="steps__title h3">Contact us</h1>
<p class="steps__text h4">get an offer that fits your training need</p>
</div>
<img class="line-mobile" src="<?= THEMEROOT ?>/frontend/img/mobile-link.svg" alt="" />
<img class="line line-1" src="<?= THEMEROOT ?>/frontend/img/line-1.svg" alt="" />
</div>
<div class="steps__item step-2">
<div class="steps__img-wrap">
<img class="steps__img" src="<?= THEMEROOT ?>/frontend/img/step-2.png" alt="" />
</div>
<div class="steps__content">
<h1 class="steps__title h3">Subscribe</h1>
<p class="steps__text h4">sign on a subscription package</p>
</div>
<img class="line-mobile line-mobile--alt" src="<?= THEMEROOT ?>/frontend/img/mobile-link.svg" alt="" />
<img class="line line-2" src="<?= THEMEROOT ?>/frontend/img/line-2.svg" alt="" />
</div>
<div class="steps__item step-3">
<div class="steps__img-wrap">
<img class="steps__img" src="<?= THEMEROOT ?>/frontend/img/step-3.png" alt="" />
</div>
<div class="steps__content">
<h1 class="steps__title h3">Get Confirmation</h1>
<p class="steps__text h4">receive a registration email with a download link</p>
</div>
<img class="line-mobile" src="<?= THEMEROOT ?>/frontend/img/mobile-link.svg" alt="" />
</div>
</div>
<div class="steps__row">
<img class="line line-3" src="<?= THEMEROOT ?>/frontend/img/line-3.svg" alt="" />
<div class="steps__item step-4">
<div class="steps__img-wrap">
<img class="steps__img" src="<?= THEMEROOT ?>/frontend/img/step-4.png" alt="" />
</div>
<div class="steps__content">
<h1 class="steps__title h3">Set-up account</h1>
<p class="steps__text h4">set your password</p>
</div>
<img class="line-mobile line-mobile--alt" src="<?= THEMEROOT ?>/frontend/img/mobile-link.svg" alt="" />
<img class="line line-4" src="<?= THEMEROOT ?>/frontend/img/line-4.svg" alt="" />
</div>
<div class="steps__item step-5">
<div class="steps__img-wrap">
<img class="steps__img" src="<?= THEMEROOT ?>/frontend/img/step-5.png" alt="" />
</div>
<div class="steps__content">
<h1 class="steps__title h3">Download App</h1>
<p class="steps__text h4">install the LVA app to your VR computer</p>
</div>
<img class="line-mobile" src="<?= THEMEROOT ?>/frontend/img/mobile-link.svg" alt="" />
<img class="line line-5" src="<?= THEMEROOT ?>/frontend/img/line-5.svg" alt="" />
</div>
<div class="steps__item step-6">
<div class="steps__img-wrap">
<img class="steps__img" src="<?= THEMEROOT ?>/frontend/img/step-6.png" alt="" />
</div>
<div class="steps__content">
<h1 class="steps__title h3">Log-in</h1>
<p class="steps__text h4">and start your LVA experience</p>
</div>
</div>
</div>
</div>
<div class="text-gradient__wrap text-gradient__wrap--center get-started__title-alt">
<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="<?= THEMEROOT ?>/frontend/img/line-left.svg" alt="" />
<h2 class="h2 requirements__title">VR capable computer</h2>
<p class="h4 requirements__text">Pellentesque volutpat non tempor, diam proin orci turpis vivamus vehicula. Viverra adipiscing ridiculus justo morbi commodo ac netus egestas. Aliquet mattis mi eget suspendisse velit. Leo quam dictum eu dolor integer adipiscing suspendisse malesuada in. Pretium at nullam purus posuere odio elit ornare pellentesque.</p>
<p class="h4 requirements__text">Mattis elit tristique ultricies ultrices ultricies donec. Eget egestas venenatis amet, amet tellus. Etiam enim, metus est vulputate amet viverra cursus fringilla habitasse.</p>
</div>
<div class="col-12 col-lg-4 requirements__middle">
<div class="requirements__img-wrap">
<picture>
<source srcset="<?= THEMEROOT ?>/frontend/img/oxy-laptop-desktop.png" media="(min-width: 768px)">
<img class="requirements__img" src="<?= THEMEROOT ?>/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="<?= THEMEROOT ?>/frontend/img/line-right.svg" alt="" />
<h2 class="h2 requirements__title">VR headset</h2>
<p class="h4 requirements__text">Nisl dignissim consequat lacus tortor quisque commodo. Adipiscing aliquam scelerisque quam cras. Justo vulputate laoreet justo at nam nisi in magna ultrices. Posuere vitae, accumsan, nam eleifend commodo quis mi non. Nullam ut vel eu ut.</p>
</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 href="#" class="btn btn--dark modal-form-trigger">Get started now</a>
</div>
</div>
</div>
</div>
</div>
</main>
<?php
get_footer("static");
?>