add javascript scroll functions

functions.php

@@ -64,15 +64,17 @@ function armanty_get_styles(){
 }
 
 function armanty_get_scripts(){
-  if (!is_page_template('templates/graduation.php')) {
+
     wp_deregister_script( 'jquery' );
     wp_register_script( 'jquery', get_template_directory_uri() . '/assets/libs/jquery-3.4.1/jquery-3.4.1.min.js');
     wp_enqueue_script('jquery');
-  
+
+    wp_enqueue_script( 'jqmask', get_template_directory_uri(  ) . '/assets/libs/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js', ['jquery'], null, true);
+    
+  if (!is_page_template('templates/graduation.php')) {
     wp_enqueue_script( 'poper', get_template_directory_uri(  ) . '/assets/libs/bootstrap-4.4.1-dist/js/popper.min.js', ['jquery'], null, true);
     wp_enqueue_script( 'bootstrap', get_template_directory_uri(  ) . '/assets/libs/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js', ['jquery'], null, true);
     wp_enqueue_script( 'owlcarousel', get_template_directory_uri(  ) . '/assets/libs/OwlCarousel2-2.3.4/dist/owl.carousel.js', ['jquery'], null, true);
-    wp_enqueue_script( 'jqmask', get_template_directory_uri(  ) . '/assets/libs/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js', ['jquery'], null, true);
     wp_enqueue_script( 'moment', get_template_directory_uri(  ) . '/assets/libs/bootstrap_datetimepicker/js/moment-with-locales.min.js', ['jquery'], null, true);
     wp_enqueue_script( 'bootstrap', get_template_directory_uri(  ) . '/assets/libs/bootstrap_datetimepicker/js/bootstrap.min.js', ['jquery', 'moment'], null, true);
     wp_enqueue_script( 'dtpicker', get_template_directory_uri(  ) . '/assets/libs/bootstrap_datetimepicker/js/bootstrap-datetimepicker.min.js', ['jquery', 'moment'], null, true);
@@ -102,6 +104,9 @@ function armanty_get_scripts(){
       wp_enqueue_script( 'form', get_template_directory_uri(  ) . '/assets/js/components/form.js', ['jquery'], null, true);
     }
   }
+  if (is_page_template('templates/graduation.php')) {
+    wp_enqueue_script( 'graduation', get_template_directory_uri(  ) . '/assets/js/components/graduation.js');
+  }
 }
 
 function armanty_register_menus(){

parts/landings/graduation/callback.php

@@ -6,12 +6,12 @@
 		</div>
 		<form action="callback.php" method="POST">
 			<label>
-				<input type="text" placeholder="Введите телефон">
+				<input type="text" placeholder="Введите телефон" id="phone">
 			</label>
 			<label>
-				<input type="text" placeholder="Введите ФИО">
+				<input type="text" placeholder="Введите ФИО" id="name">
 			</label>
-			<button class="graduation-btn">Отправить</button>
+			<button class="graduation-btn" id="callback-btn">Отправить</button>
 		</form>
 		<div class="copyright">
 			<span>© Copyright. Все права защищены</span>

parts/landings/graduation/main.php

@@ -2,7 +2,7 @@
   <div class="main-information">
     <h1>Эмоции<br> в центре событий</h1>
     <p>Праздничные тарифы на детский выпускной <wbr>для незабываемых впечатлений</p>
-    <button class="graduation-btn">
+    <button class="graduation-btn" id="main-btn">
       <span></span>
       Хочу праздник
       <span></span>

parts/landings/graduation/offer-packet.php

@@ -14,5 +14,5 @@
 			?>
 		</ul>
 	</div>
-	<button class="graduation-btn">Заказать</button>
+	<button class="graduation-btn" id="offer-btn">Заказать</button>
 </div>

parts/landings/graduation/offers.php

@@ -10,7 +10,7 @@
 				<?php get_template_part('parts/landings/graduation/offer-packet', null, array(
 					title => 'Базовый',
 					price => 900,
-					description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника']
+					description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника', '2 проститутки', '3 грамма кокаина и гашиша']
 				)); ?>
 			</div>
 			<div class="col-4 packet">

parts/landings/graduation/top-menu.php

@@ -1,7 +1,14 @@
 <div class="top__menu">
 	<div class="layer"></div>
 	<div class="content">
-		<span>Назад</span>
+		<a href="<?php echo get_home_url() ?>">Назад</a>
 		<div><i class="fa fa-map-marker" aria-hidden="true"></i> <span>Подольск</span></div>
 	</div>
-</div>
+</div>
+
+<?php 
+	
+    if (is_page_template('templates/graduation.php')) {
+      wp_enqueue_script( 'graduation', get_template_directory_uri(  ) . '/assets/js/components/graduation.js');
+    }
+?>

src/js/components/graduation.js

@@ -0,0 +1,54 @@
+$(document).ready(function () {
+  // Constansts
+  const TIME_FOR_SCROLL = 1000;
+
+  // Buttons
+  const mainBtn = document.getElementById('main-btn');
+  const offerBtns = document.querySelectorAll('#offer-btn');
+  const callbackBtn = document.getElementById('callback-btn');
+  const getMoreBtn = document.querySelector('.main-more')
+  const toFormBtns = [mainBtn, ...Array.from(offerBtns)]
+  // Inputs
+  const phoneInput = document.querySelector('form #phone');
+  const nameInput = document.querySelector('form #name');
+  // Blocks
+  const formBlock = document.querySelector('.graduation__block.callback');
+  const descriptionBlock = document.querySelector('.description')
+  
+
+  // Add event listeners
+  toFormBtns.forEach(x => x.addEventListener('click', btnClickHandler.bind(null, formBlock)));
+  getMoreBtn.addEventListener('click', scrollToElem.bind(null, descriptionBlock));
+  callbackBtn.addEventListener('click', submitForm);
+
+
+  //Handlers
+  function btnClickHandler(elem) {
+    scrollToElem(elem);
+    phoneInput.focus();
+  }
+
+
+  // Function with jQuery
+  $(phoneInput).mask('+7 (000) 000-00-00');
+  
+  function scrollToElem(element) {
+      
+    $([document.documentElement, document.body]).animate({
+        scrollTop: $(element).offset().top
+    }, TIME_FOR_SCROLL);
+  }
+
+  function submitForm(event) {
+    event.preventDefault();
+    
+    const name = nameInput.value;
+    const phone = phoneInput.value;
+
+    if (!name || !phone) return;
+
+    //AJAX send
+  }
+
+})
+

src/sass/pages/graduation.sass

@@ -13,13 +13,15 @@ body
 
 .graduation-btn
   display: block
-  padding: 35px 65px
+  padding: 35px 71px
-  background: $btn-color
+  background: url('../../img/graduation/btn_bg.png') center no-repeat
   outline: none
   border: none
   font-family: 'Shadow Regular'
   color: #fff
   font-size: 18px
+  &:active, &:focus
+    outline: none
 
 main
   background: center url('../../img/graduation/main_bg.png')
@@ -105,7 +107,8 @@ main
         text-align: center
 
   &.offers
-    background: url('../../img/graduation/offers_bg.png') center no-repeat
+    // background: url('../../img/graduation/offers_bg.png') center no-repeat
+    background: url('../../img/graduation/offers_2x.jpg') center no-repeat
     background-size: cover
 
     .packets
@@ -126,8 +129,9 @@ main
 
 
       .graduation-btn
-        padding: 26px 50px
+        padding: 26px 70px
         margin: 0 auto
+        background: url('../../img/graduation/btn_bg_packet.png') center no-repeat
 
       .text
         width: 263.01px
@@ -199,12 +203,18 @@ main
             text-align: center
 
   &.callback
-    background: url('../../img/graduation/callback_bg.png')
+    // background: url('../../img/graduation/callback_bg.png')
+    background: url('../../img/graduation/callback_2x.jpg')
+    background-size: 100%
+    background-position: left bottom
     position: relative
     height: 100vh
 
     .content
 
+      .graduation-btn
+        min-width: 300px
+
       form
 
         label
@@ -213,6 +223,7 @@ main
           margin: 0 auto 20px auto
           padding: 14px
           background: #fff
+          border-radius: 5px
 
           input
             width: 100%
@@ -264,12 +275,16 @@ main
     justify-content: space-between
     align-self: center
 
-    span
+    a
-      &:first-child
+      font-family: Shadow
-        font-family: Shadow
+      font-size: 24px
-        font-size: 24px
+      cursor: pointer
-        cursor: pointer
+      color: #fff
+      outline: none
+      &:hover
+        // text-decoration: none
 
+    span
       &:last-child
         font-family: Montserrat
         font-weight: 600