/home/bdqbpbxa/demo-subdomains/sendon.goodface.com.ua/wp-content/themes/sendon/front-page.php
<?php
// Template name: Home page
get_header();
$curr_lang = pll_current_language();
$template_directory = get_template_directory_uri();
$srcset = "srcset='" . $template_directory . "/assets/images/lazyload.png'";
?>
<main>
<?php
$main = get_field('main');
if ($main['title']) :
?>
<section class="hero" data-animate-group="list">
<div class="container">
<div class="hero__text">
<h1 class="title-1 mob-title-1 title" data-animate="word" data-index="1">
<?php
echo $main['title'];
?>
</h1>
<?php
if ($main['text']) :
?>
<p class="text text-1 mob-text-2" data-animate="swim-top" data-index="2">
<?php
echo $main['text'];
?>
</p>
<?php
endif;
?>
<?php
$button = get_link_group_field($main['link']);
if ($button) :
?>
<a href="<?php echo $button['url'] ?>" <?php echo $button['target'] ?> class="default-button -hover-swipe" data-animate="swim-top" data-index="3">
<div class="icon-wrapper">
<span class="icon">
<span>
<img src="<?php echo $template_directory; ?>/assets/images/ui-kit/arrow-right.svg" alt="">
</span>
<span>
<img src="<?php echo $template_directory; ?>/assets/images/ui-kit/plus.svg" alt="">
</span>
</span>
</div>
<span class="text">
<?php echo $button['title'] ?>
</span>
</a>
<?php
endif;
?>
</div>
</div>
<div class="container -bigger">
<div class="hero__animation" data-animate="swim-top" data-index="4">
<div class="hero__animation-line conveyor-belt" data-check-in-viewport>
<div class="conveyor-belt-part">
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-girl-sunglasses.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/7.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/apple-pay.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-shop-pack.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-man-in-hat.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/second.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-visa.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-bank.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/3.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/mastercard.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-cash.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-woman-thinking.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/4.mp4" autoplay loop muted playsinline></video>
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m37 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m45 38 6 6-6 6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/google-pay.png" alt="">
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-dishes.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="hero__animation-line conveyor-belt -reverse" data-check-in-viewport>
<div class="conveyor-belt-part">
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-cash.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/mastercard.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-women-glasses.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/5.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-dishes.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/google-pay.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-woman-thinking.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/6.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-2.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-visa.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-man-in-glasses.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/1.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
<div class="animation-line-item">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-shop-pack.png" alt="">
</div>
</div>
<div class="animation-line-item__circle-double">
<div class="animation-line-item__circle">
<div class="img">
<img src="<?php echo $template_directory; ?>/assets/images/homepage/hero/apple-pay.png" alt="">
</div>
</div>
<div class="animation-line-item__circle">
<div class="img">
<svg fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity=".3" d="m51 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path class="last-arr" d="m43 50-6-6 6-6" stroke="#0057FF" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="animation-line-item__circle">
<div class="img" data-image="<?php echo $template_directory; ?>/assets/images/homepage/hero/emoji-girl-sunglasses.png">
<video src="<?php echo $template_directory; ?>/assets/images/homepage/video/8.mp4" autoplay loop muted playsinline></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$solutions = get_field('solutions');
if ($solutions['section_title']) :
?>
<section class="solutions-section">
<div class="container">
<div class="title-wrapper" data-animate-group="list">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
<?php echo $solutions['section_title']; ?>
</h2>
<?php
if ($solutions['section_text']) :
?>
<p class="text text-1 mob-text-1" data-animate="swim-top" data-index="2">
<?php echo $solutions['section_text']; ?>
</p>
<?php
endif;
?>
</div>
<div class="solutions-list">
<?php
$cards_count = count($solutions['cards']);
foreach($solutions['cards'] as $key=>$item) :
$link = get_link_group_field($item['link']);
if ($link && $item['type'] && $item['title']) :
?>
<a href="<?php echo $link['url']; ?>" <?php echo $link['target']; ?> class="solution-card <?php if ($key + 1 == $cards_count) echo '-big'; ?>" data-animate="swim-top">
<div class="solution-card__text">
<p class="title-3 mob-title-3 title">
<?php echo $item['title']; ?>
</p>
<?php
if ($item['text']) :
?>
<p class="text text-2 mob-text-2">
<?php echo $item['text']; ?>
</p>
<?php
endif;
?>
<p class="text-2 mob-text-2 --semi-bold link"><?php echo $solutions['link_text']; ?></p>
</div>
<div class="solution-card__img">
<?php
$args['type'] = $item['type'];
get_template_part('templates/animations', null, $args);
?>
</div>
</a>
<?php
endif;
endforeach;
?>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$services = get_field('services');
if ($services['title']) :
?>
<section class="services-section" data-animate-group="list">
<div class="container">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
<?php echo $services['title']; ?>
</h2>
</div>
<div class="services" data-animate="swim-top" data-index="2">
<div class="services__menu" >
<?php
foreach($services['services_cards'] as $key=>$item) :
if ($item['title'] && $item['img']) :
?>
<div class="title-2 mob-title-2 services__menu-item <?php if ($key == 0) echo '-active' ?>">
<?php echo $item['title']; ?>
</div>
<?php
endif;
endforeach;
?>
</div>
<div class="services__items">
<?php
foreach($services['services_cards'] as $key=>$item) :
if ($item['title'] && $item['img']) :
?>
<div class="services__item <?php if ($key == 0) echo '-active' ?>">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['img']['url']; ?>" alt="<?php echo $item['img']['alt']; ?>">
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$why_choose_us = get_field('why_choose_us');
if ($why_choose_us['title']) :
?>
<section class="why-choose-us" data-animate-group="list">
<div class="container">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
<?php echo $why_choose_us['title']; ?>
</h2>
</div>
<div class="why-choose-us-cards" data-animate="swim-top" data-index="2">
<?php
$first_anim = 'data-x-final="-95.6%" data-y-final="8.3%" data-rotation-final="-10"';
$second_anim = 'data-x-final="0" data-y-final="0" data-rotation-final="0"';
$last_anim = 'data-x-final="98.7%" data-y-final="8.2%" data-rotation-final="10"';
foreach($why_choose_us['cards'] as $key=>$item) :
?>
<div class="why-choose-us-card" <?php if ($key == 0) echo $first_anim; elseif($key == 1) echo $second_anim; else echo $last_anim; ?> >
<div class="why-choose-us-card__img">
<picture>
<source srcset="<?php echo $item['img']['mobile']['url']; ?>" media="(max-width: 1024px)">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['img']['pc']['url']; ?>" alt="<?php echo $item['img']['pc']['alt']; ?>">
</picture>
</div>
<div class="why-choose-us-card__text">
<p class="title title-3 mob-title-3">
<?php echo $item['title']; ?>
</p>
<p class="text text-2 mob-text-2">
<?php echo $item['text']; ?>
</p>
</div>
</div>
<?php
endforeach;
?>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$contact_form = get_field('contact_form');
if ($contact_form['title']) :
?>
<section class="form-section" id="contact-form" data-animate-group="list">
<div class="container">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
<?php echo $contact_form['title']; ?>
</h2>
<?php
if ($contact_form['text']) :
?>
<p class="text text-1 mob-text-1" data-animate="swim-top" data-index="2">
<?php echo $contact_form['text']; ?>
</p>
<?php
endif;
?>
</div>
<?php
get_template_part('templates/contact-form');
?>
</div>
</section>
<?php
endif;
?>
</main>
<a href="#contact-form" class="cta-button -<?php echo $curr_lang; ?>">
<span></span>
</a>
<?php
get_footer();
?>
