<?php
// Template name: Home page
get_header();
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
?>
<main>
<?php $main = get_field('main'); ?>
<section class="hero -homepage" data-animate-group="list">
<div class="container-big">
<div class="hero__wrapper">
<div class="hero-content">
<h1 class="title title-1" data-animate="word" data-index="1">
<?php echo $main['title']; ?>
</h1>
<?php
if ($main['subtitle']) :
?>
<p class="subtitle body-1" data-animate="swim-top" data-index="2">
<?php echo $main['subtitle']; ?>
</p>
<?php
endif;
?>
<div class="buttons" data-animate="swim-top" data-index="3">
<?php if (!empty($main['buttons'])) :
foreach ($main['buttons'] as $button) :?>
<?php echo get_button_group_field($button['button']); ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
<div class="hero-media">
<img class="-lazyload" <?php echo $srcset; ?>
src="<?php echo $main["image"]['url']; ?>"
alt="<?php echo $main["image"]['alt']; ?>" data-animate="swim-top" data-index="4">
</div>
</div>
</div>
</section>
<?php $recommends = get_field('recommends'); ?>
<section class="recommends" data-animate-group="list">
<div class="container">
<h2 class="title title-2" data-animate="word"><?php echo esc_html($recommends['title']); ?></h2>
<div class="recommends-swiper-container">
<div class="recommends-swiper swiper-container" data-animate="swim-top">
<div class="swiper-wrapper">
<?php
if (!empty($recommends['recommends_items'])) :
foreach ($recommends['recommends_items'] as $item) : ?>
<div class="swiper-slide">
<a href="<?php echo esc_url($item['link']); ?>" class="recommends-card">
<div class="recommends-card-img">
<?php if ($item['image']) : ?>
<img class="-lazyload"
<?php echo $srcset; ?>
src="<?php echo esc_url($item['image']['url']); ?>"
alt="<?php echo esc_attr($item['image']['alt']); ?>">
<?php endif; ?>
</div>
<div class="recommends-card-content">
<h3 class="recommends-card-title body-2"><?php echo esc_html($item['title']); ?></h3>
</div>
</a>
</div>
<?php endforeach;
endif; ?>
</div>
<div class="swiper-navigation">
<div class="swiper-pagination"></div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev slider-btn -green"></div>
<div class="swiper-button-next slider-btn -green"></div>
</div>
</div>
</div>
</section>
<?php $features = get_field('features'); ?>
<section class="features">
<div class="container-big">
<video class="features-video -lazyload"
poster="<?php echo $features['video']['poster']['url']; ?>"
autoplay loop muted playsinline
data-src="<?php echo $features['video']['video']['url']; ?>"
data-start-position="5"
loading="lazy">
</video>
</div>
<?php if (!empty($features['features_items'])) : ?>
<div class="container">
<div class="features__wrapper">
<?php foreach ($features['features_items'] as $feature) : ?>
<div class="features-card" data-animate="swim-top">
<div class="icon --bg-secondary-color">
<img class="-lazyload"
<?php echo $srcset; ?>
src="<?php echo $feature['icon']['url']; ?>"
alt="<?php echo $feature['icon']['alt']; ?>">
</div>
<p class="title title-5"><?php echo $feature['title']; ?></p>
<p class="description body-3"><?php echo $feature['description']; ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</section>
<?php $about = get_field('about'); ?>
<section class="about-home" data-animate-group="list">
<div class="container-big">
<div class="about-home__wrapper">
<div class="image --bg-secondary-color">
<img class="-lazyload"
<?php echo $srcset; ?>
src="<?php echo $about['image']['url']; ?>" alt="<?php echo $about['image']['alt']; ?>"
data-animate="swim-top">
</div>
<div class="container about-home-content">
<p class="title title-4" data-animate="swim-top"><?php echo $about['title']; ?></p>
<p class="description body-2" data-animate="swim-top"><?php echo $about['description']; ?></p>
<div class="buttons" data-animate="swim-top">
<?php if (!empty($about['buttons'])) :
foreach ($about['buttons'] as $button) :?>
<?php echo get_button_group_field($button['button']); ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<?php
$reviews = get_field('reviews');
$reviews_mod = $reviews['reviews_mod'];
$review_items = $reviews['review_items'];
set_query_var('reviews_mod', $reviews_mod);
set_query_var('review_items', $review_items);
get_template_part('templates/reviews');
?>
<?php get_template_part('templates/event-calendar') ?>
<?php $superhero = get_field('superhero'); ?>
<section class="superhero-home">
<div class="container-big">
<h2 class="title title-2" data-animate="word"><?php echo $superhero['title']; ?></h2>
<div class="image" data-animate="fade">
<img class="-lazyload"
<?php echo $srcset; ?> src="<?php echo $superhero['image']['url']; ?>"
alt="<?php echo $superhero['image']['alt']; ?>">
</div>
<?php echo get_button_group_field($superhero['button']); ?>
</div>
</section>
<?php get_template_part('templates/request') ?>
<?php get_template_part('templates/get-in-touch') ?>
</main>
<?php
get_footer();
?>