File: /var/www/linde-ai/wp-content/themes/linde/static-templates/homepage-static.php
<?php
/*
* Template Name: Homepage static
*
*/
get_header("static");
?>
<main>
<section class="carousel-section">
<div class="slider" id="js-slider">
<div class="slider-items">
<div class="slider__item-wrap active">
<div class="slider__item">
<img class="slider__img" src="<?= THEMEROOT ?>/frontend/img/training-1.png">
</div>
<div class="slider__item-content">
<h1>A completely different title</h1>
<div class="slider__item-details">
<p>Introducing new course</p>
<p><strong>Responding to an incident in confined space</strong></p>
<div class="btn-center">
<a href="#" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
<div class="slider__item-wrap next">
<div class="slider__item">
<img class="slider__img" src="<?= THEMEROOT ?>/frontend/img/slider-1.png">
</div>
<div class="slider__item-content">
<h1>Slider title number two</h1>
<div class="slider__item-details">
<p></p>
<p><strong>Check this out!</strong></p>
<div class="btn-center">
<a href="#" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
<div class="slider__item-wrap">
<div class="slider__item">
<img class="slider__img" src="<?= THEMEROOT ?>/frontend/img/training-2.png">
</div>
<div class="slider__item-content">
<h1>Slider title number three</h1>
<div class="slider__item-details">
<p></p>
<p><strong>Check this out!</strong></p>
<div class="btn-center">
<a href="#" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
<div class="slider__item-wrap">
<div class="slider__item">
<img class="slider__img" src="<?= THEMEROOT ?>/frontend/img/slider-1.png">
</div>
<div class="slider__item-content">
<h1>Slider title number four</h1>
<div class="slider__item-details">
<p></p>
<p><strong>Check this out!</strong></p>
<div class="btn-center">
<a href="#" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
<div class="slider__item-wrap">
<div class="slider__item">
<img class="slider__img" src="<?= THEMEROOT ?>/frontend/img/training-1.png">
</div>
<div class="slider__item-content">
<h1>Slider title number five</h1>
<div class="slider__item-details">
<p>Introducing new course</p>
<p><strong>Responding to an incident in confined space</strong></p>
<div class="btn-center">
<a href="#" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
<div class="slider__item-wrap">
<div class="slider__item">
<img class="slider__img" src="<?= THEMEROOT ?>/frontend/img/slider-1.png">
</div>
<div class="slider__item-content">
<h1>Slider title number six</h1>
<div class="slider__item-details">
<p>Introducing new course</p>
<p><strong>Responding to an incident in confined space</strong></p>
<div class="btn-center">
<a href="#" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="slider__pagination"></div>
<div class="slider-arrows">
<div class="slider-arrows__left">
<svg class="icon-arrow-left">
<use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-arrow-left"></use>
</svg>
</div>
<div class="slider-arrows__right">
<svg class="icon-arrow-right">
<use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-arrow-right"></use>
</svg>
</div>
</div>
</div>
</section>
<section class="vr-academy">
<div class="container">
<div class="row">
<div class="col-12 col-lg-5">
<h1>About the product</h1>
<p>The Linde Virtual Academy is a continuosly expanding library of virtual reality training courses for field operators in industrial plants.</p>
</div>
</div>
</div>
</section>
<section class="home-steps">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 home-steps__img-col">
<div class="home-steps__img-wrap">
<img src="<?= THEMEROOT ?>/frontend/img/oxy.png">
</div>
</div>
<div class="col-12 col-md-9 home-steps__text-col">
<div class="text-gradient__wrap text-gradient__wrap--center">
<h1 data-aos="zoom-in" class="home-steps__title text-gradient">How it works</h1>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 home-steps__item">
<h2 class="h1">1</h2>
<h3 class="h2">Subscribe</h3>
<p>Get your yearly subscription package and install the Linde Virtual Academy app</p>
</div>
<div class="col-12 col-md-4 home-steps__item">
<h2 class="h1">2</h2>
<h3 class="h2">Download</h3>
<p>Log-it to the app and download the training you need</p>
</div>
<div class="col-12 col-md-4 home-steps__item">
<h2 class="h1">3</h2>
<h3 class="h2">Start training</h3>
<p>It really is that simple!</p>
</div>
</div>
</div>
<div class="btn-center">
<a href="how-it-works" class="btn btn--gradient">Learn more</a>
</div>
</div>
</div>
</div>
</section>
<section class="values">
<div class="container">
<h1 class="values__title">
<span class="values__title-addon">Linde Virtual academy</span>
<div class="text-gradient__wrap text-gradient__wrap--center">
<span class="text-gradient">Values</span>
</div>
</h1>
<div class="row">
<div class="col-12 col-md-4 values__item">
<img class="" src="<?= THEMEROOT ?>/frontend/img/infographic-safe.svg" alt="Safe infographic" />
<h2>Safe</h2>
<p>Learn from mistakes in a safe environment and keep inexperienced hands away from assets</p>
</div>
<div class="col-12 col-md-4 values__item">
<img class="" src="<?= THEMEROOT ?>/frontend/img/infographic-centralized.svg" alt="centralized infographic" />
<h2>Centralized</h2>
<p>All lessons learnt and knowhow are re-created and kept in-house. Knowledge is not lost with workforce retirement</p>
</div>
<div class="col-12 col-md-4 values__item">
<img class="" src="<?= THEMEROOT ?>/frontend/img/infographic-effective.svg" alt="effective infographic" />
<h2>Effective</h2>
<p>Knowledge is gained and retained through hands-on training. Train on scenarios that are hard to replicate in reality</p>
</div>
</div>
</div>
</section>
<section class="img-section">
<div class="img-section__img-wrap">
<picture>
<source srcset="<?= THEMEROOT ?>/frontend/img/linde-firefighting-desktop.jpg" media="(min-width: 620px)">
<img class="" src="<?= THEMEROOT ?>/frontend/img/linde-firefighting-mobile.jpg" alt="Linde firefighting VR" />
</picture>
</div>
</section>
<section class="courses">
<div class="container">
<div class="text-gradient__wrap text-gradient__wrap--center">
<h1 class="h2 courses__title text-gradient">Latest courses in library</h1>
</div>
<div class="courses__wrap homepage-course-slider owl-carousel">
<article class="course-box">
<div class="course-box__header">
<div class="course-box__img-wrap">
<img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-1.jpg" alt="" />
<div class="course-box__label">
<span>new</span>
</div>
</div>
</div>
<div class="course-box__content">
<div class="h6 course-box__subtitle">Session 01 | Module name</div>
<h2 class="h4 course-box__title">Starting and regulating coldbox purging</h2>
<p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment.</p>
<div class="btn-left">
<a href="#" class="btn btn--gradient-small">Learn more</a>
</div>
</div>
</article>
<article class="course-box">
<div class="course-box__header">
<div class="course-box__img-wrap">
<img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-2.jpg" alt="" />
<div class="course-box__watch video-trigger" data-video-link="vid1">
<div class="course-box__text">watch trailer</div>
<div class="course-box__icon">
<svg class="icon-play">
<use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="course-box__content">
<div class="h6 course-box__subtitle">Session 02 | Module name</div>
<h2 class="h4 course-box__title">Manually switching between reactors</h2>
<p>Learn how to carry out this critical process safely and efficiently and gain practical experience.</p>
<div class="btn-left">
<a href="#" class="btn btn--gradient-small">Learn more</a>
</div>
</div>
</article>
<article class="course-box">
<div class="course-box__header">
<div class="course-box__img-wrap">
<img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-3.jpg" alt="" />
</div>
</div>
<div class="course-box__content">
<div class="h6 course-box__subtitle">Session 03 | Module name</div>
<h2 class="h4 course-box__title">Emergency response to a pump fire</h2>
<p>Safely execute a procedure which is not done very often and keep the plant in good condition for a long service life.</p>
<div class="btn-left">
<a href="#" class="btn btn--gradient-small">Learn more</a>
</div>
</div>
</article>
</div>
<div class="btn-center">
<a href="#" class="btn btn--hollow text-dark"><span>Go to courses</span></a>
</div>
</div>
</section>
<section class="get-started get-started--homepage">
<div class="get-started__img-wrap">
<picture>
<source srcset="<?= THEMEROOT ?>/frontend/img/hardware-lady-desktop.jpg" media="(min-width: 620px)">
<img class="" src="<?= THEMEROOT ?>/frontend/img/hardware-lady-mobile.jpg" alt="Linde firefighting VR" />
</picture>
</div>
<div class="get-started__block">
<div class="container">
<div class="row">
<div class="col-12">
<div class="get-started__content">
<p class="h3">Ready to gain practical experience through virtual reality?</p>
<a href="#" class="btn btn--dark modal-form-trigger">Get started now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="newsletter">
<div class="container container--narrow">
<div class="row">
<div class="col-md-6">
<div class="newsletter__image">
<img src="<?= THEMEROOT ?>/frontend/img/newsletter.png" alt="" />
</div>
</div>
<div class="col-md-6">
<div class="newsletter__titles">
<p class="p newsletter__subtitle">Sign Up &</p>
<h2 class="h2 newsletter__title">Stay Updated</h2>
<p class="h4 newsletter__text">Subscribe to our newsletter and get notified about new courses</p>
</div>
</div>
</div>
<div class="row">
<form action="" class="newsletter-form m-t-8">
<div class="row">
<div class="col-md-4">
<div class="newsletter-form__group">
<label class="newsletter-form__label" for="firstName">First Name</label>
<input class="newsletter-form__input" type="text" id="firstName" >
</div>
</div>
<div class="col-md-4">
<div class="newsletter-form__group">
<label class="newsletter-form__label" for="lastName">Last Name</label>
<input class="newsletter-form__input" type="text" id="lastName">
</div>
</div>
<div class="col-md-4">
<div class="newsletter-form__group">
<label class="newsletter-form__label" for="email">Email</label>
<input class="newsletter-form__input" type="text" id="email">
</div>
</div>
</div>
<div class="newsletter-form__error h6 m-b-0 m-t-2">
This email address has already been subscribed.
</div>
<button type="submit" class="newsletter-form__button btn btn--gradient p-2 m-t-8">Sign Up</button>
</form>
<div class="newsletter-success m-t-8">
<h2 class="h3 newsletter-success__title m-b-2">Thank you!</h2>
<p class="h4">You have successfully subscribed to our newsletter.</p>
</div>
</div>
</div>
</section>
</main>
<?php
get_footer("static");
?>