feat: added advantages

1 year ago · aa44dd8117
parent 1b89e64acb
commit aa44dd8117
8 changed files with 366 additions and 4 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -573,3 +573,140 @@ img {
    width: 100%;
  }
 }
+
+.advantages {
+  margin: 51px 0 116px;
+}
+.advantages .container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 39px 34px;
+}
+@media (max-width: 1240px) {
+  .advantages .container {
+    gap: 24px;
+  }
+}
+.advantages__item {
+  padding: 36px 36px 28px;
+  box-sizing: border-box;
+  border-radius: 22px 40px;
+  background-color: #ffffff;
+}
+@media (max-width: 768px) {
+  .advantages__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 24px;
+  }
+}
+@media (max-width: 576px) {
+  .advantages__item {
+    padding: 30px 19px;
+  }
+}
+.advantages__item--counter {
+  flex: 1 1 440px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0;
+  background-color: rgba(255, 255, 255, 0);
+}
+@media (max-width: 1240px) {
+  .advantages__item--counter {
+    flex: 1 1 100%;
+    align-items: center;
+  }
+}
+@media (max-width: 576px) {
+  .advantages__item--counter {
+    gap: 8px;
+  }
+}
+.advantages__item--conditions {
+  flex: 0 1 666px;
+}
+.advantages__item--detox {
+  flex: 0 1 454px;
+}
+.advantages__item--center, .advantages__item--support {
+  flex: 1 1 20%;
+}
+@media (max-width: 1240px) {
+  .advantages__item--conditions, .advantages__item--detox, .advantages__item--center, .advantages__item--support {
+    flex: 1 1 calc(50% - 12px);
+  }
+}
+@media (max-width: 768px) {
+  .advantages__item--conditions, .advantages__item--detox, .advantages__item--center, .advantages__item--support {
+    flex: 1 1 100%;
+  }
+}
+.advantages__item-figure {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 66px;
+  width: 66px;
+  margin: 0 0 20px;
+  border-radius: 80px;
+  background-color: #609eff;
+}
+@media (max-width: 768px) {
+  .advantages__item-figure {
+    height: 55px;
+    width: 55px;
+  }
+}
+.advantages__item-figure-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+@media (max-width: 768px) {
+  .advantages__item-figure-image {
+    width: 28px;
+  }
+}
+.advantages__item-text {
+  font-weight: 500;
+  font-size: 19px;
+  line-height: 146%;
+  color: #878787;
+}
+@media (max-width: 768px) {
+  .advantages__item-text {
+    font-size: 18px;
+    line-height: 141%;
+    text-align: center;
+  }
+}
+.advantages__item-text--counter {
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 122%;
+  color: #878787;
+}
+@media (max-width: 576px) {
+  .advantages__item-text--counter {
+    font-size: 15px;
+  }
+}
+.advantages__item-text b {
+  font-weight: 700;
+}
+.advantages__item-counter {
+  font-weight: 700;
+  font-size: 174px;
+  line-height: 94%;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #609eff;
+}
+@media (max-width: 576px) {
+  .advantages__item-counter {
+    font-size: 120px;
+  }
+}
--- a/assets/img/icons/convenient.svg
+++ b/assets/img/icons/convenient.svg
@ -0,0 +1,8 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3743 0.345272C19.4191 0.53121 18.6188 0.690585 18.6059 0.703866C18.593 0.717147 18.7027 0.916366 18.8447 1.14215C19.1738 1.66012 19.3997 2.18473 19.5869 2.84215C19.787 3.56598 19.7805 4.97379 19.5804 5.73746C18.8511 8.4734 16.2759 10.2929 13.591 9.96754C11.1708 9.67535 9.2539 7.87574 8.75693 5.43199C8.6343 4.83433 8.6343 3.72535 8.75693 3.11441C8.81502 2.84879 8.84083 2.62301 8.82793 2.60308C8.80856 2.5898 7.93081 2.74254 6.87234 2.9484C4.71022 3.3734 4.28425 3.52613 3.73565 4.07066C2.72236 5.09332 2.77399 6.81324 3.85182 7.82262C4.04544 8.00191 5.60088 9.01793 7.49193 10.1867C9.30553 11.3156 10.8158 12.2718 10.8416 12.3117C10.8674 12.3515 11.061 13.341 11.274 14.5097L11.6613 16.6347L16.3598 16.6546C19.4449 16.6613 21.052 16.648 21.052 16.6015C21.052 16.5418 20.0516 10.9371 19.987 10.6582C19.9677 10.5519 20.555 9.73512 22.3105 7.43746C23.8595 5.40543 24.7437 4.19019 24.8986 3.87808C25.5957 2.45699 24.9567 0.756991 23.5239 0.199179C22.8462 -0.0664463 22.3428 -0.0398846 20.3743 0.345272Z" fill="white"/>
+<path d="M13.7264 0.570929C12.2678 0.803351 11.0609 1.9057 10.693 3.35999C10.3122 4.86077 10.9383 6.52757 12.2226 7.39749C14.2944 8.81195 17.1471 7.62327 17.728 5.10648C17.9151 4.2764 17.7861 3.25374 17.3924 2.50335C16.9793 1.7264 16.1467 1.01585 15.2948 0.730304C14.9011 0.597492 14.0879 0.517804 13.7264 0.570929Z" fill="white"/>
+<path d="M4.14209 10.4723C4.14209 10.532 6.71727 22.8371 6.76245 22.9898C6.79472 23.1027 6.97544 23.1094 9.38281 23.1094H11.9644L11.8095 22.8902C11.5256 22.5117 11.1641 21.8277 10.9382 21.25C10.622 20.4465 10.4155 19.5965 9.75715 16.4023C9.43444 14.8484 9.15046 13.5602 9.12465 13.5402C9.00847 13.4273 4.14209 10.4324 4.14209 10.4723Z" fill="white"/>
+<path d="M12.2488 18.9057C12.2746 19.0452 12.3585 19.4038 12.4424 19.7092C12.8748 21.2499 13.5073 22.1928 14.4432 22.6776C15.1983 23.0694 15.1273 23.0694 19.387 23.0893L23.2982 23.1159L23.3627 23.2952C24.2534 25.8651 26.7705 32.8178 26.8673 32.9838C27.0416 33.2694 27.4482 33.6213 27.8225 33.8073C28.2743 34.0397 29.0875 34.0264 29.578 33.794C30.5139 33.3424 31.0366 32.2534 30.7785 31.2772C30.6107 30.6331 27.1836 21.0374 26.9706 20.619C26.693 20.0745 25.9766 19.3506 25.441 19.0784C24.5955 18.6467 24.8601 18.66 18.2253 18.66H12.2036L12.2488 18.9057Z" fill="white"/>
+<path d="M6.99484 29.212C7.0142 33.2695 7.0142 33.3292 7.14974 33.5152C7.22073 33.6148 7.38209 33.7741 7.50471 33.8538C7.92423 34.1527 8.58255 33.9468 8.8149 33.4421C8.90525 33.2429 8.91816 32.8445 8.91816 30.155V27.0937H11.3062H13.6942V30.1484C13.6942 33.5218 13.6942 33.5152 14.0879 33.8074C14.2492 33.9269 14.3912 33.9667 14.6429 33.9667C15.0044 33.9667 15.2238 33.8472 15.4626 33.5085C15.5917 33.3292 15.5981 33.2363 15.6175 30.2081L15.6369 27.0937H16.3404H17.0503V26.0976V25.1015H12.0161H6.98193L6.99484 29.212Z" fill="white"/>
+<path d="M18.9993 28.7339L19.0187 32.3729L19.1994 32.7515C19.9158 34.2456 21.9747 34.4116 22.8847 33.0503C23.2526 32.4991 23.3107 32.1272 23.3107 30.4206V28.9331L22.6588 27.1003C22.2974 26.0909 21.9876 25.2276 21.9747 25.1812C21.9489 25.1214 21.5874 25.1015 20.4644 25.1015H18.98L18.9993 28.7339Z" fill="white"/>
+</svg>
--- a/assets/img/icons/heart.svg
+++ b/assets/img/icons/heart.svg
@ -0,0 +1,5 @@
+<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.41667 0.0866146C5.32175 0.440149 3.61432 1.56278 2.42761 3.36766C2.08854 3.88246 1.63444 4.92446 1.47702 5.5633C1.24089 6.49986 1.19245 7.90159 1.36198 8.81334L1.40436 9.03662L1.93112 9.00561C3.12995 8.93739 4.41354 9.53901 5.15222 10.519C5.29753 10.7113 5.81218 11.6726 6.29655 12.6526L7.17448 14.4327L7.41667 14.321C8.38542 13.8683 9.61452 13.9675 10.5106 14.5629C10.9768 14.8792 14.1495 18.1665 14.652 18.855C14.8579 19.1465 15.1303 19.5682 15.2514 19.7977C15.3725 20.0272 15.4815 20.2195 15.4997 20.2195C15.5178 20.2195 15.6268 20.0272 15.7479 19.7977C16.1778 18.9852 16.7288 18.3278 18.521 16.4857C20.2829 14.6684 20.3192 14.6374 20.8339 14.3893C21.7542 13.9551 22.6018 13.9179 23.4858 14.29L23.8309 14.4327L24.6907 12.6836C25.1569 11.7222 25.6534 10.7857 25.7866 10.5996C26.5374 9.57003 27.8391 8.93739 29.0743 9.00561L29.601 9.03662L29.6434 8.78233C29.7282 8.29234 29.7585 7.4054 29.7161 6.78517C29.6253 5.5571 29.1712 4.26081 28.4446 3.18159C27.7907 2.19542 26.6524 1.21544 25.6049 0.719255C24.5272 0.210663 23.728 0.0307941 22.4928 0.0307941C21.1911 0.0307941 20.3737 0.229269 19.2233 0.806089C18.3757 1.24026 17.9337 1.59379 16.638 2.90869L15.4997 4.05613L14.3069 2.84667C12.7993 1.32709 12.0727 0.818495 10.8073 0.384329C9.83854 0.0494003 8.37331 -0.074646 7.41667 0.0866146Z" fill="white"/>
+<path d="M1.47118 11.0276C0.690123 11.3129 0.217857 11.8835 0.0483259 12.7518C-0.012221 13.0681 0.0301618 13.341 0.671959 16.9074L1.36219 20.7219L4.43192 23.792L7.5077 26.8622V29.3121V31.7559H11.0497H14.5917V27.7615C14.5917 25.2558 14.5675 23.5873 14.5251 23.2834C14.3858 22.2538 13.9741 21.1498 13.3989 20.2567C13.0477 19.7233 9.82665 16.3058 9.46942 16.0887C8.67626 15.6111 7.61063 16.0515 7.35028 16.9632C7.13837 17.7261 7.30184 18.0362 8.64598 19.4318L9.71161 20.5296L9.08192 21.1808L8.44618 21.8321L7.33817 20.7032C6.7327 20.0768 6.13329 19.4194 6.01219 19.2333C5.46727 18.396 5.32801 17.2671 5.64891 16.2996L5.81239 15.8158L4.83758 13.8186C4.16551 12.4355 3.79618 11.7408 3.64481 11.5796C3.112 11.0152 2.16141 10.7733 1.47118 11.0276Z" fill="white"/>
+<path d="M28.2936 11.0028C27.9424 11.1206 27.5549 11.3625 27.3248 11.6106C27.2098 11.7346 26.7436 12.6154 26.1562 13.8248L25.1875 15.8282L25.3449 16.3058C25.5629 16.926 25.575 17.8192 25.3813 18.3898C25.1451 19.0906 24.9514 19.3511 23.7404 20.6102L22.5598 21.8321L21.924 21.187L21.2883 20.5358L22.3479 19.4318C22.9352 18.8239 23.468 18.2161 23.5346 18.0797C23.7283 17.6951 23.7586 17.3602 23.6436 16.9632C23.3893 16.0515 22.3236 15.6111 21.5305 16.0887C21.1732 16.3058 17.9521 19.7233 17.601 20.2567C17.0258 21.1498 16.6141 22.2538 16.4748 23.2834C16.4324 23.5873 16.4082 25.2558 16.4082 27.7615V31.7559H19.9502H23.4922V29.3121V26.8622L26.568 23.792L29.6377 20.7219L30.3279 16.9074C30.9879 13.2666 31.0121 13.0743 30.9455 12.7332C30.7396 11.6788 29.9768 10.9841 28.9777 10.9345C28.7234 10.9221 28.4449 10.9531 28.2936 11.0028Z" fill="white"/>
+</svg>
--- a/assets/img/icons/hospital.svg
+++ b/assets/img/icons/hospital.svg
@ -0,0 +1,4 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.98" fill-rule="evenodd" clip-rule="evenodd" d="M17.4784 1.15042C23.6871 0.809128 28.3753 3.28308 31.5429 8.57229C33.3047 11.9797 33.7005 15.5422 32.7304 19.2598C32.1261 21.3338 31.2602 23.2882 30.1327 25.1231C27.206 29.5593 23.6311 33.4063 19.4081 36.6641C18.9619 36.8557 18.5661 36.7815 18.2206 36.4414C13.8569 33.0683 10.2325 29.0481 7.34754 24.3809C5.96402 22.0363 5.09813 19.5129 4.74988 16.8106C4.39478 10.6296 6.85638 5.96622 12.1346 2.82034C13.824 1.94082 15.6053 1.38417 17.4784 1.15042ZM18.7401 4.71291C23.196 4.86755 26.4739 6.8962 28.5741 10.7989C30.5327 15.6175 29.6544 19.8356 25.9393 23.4531C22.3885 26.2541 18.5291 26.7736 14.3612 25.0117C9.8614 22.5371 7.89461 18.7396 8.46082 13.6192C9.18037 10.063 11.1472 7.453 14.3612 5.78909C15.7648 5.15984 17.2244 4.80111 18.7401 4.71291Z" fill="white"/>
+<path opacity="0.998" fill-rule="evenodd" clip-rule="evenodd" d="M16.8848 8.2754C18.2704 8.26301 19.6558 8.2754 21.041 8.31251C21.109 8.34027 21.1709 8.37738 21.2266 8.42384C21.3362 9.95089 21.3733 11.4847 21.3379 13.0254C22.8225 13.013 24.3069 13.0254 25.791 13.0625C25.9271 13.0996 26.0137 13.1862 26.0508 13.3223C26.1003 14.7077 26.1003 16.0931 26.0508 17.4785C26.023 17.5465 25.9859 17.6084 25.9395 17.6641C24.4124 17.7737 22.8786 17.8108 21.3379 17.7754C21.3503 19.26 21.3379 20.7444 21.3008 22.2285C21.2637 22.3646 21.1771 22.4512 21.041 22.4883C19.6556 22.5378 18.2702 22.5378 16.8848 22.4883C16.8168 22.4605 16.7549 22.4234 16.6992 22.377C16.5896 20.8499 16.5525 19.3161 16.5879 17.7754C15.1033 17.7878 13.6189 17.7754 12.1348 17.7383C11.9987 17.7012 11.9121 17.6146 11.875 17.4785C11.8255 16.0931 11.8255 14.7077 11.875 13.3223C11.9028 13.2543 11.9399 13.1924 11.9863 13.1367C13.5134 13.0271 15.0472 12.99 16.5879 13.0254C16.5755 11.5408 16.5879 10.0564 16.625 8.57228C16.6762 8.43497 16.7628 8.33596 16.8848 8.2754Z" fill="white"/>
+</svg>
--- a/assets/img/icons/mental-care.svg
+++ b/assets/img/icons/mental-care.svg
@ -0,0 +1,4 @@
+<svg width="39" height="40" viewBox="0 0 39 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5285 2.90703C17.4664 3.34121 15.2041 4.4 13.1779 6.34238C12.7057 6.79179 12.0582 7.51543 11.7307 7.94961C10.4129 9.70156 9.48359 12.0934 9.33125 14.0967C9.3084 14.4318 9.27031 14.8432 9.24746 15.0184C9.21699 15.2621 8.70664 16.1457 6.96992 18.9412L4.73047 22.5518L6.15488 22.5898C7.64785 22.6279 7.83066 22.6736 8.01348 22.9936C8.08965 23.1154 8.12012 24.0143 8.15059 26.6117C8.18106 29.5367 8.20391 30.0699 8.30293 30.1309C8.68379 30.367 10.2834 30.4355 12.8047 30.3289C14.351 30.268 14.3814 30.268 14.5414 30.4279C14.7014 30.5879 14.7014 30.626 14.7014 33.8633V37.1387H17.9387H21.176V30.7402V24.3418L20.7418 24.1209C18.4795 22.9783 15.7754 20.3961 14.3281 17.9814C12.7895 15.4297 12.34 12.9008 13.0789 11.0117C13.8559 9.03886 15.6535 7.72109 17.7178 7.60683C18.6852 7.55351 19.1955 7.69062 20.3457 8.33047C21.2826 8.85605 21.6178 8.97793 21.9072 8.90937C22.0291 8.88652 22.5547 8.62754 23.0803 8.3457C24.2229 7.72109 24.6646 7.58398 25.4721 7.58398C27.4068 7.5916 29.2578 8.75703 30.1262 10.5166C31.025 12.3219 30.8727 14.4395 29.6691 16.9227C28.359 19.6344 25.7158 22.4223 23.0346 23.9305L22.2424 24.3799V30.7555V37.1387H26.2414C28.4428 37.1387 30.2404 37.1158 30.2404 37.0777C30.2404 37.0473 29.9357 34.526 29.5625 31.4715C29.1893 28.4246 28.9074 25.8652 28.9227 25.7891C28.9455 25.7129 29.1664 25.4844 29.4254 25.2787C32.099 23.1764 33.8129 20.1371 34.2014 16.7855C34.3309 15.7268 34.2547 13.9672 34.0566 12.9617C33.5463 10.4557 32.4266 8.3914 30.5908 6.54804C28.7398 4.69707 26.7898 3.6459 24.1772 3.08984C23.6211 2.97558 23.065 2.92226 22.09 2.89941C21.3588 2.88418 20.658 2.89179 20.5285 2.90703Z" fill="white"/>
+<path d="M17.1848 8.99317C15.2272 9.53399 13.8942 11.4383 14.0465 13.4949C14.1912 15.4525 15.25 17.6006 17.1238 19.7182C18.2283 20.9674 19.7594 22.209 21.0543 22.8945L21.6942 23.2373L22.1436 23.0164C22.8748 22.666 23.9946 21.8967 24.8401 21.1654C27.4071 18.9564 29.1895 15.9781 29.3723 13.5635C29.578 10.9584 27.5822 8.7875 25.0838 8.89414C24.5201 8.91699 24.3983 8.94746 23.7889 9.26738L23.1186 9.61016L23.0957 11.5297L23.0805 13.4492L24.8858 13.4645L26.6987 13.4873V14.7822V16.0771L24.8934 16.1L23.0805 16.1152V17.8977C23.0805 19.3221 23.0576 19.6953 22.9738 19.7639C22.9053 19.8248 22.4864 19.8477 21.6637 19.8324L20.4526 19.8096L20.4145 17.9814L20.3764 16.1533L18.5483 16.1152L16.7201 16.0771L16.6973 14.8279C16.6821 13.8758 16.7049 13.5635 16.7735 13.5102C16.8268 13.4797 17.6723 13.4492 18.6473 13.4492H20.4145V11.5982C20.4145 9.4502 20.4983 9.67109 19.508 9.19121C18.8987 8.89414 18.8225 8.87891 18.2131 8.88652C17.8475 8.88652 17.3905 8.93984 17.1848 8.99317Z" fill="white"/>
+</svg>
--- a/assets/scss/_l-advantages.scss
+++ b/assets/scss/_l-advantages.scss
@ -0,0 +1,142 @@
+.advantages {
+  margin: 51px 0 116px;
+
+  & .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 39px 34px;
+
+    @include desktop {
+      gap: 24px;
+    }
+  }
+
+  &__item {
+    padding: 36px 36px 28px;
+    box-sizing: border-box;
+    border-radius: 22px 40px;
+    background-color: $white;
+
+    @include tablet {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 30px 24px;
+    }
+
+    @include mobile {
+      padding: 30px 19px;
+    }
+
+    &--counter {
+      flex: 1 1 440px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      padding: 0;
+      background-color: rgba($color: $white, $alpha: 0);
+
+      @include desktop {
+        flex: 1 1 100%;
+        align-items: center;
+      }
+
+      @include mobile {
+        gap: 8px;
+      }
+    }
+
+    &--conditions {
+      flex: 0 1 666px;
+    }
+
+    &--detox {
+      flex: 0 1 454px;
+    }
+
+    &--center,
+    &--support {
+      flex: 1 1 20%;
+    }
+
+    &--conditions,
+    &--detox,
+    &--center,
+    &--support {
+      @include desktop {
+        flex: 1 1 calc(50% - 24px / 2);
+      }
+
+      @include tablet {
+        flex: 1 1 100%;
+      }
+    }
+
+    &-figure {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 66px;
+      width: 66px;
+      margin: 0 0 20px;
+      border-radius: 80px;
+      background-color: $blue;
+
+      @include tablet {
+        height: 55px;
+        width: 55px;
+      }
+
+      &-image {
+        display: block;
+        max-width: 100%;
+        height: auto;
+
+        @include tablet {
+          width: 28px;
+        }
+      }
+    }
+
+    &-text {
+      font-weight: 500;
+      font-size: 19px;
+      line-height: 146%;
+      color: $grey;
+
+      @include tablet {
+        font-size: 18px;
+        line-height: 141%;
+        text-align: center;
+      }
+
+      &--counter {
+        font-weight: 500;
+        font-size: 17px;
+        line-height: 122%;
+        color: $grey;
+
+        @include mobile {
+          font-size: 15px;
+        }
+      }
+
+      & b {
+        font-weight: 700;
+      }
+    }
+
+    &-counter {
+      font-weight: 700;
+      font-size: 174px;
+      line-height: 94%;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: $blue;
+
+      @include mobile {
+        font-size: 120px;
+      }
+    }
+  }
+}
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@ -18,3 +18,4 @@
@import './l-main';
@import './l-footer';
@import './l-first-screen';
+@import './l-advantages';
--- a/index.html
+++ b/index.html
@ -52,9 +52,7 @@
      <section class="first-screen">
        <div class="container">
          <div class="first-screen__wrapper">
