<?php
// Template name: About us
get_header();
$template_directory = get_template_directory_uri();
$srcset = 'srcset="' . $template_directory . '/assets/images/lazyload.png"';
$solutions_global_texts = get_field('solutions_global_texts', 'option');
?>
<main>
<?php
$main = get_field('main');
if ($main['title']) :
?>
<section class="about-us --dark-section" data-animate-group="list">
<?php
$args['block'] = 'about_main';
get_template_part('templates/background-blur', null , $args);
?>
<div class="about-us__bg" data-animate="fade" data-index="2">
<div class="png-animation test" data-check-in-viewport data-custom-lazyload-trigger>
<?php
foreach($main['background'] as $key=>$item) :
?>
<img <?php if ($key != 0) echo $srcset; ?> src="<?php echo $item['url']; ?>" alt="<?php echo $item['alt']; ?>" class="<?php if ($key == 0) echo '-active'; else echo '-lazyload -before-loaded'; ?>" >
<?php
endforeach;
?>
</div>
</div>
<div class="container">
<?php
get_template_part('templates/breadcrumbs');
?>
<div class="about-us__inner">
<div class="about-us__title">
<h1 class="title-1 mobile__title-2" data-animate="word" data-index="1">
<?php echo $main['title']; ?>
</h1>
<span class="anchor" data-animate="swim-top" data-index="3">
<div class="anchor__container">
</div>
</span>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$text_section = get_field('text_section');
if ($text_section['title']) :
?>
<section class="text-between --rounded-section" data-animate-group="list">
<div class="container">
<div class="text-between__inner">
<div class='signpost body-2 body-2-medium mobile__body-2' data-animate="fade" data-index="2">
<?php echo $text_section['section_name']; ?>
</div>
<div class="title-2 text-between__title mobile__title-2 --letter-spacing-002" data-animate="word" data-index="1">
<?php echo $text_section['title']; ?>
</div>
<div class="text-wrapper">
<div class="text-between__description text-2 mobile__text-2 need-text-accordion-on-mob" data-animate="swim-top" data-index="3">
<?php echo $text_section['subtitle']; ?>
</div>
<div class="show-more-text mobile__body-1-medium body-1-medium weight600" data-animate="swim-top" data-index="3"
data-text-changed="<?php echo $solutions_global_texts['learn_more_button']['close_variant']; ?>">
<?php echo $solutions_global_texts['learn_more_button']['open_variant']; ?>
</div>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$values_section = get_field('values_section');
if ($values_section['title']) :
?>
<section class="our-values --dark-section">
<div class="container">
<div class="our-values__inner">
<div class="our-values__text" data-animate-group="list">
<p class="title title-2 mobile__title-2 --letter-spacing-002" data-animate="word" data-index="1">
<?php echo $values_section['title']; ?>
</p>
<p class="text-2 -text mobile__text-2 " data-animate="swim-top" data-index="2">
<?php echo $values_section['text']; ?>
</p>
</div>
<div class="our-values__cards">
<?php
$value_list = $values_section['value_list'];
foreach($value_list as $item) :
?>
<div class="our-values__card" data-animate="swim-top">
<img class="-lazyload" src="<?php echo $item['img']['url'] ?>" alt="<?php echo $item['img']['alt'] ?>">
<p class="title text-1 mobile__text-1">
<?php echo $item['title'] ?>
</p>
<p class="text body-1-medium mobile__body-1-medium">
<?php echo $item['text'] ?>
</p>
</div>
<?php
endforeach;
?>
<?php
$args['block'] = 'homepage_why_us';
get_template_part('templates/background-blur', null , $args);
?>
</div>
<div class="our-values__text hidden">
<p class="title title-2 mobile__title-2 --letter-spacing-002">
<?php echo $values_section['title']; ?>
</p>
<p class="text-2 -text mobile__text-2 ">
<?php echo $values_section['text']; ?>
</p>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<section class="about-us__blog --rounded-section">
<div class="container">
<?php
$simple_card = get_field('simple_card');
foreach($simple_card as $card) :
?>
<div class="solution-blog" data-animate-group="list" data-animate="swim-top">
<div class="solution-blog__inner">
<div class="solution-blog__image" data-animate="fade" data-index="3">
<img class="-lazyload" <?php echo $srcset; ?> src="<?php echo $card['img']['url'] ?>" alt="<?php echo $card['img']['alt'] ?>">
</div>
<div class="solution-blog__text ">
<div class='signpost solution-blog__signpost body-2 body-2-medium mobile__body-2' data-animate="fade" data-index="2">
<?php echo $card['section_name'] ?>
</div>
<p class="title-3 -title mobile__title-3" data-animate="word" data-index="1">
<?php echo $card['title'] ?>
</p>
<div class="-description body-1-medium mobile__body-1-medium need-text-accordion-on-mob" data-animate="fade" data-index="2">
<?php echo $card['text'] ?>
</div>
<div class="show-more-text mobile__body-1-medium body-1-medium weight600" data-animate="fade" data-index="2"
data-text-changed="<?php echo $solutions_global_texts['learn_more_button']['close_variant']; ?>">
<?php echo $solutions_global_texts['learn_more_button']['open_variant']; ?>
</div>
</div>
</div>
</div>
<?php
endforeach;
?>
</div>
</section>
<?php
get_template_part('templates/lets-started');
?>
</main>
<?php
get_footer();
?>