feat: added reviews

assets/css/index.css

@@ -507,6 +507,7 @@ h3 {
 .first-screen__wrapper {
   padding: 43px 26px 55px;
   border-radius: 80px 12px;
+  background: url(../img/grid.svg) center no-repeat;
   background-color: #609eff;
 }
 @media (max-width: 992px) {
@@ -935,4 +936,28 @@ h3 {
   .facts__slider-controls {
     display: flex;
   }
+}
+
+.reviews {
+  margin: 100px 0 98px;
+}
+@media (max-width: 768px) {
+  .reviews {
+    margin: 77px 0 92px;
+  }
+}
+.reviews__title {
+  margin: 18px 0 21px;
+}
+@media (max-width: 768px) {
+  .reviews__title {
+    margin: 21px 0 23px;
+  }
+}
+.reviews__slider-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  margin: 61px 0 0;
 }

assets/img/grid.svg

@@ -0,0 +1,26 @@
+<svg width="1206" height="529" viewBox="0 0 1206 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.05">
+<line x1="34.772" y1="-59.0254" x2="34.772" y2="582" stroke="white"/>
+<line x1="137.893" y1="-59.0254" x2="137.893" y2="582" stroke="white"/>
+<line x1="241.014" y1="-59.0254" x2="241.014" y2="582" stroke="white"/>
+<line x1="344.135" y1="-59.0254" x2="344.135" y2="582" stroke="white"/>
+<line x1="447.255" y1="-59.0254" x2="447.255" y2="582" stroke="white"/>
+<line x1="550.377" y1="-59.0254" x2="550.377" y2="582" stroke="white"/>
+<line x1="787.078" y1="54.7085" x2="-306.051" y2="54.7085" stroke="white"/>
+<line x1="787.078" y1="157.829" x2="-306.051" y2="157.829" stroke="white"/>
+<line x1="787.078" y1="260.95" x2="-306.051" y2="260.95" stroke="white"/>
+<line x1="787.078" y1="364.072" x2="-306.051" y2="364.072" stroke="white"/>
+<line x1="787.078" y1="467.192" x2="-306.051" y2="467.192" stroke="white"/>
+<line x1="656.78" y1="-59.0254" x2="656.78" y2="551.941" stroke="white"/>
+<line x1="759.902" y1="-59.0254" x2="759.902" y2="551.941" stroke="white"/>
+<line x1="863.022" y1="-59.0254" x2="863.022" y2="551.941" stroke="white"/>
+<line x1="966.144" y1="-59.0254" x2="966.144" y2="551.941" stroke="white"/>
+<line x1="1069.26" y1="-59.0254" x2="1069.26" y2="551.941" stroke="white"/>
+<line x1="1172.39" y1="-59.0254" x2="1172.39" y2="551.941" stroke="white"/>
+<line x1="1512.21" y1="54.7085" x2="419.079" y2="54.7085" stroke="white"/>
+<line x1="1512.21" y1="157.83" x2="419.079" y2="157.83" stroke="white"/>
+<line x1="1512.21" y1="260.95" x2="419.079" y2="260.95" stroke="white"/>
+<line x1="1512.21" y1="364.072" x2="419.079" y2="364.072" stroke="white"/>
+<line x1="1512.21" y1="467.193" x2="419.079" y2="467.193" stroke="white"/>
+</g>
+</svg>

assets/scss/_l-first-screen.scss

@@ -8,6 +8,7 @@
   &__wrapper {
     padding: 43px 26px 55px;
     border-radius: 80px 12px;
+    background: url(../img/grid.svg) center no-repeat;
     background-color: $blue;
 
     @include laptop {

assets/scss/_l-reviews.scss

@@ -0,0 +1,23 @@
+.reviews {
+  margin: 100px 0 98px;
+
+  @include tablet {
+    margin: 77px 0 92px;
+  }
+
+  &__title {
+    margin: 18px 0 21px;
+
+    @include tablet {
+      margin: 21px 0 23px;
+    }
+  }
+
+  &__slider-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    margin: 61px 0 0;
+  }
+}

assets/scss/index.scss

@@ -20,3 +20,4 @@
 @import './l-first-screen';
 @import './l-advantages';
 @import './l-facts';
+@import './l-reviews';

index.html

@@ -310,6 +310,39 @@
           </div>
         </div>
       </section>
+
+      <section class="reviews">
+        <div class="container">
+          <div class="tag">О нашем центре</div>
+
+          <h2 class="reviews__title">
+            Реальные истории реабилитантов, <span>которые сумели побороть зависимость</span>
+          </h2>
+
+          <div class="reviews__slider">
+            <div class="swiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide"></div>
+
+                <div class="swiper-slide"></div>
+
+                <div class="swiper-slide"></div>
+
+                <div class="swiper-slide"></div>
+
+                <div class="swiper-slide"></div>
+
+                <div class="swiper-slide"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="reviews__slider-controls">
+            <button class="button button--prev"></button>
+            <button class="button button--next"></button>
+          </div>
+        </div>
+      </section>
     </main>
 
     <script src="./assets/js/swiper-bundle.min.js" defer></script>