-            <div class="tag tag--light">
-              Реабилитационный центр и социальная адаптация
-            </div>
+            <div class="tag tag--light">Реабилитационный центр и социальная адаптация</div>

            <h1 class="first-screen__title">Лечение <b>алкоголизма и наркомании</b> в Томске</h1>

@ -101,9 +99,72 @@
              <button class="button button--lg button--lg--consult button--light">
                Получить консультацию
              </button>
-              <button class="button button--lg button--lg--coin button--dark">Посмотреть цены</button>
+              <button class="button button--lg button--lg--coin button--dark">
+                Посмотреть цены
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="advantages">
+        <div class="container">
+          <div class="advantages__item advantages__item--counter">
+            <div class="advantages__item-counter">340+</div>
+            <div class="advantages__item-text">
+              Человек смогли побороть зависимость вместе с нами
            </div>
          </div>
+
+          <div class="advantages__item advantages__item--conditions">
+            <figure class="advantages__item-figure">
+              <img
+                class="advantages__item-figure-image"
+                src="./assets/img/icons/convenient.svg"
+                alt="convenient"
+              />
+            </figure>
+            <div class="advantages__item-text">
+              <b>Комфортные условия проживания</b> под круглосуточным присмотром наших специалистов
+            </div>
+          </div>
+
+          <div class="advantages__item advantages__item--detox">
+            <figure class="advantages__item-figure">
+              <img
+                class="advantages__item-figure-image"
+                src="./assets/img/icons/heart.svg"
+                alt="heart"
+              />
+            </figure>
+            <div class="advantages__item-text">
+              <b>Поддержка на всех этапах:</b> детокс - реабилитация - социальная адаптация
+            </div>
+          </div>
+
+          <div class="advantages__item advantages__item--center">
+            <figure class="advantages__item-figure">
+              <img
+                class="advantages__item-figure-image"
+                src="./assets/img/icons/hospital.svg"
+                alt="hospital"
+              />
+            </figure>
+            <div class="advantages__item-text">
+              Наш центр успешно работает <b>более 8-ми лет </b>
+            </div>
+          </div>
+
+          <div class="advantages__item advantages__item--support">
+            <figure class="advantages__item-figure ">
+              <img
+                class="advantages__item-figure-image"
+                src="./assets/img/icons/mental-care.svg"
+                alt="mental-care"
+              />
+            </figure>
+            <div class="advantages__item-text"><b>Психологическая поддержка</b> родственников</div>
+          </div>
        </div>
      </section>
    </main>