<?php
// Template name: Home page
get_header();
$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
$main = get_field('main');
?>
<main>
<section class="hero gradient-section" id="<?php echo $main['section_id']; ?>" data-animate-group="list">
<div class="gradient" data-animate="fade">
<picture>
<source srcset="<?php echo $template_directory; ?>/assets/images/gradients/hero-dots-mob.png" media="(max-width: 760px)">
<img src="<?php echo $template_directory; ?>/assets/images/gradients/hero-dots.png" alt="">
</picture>
</div>
<div class="container">
<div class="hero__wrapper">
<div class="content">
<h1 class="title title-1 mob-title-1" data-animate="word" data-index="1">
<?php echo $main['title']; ?>
</h1>
<?php
if ($main['subtitle']) :
?>
<p class="subtitle body-1 mob-body-1" data-animate="swim-top" data-index="2">
<?php echo $main['subtitle']; ?>
</p>
<?php
endif;
$link = get_link_group_field($main['link']);
if ($link):
?>
<a href="<?php echo $link['url']; ?>" <?php echo $link['target']; ?> class="button button-text mob-button-text" data-animate="swim-top" data-index="2">
<?php echo $link['title']; ?>
<span class="arrow"></span>
</a>
<?php endif; ?>
</div>
<div class="media" data-animate="fade" data-index="2" data-do-not-clear-animate>
<img src="<?php echo $main['main_image']['url']; ?>" alt="<?php echo $main['main_image']['alt']; ?>">
<div class="absolut-images paralax_object">
<div class="img text-card text-card-2 layer" data-depth="0.5" data-index="3"><img src="<?php echo $template_directory; ?>/assets/images/hero/text-card-2.png" alt=""></div>
<div class="img layer blur" data-depth="0.8" data-index="2"><img src="<?php echo $template_directory; ?>/assets/images/hero/toy.png" alt=""></div>
<div class="img layer logo" data-depth="-0.6" data-index="4"><img src="<?php echo $template_directory; ?>/assets/images/hero/modo.png" alt=""></div>
<div class="img layer blur" data-depth="-0.7" data-index="4"><img src="<?php echo $template_directory; ?>/assets/images/hero/casino.png" alt=""></div>
<div class="img layer logo" data-depth="0.2" data-index="2"><img src="<?php echo $template_directory; ?>/assets/images/hero/paypal.png" alt="" ></div>
<div class="img layer blur" data-depth="0.5" data-index="3.5"><img src="<?php echo $template_directory; ?>/assets/images//hero/gamepad.png" alt="" ></div>
<div class="img layer logo" data-depth="-0.7" data-index="4"><img src="<?php echo $template_directory; ?>/assets/images/hero/mercado-pago.png" alt="" ></div>
<div class="img layer text-card" data-depth="0.6" data-index="3"><img src="<?php echo $template_directory; ?>/assets/images/hero/text-card-1.png" alt=""></div>
</div>
</div>
</div>
</div>
</section>
<?php
$methods = get_field('methods');
?>
<section class="methods-section">
<div class="anchor" id="<?php echo $methods['section_id']; ?>"></div>
<div class="container">
<div class="text-content">
<?php
if ($methods['tag']) :
?>
<div class="tag tag-text mob-tag-text" data-animate="swim-top"><?php echo $methods['tag']; ?></div>
<?php
endif;
if ($methods['title']) :
?>
<h2 class="title title-2 mob-title-2" data-animate="word"><?php echo $methods['title']; ?></h2>
<?php
endif;
if ($methods['text']) :
?>
<p class="text body-1 mob-body-1" data-animate="swim-top">
<?php echo $methods['text']; ?>
</p>
<?php
endif;
?>
</div>
<div class="methods-section__wrapper">
<?php
foreach($methods['methods_list'] as $item) :
if ($item['image'] && $item['title']) :
?>
<div class="method-item" data-animate="swim-top">
<div class="img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['image']['url']; ?>" alt="<?php echo $item['image']['alt']; ?>">
</div>
<p class="text description-2 mob-description-2">
<?php echo $item['title']; ?>
</p>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</section>
<?php
$offer = get_field('offer');
?>
<section class="benefits-section gradient-section">
<div class="anchor" id="<?php echo $offer['section_id']; ?>"></div>
<div class="gradient" data-animate="fade">
</div>
<div class="container">
<?php
if ($offer['tag']) :
?>
<div class="tag tag-text mob-tag-text" data-animate="swim-top"><?php echo $offer['tag']; ?></div>
<?php
endif;
if ($offer['title']) :
?>
<h2 class="title title-2 mob-title-2" data-animate="word">
<?php echo $offer['title']; ?>
</h2>
<?php
endif;
?>
<?php
if (!wp_is_mobile()) :
function splitArrayIntoTwo($array) {
$firstPart = [];
$secondPart = [];
foreach ($array as $index => $element) {
if ($index % 2 === 0) {
$firstPart[] = $element;
} else {
$secondPart[] = $element;
}
}
return [$firstPart, $secondPart];
}
$preparedArray = splitArrayIntoTwo($offer['offer_cards']);
?>
<div class="benefits__wrapper pc-version">
<?php
foreach($preparedArray as $key=>$array) :
?>
<div class="benefits__col">
<?php
foreach($array as $index=>$item) :
if ($item['title'] && $item['image']) :
?>
<div class="benefit-card <?php if (($key == 0 && $index == 1) || ($key == 1 && $index == 0)) echo '-higher'; ?>" data-animate="swim-top">
<div class="img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['image']['pc']['url']; ?>" alt="<?php echo $item['image']['pc']['alt']; ?>">
</div>
<p class="description description-1 mob-description-1">
<?php echo $item['title']; ?>
</p>
<?php
if ($item['text']) :
?>
<p class="text body-1 mob-body-1">
<?php echo $item['text']; ?>
</p>
<?php
endif;
?>
</div>
<?php
endif;
endforeach;
?>
</div>
<?php
endforeach;
?>
</div>
<?php
else :
?>
<div class="benefits__wrapper mobile-version">
<?php
foreach($offer['offer_cards'] as $index=>$item) :
if ($item['title'] && $item['image']) :
?>
<div class="benefit-card" data-animate="swim-top">
<div class="img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['image']['mob']['url']; ?>" alt="<?php echo $item['image']['mob']['alt']; ?>">
</div>
<p class="description description-1 mob-description-1">
<?php echo $item['title']; ?>
</p>
<?php
if ($item['text']) :
?>
<p class="text body-1 mob-body-1">
<?php echo $item['text']; ?>
</p>
<?php
endif;
?>
</div>
<?php
endif;
endforeach;
?>
</div>
<?php
endif;
?>
</div>
</section>
<?php
$contacts = get_field('contacts');
?>
<section class="contacts-section">
<div class="anchor" id="<?php echo $contacts['section_id']; ?>"></div>
<div class="container">
<div class="text-content">
<?php
if ($contacts['tag']) :
?>
<div class="tag tag-text mob-tag-text" data-animate="swim-top"><?php echo $contacts['tag']; ?></div>
<?php
endif;
if ($contacts['title']) :
?>
<h2 class="title title-2 mob-title-2" data-animate="word"><?php echo $contacts['title']; ?></h2>
<?php
endif;
if ($contacts['text']) :
?>
<p class="text body-1 mob-body-1" data-animate="swim-top">
<?php echo $contacts['text']; ?>
</p>
<?php
endif;
?>
</div>
<div class="contacts__wrapper">
<div class="contacts__wrapper-left" data-animate="swim-top">
<?php
if ($contacts['mail_icon']) :
?>
<div class="icon">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $contacts['mail_icon']['url']; ?>" alt="<?php echo $contacts['mail_icon']['alt']; ?>">
</div>
<?php
endif;
if ($contacts['mail_title']) :
?>
<p class="title description-2 mob-description-2">
<?php echo $contacts['mail_title']; ?>
</p>
<?php
endif;
if ($contacts['mail_subtitle']) :
?>
<p class="text body-1 mob-body-1">
<?php echo $contacts['mail_subtitle']; ?>
</p>
<?php
endif;
if ($contacts['mail']['url'] && $contacts['mail']['title']) :
?>
<a href="<?php echo $contacts['mail']['url']; ?>" target="<?php echo $contacts['mail']['target']; ?>" class="default-link link-text mob-link-text">
<?php echo $contacts['mail']['title']; ?>
</a>
<?php
endif;
?>
</div>
<div class="contacts__wrapper-right" data-animate="swim-top">
<div class="form-wrapper">
<div class="form">
<?php
echo do_shortcode('[contact-form-7 id="15ab133"]');
?>
</div>
<div class="thanks-container">
<?php
$thanks_window = $contacts['thanks_window'];
if ($thanks_window['image']) :
?>
<div class="img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $thanks_window['image']['url']; ?>" alt="<?php echo $thanks_window['image']['alt']; ?>">
</div>
<?php
endif;
if ($thanks_window['title']) :
?>
<p class="title title-2 mob-title-2">
<?php echo $thanks_window['title']; ?>
</p>
<?php
endif;
if ($thanks_window['text']) :
?>
<p class="text body-1 mob-body-1">
<?php echo $thanks_window['text']; ?>
</p>
<?php
endif;
?>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<?php
get_footer();
?>