Разметка и начальная стилизация секции hero

src/modules/sections/hero.hbs

@@ -0,0 +1,24 @@
+<!-- hero -->
+<section class="hero">
+  <div class="hero__wrapper">
+    <div class="hero__slider">
+      <div class="swiper-slider">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="hero__slide">
+              <div class="hero__banner">
+                <img src="img/hero-bg-1.jpg" alt="">
+              </div>
+              <div class="hero__info">
+                .<div class="container">
+                  <h1 class="hero__title h1">Туристический комплекс «Белая река Даховская»</h1>
+                  <p class="hero__descr">Увлекательный отдых в красочных горах Адыгеи</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section> <!-- ./ End of hero -->

src/scss/sections/hero.scss

@@ -0,0 +1,43 @@
+.hero {
+  position: relative;
+  height: 100vh;
+
+  &__wrapper {
+  }
+
+  &__slider {
+  }
+
+  &__slide {
+    display: flex;
+    align-items: center;
+  }
+
+  &__banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__info {
+    position: relative;
+    max-width: 721px;
+    color: var(--white);
+  }
+
+  &__title {
+    margin-bottom: 24px;
+  }
+
+  &__descr {
+    font: 300 1.5rem / 1.5rem $second-font;
+  }
+}

src/scss/styles.scss

@@ -25,6 +25,7 @@
 // Sections - Секции
 @import 'sections/header';
 @import 'sections/footer';
+@import 'sections/hero';
 @import 'sections/offers';
 @import 'sections/about';
 @import 'sections/services';

src/views/index.hbs

@@ -15,10 +15,10 @@
 
 
     <main>
+
+      {{> sections/hero }}
       {{> sections/offers }}
-      <hr>
       {{> sections/about }}
-
       {{> sections/services }}
 
     </main>