add task solution

src/styles/_fonts.scss

@@ -1,6 +1,6 @@
 @font-face {
   font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
+  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
 }

src/styles/blocks/_about-us.scss

@@ -0,0 +1,93 @@
+.about-us {
+  margin-top: 180px;
+  margin-bottom: 160px;
+
+  &__content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 48px;
+    align-items: center;
+  }
+
+  &__image {
+    display: block;
+    width: 100%;
+  }
+
+  &__title {
+    margin: 0 0 32px;
+    font-size: 52px;
+    line-height: 1.1;
+    text-transform: uppercase;
+  }
+
+  &__text {
+    max-width: 360px;
+    margin: 0 0 32px;
+
+    font-size: 16px;
+    line-height: 1.5;
+    color: $c-text-gray;
+  }
+
+  &__link {
+    position: relative;
+
+    font-size: 12px;
+    font-weight: 700;
+    color: $c-accent;
+    text-transform: uppercase;
+
+    @include hover(color, $c-dark);
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      bottom: -8px;
+      left: 0;
+
+      width: 60px;
+      height: 1px;
+
+      background-color: $c-accent;
+    }
+  }
+
+  // Tablet
+  @include on-tablet {
+    margin-top: 120px;
+    margin-bottom: 120px;
+
+    &__content {
+      gap: 32px;
+    }
+
+    &__title {
+      font-size: 40px;
+    }
+  }
+
+  // Mobile
+  @media (max-width: 639px) {
+    margin-top: 80px;
+    margin-bottom: 80px;
+
+    &__content {
+      grid-template-columns: 1fr;
+      gap: 40px;
+    }
+
+    &__title {
+      font-size: 32px;
+    }
+
+    &__text {
+      max-width: 100%;
+    }
+
+    &__image {
+      order: -1;
+    }
+  }
+}

src/styles/blocks/_benefits.scss

@@ -0,0 +1,59 @@
+.benefits {
+  margin-top: 140px;
+  margin-bottom: 120px;
+
+  &__content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 100px;
+  }
+
+  @include on-tablet {
+    &__content {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 60px;
+    }
+  }
+
+  @media (max-width: 639px) {
+    margin-top: 80px;
+    margin-bottom: 80px;
+
+    &__content {
+      grid-template-columns: 1fr;
+      gap: 48px;
+    }
+  }
+}
+
+.benefit {
+  text-align: center;
+
+  &__icon {
+    width: 42px;
+    height: 42px;
+    margin: 0 auto 40px;
+  }
+
+  &__title {
+    margin-bottom: 22px;
+
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.2;
+    text-transform: uppercase;
+  }
+
+  &__text {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.6;
+    color: $c-text-gray;
+  }
+
+  @media (max-width: 639px) {
+    &__title {
+      font-size: 20px;
+    }
+  }
+}

src/styles/blocks/_container.scss

@@ -0,0 +1,13 @@
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding-inline: 30px;
+
+  @include on-tablet {
+    padding-inline: 34px;
+  }
+
+  @include on-desktop {
+    padding-inline: 0;
+  }
+}

src/styles/blocks/_features.scss

@@ -0,0 +1,8 @@
+.features {
+  margin: 160px 0;
+
+  &__image {
+    display: block;
+    width: 100%;
+  }
+}

src/styles/blocks/_footer.scss

@@ -0,0 +1,42 @@
+.footer {
+  position: relative;
+  padding: 120px 0 40px;
+  text-align: center;
+
+  &__logo {
+    display: inline-block;
+    margin-bottom: 60px;
+  }
+
+  &__logo-image {
+    width: 180px;
+  }
+
+  &__social {
+    display: flex;
+    gap: 40px;
+    justify-content: center;
+    margin-bottom: 60px;
+  }
+
+  &__social-link {
+    display: block;
+    transition: transform 0.3s;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
+
+  &__copyright {
+    margin: 0;
+    font-size: 14px;
+    color: #bdbdbd;
+  }
+
+  &__top {
+    position: absolute;
+    top: 120px;
+    right: 0;
+  }
+}

src/styles/blocks/_header.scss

@@ -0,0 +1,82 @@
+.header {
+  padding-top: 40px;
+
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__logo {
+    margin-right: auto;
+  }
+
+  &__logo-image {
+    width: 180px;
+  }
+
+  &__nav {
+    margin-right: 48px;
+  }
+
+  &__link,
+  &__language {
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+
+    @include hover(color, $c-accent);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 32px;
+    align-items: center;
+  }
+
+  &__buy {
+    display: inline-block;
+
+    padding: 16px 40px;
+
+    font-size: 12px;
+    font-weight: 700;
+    color: $c-white;
+    text-transform: uppercase;
+
+    background: $c-dark;
+
+    @include hover(background-color, $c-accent);
+  }
+
+  @include on-tablet {
+    &__logo-image {
+      width: 160px;
+    }
+
+    &__actions {
+      gap: 24px;
+    }
+  }
+
+  @media (max-width: 639px) {
+    &__nav {
+      display: none;
+    }
+
+    &__language {
+      display: none;
+    }
+
+    &__content {
+      justify-content: space-between;
+    }
+
+    &__buy {
+      padding: 12px 28px;
+    }
+
+    &__logo-image {
+      width: 140px;
+    }
+  }
+}