From ae3b7fd5c75977b1e9f7057b57e472361787f358 Mon Sep 17 00:00:00 2001
From: Aliaksei Karzhou <alexius90e@gmail.com>
Date: Sun, 30 Jun 2024 23:02:20 +0300
Subject: [PATCH] feat: added reviews

---
 assets/css/index.css             | 25 ++++++++++++++++++++++++
 assets/img/grid.svg              | 26 +++++++++++++++++++++++++
 assets/scss/_l-first-screen.scss |  1 +
 assets/scss/_l-reviews.scss      | 23 ++++++++++++++++++++++
 assets/scss/index.scss           |  1 +
 index.html                       | 33 ++++++++++++++++++++++++++++++++
 6 files changed, 109 insertions(+)
 create mode 100644 assets/img/grid.svg
 create mode 100644 assets/scss/_l-reviews.scss

diff --git a/assets/css/index.css b/assets/css/index.css
index dca574b..ee0e5d2 100644
--- a/assets/css/index.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/assets/img/grid.svg b/assets/img/grid.svg
new file mode 100644
index 0000000..ebddc5e
--- /dev/null
+++ b/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>
diff --git a/assets/scss/_l-first-screen.scss b/assets/scss/_l-first-screen.scss
index 5c794c5..5ff2c7b 100644
--- a/assets/scss/_l-first-screen.scss
+++ b/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 {
diff --git a/assets/scss/_l-reviews.scss b/assets/scss/_l-reviews.scss
new file mode 100644
index 0000000..f8e56a1
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 9fb9e38..03a522d 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -20,3 +20,4 @@
 @import './l-first-screen';
 @import './l-advantages';
 @import './l-facts';
+@import './l-reviews';
diff --git a/index.html b/index.html
index 6a0be21..3356a63 100644
--- a/index.html
+++ b/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>