/home/bdqbpbxa/demo-subdomains/gumballpay.goodface.com.ua/wp-content/themes/gumballpay/about-us.php
<?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();
?>