<?php get_header(); ?>

<section class="u28">
<div class="u7">
	<div class="u29">
		<h1 class="u90 u59"><?php the_field( 'zagolovok_home' ); ?></h1>
		<p class="u97 u59"><?php the_field( 'tekst_pod_zagolovkom_home' ); ?></p>
		<div class="u30 u59">
			<a href="<?php the_field( 'ssylka_na_knopkah', 'option' ); ?>" class="u31">Получить ключ</a>
			<a href="#features" class="u32">Узнать больше</a>
		</div>
		<div class="u33 u59">
			<?php if ( have_rows( 'preimushhestva_home' ) ) : ?>
	<?php while ( have_rows( 'preimushhestva_home' ) ) : the_row(); ?>
			<div class="u4">
				<span class="u34"><?php the_sub_field( 'tekst_v_pervoj_stroke' ); ?></span>
				<span class="u35"><?php the_sub_field( 'tekst_vo_vtoroj_stroke' ); ?></span>
			</div>
			<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>
		</div>
	</div>
	</div>
</section>

<section id="features" class="u99">
<div class="u7">
	<h2 class="u91"><?php the_field( 'zagolovok_bloka_pochemu_vybirayut' ); ?></h2>
	<div class="u100">
		<?php if ( have_rows( 'kartochki_bloka_home' ) ) : ?>
	<?php while ( have_rows( 'kartochki_bloka_home' ) ) : the_row(); ?>
		<div class="u102">
			<div class="u101">
				<?php the_sub_field( 'kod_ikonki_svg' ); ?>
			</div>
			<h3><?php the_sub_field( 'zagolovok_card_home' ); ?></h3>
			<p><?php the_sub_field( 'tekst_card_home' ); ?></p>
		</div>
		<?php endwhile; ?>
<?php else : ?>
	<?php // No rows found ?>
<?php endif; ?>
	</div>
	</div>
</section>

<section class="u43">
<div class="u7">
	<h2 class="u92">Протестируйте <?php the_field('brand1', 'option'); ?> в течение 7 дней</h2>
	<p class="u44">Присоединяйтесь к миллионам пользователей, которые уже защищают свой интернет</p>
	<a href="<?php the_field( 'ssylka_na_knopkah', 'option' ); ?>" class="u3">Получить ключ</a>
	</div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {

  let blocks = document.querySelectorAll('.why-item');



  function checkBlocksVisibility() {

    let windowHeight = window.innerHeight;



    blocks.forEach(block => {

      let blockPosition = block.getBoundingClientRect().top;



      if (blockPosition < windowHeight - 100) {

        block.style.opacity = "1";

        block.style.transform = "translateY(0)";

      } else {

        block.style.opacity = "0";

        block.style.transform = "translateY(50px)";

      }

    });

  }



  checkBlocksVisibility();



  window.addEventListener('scroll', checkBlocksVisibility);

});
</script>

<?php get_footer(); ?>