From 506831a2a006dec47735ae667d7f6edd625236e3 Mon Sep 17 00:00:00 2001
From: Aliaksei Karzhou <alexius90e@gmail.com>
Date: Wed, 3 Jul 2024 01:33:38 +0300
Subject: [PATCH] feat: added price

---
 assets/css/index.css              | 161 ++++++++++++++++++++++++++++-
 assets/scss/_l-price.scss         | 164 ++++++++++++++++++++++++++++++
 assets/scss/_l-socialization.scss |   4 -
 assets/scss/index.scss            |   1 +
 index.html                        |  63 ++++++++++++
 5 files changed, 386 insertions(+), 7 deletions(-)
 create mode 100644 assets/scss/_l-price.scss

diff --git a/assets/css/index.css b/assets/css/index.css
index e0b3a3c..750a1c2 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1937,9 +1937,6 @@ h3 {
     margin: 90px 0 90px;
   }
 }
-.socialization .container {
-  position: relative;
-}
 .socialization__title {
   margin: 18px 0 22px;
 }
@@ -2081,4 +2078,162 @@ h3 {
   .socialization__slider-controls {
     display: flex;
   }
+}
+
+.price {
+  margin: 100px 0;
+}
+@media (max-width: 768px) {
+  .price {
+    margin: 90px 0;
+  }
+}
+.price__title {
+  margin: 21px 0 24px;
+}
+@media (max-width: 768px) {
+  .price__title {
+    margin: 18px 0 37px;
+  }
+}
+.price__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px 46px;
+}
+@media (max-width: 992px) {
+  .price__list {
+    gap: 30px 24px;
+  }
+}
+.price__list-item {
+  flex: 0 0 calc(50% - 23px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 35px 35px 40px;
+  box-sizing: border-box;
+  color: #2d2d2d;
+  border-radius: 8px 30px;
+  background-color: #ffffff;
+}
+@media (max-width: 992px) {
+  .price__list-item {
+    flex: 0 0 calc(50% - 12px);
+    border-radius: 8px 30px;
+  }
+}
+@media (max-width: 768px) {
+  .price__list-item {
+    flex: 1 1 100%;
+  }
+}
+.price__list-item--active {
+  color: #ffffff;
+  background-color: #609eff;
+}
+.price__list-item--active > * {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.price__list-item > * {
+  max-width: 410px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.price__list-item-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 12px;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 122%;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .price__list-item-info {
+    font-size: 16px;
+  }
+}
+.price__list-item-info::before {
+  content: "";
+  display: block;
+  border-radius: 100px;
+  width: 12px;
+  height: 12px;
+  background-color: #609eff;
+}
+.price__list-item--active .price__list-item-info::before {
+  background-color: #ffffff;
+}
+.price__list-item-title {
+  padding: 0 0 23px;
+  margin: 0;
+  font-weight: 600;
+  font-size: 33px;
+  line-height: 129%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  border-bottom: 1px solid rgba(45, 45, 45, 0.2);
+}
+@media (max-width: 768px) {
+  .price__list-item-title {
+    padding: 0 0 19px;
+    font-size: 26px;
+  }
+}
+.price__list-item-time {
+  padding: 21px 0;
+  font-weight: 500;
+  font-size: 25px;
+  line-height: 129%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  border-bottom: 1px solid rgba(45, 45, 45, 0.2);
+}
+@media (max-width: 768px) {
+  .price__list-item-time {
+    padding: 19px 0;
+    font-size: 23px;
+  }
+}
+.price__list-item-description {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 0;
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 132%;
+  text-align: center;
+  border-bottom: 1px solid rgba(45, 45, 45, 0.2);
+}
+@media (max-width: 768px) {
+  .price__list-item-description {
+    padding: 19px 0;
+    font-size: 16px;
+  }
+}
+.price__list-item-price {
+  padding: 24px 0 31px;
+  font-weight: 600;
+  font-size: 33px;
+  line-height: 129%;
+  letter-spacing: 0.01em;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .price__list-item-price {
+    padding: 18px 0 22px;
+    font-size: 28px;
+  }
+}
+.price__list-item-buttons {
+  display: flex;
+  justify-content: center;
+}
+.price__list-item--active .price__list-item-title, .price__list-item--active .price__list-item-time, .price__list-item--active .price__list-item-description {
+  border-color: rgba(255, 255, 255, 0.2);
 }
\ No newline at end of file
diff --git a/assets/scss/_l-price.scss b/assets/scss/_l-price.scss
new file mode 100644
index 0000000..64872f3
--- /dev/null
+++ b/assets/scss/_l-price.scss
@@ -0,0 +1,164 @@
+.price {
+  margin: 100px 0;
+
+  @include tablet {
+    margin: 90px 0;
+  }
+
+  &__title {
+    margin: 21px 0 24px;
+
+    @include tablet {
+      margin: 18px 0 37px;
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px 46px;
+
+    @include laptop {
+      gap: 30px 24px;
+    }
+
+    &-item {
+      flex: 0 0 calc(50% - 46px / 2);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 35px 35px 40px;
+      box-sizing: border-box;
+      color: $black;
+      border-radius: 8px 30px;
+      background-color: $white;
+
+      @include laptop {
+        flex: 0 0 calc(50% - 24px / 2);
+        border-radius: 8px 30px;
+      }
+
+      @include tablet {
+        flex: 1 1 100%;
+      }
+
+      &--active {
+        color: $white;
+        background-color: $blue;
+
+        & > * {
+          border-color: rgba($color: $white, $alpha: 0.1);
+        }
+      }
+
+      & > * {
+        max-width: 410px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      &-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        margin: 0 0 12px;
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 122%;
+        text-align: center;
+
+        @include tablet {
+          font-size: 16px;
+        }
+
+        &::before {
+          content: '';
+          display: block;
+          border-radius: 100px;
+          width: 12px;
+          height: 12px;
+          background-color: $blue;
+        }
+      }
+
+      &--active &-info::before {
+        background-color: $white;
+      }
+
+      &-title {
+        padding: 0 0 23px;
+        margin: 0;
+        font-weight: 600;
+        font-size: 33px;
+        line-height: 129%;
+        letter-spacing: 0.01em;
+        text-align: center;
+        border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);
+
+        @include tablet {
+          padding: 0 0 19px;
+          font-size: 26px;
+        }
+      }
+
+      &-time {
+        padding: 21px 0;
+        font-weight: 500;
+        font-size: 25px;
+        line-height: 129%;
+        letter-spacing: 0.01em;
+        text-align: center;
+        border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);
+
+        @include tablet {
+          padding: 19px 0;
+          font-size: 23px;
+        }
+      }
+
+      &-description {
+        flex: 1 1 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px 0;
+        font-weight: 500;
+        font-size: 17px;
+        line-height: 132%;
+        text-align: center;
+        border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);
+
+        @include tablet {
+          padding: 19px 0;
+          font-size: 16px;
+        }
+      }
+
+      &-price {
+        padding: 24px 0 31px;
+        font-weight: 600;
+        font-size: 33px;
+        line-height: 129%;
+        letter-spacing: 0.01em;
+        text-align: center;
+
+        @include tablet {
+          padding: 18px 0 22px;
+          font-size: 28px;
+        }
+      }
+
+      &-buttons {
+        display: flex;
+        justify-content: center;
+      }
+
+      &--active &-title,
+      &--active &-time,
+      &--active &-description {
+        border-color: rgba($color: $white, $alpha: 0.2);
+      }
+    }
+  }
+}
diff --git a/assets/scss/_l-socialization.scss b/assets/scss/_l-socialization.scss
index 0894479..9266280 100644
--- a/assets/scss/_l-socialization.scss
+++ b/assets/scss/_l-socialization.scss
@@ -5,10 +5,6 @@
     margin: 90px 0 90px;
   }
 
