Develop

src/styles/blocks/about-us.scss

@@ -0,0 +1,73 @@
+.about-us {
+  background-color: #fcfaef;
+
+  &__container {
+    display: grid;
+    column-gap: 20px;
+    grid-template-columns: repeat(var(--columns), 1fr);
+
+    --columns: 2;
+
+    padding-top: 48px;
+    padding-bottom: 48px;
+
+    @include on-tablet {
+      --columns: 6;
+
+      column-gap: 24px;
+      padding-top: 120px;
+      padding-bottom: 120px;
+    }
+
+    @include on-desktop {
+      --columns: 12;
+
+      padding-top: 120px;
+    }
+  }
+
+  &__photo {
+    width: 100%;
+    grid-column: span 2;
+
+    @include on-tablet {
+      grid-column: span 6;
+    }
+
+    @include on-desktop {
+      object-fit: cover;
+      overflow: hidden;
+      height: 460px;
+      position: relative;
+      grid-column: span 12;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    grid-column: 1 / -1;
+    margin-bottom: 24px;
+
+    @include on-tablet {
+      grid-column: 1 / 4;
+      margin-bottom: 0;
+    }
+
+    @include on-desktop {
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__content {
+    margin: 0;
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 4 / -1;
+    }
+
+    @include on-desktop {
+      grid-column: 8 / -1;
+    }
+  }
+}

src/styles/blocks/categories.scss

@@ -0,0 +1,102 @@
+.categories {
+  &__wrapper {
+    display: grid;
+    row-gap: 40px;
+
+
+    @include on-tablet {
+      row-gap: 56px;
+    }
+  }
+}
+
+.category {
+  &__photos {
+    margin-bottom: 16px;
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+
+    --columns: 2;
+
+    column-gap: 20px;
+
+    @include on-tablet {
+      column-gap: 24px;
+
+      --columns: 6;
+    }
+
+    @include on-desktop {
+      column-gap: 24px;
+
+      --columns: 12;
+    }
+
+  }
+
+  &__photo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+
+    @include hover(transform, scale(1.2));
+  }
+
+  &__link {
+    display: block;
+    grid-column: span 1;
+    background-color: #F9F9F9;
+
+    overflow: hidden;
+    position: relative;
+
+
+
+    @include on-tablet {
+      grid-column: span 3;
+      aspect-ratio: 3 / 2;
+    }
+
+    @include on-desktop {
+      grid-column: span 6;
+      aspect-ratio: 3 / 2;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+  }
+
+  &__button {
+    display: flex;
+    background-color: #f98921;
+    color: #fff;
+    text-decoration: none;
+    justify-content: center;
+    align-items: center;
+    font-weight: 700;
+    font-style: bold;
+    border: none;
+    font-size: 16px;
+    margin-top: 40px;
+    border-radius: 8px;
+    height: 56px;
+
+    @include on-desktop {
+      width: 324px;
+      height: 56px;
+    }
+  }
+}
+
+.category__button:hover {
+  background-color: #1b2129;
+  cursor: pointer;
+}
+
+.category__button:active {
+  background-color: #010810;
+}

src/styles/blocks/contact-us.scss

@@ -0,0 +1,207 @@
+.contact-us {
+  box-sizing: border-box;
+
+  &__container {
+    display: grid;
+    column-gap: 20px;
+    grid-template-columns: repeat(var(--columns), 1fr);
+
+    --colomns: 2;
+
+    @include on-tablet {
+      --columns: 6;
+
+      column-gap: 24px;
+      padding-bottom: 80px;
+    }
+
+    @include on-desktop {
+      --columns: 12;
+    }
+  }
+
+  &__title {
+    grid-column: 1 / -1;
+  }
+
+  &__form {
+    grid-column: span 2;
+
+    @include on-tablet {
+      grid-column: span 6;
+    }
+
+    @include on-desktop {
+      grid-column: 1 / span 6;
+    }
+  }
+}
+
+textarea::placeholder {
+  font-size: 14px;
+  font-family: manrope;
+  line-height: 140%;
+}
+
+.input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  margin-top: 48px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  outline: none;
+  border: 1px solid transparent;
+
+  @include on-tablet {
+    margin-top: 56px;
+    width: 100%;
+    max-width: 600px;
+    height: 48px;
+  }
+
+  @include on-desktop {
+    width: 100%;
+    max-width: 498px;
+    height: 48px;
+  }
+
+  &__email {
+    box-sizing: border-box;
+    width: 100%;
+    height: 48px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    margin-top: 14px;
+    outline: none;
+    border: 1px solid transparent;
+
+    @include on-tablet {
+      width: 100%;
+      max-width: 600px;
+      height: 48px;
+    }
+
+    @include on-desktop {
+      width: 100%;
+      max-width: 498px;
+      height: 48px;
+    }
+  }
+
+  &__message {
+    box-sizing: border-box;
+    resize: none;
+    width: 100%;
+    height: 148px;
+    margin-top: 16px;
+    padding-top: 14px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    outline: none;
+    border: 1px solid transparent;
+
+    @include on-tablet {
+      width: 100%;
+      max-width: 600px;
+      height: 148px;
+    }
+
+    @include on-desktop {
+      width: 100%;
+      max-width: 498px;
+      height: 148px;
+    }
+  }
+
+  &__button {
+    box-sizing: border-box;
+    text-decoration: none;
+    align-items: center;
+    border: none;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 27px;
+    font-style: Bold;
+    background-color: #f98921;
+    color: #fff;
+    width: 100%;
+    height: 56px;
+    border-radius: 8px;
+    margin-top: 32px;
+
+    @include on-tablet {
+      width: 100%;
+      max-width: 600px;
+      height: 56px;
+    }
+
+    @include on-desktop {
+      width: 100%;
+      max-width: 498px;
+      height: 56px;
+    }
+  }
+}
+
+.input__hover {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 140%;
+  color: #7e7e83;
+  padding-left: 16px;
+}
+
+.input__hover:hover {
+  border: 1px solid #dbdbdb;
+}
+
+.input__hover:focus {
+  border-color: #f98921;
+}
+
+.input__button:hover {
+  background-color: #1b2129;
+  cursor: pointer;
+}
+
+.input__button:active {
+  background-color: #010810;
+}
+
+.contact-us__info {
+  column-gap: 20px;
+  margin-top: 56px;
+
+  @include on-tablet {
+    grid-column: span 6;
+    column-gap: 24px;
+  }
+
+  @include on-desktop {
+    grid-column: 8 / span 5;
+  }
+
+  &--phone {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    color: #9393a3;
+  }
+  &--email,
+  &--address {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    color: #9393a3;
+    margin-top: 24px;
+  }
+}
+
+.info__phone {
+  text-decoration: none;
+  font-size: 16px;
+  color: #191919;
+  font-weight: 400;
+}

src/styles/blocks/footer.scss

@@ -0,0 +1,4 @@
+.footer {
+  position: fixed;
+  z-index: -1;
+}