/home/bdqbpbxa/demo-subdomains/sendon.goodface.com.ua/wp-content/themes/sendon/about-us.php
<?php
// Template name: About us
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="about-us-hero" data-animate-group="list">
<div class="container">
<div class="about-us-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;
?>
</div>
</div>
<div class="container -bigger" data-animate="swim-top" data-index="3" data-check-in-viewport>
<div class="about-us-hero__animation">
<div class="img">
<div class="arrows">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity="0.3" fill-rule="evenodd" clip-rule="evenodd"
d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C7.89464 6.48043 8 6.73478 8 7C8 7.26522 7.89464 7.51957 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z"
fill="#0057FF" />
<path class="last-arr" fill-rule="evenodd" clip-rule="evenodd"
d="M8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893L15.7071 6.29289C15.8946 6.48043 16 6.73478 16 7C16 7.26522 15.8946 7.51957 15.7071 7.70711L9.70711 13.7071C9.31658 14.0976 8.68342 14.0976 8.29289 13.7071C7.90237 13.3166 7.90237 12.6834 8.29289 12.2929L13.5858 7L8.29289 1.70711C7.90237 1.31658 7.90237 0.683418 8.29289 0.292893Z"
fill="#0057FF" />
</svg>
</div>
<div class="phone-animation">
<div class="phone-animation__wrapper">
<?php
if ($curr_lang == 'uk') :
?>
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/phone/phone.png" alt="" class="phone">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/phone/card.png" alt="" class="card">
<?php
else :
?>
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/phone/phone-en.png" alt="" class="phone">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/phone/card-en.png" alt="" class="card">
<?php
endif;
?>
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/phone/man.png" alt="" class="man">
</div>
</div>
</div>
<div class="img">
<div class="arrows">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="first-arr" opacity="0.3" fill-rule="evenodd" clip-rule="evenodd"
d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C7.89464 6.48043 8 6.73478 8 7C8 7.26522 7.89464 7.51957 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z"
fill="#0057FF" />
<path class="last-arr" fill-rule="evenodd" clip-rule="evenodd"
d="M8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893L15.7071 6.29289C15.8946 6.48043 16 6.73478 16 7C16 7.26522 15.8946 7.51957 15.7071 7.70711L9.70711 13.7071C9.31658 14.0976 8.68342 14.0976 8.29289 13.7071C7.90237 13.3166 7.90237 12.6834 8.29289 12.2929L13.5858 7L8.29289 1.70711C7.90237 1.31658 7.90237 0.683418 8.29289 0.292893Z"
fill="#0057FF" />
</svg>
</div>
<div class="circle-animation">
<div class="circle-animation__wrapper">
<div class="logo">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/circle/logo.svg" alt="">
</div>
<div class="circle">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/circle/dashed-circle.svg" alt="">
<div class="img"><img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/circle/bank.png" alt=""></div>
<div class="img"><img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/circle/globe.png" alt=""></div>
<div class="img"><img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/circle/payment-method.png" alt=""></div>
<div class="img"><img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/circle/balue.png" alt=""></div>
</div>
</div>
</div>
</div>
<div class="img">
<div class="order-animation">
<div class="order-animation__wrapper">
<div class="order-animation__item">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/order/1<?php if ($curr_lang == 'en') echo '-en'; ?>.png" alt="">
</div>
<div class="order-animation__item">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/order/4<?php if ($curr_lang == 'en') echo '-en'; ?>.png" alt="">
</div>
<div class="order-animation__item">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/order/1<?php if ($curr_lang == 'en') echo '-en'; ?>.png" alt="">
</div>
<div class="order-animation__item">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/order/2<?php if ($curr_lang == 'en') echo '-en'; ?>.png" alt="">
</div>
<div class="order-animation__item">
<img src="<?php echo $template_directory; ?>/assets/images/about-us/animation/order/3<?php if ($curr_lang == 'en') echo '-en'; ?>.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$cta = get_field('cta');
if ($cta['title']) :
?>
<section class="call-to-action" data-animate-group="list" data-animate="swim-top" data-index="1" data-offset="0.3">
<div class="container">
<div class="call-to-action-wrapper" >
<div class="emoji-wrapper" data-animate="swim-top" data-index="3">
<?php
foreach($cta['memoji'] as $item) :
?>
<div class="emoji"><img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['url'] ?>" alt="<?php echo $item['alt'] ?>"></div>
<?php
endforeach;
?>
</div>
<h2 class="title title-3 mob-title-3" data-animate="word" data-index="2">
<?php echo $cta['title']; ?>
</h2>
<p class="text text-1 mob-text-2" data-animate="swim-top" data-index="3">
<?php echo $cta['text']; ?>
</p>
<?php
$button = get_link_group_field($cta['link']);
if ($button) :
?>
<a href="<?php echo $button['url']; ?>" <?php echo $button['target']; ?> class="default-button -hover-swipe" data-animate="swim-top" data-index="4">
<div class="icon-wrapper">
<span class="icon">
<span>
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $template_directory; ?>/assets/images/ui-kit/arrow-right.svg" alt="">
</span>
<span>
<img class="-lazyload" <?php echo $srcset; ?> 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>
</section>
<?php
endif;
?>
<?php
$benefits = get_field('benefits');
if ($benefits['title']) :
?>
<section class="benefits-section">
<div class="container">
<div class="pinned-slider" data-animate-group="list">
<div class="pinned-slider__wrapper">
<div class="title-wrapper">
<h2 class="title-2 mob-title-2 title" data-animate="word" data-index="1">
<?php echo $benefits['title']; ?>
</h2>
</div>
<div class="benefits__slider">
<div class="benefits__slider-wrapper">
<?php
$gradient_styles = [
'style="background: var(--gradient-blue);"',
'style="background: var(--gradient-yellow);"',
'style="background: var(--gradient-green);"',
'style="background: var(--gradient-pink);"',
'style="background: var(--gradient-blue);"',
'style="background: var(--gradient-yellow);"',
'style="background: var(--gradient-green);"',
'style="background: var(--gradient-pink);"',
'style="background: var(--gradient-blue);"',
'style="background: var(--gradient-yellow);"',
'style="background: var(--gradient-green);"',
'style="background: var(--gradient-pink);"',
'style="background: var(--gradient-blue);"',
'style="background: var(--gradient-yellow);"',
'style="background: var(--gradient-green);"',
'style="background: var(--gradient-pink);"',
];
foreach($benefits['slider'] as $key=>$item) :
if ($item['title'] && $item['img']) :
?>
<div class="benefits-slide pinned-slider__slide <?php if ($key == 0) echo '-opacity'; ?>" <?php echo $gradient_styles[$key]; ?> data-animate="swim-top" data-index="2">
<div class="benefits-slide__text">
<p class="title title-3 mob-title-3">
<?php echo $item['title']; ?>
</p>
<?php
if ($item['text']) :
?>
<p class="text text-2 mob-text-2">
<?php echo $item['text']; ?>
</p>
<?php
endif;
?>
</div>
<div class="benefits-slide__img">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['img']['url']; ?>" alt="<?php echo $item['img']['alt']; ?>">
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
<div class="pinned-slider__pagination"></div>
</div>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$partners = get_field('partners');
if ($partners['title']) :
?>
<section class="partners-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 $partners['title']; ?>
</h2>
</div>
</div>
<div class="partners-wrapper">
<?php
$pieces = array_chunk(array_reverse($partners['partners_logo']), ceil(count($partners['partners_logo']) / 2));
$mobile_pieces = array_chunk(array_reverse($partners['partners_logo']), ceil(count($partners['partners_logo']) / 3));
$is_first_bigger = count($pieces[0]) > count($pieces[1]);
?>
<div class="pc-slider">
<div class="partners-wrapper__line conveyor-belt <?php if ($is_first_bigger) echo '-second-on-mob'; ?>" data-check-in-viewport data-for-pc data-animate="swim-top" data-index="2">
<div class="conveyor-belt-part">
<?php
foreach(array_reverse($pieces['1']) as $item) :
if ($item) :
?>
<div class="partners-wrapper__item">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['url'] ?>" alt="<?php echo $item['alt'] ?>">
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
<div class="partners-wrapper__line conveyor-belt -reverse <?php if (!$is_first_bigger) echo '-second-on-mob'; ?>" data-check-in-viewport data-for-pc data-animate="swim-top" data-index="3">
<div class="conveyor-belt-part">
<?php
foreach(array_reverse($pieces['0']) as $item) :
if ($item) :
?>
<div class="partners-wrapper__item">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['url'] ?>" alt="<?php echo $item['alt'] ?>">
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
<div class="mobile-slider">
<div class="partners-wrapper__line -for-pc" data-animate="swim-top" data-index="2">
<div class="conveyor-belt-part">
<?php
foreach(array_reverse($mobile_pieces['1']) as $item) :
if ($item) :
?>
<div class="partners-wrapper__item">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['url'] ?>" alt="<?php echo $item['alt'] ?>">
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
<div class="partners-wrapper__line -reverse -for-pc" data-animate="swim-top" data-index="3">
<div class="conveyor-belt-part">
<?php
foreach(array_reverse($mobile_pieces['2']) as $item) :
if ($item) :
?>
<div class="partners-wrapper__item">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['url'] ?>" alt="<?php echo $item['alt'] ?>">
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
<div class="partners-wrapper__line -reverse -for-pc" data-animate="swim-top" data-index="4">
<div class="conveyor-belt-part">
<?php
foreach(array_reverse($mobile_pieces['0']) as $item) :
if ($item) :
?>
<div class="partners-wrapper__item">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $item['url'] ?>" alt="<?php echo $item['alt'] ?>">
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</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_template_part('templates/breadcrumbs');
?>
<?php
get_footer();
?>
