feat: added first screen

1 year ago · 3de42548c2
parent 086f0099ba
commit 3de42548c2
11 changed files with 612 additions and 2 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -212,11 +212,76 @@ img {
 }

 .button {
+  box-sizing: border-box;
  border-radius: 100px;
-  background-color: #ffffff;
+  background-color: rgba(255, 255, 255, 0);
  transition: all ease-in-out 0.1s;
  cursor: pointer;
 }
+.button--lg {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 24px 58px 26px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 140%;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .button--lg {
+    justify-content: center;
+    gap: 20px;
+    max-width: 480px;
+    padding: 21px 30px;
+    font-size: 18px;
+  }
+}
+.button--lg::before {
+  transition: all ease-in-out 0.1s;
+}
+.button--lg--consult::before {
+  content: "";
+  display: inline-block;
+  height: 22px;
+  width: 22px;
+  background: url(../img/icons/consultation.svg) center no-repeat;
+}
+.button--lg--coin::before {
+  content: "";
+  display: inline-block;
+  height: 22px;
+  width: 22px;
+  background: url(../img/icons/ruble.svg) center no-repeat;
+}
+.button--light {
+  color: #2d2d2d;
+  background-color: #ffffff;
+}
+.button--light:hover {
+  color: #609eff;
+}
+.button--light:active {
+  color: #3081ff;
+}
+.button--dark {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+.button--dark:hover {
+  color: #609eff;
+  background-color: #ffffff;
+}
+.button--dark:active {
+  color: #3081ff;
+}
+.button--dark::before {
+  filter: brightness(10);
+}
+.button--dark:hover::before, .button--dark:active::before {
+  filter: brightness(1);
+}
 .button--order {
  display: inline-block;
  padding: 14px 29px;
@ -236,6 +301,44 @@ img {
  background-color: #3081ff;
 }

+.tag {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 19px 46px;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 122%;
+  color: #878787;
+  border: 1px solid rgba(135, 135, 135, 0.2);
+  border-radius: 240px;
+}
+@media (max-width: 768px) {
+  .tag {
+    gap: 10px;
+    padding: 13px 26px;
+    font-size: 14px;
+  }
+}
+.tag::before {
+  content: "";
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  border-radius: 7px;
+  background-color: #609eff;
+}
+.tag--light {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.tag--light::before {
+  background-color: white;
+}
+
 .header {
  padding: 26px 0 29px;
 }
@ -330,4 +433,143 @@ img {
 }
 .header__burger:active {
  background-color: #3081ff;
+}
+
+@media (max-width: 1240px) {
+  .first-screen .container {
+    padding: 0;
+  }
+}
+.first-screen__wrapper {
+  padding: 43px 26px 55px;
+  border-radius: 80px 12px;
+  background-color: #609eff;
+}
+@media (max-width: 992px) {
+  .first-screen__wrapper {
+    border-radius: 40px 7px;
+  }
+}
+.first-screen__wrapper > * {
+  max-width: 996px;
+  margin: 0 auto;
+}
+@media (max-width: 576px) {
+  .first-screen__wrapper > .tag {
+    margin: 0 32px;
+  }
+}
+.first-screen__title {
+  margin-bottom: 28px;
+  margin-top: 13px;
+  font-weight: 500;
+  font-size: 80px;
+  line-height: 114%;
+  letter-spacing: 0.01em;
+  text-align: center;
+  color: #ffffff;
+}
+@media (max-width: 1240px) {
+  .first-screen__title {
+    font-size: 72px;
+  }
+}
+@media (max-width: 992px) {
+  .first-screen__title {
+    font-size: 56px;
+  }
+}
+@media (max-width: 768px) {
+  .first-screen__title {
+    margin-bottom: 23px;
+    font-size: 39px;
+  }
+}
+.first-screen__title > b {
+  font-weight: 700;
+}
+.first-screen__advantages {
+  display: flex;
+  margin-bottom: 34px;
+}
+@media (max-width: 768px) {
+  .first-screen__advantages {
+    flex-direction: column;
+    gap: 24px;
+    padding: 0 32px;
+    margin-bottom: 24px;
+  }
+}
+.first-screen__advantages-item {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 60px;
+  box-sizing: border-box;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+}
+@media (max-width: 992px) {
+  .first-screen__advantages-item {
+    gap: 10px;
+    padding: 0 32px;
+  }
+}
+@media (max-width: 768px) {
+  .first-screen__advantages-item {
+    padding: 0;
+    border: none;
+  }
+}
+.first-screen__advantages-item:last-child {
+  border: none;
+}
+.first-screen__advantages-item-figure {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 60px;
+}
+@media (max-width: 992px) {
+  .first-screen__advantages-item-figure {
+    height: 50px;
+  }
+}
+.first-screen__advantages-item-figure-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+@media (max-width: 992px) {
+  .first-screen__advantages-item-figure-image {
+    max-height: 48px;
+  }
+}
+.first-screen__advantages-item-text {
+  font-weight: 500;
+  font-size: 21px;
+  line-height: 138%;
+  text-align: center;
+  color: #fff;
+}
+@media (max-width: 992px) {
+  .first-screen__advantages-item-text {
+    font-size: 18px;
+    line-height: 161%;
+  }
+}
+.first-screen__advantages-item-text > b {
+  font-weight: 700;
+}
+.first-screen__buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px 32px;
+}
+@media (max-width: 768px) {
+  .first-screen__buttons > .button {
+    width: 100%;
+  }
 }
--- a/assets/img/icons/anonymous.svg
+++ b/assets/img/icons/anonymous.svg
@ -0,0 +1,5 @@
+<svg width="60" height="59" viewBox="0 0 60 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.4032 2.16907C20.7151 2.39843 19.683 3.32737 19.4192 3.96959C19.316 4.23337 19.0522 5.20817 18.8229 6.11417C17.9169 9.89872 17.3549 13.2704 17.2173 15.6558L17.1485 17.0091L17.4811 17.3302C17.7563 17.6054 17.9972 17.6972 18.9261 17.8577C24.3047 18.8096 36.1056 18.8096 41.209 17.8577C42.0462 17.6972 42.31 17.594 42.5738 17.3302L42.9064 17.0091L42.8261 15.6099C42.7802 14.8416 42.7114 14.0847 42.677 13.9356L42.6082 13.6603L43.6174 13.7406C46.2666 13.9356 50.8424 14.7269 53.01 15.3576C54.0994 15.6788 55.3839 16.2407 55.5903 16.493C56.2555 17.2958 52.3907 18.5688 46.8744 19.3601C38.5713 20.5643 26.392 20.7478 16.9535 19.8188C11.552 19.2913 7.0105 18.3738 5.14116 17.4219C4.10901 16.9059 4.13195 16.665 5.24438 16.1146C6.88435 15.2888 10.0496 14.5434 14.247 13.9814C15.2906 13.8438 15.6691 13.0754 15.0039 12.4218C14.614 12.0204 14.8434 12.0089 11.4487 12.5594C4.7283 13.6603 1.78094 15.2888 2.664 17.4105C3.45532 19.2913 8.08852 20.7363 15.9214 21.5391C19.0981 21.8717 24.2589 22.1813 26.4608 22.1813C27.6306 22.1813 27.642 22.1813 27.5847 22.4336C27.5503 22.5827 27.3324 23.6722 27.0915 24.8534C26.4837 27.9155 26.5755 27.8581 23.0088 27.7778C20.7381 27.732 20.3596 27.6173 19.4307 26.7686C18.7082 26.1035 18.4903 25.7021 18.2265 24.5896C17.9857 23.5231 17.7449 23.2134 17.16 23.2134C16.77 23.2134 16.2654 23.6607 16.2654 24.0162C16.2654 24.4979 16.6439 25.92 16.9191 26.4819C17.5614 27.7664 18.7885 28.8444 20.1303 29.3146C20.8528 29.5554 21.0821 29.5784 23.4905 29.5784C25.9447 29.5784 26.1053 29.5669 26.6443 29.3146C27.3782 28.9705 28.009 28.3627 28.2842 27.6976C28.4104 27.4109 28.7315 26.0691 29.0068 24.7273L29.4884 22.296H29.8439C31.3463 22.296 37.8832 22.0322 39.8787 21.8946C41.232 21.8028 42.3559 21.734 42.3674 21.757C42.3788 21.7684 42.2297 22.6171 42.0118 23.6492C41.599 25.6677 41.4499 26.0117 40.6242 26.7686C39.6952 27.6173 39.3168 27.732 37.046 27.7778C33.5941 27.8581 33.5482 27.8352 33.078 25.4268C32.734 23.6836 32.539 23.3281 31.9541 23.3281C31.4954 23.3281 31.1857 23.5116 31.0481 23.8671C30.9105 24.2227 31.4036 26.8604 31.7706 27.6976C32.0459 28.3627 32.6766 28.9705 33.4106 29.3146C33.9611 29.5669 34.1102 29.5784 36.6217 29.5669C39.0415 29.5669 39.3168 29.544 39.9361 29.3146C40.8421 28.982 41.5875 28.4889 42.2183 27.8122C43.0784 26.8948 43.388 26.1264 43.8812 23.7066L44.317 21.5505L45.0051 21.4588C51.8517 20.5987 55.4068 19.6009 56.8633 18.1444C57.7808 17.227 57.7693 16.298 56.8174 15.3576C55.8082 14.3484 53.8013 13.5571 50.5557 12.892C48.8355 12.5479 45.3721 12.0433 43.6747 11.9057C43.1357 11.8713 42.6197 11.791 42.5164 11.7337C42.4018 11.6763 42.2985 11.3323 42.2068 10.7474C42.0233 9.55467 41.0944 5.4146 40.7962 4.45126C40.6012 3.80904 40.4407 3.5682 39.9017 3.01772C39.3741 2.49018 39.0989 2.31816 38.5713 2.16907C37.4704 1.84795 37.0575 1.9397 33.3877 3.40765L30.0274 4.74944L26.6787 3.40765C23.0203 1.95117 22.4927 1.82502 21.4032 2.16907ZM26.4149 5.27698L30.0274 6.71052L33.64 5.27698C35.6469 4.4742 37.4245 3.83197 37.6309 3.83197C38.1011 3.83197 38.686 4.18749 38.8924 4.60035C39.5461 5.87334 41.3123 15.6558 40.9567 15.9999C40.8306 16.1146 38.4337 16.4127 36.2777 16.5733C34.0299 16.7453 26.1167 16.7453 23.7772 16.5733C21.6326 16.4127 19.2357 16.1146 19.0981 15.9884C18.7426 15.6558 20.5087 5.87334 21.1624 4.60035C21.3688 4.18749 21.9537 3.83197 22.4239 3.83197C22.6304 3.83197 24.408 4.4742 26.4149 5.27698Z" fill="white"/>
+<path d="M45.0962 25.1974C44.8668 25.3924 44.7865 25.5758 44.7865 25.8511C44.7865 26.4245 45.1879 26.7112 46.1513 26.8144C48.0665 27.0094 50.9221 27.8351 53.3304 28.8902C54.764 29.521 54.8901 29.5898 54.741 29.7274C54.6722 29.7847 52.6538 31.2641 50.234 33.0188C47.8256 34.762 45.7957 36.2873 45.7384 36.402C45.6696 36.5166 45.6237 36.7231 45.6237 36.8492C45.6237 36.9754 46.3462 38.1681 47.2407 39.5099C48.1238 40.8402 48.8119 41.9756 48.7546 42.0329C48.7087 42.0788 44.798 44.1889 40.0845 46.7234C32.4695 50.7947 31.4833 51.2993 31.2883 51.1617C30.8984 50.8864 25.3936 45.6225 23.8339 44.0169C22.0448 42.182 21.1847 40.9778 20.1067 38.753C19.0401 36.574 18.1571 34.028 17.7557 32.021C17.5492 30.9889 16.8841 30.6104 16.2075 31.1495C15.9093 31.3903 15.8978 31.4247 15.9551 32.1472C16.0928 33.7298 17.3658 37.4456 18.6043 39.8883C20.0493 42.7325 20.9553 43.8449 24.7628 47.5148C26.3684 49.0515 27.9854 50.6227 28.3639 51.0011L29.052 51.6778L28.3065 51.2764C27.8937 51.0585 23.9256 48.9254 19.4759 46.5514C15.0262 44.1775 11.3449 42.1935 11.299 42.1361C11.2417 42.0902 11.9298 40.9549 12.8128 39.6246C13.845 38.0649 14.4299 37.09 14.4299 36.8951C14.4299 36.7116 14.2922 36.4708 14.0514 36.2414C13.8335 36.0464 11.7692 34.5211 9.46408 32.8468C7.14747 31.1724 5.2552 29.7733 5.2552 29.7389C5.2552 29.6242 7.21628 28.764 8.76451 28.2021C10.4389 27.5943 12.0789 27.1814 13.6615 26.9635C14.2693 26.8718 14.8542 26.7341 14.9574 26.6539C15.4391 26.2525 15.3703 25.5644 14.8313 25.2089C14.5675 25.0368 14.4184 25.0254 13.3633 25.1515C11.861 25.335 9.59023 25.9199 7.75529 26.5965C5.87449 27.2846 2.9386 28.7296 2.68629 29.0737C2.42252 29.4636 2.45693 29.8191 2.82391 30.1976C2.99594 30.3811 5.17492 32.021 7.66355 33.833C10.1522 35.6336 12.1821 37.1589 12.1706 37.2162C12.1477 37.2735 11.4137 38.3974 10.5306 39.7278C9.59023 41.1498 8.92506 42.2623 8.92506 42.4228C8.92506 42.5719 9.03975 42.8242 9.18884 42.9848C9.56729 43.4091 35.1646 57.0793 35.5775 57.0793C36.1509 57.0793 36.5867 56.4027 36.3802 55.8522C36.3344 55.749 35.5316 54.9806 34.5912 54.1549L32.8709 52.6526L33.2494 52.4461C37.183 50.4277 50.6812 43.088 50.8762 42.8701C51.0138 42.7095 51.1285 42.4572 51.1285 42.3081C51.1285 42.1476 50.4519 41.0122 49.4771 39.5443L47.8256 37.0556L48.0665 36.8607C48.2041 36.7575 50.234 35.2895 52.562 33.5922C54.9016 31.9064 56.9774 30.3581 57.1838 30.1402C57.9292 29.3604 57.654 28.9475 55.7388 27.9842C52.8602 26.5507 49.672 25.4841 47.1834 25.1056C45.6237 24.8763 45.4632 24.8877 45.0962 25.1974Z" fill="white"/>
+<path d="M42.7574 30.9888C42.5624 31.1494 42.3904 31.5966 42.0693 32.9155C41.5418 35.0142 41.0142 36.4477 40.0509 38.4662C38.7435 41.1727 38.1586 41.9411 34.8901 45.221C31.8281 48.2831 31.7593 48.3863 32.0919 49.017C32.2295 49.2808 32.8258 49.4872 33.124 49.384C33.491 49.2464 38.2045 44.6361 39.0302 43.5925C41.0601 41.0695 42.8033 37.3996 43.801 33.5577C44.2253 31.8834 44.2368 31.3443 43.8354 31.0232C43.457 30.7251 43.09 30.7136 42.7574 30.9888Z" fill="white"/>
+</svg>
--- a/assets/img/icons/consultation.svg
+++ b/assets/img/icons/consultation.svg
@ -0,0 +1,7 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.21391 2.32444C2.84438 2.37171 2.27719 2.58226 1.97641 2.77991C1.39203 3.16233 1.04828 3.55335 0.768984 4.14632C0.468203 4.79515 0.468203 4.79515 0.481093 7.92757L0.493984 10.7205L0.627187 11.0987C0.820547 11.6358 1.00102 11.9151 1.4393 12.3534C1.87758 12.7959 2.31156 13.0451 2.87875 13.1869L3.20102 13.2686L3.2225 14.983C3.24398 16.8694 3.23539 16.8006 3.51469 16.9166C3.62641 16.9639 3.69086 16.9639 3.79398 16.9338C3.88852 16.9037 4.52016 16.2979 5.73617 15.0819L7.54086 13.2772H11.7776C16.5772 13.2772 16.3151 13.2944 17.0584 12.9248C17.3549 12.7787 17.501 12.667 17.8319 12.3319C18.167 12.001 18.2788 11.8549 18.4248 11.5584C18.7815 10.8451 18.7772 10.8752 18.7772 7.81155C18.7772 4.75647 18.7772 4.77796 18.4549 4.10335C17.9737 3.10647 17.0713 2.45765 15.9756 2.32015C15.5416 2.26858 3.6393 2.26858 3.21391 2.32444ZM16.3495 3.33851C17.0756 3.61351 17.6342 4.24515 17.8104 4.98851C17.9049 5.39671 17.9049 10.2006 17.8104 10.6088C17.6342 11.3565 17.0541 11.9881 16.2893 12.2631C16.053 12.3534 15.9541 12.3534 11.5928 12.3748L7.13266 12.3963L5.62875 13.9002L4.12914 15.3998L4.11625 14.0162L4.10336 12.6326L3.99164 12.5209C3.89711 12.4307 3.81977 12.4049 3.54477 12.3705C3.09359 12.3233 2.82289 12.2373 2.49633 12.044C1.985 11.7389 1.5768 11.1846 1.4393 10.6088C1.34477 10.2092 1.34477 5.39671 1.4393 5.0014C1.63695 4.15921 2.2557 3.51897 3.09359 3.28265C3.24398 3.23968 4.67055 3.23108 9.6893 3.23538L16.0916 3.24397L16.3495 3.33851Z" fill="#609EFF"/>
+<path d="M4.00883 6.04967C3.30414 6.30318 2.82289 6.91764 2.76274 7.6524C2.6725 8.74381 3.6307 9.70201 4.72211 9.61178C5.2936 9.56451 5.80492 9.26373 6.1057 8.79537C6.34203 8.43014 6.41508 8.15084 6.39359 7.69537C6.36352 7.01217 5.99828 6.46217 5.37953 6.15709C5.08734 6.01099 5.02289 5.99381 4.64477 5.98521C4.3268 5.97232 4.1807 5.98951 4.00883 6.04967ZM4.8725 6.92623C5.22055 7.03365 5.49985 7.43326 5.49985 7.82857C5.49985 8.04771 5.30219 8.40865 5.11742 8.52896C4.70492 8.79537 4.28813 8.76099 3.95297 8.42154C3.4975 7.97037 3.60922 7.26998 4.17211 6.98639C4.42133 6.86178 4.6061 6.84889 4.8725 6.92623Z" fill="#609EFF"/>
+<path d="M9.05755 6.05402C8.73099 6.16145 8.56341 6.26887 8.297 6.55246C7.29153 7.61379 7.8845 9.34543 9.34114 9.59465C10.5357 9.7966 11.6271 8.71809 11.4337 7.51926C11.3349 6.9134 10.8622 6.30754 10.3251 6.09699C9.97708 5.96379 9.3927 5.94231 9.05755 6.05402ZM9.98997 6.95637C10.6689 7.26145 10.7075 8.22824 10.0544 8.58918C9.49583 8.89856 8.78255 8.52043 8.73099 7.88449C8.67083 7.17981 9.36263 6.66848 9.98997 6.95637Z" fill="#609EFF"/>
+<path d="M14.1152 6.0457C13.5953 6.23476 13.2344 6.55273 13.0066 7.03828C12.8777 7.30898 12.8691 7.35624 12.8691 7.79882C12.8691 8.24999 12.8777 8.28867 13.0152 8.57226C13.5867 9.73242 15.0992 9.97734 15.9801 9.04492C16.8438 8.13398 16.5816 6.69882 15.4516 6.14453C15.1852 6.01132 15.1078 5.99413 14.7426 5.98554C14.4289 5.97265 14.2785 5.98984 14.1152 6.0457ZM15.0777 6.98671C15.4602 7.18007 15.6363 7.5539 15.5504 7.98788C15.4859 8.30156 15.198 8.59804 14.8844 8.67538C14.4633 8.77421 14.0508 8.58085 13.8574 8.19413C13.677 7.8246 13.7371 7.44648 14.0293 7.15429C14.3215 6.85781 14.6996 6.79765 15.0777 6.98671Z" fill="#609EFF"/>
+<path d="M20.8957 7.84163C20.6207 7.96194 20.625 7.90179 20.625 10.6217C20.625 13.3416 20.6207 13.4018 20.3543 13.8959C20.0793 14.4116 19.5336 14.867 19.0094 15.0217C18.8891 15.0561 18.6398 15.1034 18.4551 15.1205C18.1801 15.1549 18.1027 15.1807 18.0082 15.2709L17.8965 15.3826L17.8836 16.7662L17.8707 18.1498L16.3711 16.6502L14.8672 15.1463L11.5156 15.1334C7.78165 15.1205 7.96211 15.1076 7.83751 15.4127C7.75586 15.5975 7.81602 15.8123 7.9793 15.9412C8.08672 16.0272 8.14688 16.0272 11.275 16.0272H14.459L16.2637 17.8319C17.4797 19.0479 18.1113 19.6537 18.2059 19.6838C18.309 19.7139 18.3734 19.7139 18.4852 19.6666C18.7645 19.5506 18.7559 19.6194 18.7773 17.733L18.7988 16.0186L19.1211 15.9369C19.6883 15.7951 20.1223 15.5459 20.5606 15.1034C20.9988 14.6651 21.1793 14.3858 21.3727 13.8487L21.5059 13.4705L21.5188 10.7893C21.5316 7.81585 21.5445 7.96194 21.2481 7.83733C21.0719 7.76429 21.0676 7.76429 20.8957 7.84163Z" fill="#609EFF"/>
+</svg>
--- a/assets/img/icons/health.svg
+++ b/assets/img/icons/health.svg
@ -0,0 +1,13 @@
+<svg width="53" height="54" viewBox="0 0 53 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_141_8218)">
+<path d="M12.2007 4.01675C9.11862 4.37633 6.52964 5.66055 4.37217 7.93104C2.16332 10.2426 0.879104 13.1193 0.498977 16.602C0.0777546 20.5163 1.21814 24.3895 4.04341 28.6223C6.45773 32.2489 10.9165 36.8926 17.7177 42.8617C23.3272 47.7828 26.2243 50.2382 26.4915 50.2998C26.6456 50.3306 26.8921 50.3204 27.036 50.2587C27.4469 50.1046 36.3029 42.4096 39.7035 39.2453C48.4053 31.1599 52.0833 25.8176 52.8538 20.1465C53.2545 17.239 52.7819 14.2391 51.5182 11.5577C49.6895 7.68447 46.443 5.06467 42.426 4.21195C41.039 3.92429 38.6453 3.90374 37.2069 4.16058C35.4707 4.47907 33.6214 5.17768 32.0495 6.11259C30.4366 7.08859 28.5257 8.86594 27.3853 10.4584C27.0462 10.931 26.7483 11.3111 26.7072 11.3111C26.6661 11.3111 26.3682 10.931 26.0291 10.4584C24.108 7.76666 21.3032 5.70164 18.2109 4.67427C16.3924 4.0784 13.9781 3.81128 12.2007 4.01675ZM16.1664 6.23587C18.3547 6.6571 20.3272 7.65365 22.2073 9.29744C23.471 10.407 24.4264 11.5885 25.4435 13.3042C25.9983 14.2494 26.2552 14.4857 26.7072 14.4857C27.1593 14.4857 27.4161 14.2494 27.9709 13.3042C29.3065 11.044 30.8886 9.31799 32.7482 8.09542C36.4775 5.64 41.2034 5.31124 44.8917 7.26324C47.4293 8.59883 49.5251 11.27 50.3881 14.2699C52.0114 19.9205 50.1313 25.2422 44.1622 31.9099C42.8986 33.3174 39.6007 36.605 37.7001 38.3412C35.183 40.6425 26.8408 47.8855 26.7072 47.8855C26.512 47.8855 16.7931 39.348 14.2144 36.9132C4.96804 28.1908 1.69073 22.3451 2.61536 16.1911C3.34479 11.3111 6.3139 7.68447 10.6289 6.41053C12.1391 5.96876 14.3582 5.89684 16.1664 6.23587Z" fill="white"/>
+<path d="M43.3406 9.55427C42.8166 10.0782 42.9604 10.8899 43.6282 11.1672C44.0597 11.3522 44.594 11.2186 44.8405 10.8693C45.2823 10.2323 44.7892 9.25634 44.0186 9.25634C43.7412 9.25634 43.5666 9.33853 43.3406 9.55427Z" fill="white"/>
+<path d="M46.2583 12.4927C45.6213 12.7701 45.5597 13.294 46.0322 14.3933C47.6658 18.2459 46.8233 22.0678 43.2275 27.0094C42.3645 28.2012 42.2207 28.458 42.2207 28.797C42.2207 29.4957 42.9193 29.9682 43.5768 29.6909C44.1111 29.4751 46.0117 26.8039 47.0904 24.7595C48.95 21.215 49.3609 17.8761 48.313 14.6501C47.9226 13.4481 47.5117 12.6776 47.1521 12.4927C46.7925 12.3077 46.6795 12.3077 46.2583 12.4927Z" fill="white"/>
+<path d="M23.1218 17.0028C22.6286 17.2802 22.6081 17.424 22.5978 20.6294V23.6396H19.6184C16.3411 23.6396 16.1665 23.6705 15.9302 24.2355C15.848 24.441 15.8172 25.4684 15.8377 27.8827L15.8685 31.2422L16.1562 31.5196L16.4336 31.8072L19.5157 31.8381L22.5875 31.8689L22.6184 34.9407L22.6492 38.0228L22.9368 38.3002L23.2142 38.5879H26.7073H30.2004L30.4777 38.3002L30.7654 38.0228L30.7962 34.9407L30.827 31.8689L33.8989 31.8381L36.981 31.8072L37.2584 31.5196L37.5461 31.2422L37.5769 27.8827C37.5974 25.4684 37.5666 24.441 37.4844 24.2355C37.2481 23.6705 37.0735 23.6396 33.7962 23.6396H30.8168V20.6603C30.8168 17.4549 30.786 17.2597 30.2928 17.0028C29.8921 16.7973 23.4916 16.7973 23.1218 17.0028ZM28.7826 21.9958L28.8134 25.078L29.1011 25.3553L29.3785 25.643L32.4606 25.6738L35.5427 25.7047V27.7491V29.8039H32.5633C29.3168 29.8039 29.1319 29.8347 28.8853 30.3689C28.8031 30.5538 28.762 31.5196 28.762 33.6051V36.5845H26.7073H24.6525V33.6051C24.6525 31.5196 24.6115 30.5538 24.5293 30.3689C24.2827 29.8347 24.0978 29.8039 20.8513 29.8039H17.8719V27.7491V25.7047L20.954 25.6738L24.0361 25.643L24.3135 25.3553L24.6012 25.078L24.632 21.9958L24.6628 18.9137H26.7073H28.7518L28.7826 21.9958Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_141_8218">
+<rect width="52.6014" height="52.6014" fill="white" transform="translate(0.406738 0.831787)"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/icons/ruble.svg
+++ b/assets/img/icons/ruble.svg
@ -0,0 +1,12 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_135_3060)">
+<path d="M8.727 0.0408211C7.99224 0.111328 7.05337 0.322851 6.37056 0.571486C5.83989 0.768164 4.87876 1.25059 4.42231 1.54746C3.00845 2.47891 1.85806 3.78145 1.11587 5.28809C0.64458 6.25293 0.381104 7.08047 0.221533 8.1084C0.106494 8.85059 0.106494 10.1494 0.221533 10.8916C0.470166 12.4873 1.08989 13.9531 2.05474 15.2445C2.38501 15.6861 3.17544 16.5025 3.62446 16.8662C4.40005 17.4971 5.48735 18.1131 6.39282 18.4322C7.48013 18.8182 8.43384 18.9814 9.61763 18.9814C10.5565 18.9814 11.0983 18.9146 11.9407 18.7031C12.668 18.5176 13.1022 18.3543 13.8295 17.998C14.8463 17.5008 15.6145 16.9367 16.4272 16.098C17.1879 15.315 17.6518 14.6582 18.1342 13.6748C18.5647 12.8027 18.8319 11.9789 18.984 11.0586C19.3032 9.14375 19.0249 7.16211 18.1936 5.43652C18.034 5.10625 17.9042 4.88359 17.8374 4.83164C17.4477 4.52363 16.8911 4.7834 16.8911 5.27324C16.8911 5.40312 16.9393 5.54414 17.0915 5.86699C17.6778 7.10273 17.9079 8.11953 17.9079 9.46289C17.9116 10.2682 17.8745 10.6207 17.7223 11.3109C16.969 14.6916 14.1932 17.2373 10.7309 17.7197C10.1186 17.8051 9.06841 17.7977 8.43755 17.7012C6.06255 17.3523 3.98813 16.0238 2.66333 14.0051C2.16978 13.248 1.71704 12.1719 1.52778 11.2998C1.27173 10.1049 1.27544 8.75039 1.55005 7.60742C2.01021 5.6666 3.09751 4.01152 4.70063 2.82031C5.79165 2.00762 7.04966 1.4918 8.46724 1.27285C9.04985 1.18379 10.2151 1.18379 10.8051 1.27656C12.0631 1.46953 13.195 1.90371 14.2489 2.60137C14.6868 2.89082 14.8204 2.93164 15.0542 2.83887C15.4512 2.69043 15.57 2.22656 15.2916 1.91484C15.1729 1.77754 14.6682 1.43984 14.2006 1.18379C12.5344 0.267187 10.5862 -0.137304 8.727 0.0408211Z" fill="#609EFF"/>
+<path d="M15.9746 3.08002C15.7557 3.2099 15.6406 3.4808 15.7037 3.71459C15.7557 3.90014 15.9672 4.17104 16.1231 4.24526C16.5869 4.4642 17.0916 4.06342 16.9617 3.581C16.9135 3.40658 16.7057 3.1394 16.5572 3.06147C16.4051 2.98354 16.1193 2.99096 15.9746 3.08002Z" fill="#609EFF"/>
+<path d="M8.24471 5.07673C8.17421 5.11755 8.07772 5.21403 8.03319 5.29196L7.94784 5.43669V7.42946V9.42595H7.38007C6.86424 9.42595 6.79745 9.43337 6.64901 9.50759C6.42264 9.62263 6.3076 9.82673 6.32616 10.0679C6.34471 10.2683 6.42635 10.4056 6.6119 10.5281C6.72694 10.6097 6.77147 10.6134 7.33924 10.6134H7.94784V10.966V11.3185H7.38007C6.86424 11.3185 6.79745 11.3259 6.64901 11.4002C6.42264 11.5152 6.3076 11.7193 6.32616 11.9605C6.34471 12.1609 6.42635 12.2982 6.6119 12.4207C6.72694 12.5023 6.77147 12.506 7.33924 12.506H7.94784V13.0293C7.94784 13.6267 7.98495 13.7529 8.20389 13.9013C8.46737 14.0795 8.83104 14.0015 9.03885 13.7195C9.10936 13.6267 9.11678 13.5525 9.12792 13.059L9.13905 12.506H10.5195C11.7478 12.5023 11.9111 12.4949 12.0187 12.4392C12.2117 12.3353 12.3008 12.1869 12.3193 11.9531C12.3342 11.723 12.2562 11.5634 12.0558 11.415C11.9519 11.3408 11.9037 11.3371 10.5418 11.3259L9.13534 11.3148V10.966V10.6134H9.79589C10.3228 10.6134 10.5121 10.5986 10.7607 10.5392C11.5586 10.3463 12.2377 9.81188 12.6014 9.08454C12.8389 8.60212 12.8982 8.34977 12.8982 7.81169C12.8982 7.2736 12.8426 7.02497 12.6014 6.53141C12.4529 6.23454 12.375 6.13063 12.0892 5.84489C11.707 5.46637 11.4658 5.31052 11.0019 5.14352L10.6754 5.02848L9.52499 5.01735C8.45624 5.00622 8.36717 5.01364 8.24471 5.07673ZM10.8127 6.357C12.1301 7.00641 11.9816 8.91755 10.5789 9.35544C10.3971 9.4111 10.2375 9.42595 9.74393 9.42595H9.13534V7.80798V6.19001L9.83299 6.20485L10.5307 6.21598L10.8127 6.357Z" fill="#609EFF"/>
+</g>
+<defs>
+<clipPath id="clip0_135_3060">
+<rect width="19" height="19" fill="white" transform="translate(0.117676)"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/icons/secure.svg
+++ b/assets/img/icons/secure.svg
@ -0,0 +1,5 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8104 7.41559C13.9803 9.74532 9.04262 11.7273 8.84558 11.8201C8.64854 11.9128 8.42831 12.1214 8.34718 12.2837C8.17332 12.6778 8.16173 30.284 8.34718 31.8952C8.93831 37.3544 11.7085 42.5934 15.7652 46.001C16.9707 47.0094 29.6857 55.9575 30.1725 56.1429C30.3695 56.2125 30.5781 56.2125 30.7752 56.1429C31.0534 56.0386 42.5166 48.0758 44.0929 46.8819C48.8799 43.3004 51.9746 37.8064 52.6121 31.7908C52.7743 30.2493 52.7628 12.6546 52.6005 12.2953C52.5309 12.1562 52.3803 11.9707 52.2528 11.8896C52.0325 11.7505 31.0881 3.37044 30.6477 3.24294C30.497 3.19658 26.6721 4.6686 19.8104 7.41559ZM40.6157 9.47874L50.5837 13.4659L50.6185 21.5678C50.6532 29.9827 50.5953 31.6518 50.178 33.6338C49.3087 37.7485 46.921 41.7704 43.7568 44.4247C43.0613 45.0158 31.5981 53.1409 30.6129 53.7552C30.4275 53.8595 18.35 45.4447 16.9707 44.2393C13.7021 41.3879 11.4187 37.3312 10.619 32.9151C10.3756 31.5474 10.364 31.2693 10.364 22.4951V13.4659L20.274 9.49033C25.7216 7.29969 30.2884 5.50313 30.4159 5.50313C30.5434 5.49154 35.1333 7.28809 40.6157 9.47874Z" fill="white"/>
+<path d="M21.5837 11.2637C16.8663 13.1646 12.8791 14.8104 12.74 14.9379L12.4966 15.1581L12.5429 23.6773L12.5777 32.2081L12.8791 33.4251C13.6557 36.5546 15.0581 39.2205 17.0633 41.3763C18.3151 42.7208 18.9294 43.1845 24.8407 47.3224C28.7004 50.023 30.242 51.043 30.4854 51.043C30.7172 51.043 32.2008 50.0693 35.8866 47.4962C41.9254 43.2656 42.5513 42.7904 43.8031 41.4575C45.8778 39.232 47.2803 36.601 48.0685 33.4251L48.3698 32.2081L48.4046 23.7353L48.4509 15.2509L48.1844 14.9611C47.9873 14.7293 45.7039 13.7789 39.3407 11.2289C34.6116 9.35121 30.6244 7.80965 30.4738 7.80965C30.3115 7.82124 26.3127 9.37439 21.5837 11.2637ZM38.4366 13.1646L46.353 16.3288V23.5035C46.353 31.5242 46.3067 32.1849 45.588 34.3292C44.7767 36.7748 43.409 38.9423 41.5661 40.6809C40.5461 41.6429 30.8099 48.551 30.4738 48.551C30.1376 48.551 20.4362 41.6661 19.4046 40.6925C17.2024 38.6409 15.684 35.9866 14.9074 32.8456C14.6756 31.9067 14.664 31.5126 14.6293 24.0946L14.5829 16.3288L22.4414 13.1761C26.7647 11.4491 30.3463 10.0235 30.4158 10.0235C30.4738 10.0119 34.0901 11.4375 38.4366 13.1646Z" fill="white"/>
+<path d="M32.7689 25.6247L28.0399 30.3421L25.8029 28.1167C23.6006 25.9261 23.5543 25.8913 23.0674 25.8913C22.4184 25.8913 22.0127 26.2738 22.0127 26.8997C22.0127 27.3169 22.1402 27.4676 24.7713 30.0871C27.4487 32.7646 27.5415 32.8457 27.9819 32.8457C28.4455 32.8457 28.5267 32.7646 33.6961 27.5951C38.4831 22.7966 38.9351 22.3213 38.9351 21.962C38.9351 21.4405 38.4019 20.9073 37.8804 20.9073C37.5211 20.9073 37.0806 21.3245 32.7689 25.6247Z" fill="white"/>
+</svg>
--- a/assets/scss/_l-first-screen.scss
+++ b/assets/scss/_l-first-screen.scss
@ -0,0 +1,144 @@
+.first-screen {
+  & .container {
+    @include desktop {
+      padding: 0;
+    }
+  }
+
+  &__wrapper {
+    padding: 43px 26px 55px;
+    border-radius: 80px 12px;
+    background-color: $blue;
+
+    @include laptop {
+      border-radius: 40px 7px;
+    }
+
+    & > * {
+      max-width: 996px;
+      margin: 0 auto;
+    }
+
+    & > .tag {
+      @include mobile {
+        margin: 0 32px;
+      }
+    }
+  }
+
+  &__title {
+    margin-bottom: 28px;
+    margin-top: 13px;
+    font-weight: 500;
+    font-size: 80px;
+    line-height: 114%;
+    letter-spacing: 0.01em;
+    text-align: center;
+    color: $white;
+
+    @include desktop {
+      font-size: 72px;
+    }
+
+    @include laptop {
+      font-size: 56px;
+    }
+
+    @include tablet {
+      margin-bottom: 23px;
+      font-size: 39px;
+    }
+
+    & > b {
+      font-weight: 700;
+    }
+  }
+
+  &__advantages {
+    display: flex;
+    margin-bottom: 34px;
+
+    @include tablet {
+      flex-direction: column;
+      gap: 24px;
+      padding: 0 32px;
+      margin-bottom: 24px;
+    }
+
+    &-item {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 0 60px;
+      box-sizing: border-box;
+      border-right: 1px solid rgba($color: $white, $alpha: 0.2);
+
+      @include laptop {
+        gap: 10px;
+        padding: 0 32px;
+      }
+
+      @include tablet {
+        padding: 0;
+        border: none;
+      }
+
+      &:last-child {
+        border: none;
+      }
+
+      &-figure {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        height: 60px;
+
+        @include laptop {
+          height: 50px;
+        }
+
+        &-image {
+          display: block;
+          max-width: 100%;
+          height: auto;
+
+          @include laptop {
+            max-height: 48px;
+          }
+        }
+      }
+
+      &-text {
+        font-weight: 500;
+        font-size: 21px;
+        line-height: 138%;
+        text-align: center;
+        color: #fff;
+
+        @include laptop {
+          font-size: 18px;
+          line-height: 161%;
+        }
+
+        & > b {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 20px 32px;
+
+    & > .button {
+      @include tablet {
+        width: 100%;
+      }
+    }
+  }
+}
--- a/assets/scss/_m-button.scss
+++ b/assets/scss/_m-button.scss
@ -1,9 +1,91 @@
 .button {
+  box-sizing: border-box;
  border-radius: 100px;
-  background-color: $white;
+  background-color: rgba($color: $white, $alpha: 0);
  transition: all ease-in-out 0.1s;
  cursor: pointer;

+  &--lg {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    padding: 24px 58px 26px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 140%;
+    text-align: center;
+
+    @include tablet {
+      justify-content: center;
+      gap: 20px;
+      max-width: 480px;
+      padding: 21px 30px;
+      font-size: 18px;
+    }
+
+    &::before {
+      transition: all ease-in-out 0.1s;
+    }
+
+    &--consult {
+      &::before {
+        content: '';
+        display: inline-block;
+        height: 22px;
+        width: 22px;
+        background: url(../img/icons/consultation.svg) center no-repeat;
+      }
+    }
+
+    &--coin {
+      &::before {
+        content: '';
+        display: inline-block;
+        height: 22px;
+        width: 22px;
+        background: url(../img/icons/ruble.svg) center no-repeat;
+      }
+    }
+  }
+
+  &--light {
+    color: $black;
+    background-color: $white;
+
+    &:hover {
+      color: $blue;
+    }
+
+    &:active {
+      color: $darkblue;
+    }
+
+    
+  }
+
+  &--dark {
+    color: $white;
+    border-color: rgba($color: $white, $alpha: 0.3);
+
+    &:hover {
+      color: $blue;
+      background-color: $white;
+    }
+
+    &:active {
+      color: $darkblue;
+    }
+
+    &::before {
+      filter: brightness(10);
+    }
+
+    &:hover::before, &:active::before {
+      filter: brightness(1);
+    }
+  }
+
  &--order {
    display: inline-block;
    padding: 14px 29px;
--- a/assets/scss/_m-tag.scss
+++ b/assets/scss/_m-tag.scss
@ -0,0 +1,38 @@
+.tag {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  width: fit-content;
+  padding: 19px 46px;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 122%;
+  color: $grey;
+  border: 1px solid rgba($color: $grey, $alpha: 0.2);
+  border-radius: 240px;
+
+  @include tablet {
+    gap: 10px;
+    padding: 13px 26px;
+    font-size: 14px;
+  }
+
+  &::before {
+    content: '';
+    flex: 0 0 auto;
+    width: 7px;
+    height: 7px;
+    border-radius: 7px;
+    background-color: $blue;
+  }
+
+  &--light {
+    color: $white;
+    border-color: rgba($color: $white, $alpha: 0.2);
+
+    &::before {
+      background-color: white;
+    }
+  }
+}
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@ -10,9 +10,11 @@
@import './m-logo';
@import './m-social-link';
@import './m-button';
+@import './m-tag';

 // Layouts

@import './l-header';
@import './l-main';
@import './l-footer';
+@import './l-first-screen';
--- a/index.html
+++ b/index.html
@ -48,6 +48,66 @@
      </div>
    </header>

+    <main>
+      <section class="first-screen">
+        <div class="container">
+          <div class="first-screen__wrapper">
+            <div class="tag tag--light">
+              Реабилитационный центр и социальная адаптация
+            </div>
+
+            <h1 class="first-screen__title">Лечение <b>алкоголизма и наркомании</b> в Томске</h1>
+
+            <div class="first-screen__advantages">
+              <div class="first-screen__advantages-item">
+                <figure class="first-screen__advantages-item-figure">
+                  <img
+                    class="first-screen__advantages-item-figure-image"
+                    src="./assets/img/icons/secure.svg"
+                    alt="secure"
+                  />
+                </figure>
+                <div class="first-screen__advantages-item-text">
+                  Гарантируем <b>безопасность</b>
+                </div>
+              </div>
+
+              <div class="first-screen__advantages-item">
+                <figure class="first-screen__advantages-item-figure">
+                  <img
+                    class="first-screen__advantages-item-figure-image"
+                    src="./assets/img/icons/health.svg"
+                    alt="secure"
+                  />
+                </figure>
+                <div class="first-screen__advantages-item-text">
+                  Научим жить и радоваться жизни <b>без наркотиков</b>
+                </div>
+              </div>
+
+              <div class="first-screen__advantages-item">
+                <figure class="first-screen__advantages-item-figure">
+                  <img
+                    class="first-screen__advantages-item-figure-image"
+                    src="./assets/img/icons/anonymous.svg"
+                    alt="secure"
+                  />
+                </figure>
+                <div class="first-screen__advantages-item-text">Полностью <b>анонимно</b></div>
+              </div>
+            </div>
+
+            <div class="first-screen__buttons">
+              <button class="button button--lg button--lg--consult button--light">
+                Получить консультацию
+              </button>
+              <button class="button button--lg button--lg--coin button--dark">Посмотреть цены</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
    <script src="/assets/js/main.js"></script>
  </body>
 </html>