-  & .container {
-    position: relative;
-  }
-
   &__title {
     margin: 18px 0 22px;
 
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 646a747..74d9b15 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -27,3 +27,4 @@
 @import './l-conditions';
 @import './l-how-it-work';
 @import './l-socialization';
+@import './l-price';
diff --git a/index.html b/index.html
index f460df1..38e20a5 100644
--- a/index.html
+++ b/index.html
@@ -1307,6 +1307,69 @@
           </div>
         </div>
       </section>
+
+      <section class="price">
+        <div class="container">
+          <div class="tag">Cтоимость</div>
+
+          <h2 class="price__title">
+            Актуальная стоимость <br />
+            <span>программ реабилитации</span>
+          </h2>
+
+          <div class="price__list">
+            <div class="price__list-item price__list-item--active">
+              <div class="price__list-item-info">Для лечения сложных и длительных зависимостей</div>
+              <h4 class="price__list-item-title">Стандартная программа</h4>
+              <div class="price__list-item-time">9-12 месяцев</div>
+              <div class="price__list-item-description">Для получения стабильного результата</div>
+              <div class="price__list-item-price">от 25 000 ₽</div>
+              <div class="price__list-item-buttons">
+                <button class="button button--lg button--light">Оставить заявку</button>
+              </div>
+            </div>
+
+            <div class="price__list-item">
+              <div class="price__list-item-info">Для лечения алкоголизма и наркомании</div>
+              <h4 class="price__list-item-title">Ускоренная программа</h4>
+              <div class="price__list-item-time">3 месяца</div>
+              <div class="price__list-item-description">
+                Ускоренный курс реабилитации, позволяющий добиться результатов в сжатые сроки
+              </div>
+              <div class="price__list-item-price">от 35 000 ₽</div>
+              <div class="price__list-item-buttons">
+                <button class="button button--lg button--dark">Оставить заявку</button>
+              </div>
+            </div>
+
+            <div class="price__list-item">
+              <div class="price__list-item-info">Актуально для вывода человека из запоя</div>
+              <h4 class="price__list-item-title">Экспресс курс</h4>
+              <div class="price__list-item-time">28 дней</div>
+              <div class="price__list-item-description">
+                Для людей, не имеющих возможности длительного пребывания в центре
+              </div>
+              <div class="price__list-item-price">от 45 000 ₽</div>
+              <div class="price__list-item-buttons">
+                <button class="button button--lg button--dark">Оставить заявку</button>
+              </div>
+            </div>
+
+            <div class="price__list-item">
+              <div class="price__list-item-info"></div>
+              <h4 class="price__list-item-title">Социальная адаптация</h4>
+              <div class="price__list-item-time">Бессрочно</div>
+              <div class="price__list-item-description">
+                Программа для людей, которые прошли реабилитацию и учатся жить в трезвом обществе
+              </div>
+              <div class="price__list-item-price">от 15 000 ₽</div>
+              <div class="price__list-item-buttons">
+                <button class="button button--lg button--dark">Оставить заявку</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <script src="./assets/js/swiper-bundle.min.js" defer></script>