diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 000000000..8b5743ecb
--- /dev/null
+++ b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 2e345321d..096476bb3 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,7 +1,15 @@
 module.exports = {
-  extends: "@mate-academy/stylelint-config",
-  plugins: [
-    "stylelint-scss"
-  ],
-  rules: {}
+  extends: '@mate-academy/stylelint-config',
+  plugins: ['stylelint-scss'],
+  rules: {
+    'import-notation': null,
+    'order/properties-order': null,
+    'order/order': null,
+    'block-no-empty': null,
+    'rule-empty-line-before': null,
+    'scss/load-partial-extension': null,
+    'font-family-name-quotes': null,
+    'no-empty-source': null,
+    'declaration-empty-line-before': null,
+  },
 };
diff --git a/index.html b/index.html
index d339e6856..2c1d11665 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,445 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Title</title>
+    <title>Creative bakery</title>
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
     />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="/src/images/icons/favicon.ico"
+    />
   </head>
   <body>
-    <h1>Hello Mate Academy</h1>
-    <script src="src/scripts/main.js"></script>
+    <header class="header-container">
+      <div class="header">
+        <button class="logo-btn">
+          <a
+            href="#"
+            class="logo-icon"
+          />
+        </button>
+
+        <button
+          class="header__burger-btn"
+          aria-expanded="false"
+          aria-controls="mobile-menu"
+        >
+          <span class="header__burger-menu" />
+        </button>
+
+        <nav
+          id="mobile-menu"
+          class="header__mobile-menu mobile-menu"
+          aria-hidden="true"
+        >
+          <ul class="mobile-menu__list">
+            <li class="menu-item">
+              <a
+                class="menu-link"
+                href="#products"
+              >
+                Products
+              </a>
+            </li>
+            <li class="menu-item">
+              <a
+                class="menu-link"
+                href="#about-us"
+              >
+                About Us
+              </a>
+            </li>
+            <li class="menu-item">
+              <a
+                class="menu-link"
+                href="#"
+              >
+                Blog
+              </a>
+            </li>
+            <li class="menu-item">
+              <a
+                class="link"
+                href="#contact-us"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-contact-us" />
+                </button>
+                <span class="link__text">Contact Us</span>
+              </a>
+            </li>
+
+            <li class="menu-item">
+              <button class="link__btn">
+                <span class="link__btn-icon link__btn-icon-theme-switcher" />
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main class="main-content">
+      <section class="hero-section-container">
+        <div class="hero-section">
+          <span class="hero-section__text">
+            We bake your fantasies — croissants, cakes, cookies, and cupcakes.
+          </span>
+          <h1 class="hero-section__title">Creative Bakery</h1>
+          <img
+            src="/src/images/Cookie.png"
+            alt="Cookie"
+            class="hero-section__image"
+          />
+
+          <button class="button">
+            <a
+              href="#products"
+              class="button__wrapper"
+            >
+              <span class="button__icon"></span>
+              <span class="button__text">Learn more</span>
+            </a>
+          </button>
+        </div>
+      </section>
+
+      <section
+        class="we-bake-container"
+        id="products"
+      >
+        <div class="we-bake">
+          <div class="we-bake__wrapper">
+            <h2 class="we-bake__title">What we bake</h2>
+            <span class="we-bake__text">
+              We can customize our cookies right for your needs. Just imagine it
+            </span>
+          </div>
+
+          <div class="product-card-wrapper">
+            <div class="product-card">
+              <img
+                src="/src/images/product-img-01.png"
+                alt="Cakes image"
+                class="product-card__image"
+              />
+              <span class="product-card__name">Cakes</span>
+              <span class="product-card__text">
+                Oatmeal cookies with golden raisins, orange zest and chocolate
+                chips
+              </span>
+              <a
+                class="link"
+                href="#"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-order" />
+                </button>
+                <span class="link__text">Order</span>
+              </a>
+            </div>
+
+            <div class="product-card">
+              <img
+                src="/src/images/product-img-02.png"
+                alt="Cakes image"
+                class="product-card__image"
+              />
+              <span class="product-card__name">Cakes</span>
+              <span class="product-card__text">
+                Chocolate biscuit coffee cake topped with a buttercream and
+                powder
+              </span>
+              <a
+                class="link"
+                href="#"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-order" />
+                </button>
+                <span class="link__text">Order</span>
+              </a>
+            </div>
+          </div>
+
+          <div class="product-card-wrapper">
+            <div class="product-card">
+              <img
+                src="/src/images/product-img-03.png"
+                alt="Cakes image"
+                class="product-card__image"
+              />
+              <span class="product-card__name">Donuts</span>
+              <span class="product-card__text">
+                Light multi-layered croissant strewn with cinammon and almond
+                “petals”
+              </span>
+              <a
+                class="link"
+                href="#"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-order" />
+                </button>
+                <span class="link__text">Order</span>
+              </a>
+            </div>
+
+            <div class="product-card">
+              <img
+                src="/src/images/product-img-04.png"
+                alt="Cakes image"
+                class="product-card__image"
+              />
+              <span class="product-card__name">Donuts</span>
+              <span class="product-card__text">
+                Light multi-layered croissant strewn with coconut and nuts
+              </span>
+              <a
+                class="link"
+                href="#"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-order" />
+                </button>
+                <span class="link__text">Order</span>
+              </a>
+            </div>
+          </div>
+
+          <div class="product-card-wrapper">
+            <div class="product-card">
+              <img
+                src="/src/images/product-img-05.png"
+                alt="Cakes image"
+                class="product-card__image"
+              />
+              <span class="product-card__name">Cakes</span>
+              <span class="product-card__text">
+                Chocolate salted caramel, Vanilla frutti pebbles
+              </span>
+              <a
+                class="link"
+                href="#"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-order" />
+                </button>
+                <span class="link__text">Order</span>
+              </a>
+            </div>
+
+            <div class="product-card">
+              <img
+                src="/src/images/product-img-06.png"
+                alt="Cakes image"
+                class="product-card__image"
+              />
+              <span class="product-card__name">Cookies</span>
+              <span class="product-card__text">
+                Oatmeal cookies with golden raisins, orange zest and chocolate
+                chips
+              </span>
+              <a
+                class="link"
+                href="#"
+              >
+                <button class="link__btn">
+                  <span class="link__btn-icon link__btn-icon-order" />
+                </button>
+                <span class="link__text">Order</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="about-us-container"
+        id="about-us"
+      >
+        <div class="about-us">
+          <div class="about-us__title-wrapper">
+            <h2 class="about-us__title">Few words about us</h2>
+            <span class="about-us__text">
+              Like many design teams, Onfido made the transition from Abstract +
+              Sketch, to Figma in the last couple of years. One of the common
+              resistance points internally before making that switch, was
+              Figma’s lack of Git-style branching that Abstract enabled. The
+              design team had come to rely on branching and had built a lot of
+              our processes around it.
+            </span>
+          </div>
+
+          <div class="results">
+            <ul class="results__list">
+              <li class="results__item item">
+                <span class="item__num big-text">2015</span>
+                <span class="item__name">Foundation year</span>
+              </li>
+
+              <li class="results__item item">
+                <span class="item__num big-text">23</span>
+                <span class="item__name">Stores</span>
+              </li>
+
+              <li class="results__item item">
+                <span class="item__num big-text">155</span>
+                <span class="item__name">Companies</span>
+              </li>
+
+              <li class="results__item item">
+                <span class="item__num big-text">10K+</span>
+                <span class="item__name">Clients</span>
+              </li>
+              <img
+                src="/src/images/Crumbs.png"
+                alt="Crumbs"
+                class="results__crumbs-image"
+              />
+            </ul>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer__wrapper">
+        <div class="footer__container">
+          <button class="logo-btn">
+            <span class="logo-icon logo-icon-footer" />
+          </button>
+
+          <ul class="footer-list">
+            <li class="footer-list__title">Menu</li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="#products"
+              >
+                Products
+              </a>
+            </li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="#about-us"
+              >
+                About Us
+              </a>
+            </li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="#"
+              >
+                Blog
+              </a>
+            </li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="#"
+              >
+                Terms & Privacy
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="footer__container">
+          <h2 class="footer__subtitle">Contact Us</h2>
+
+          <ul
+            class="footer-list"
+            id="contact-us"
+          >
+            <li class="footer-list__title">Call Us</li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="tel:6295550129"
+              >
+                (629) 555-0129
+              </a>
+            </li>
+
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="tel:6035550123"
+              >
+                (603) 555-0123
+              </a>
+            </li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="tel:7045550127"
+              >
+                (704) 555-0129
+              </a>
+            </li>
+          </ul>
+
+          <ul class="footer-list">
+            <li class="footer-list__title">Email Us</li>
+            <li class="footer-list__item">
+              <a
+                class="footer-list__link"
+                href="mailto:bakerlab@example.com"
+              >
+                bakerlab@example.com
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <ul class="footer__social-media-list">
+          <li class="footer-list__item">
+            <a
+              class="footer-list__link"
+              href="https://www.facebook.com/"
+              target="_blank"
+            >
+              <span
+                class="footer-list__link-social-media social-media-facebook"
+              />
+            </a>
+          </li>
+          <li class="footer-list__item">
+            <a
+              class="footer-list__link"
+              href="https://www.instagram.com"
+              target="_blank"
+            >
+              <span
+                class="footer-list__link-social-media social-media-instagram"
+              />
+            </a>
+          </li>
+          <li class="footer-list__item">
+            <a
+              class="footer-list__link"
+              href="https://x.com/"
+              target="_blank"
+            >
+              <span
+                class="footer-list__link-social-media social-media-twitter"
+              />
+            </a>
+          </li>
+        </ul>
+
+        <span class="footer__copyright">© Bakerlab 2022</span>
+      </div>
+    </footer>
+    <script
+      type="module"
+      src="src/scripts/main.js"
+    ></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index d5f989323..024f685e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@linthtml/linthtml": "^0.9.6",
         "@mate-academy/bemlint": "latest",
         "@mate-academy/linthtml-config": "latest",
-        "@mate-academy/scripts": "^2.1.2",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/stylelint-config": "latest",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -52,6 +52,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -522,6 +523,7 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -563,6 +565,7 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1510,10 +1513,11 @@
       "dev": true
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz",
-      "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
@@ -1590,7 +1594,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz",
       "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">= 20"
       }
@@ -1619,7 +1622,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz",
       "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/types": "^16.0.0",
         "universal-user-agent": "^7.0.2"
@@ -1633,7 +1635,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz",
       "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/request": "^10.0.6",
         "@octokit/types": "^16.0.0",
@@ -1647,8 +1648,7 @@
       "version": "27.0.0",
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz",
       "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@octokit/plugin-paginate-rest": {
       "version": "2.21.3",
@@ -1710,7 +1710,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz",
       "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/endpoint": "^11.0.2",
         "@octokit/request-error": "^7.0.2",
@@ -1727,7 +1726,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz",
       "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/types": "^16.0.0"
       },
@@ -1915,7 +1913,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz",
       "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^27.0.0"
       }
@@ -2697,6 +2694,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
       "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -3070,8 +3068,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz",
       "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/bl": {
       "version": "4.1.0",
@@ -3125,6 +3122,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4180,8 +4178,7 @@
           "type": "opencollective",
           "url": "https://opencollective.com/fastify"
         }
-      ],
-      "peer": true
+      ]
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -5925,6 +5922,7 @@
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz",
       "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@keyv/serialize": "^1.1.1"
       }
@@ -6721,6 +6719,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -6799,6 +6798,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
       "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7312,6 +7312,7 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz",
       "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -7645,6 +7646,7 @@
           "url": "https://github.com/sponsors/stylelint"
         }
       ],
+      "peer": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-syntax-patches-for-csstree": "^1.0.19",
@@ -8081,6 +8083,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8206,8 +8209,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz",
       "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/universalify": {
       "version": "2.0.1",
@@ -8384,6 +8386,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8721,20 +8724,6 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index 2500d08d2..946d86d78 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.2",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
deleted file mode 100755
index 8aa07d731..000000000
Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ
diff --git a/src/images/Cookie.png b/src/images/Cookie.png
new file mode 100644
index 000000000..ad8860805
Binary files /dev/null and b/src/images/Cookie.png differ
diff --git a/src/images/Crumbs.png b/src/images/Crumbs.png
new file mode 100644
index 000000000..e470d89c9
Binary files /dev/null and b/src/images/Crumbs.png differ
diff --git a/src/images/icons/Icon-arrow.svg b/src/images/icons/Icon-arrow.svg
new file mode 100644
index 000000000..a1bd54079
--- /dev/null
+++ b/src/images/icons/Icon-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.172 11L10.808 5.63605L12.222 4.22205L20 12L12.222 19.778L10.808 18.364L16.172 13H4V11H16.172Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-close.svg b/src/images/icons/Icon-close.svg
new file mode 100644
index 000000000..1225a6256
--- /dev/null
+++ b/src/images/icons/Icon-close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0002 10.586L16.9502 5.63599L18.3642 7.04999L13.4142 12L18.3642 16.95L16.9502 18.364L12.0002 13.414L7.05023 18.364L5.63623 16.95L10.5862 12L5.63623 7.04999L7.05023 5.63599L12.0002 10.586Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-cookie.svg b/src/images/icons/Icon-cookie.svg
new file mode 100644
index 000000000..992115b32
--- /dev/null
+++ b/src/images/icons/Icon-cookie.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9422 11.9926C19.209 11.9594 17.002 9.73912 17.002 6.99816C14.261 6.99816 12.041 4.79156 12.0074 2.0588C10.9426 1.89708 9.85394 2.07052 8.8934 2.55957L6.19302 3.93533C5.22092 4.43072 4.43068 5.22123 3.93561 6.19349L2.56452 8.88406C2.06798 9.85879 1.89269 10.9657 2.06374 12.0461L2.53562 15.0253C2.7065 16.1047 3.21462 17.1023 3.98717 17.8753L6.12662 20.0143C6.89673 20.7847 7.89098 21.2914 8.96684 21.4619L11.9633 21.9365C13.0379 22.1069 14.1391 21.9322 15.109 21.4381L17.8094 20.0627C18.7814 19.5672 19.5716 18.7768 20.0668 17.8046L21.4379 15.114C21.9285 14.1515 22.1023 13.0602 21.9422 11.9926ZM8.87504 16.3745C8.18481 16.3745 7.62505 15.8148 7.62505 15.1246C7.62505 14.4343 8.18481 13.8746 8.87504 13.8746C9.56527 13.8746 10.125 14.4343 10.125 15.1246C10.125 15.8148 9.56527 16.3745 8.87504 16.3745ZM10.125 10.1247C9.4348 10.1247 8.87504 9.56491 8.87504 8.87468C8.87504 8.18446 9.4348 7.62471 10.125 7.62471C10.8153 7.62471 11.375 8.18446 11.375 8.87468C11.375 9.56491 10.8153 10.1247 10.125 10.1247ZM16.375 15.1246C15.6848 15.1246 15.125 14.5648 15.125 13.8746C15.125 13.1844 15.6848 12.6246 16.375 12.6246C17.0652 12.6246 17.625 13.1844 17.625 13.8746C17.625 14.5648 17.0652 15.1246 16.375 15.1246Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-facebook.svg b/src/images/icons/Icon-facebook.svg
new file mode 100644
index 000000000..93b3835e8
--- /dev/null
+++ b/src/images/icons/Icon-facebook.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47 14 5.5 16 5.5H17.5V2.14C17.174 2.097 15.943 2 14.643 2C11.928 2 10 3.657 10 6.7V9.5H7V13.5H10V22H14V13.5Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-instagram.svg b/src/images/icons/Icon-instagram.svg
new file mode 100644
index 000000000..a94faeecf
--- /dev/null
+++ b/src/images/icons/Icon-instagram.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C14.717 2 15.056 2.01 16.122 2.06C17.187 2.11 17.912 2.277 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.678C20.8305 4.1779 21.224 4.78259 21.475 5.45C21.722 6.087 21.89 6.813 21.94 7.878C21.987 8.944 22 9.283 22 12C22 14.717 21.99 15.056 21.94 16.122C21.89 17.187 21.722 17.912 21.475 18.55C21.2247 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.122 21.94C15.056 21.987 14.717 22 12 22C9.283 22 8.944 21.99 7.878 21.94C6.813 21.89 6.088 21.722 5.45 21.475C4.78233 21.2245 4.17753 20.8309 3.678 20.322C3.16941 19.8222 2.77593 19.2175 2.525 18.55C2.277 17.913 2.11 17.187 2.06 16.122C2.013 15.056 2 14.717 2 12C2 9.283 2.01 8.944 2.06 7.878C2.11 6.812 2.277 6.088 2.525 5.45C2.77524 4.78218 3.1688 4.17732 3.678 3.678C4.17767 3.16923 4.78243 2.77573 5.45 2.525C6.088 2.277 6.812 2.11 7.878 2.06C8.944 2.013 9.283 2 12 2ZM12 7C10.6739 7 9.40215 7.52678 8.46447 8.46447C7.52678 9.40215 7 10.6739 7 12C7 13.3261 7.52678 14.5979 8.46447 15.5355C9.40215 16.4732 10.6739 17 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM18.5 6.75C18.5 6.41848 18.3683 6.10054 18.1339 5.86612C17.8995 5.6317 17.5815 5.5 17.25 5.5C16.9185 5.5 16.6005 5.6317 16.3661 5.86612C16.1317 6.10054 16 6.41848 16 6.75C16 7.08152 16.1317 7.39946 16.3661 7.63388C16.6005 7.8683 16.9185 8 17.25 8C17.5815 8 17.8995 7.8683 18.1339 7.63388C18.3683 7.39946 18.5 7.08152 18.5 6.75ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-menu.svg b/src/images/icons/Icon-menu.svg
new file mode 100644
index 000000000..b74cb0beb
--- /dev/null
+++ b/src/images/icons/Icon-menu.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 8H22V10H2V8ZM2 14H22V16H2V14Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-phone.svg b/src/images/icons/Icon-phone.svg
new file mode 100644
index 000000000..39b157356
--- /dev/null
+++ b/src/images/icons/Icon-phone.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 16.42V19.956C21.0001 20.2092 20.9042 20.453 20.7316 20.6382C20.559 20.8234 20.3226 20.9363 20.07 20.954C19.633 20.984 19.276 21 19 21C10.163 21 3 13.837 3 5C3 4.724 3.015 4.367 3.046 3.93C3.06372 3.67744 3.17658 3.44101 3.3618 3.26841C3.54703 3.09581 3.79082 2.99989 4.044 3H7.58C7.70404 2.99987 7.8237 3.04586 7.91573 3.12902C8.00776 3.21218 8.0656 3.32658 8.078 3.45C8.101 3.68 8.122 3.863 8.142 4.002C8.34073 5.38892 8.748 6.73783 9.35 8.003C9.445 8.203 9.383 8.442 9.203 8.57L7.045 10.112C8.36445 13.1865 10.8145 15.6365 13.889 16.956L15.429 14.802C15.4919 14.714 15.5838 14.6509 15.6885 14.6237C15.7932 14.5964 15.9042 14.6068 16.002 14.653C17.267 15.2539 18.6156 15.6601 20.002 15.858C20.141 15.878 20.324 15.9 20.552 15.922C20.6752 15.9346 20.7894 15.9926 20.8724 16.0846C20.9553 16.1766 21.0012 16.2961 21.001 16.42H21Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Icon-twitter.svg b/src/images/icons/Icon-twitter.svg
new file mode 100644
index 000000000..097a19058
--- /dev/null
+++ b/src/images/icons/Icon-twitter.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.1618 5.65605C21.3984 5.99374 20.5888 6.21552 19.7598 6.31405C20.6336 5.79148 21.2875 4.96906 21.5998 4.00005C20.7798 4.48805 19.8808 4.83005 18.9438 5.01505C18.3144 4.34163 17.4802 3.89501 16.5708 3.74463C15.6614 3.59425 14.7277 3.74854 13.9151 4.1835C13.1024 4.61846 12.4562 5.30973 12.0769 6.14984C11.6976 6.98995 11.6066 7.93183 11.8178 8.82905C10.1549 8.7457 8.52814 8.31357 7.0431 7.56071C5.55805 6.80785 4.24794 5.7511 3.19781 4.45905C2.8261 5.0975 2.63076 5.82328 2.63181 6.56205C2.63181 8.01205 3.36981 9.29305 4.49181 10.043C3.82782 10.0221 3.17844 9.84283 2.59781 9.52005V9.57205C2.59801 10.5377 2.93218 11.4737 3.54366 12.2211C4.15513 12.9686 5.00629 13.4815 5.95281 13.673C5.33642 13.8401 4.69012 13.8647 4.06281 13.745C4.32968 14.5763 4.84982 15.3032 5.5504 15.8242C6.25099 16.3451 7.09694 16.6338 7.96981 16.65C7.10229 17.3314 6.10899 17.835 5.04669 18.1322C3.98439 18.4294 2.87394 18.5143 1.77881 18.382C3.69051 19.6115 5.9159 20.2642 8.18881 20.262C15.8818 20.262 20.0888 13.889 20.0888 8.36205C20.0888 8.18205 20.0838 8.00005 20.0758 7.82205C20.8947 7.23022 21.6014 6.49707 22.1628 5.65705L22.1618 5.65605Z" fill="#F9512E"/>
+</svg>
diff --git a/src/images/icons/Logo.svg b/src/images/icons/Logo.svg
new file mode 100644
index 000000000..4eb4c54f3
--- /dev/null
+++ b/src/images/icons/Logo.svg
@@ -0,0 +1,10 @@
+<svg width="168" height="40" viewBox="0 0 168 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 20.4C19.12 20.4 25.48 19.44 25.48 13.48C25.48 6.44 20.28 6.68 14.72 6.68H5V7C6.76 7 7.32 9.72 7.32 12.2V29.36C7.32 32.08 6.72 34.48 5 34.48V34.84H14.72C21.64 34.84 27.36 34.68 27.36 27.68C27.36 20.84 20.92 20.4 18.32 20.4ZM14.72 7.36C16.6 7.36 19.92 7.44 19.92 13.4C19.92 19.32 16.88 20.24 14.72 20.24H13.16V7.36H14.72ZM14.72 34.16H13.16V20.92H14.72C17.4 20.92 21.48 21.12 21.48 27.48C21.48 34.24 18.2 34.16 14.72 34.16Z" fill="#1C1A26"/>
+<path d="M41.1841 30.72C40.8241 31.68 39.9041 32.76 38.5441 32.76C35.9441 32.76 35.9441 30.12 35.9441 30.12C35.9441 28.08 37.2641 26.2 41.1841 25.32C41.1841 25.32 41.1841 30.64 41.1841 30.72ZM48.1441 32.76C46.1841 32.76 46.2241 29.96 46.2241 29.96V24C46.2241 19.28 44.7841 16 39.5441 16C39.5441 16 37.4641 15.84 35.6641 16.8C33.4641 17.96 32.9441 19.04 32.5441 19.72C32.1441 20.4 32.1841 21.36 32.6641 22.12C33.3841 23.16 34.7841 23.4 35.8241 22.72C36.8641 22 37.1441 20.6 36.4241 19.56C36.0641 19.04 35.5441 18.76 34.9441 18.68C34.6641 18.64 34.8241 17.96 36.1041 17.32C38.8641 15.88 41.1841 17.96 41.1841 22.12V24.6C34.1841 26.36 30.8241 26.76 30.8241 31.12C30.8241 35.2 35.4241 35.2 35.4241 35.2C38.2641 35.2 40.6241 33.72 41.2241 31.96C41.6641 35.2 45.2241 35.2 45.2241 35.2C47.7441 35.2 49.5841 33.64 49.9041 32.36L49.2241 32.08C48.9841 32.76 48.1441 32.76 48.1441 32.76Z" fill="#1C1A26"/>
+<path d="M57.6778 30V5L50.6778 6.48V7.16C52.2778 7.76 52.6778 8.36 52.6778 9.76V30C52.6778 32.04 52.5978 33.72 51.0778 34.16V34.84H59.3178V34.16C57.8778 33.8 57.6778 32.2 57.6778 30ZM68.3578 32.16C68.3578 32.16 68.2778 32.16 62.3578 23.8C67.6778 17.24 71.7578 17.12 72.4778 17.04V16.36H62.7578V17.04C67.9578 16.88 62.2378 22.68 62.2378 22.68L58.4778 26.76C58.4778 26.76 59.5178 28.36 60.7178 30.12C63.3978 34.12 63.7578 34.84 66.5178 34.84H72.1578V34.16C71.4778 34.12 69.6778 34 68.3578 32.16Z" fill="#1C1A26"/>
+<path d="M77.62 24.56C77.62 20.72 79.26 16.68 81.62 16.68C83.82 16.68 85.46 19.52 85.46 24.56H77.62ZM81.82 16C76.3 16 72.46 20.04 72.46 25.68C72.46 30.36 76.06 35.2 81.3 35.2C86.66 35.2 89.02 32.04 89.66 29.96L88.98 29.6C87.98 31.48 84.78 32.28 82.62 31.8C79.94 31.2 77.94 29.16 77.62 25.24H90.34C90.34 19 87.62 16 81.82 16Z" fill="#1C1A26"/>
+<path d="M104.317 16.2C103.357 16.6 101.717 17.2 99.5966 20.52V16L92.5566 17.6V18.28C94.1966 19.12 94.5566 19.72 94.5566 21.08V29.96C94.5566 32.04 94.5166 33.68 92.9566 34.16V34.84H101.237V34.16C99.7966 33.76 99.5966 32.2 99.5966 29.96V21.64C101.077 19.24 102.717 18.84 102.717 19.28C102.717 20 103.037 20.68 103.637 21.24C104.917 22.32 106.757 22.16 107.837 20.92C108.917 19.72 108.797 17.8 107.557 16.72C106.677 16 105.157 15.84 104.317 16.2Z" fill="#1C1A26"/>
+<path d="M116.909 30V5L109.909 6.48V7.16C111.509 7.76 111.909 8.36 111.909 9.76V30C111.909 32.04 111.829 33.72 110.309 34.16V34.84H118.509V34.16C117.109 33.8 116.909 32.2 116.909 30Z" fill="#1C1A26"/>
+<path d="M131.575 30.72C131.215 31.68 130.295 32.76 128.935 32.76C126.335 32.76 126.335 30.12 126.335 30.12C126.335 28.08 127.655 26.2 131.575 25.32C131.575 25.32 131.575 30.64 131.575 30.72ZM138.535 32.76C136.575 32.76 136.615 29.96 136.615 29.96V24C136.615 19.28 135.175 16 129.935 16C129.935 16 127.855 15.84 126.055 16.8C123.855 17.96 123.335 19.04 122.935 19.72C122.535 20.4 122.575 21.36 123.055 22.12C123.775 23.16 125.175 23.4 126.215 22.72C127.255 22 127.535 20.6 126.815 19.56C126.455 19.04 125.935 18.76 125.335 18.68C125.055 18.64 125.215 17.96 126.495 17.32C129.255 15.88 131.575 17.96 131.575 22.12V24.6C124.575 26.36 121.215 26.76 121.215 31.12C121.215 35.2 125.815 35.2 125.815 35.2C128.655 35.2 131.015 33.72 131.615 31.96C132.055 35.2 135.615 35.2 135.615 35.2C138.135 35.2 139.975 33.64 140.295 32.36L139.615 32.08C139.375 32.76 138.535 32.76 138.535 32.76Z" fill="#1C1A26"/>
+<path d="M152.988 34.52C150.708 34.52 148.228 32.88 148.228 27.84V22.76C148.228 19.92 149.668 17.68 152.388 17.68C155.668 17.68 157.148 19.76 157.148 26.16C157.148 32.28 155.908 34.52 152.988 34.52ZM154.388 16C152.468 16 149.508 17 148.228 19.4V5L141.228 6.48V7.16C142.868 7.76 143.268 8.36 143.268 9.72V34.64C143.268 35.28 145.748 34.4 147.188 33.16C148.508 34.48 150.628 35.2 153.028 35.2C158.628 35.2 162.868 32.28 162.868 25.84C162.868 19.52 158.868 16 154.388 16Z" fill="#1C1A26"/>
+</svg>
diff --git a/src/images/icons/favicon.ico b/src/images/icons/favicon.ico
new file mode 100644
index 000000000..3deaf4b6f
Binary files /dev/null and b/src/images/icons/favicon.ico differ
diff --git a/src/images/icons/theme.svg b/src/images/icons/theme.svg
new file mode 100644
index 000000000..fe3f03d85
--- /dev/null
+++ b/src/images/icons/theme.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 1V0H8C9.65685 0 11 1.34315 11 3C13.2091 3 15 4.79086 15 7H1C1 4.79086 2.79086 3 5 3C6.10457 3 7 2.10457 7 1Z" fill="#000000"/>
+<path d="M3 15L2 9H14L13 15H3Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/src/images/product-img-01.png b/src/images/product-img-01.png
new file mode 100644
index 000000000..a7b58d917
Binary files /dev/null and b/src/images/product-img-01.png differ
diff --git a/src/images/product-img-02.png b/src/images/product-img-02.png
new file mode 100644
index 000000000..bed884283
Binary files /dev/null and b/src/images/product-img-02.png differ
diff --git a/src/images/product-img-03.png b/src/images/product-img-03.png
new file mode 100644
index 000000000..f70cf1e61
Binary files /dev/null and b/src/images/product-img-03.png differ
diff --git a/src/images/product-img-04.png b/src/images/product-img-04.png
new file mode 100644
index 000000000..d3ae6ac80
Binary files /dev/null and b/src/images/product-img-04.png differ
diff --git a/src/images/product-img-05.png b/src/images/product-img-05.png
new file mode 100644
index 000000000..c9beff31e
Binary files /dev/null and b/src/images/product-img-05.png differ
diff --git a/src/images/product-img-06.png b/src/images/product-img-06.png
new file mode 100644
index 000000000..d13723fdd
Binary files /dev/null and b/src/images/product-img-06.png differ
diff --git a/src/scripts/main.js b/src/scripts/main.js
index ad9a93a7c..1a83d1734 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1 +1,19 @@
 'use strict';
+
+const burgerBtn = document.querySelector('.header__burger-btn');
+const mobileMenu = document.querySelector('.mobile-menu');
+const burgerIcon = document.querySelector('.header__burger-menu');
+const themeSwitcher = document.querySelector('.link__btn-icon-theme-switcher');
+
+burgerBtn.addEventListener('click', () => {
+  const isOpen = mobileMenu.classList.toggle('mobile-menu--open');
+
+  burgerIcon.classList.toggle('header__burger-menu--open');
+  burgerBtn.setAttribute('aria-expanded', isOpen);
+  mobileMenu.setAttribute('aria-hidden', !isOpen);
+  document.body.style.overflow = isOpen ? 'hidden' : '';
+});
+
+themeSwitcher.addEventListener('click', () => {
+  document.body.classList.toggle('light-theme');
+});
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index 45cdd5400..8c0a98247 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,6 +1 @@
-@font-face {
-  font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
+@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
deleted file mode 100644
index 1837eb46e..000000000
--- a/src/styles/_typography.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-  @extend %h1;
-}
diff --git a/src/styles/blocks/about-us/about-us.scss b/src/styles/blocks/about-us/about-us.scss
new file mode 100644
index 000000000..40739e3c1
--- /dev/null
+++ b/src/styles/blocks/about-us/about-us.scss
@@ -0,0 +1,135 @@
+.about-us-container {
+  position: relative;
+
+  padding: 72px 16px;
+  margin: 0 auto;
+
+  @include tablet {
+    padding: 152px 44px;
+  }
+
+  @include desktop {
+    padding: 0 44px 349px;
+    max-width: 1200px;
+  }
+
+  @include desktop-wide {
+    padding: 0 124px 349px;
+    max-width: 1440px;
+  }
+}
+
+.about-us {
+  &__title-wrapper {
+    display: grid;
+    gap: 32px;
+
+    margin-bottom: 64px;
+  }
+  &__title {
+    @extend %h2-mobile;
+
+    text-align: left;
+  }
+
+  &__text {
+    @extend %body-text;
+  }
+
+  @include tablet {
+    &__title-wrapper {
+      grid-template-columns: repeat(2, 1fr);
+      align-items: start;
+      gap: 24px;
+
+      margin-bottom: 72px;
+    }
+
+    &__title {
+      font-size: 56px;
+    }
+  }
+
+  @include desktop {
+    &__title-wrapper {
+      gap: 24px;
+
+      margin-bottom: 144px;
+    }
+
+    &__title {
+      font-size: 72px;
+    }
+  }
+}
+
+.results {
+  &__list {
+    display: grid;
+    gap: 48px;
+  }
+
+  &__item {
+    transition: transform 0.5s;
+    cursor: default;
+
+    @include desktop {
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  &__crumbs-image {
+    position: absolute;
+    top: 53%;
+    left: 0;
+    width: 100%;
+    height: 300px;
+    z-index: -1;
+  }
+
+  @include tablet {
+    &__list {
+      grid-template-columns: repeat(2, 1fr);
+
+      gap: 80px 24px;
+    }
+
+    &__crumbs-image {
+      top: 200px;
+      left: 121px;
+
+      width: 526px;
+      height: 493px;
+    }
+  }
+
+  @include desktop {
+    &__list {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    &__crumbs-image {
+      top: 0;
+      left: 27%;
+
+      width: 718px;
+      height: 673px;
+    }
+  }
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &__num {
+    @extend %big-text;
+  }
+
+  &__name {
+    @extend %body-text;
+  }
+}
diff --git a/src/styles/blocks/footer/footer.scss b/src/styles/blocks/footer/footer.scss
new file mode 100644
index 000000000..1ac2f43d0
--- /dev/null
+++ b/src/styles/blocks/footer/footer.scss
@@ -0,0 +1,138 @@
+.footer {
+  background-color: $c-black;
+
+  &__wrapper {
+    padding: 56px 16px;
+    display: grid;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  &__subtitle {
+    @extend %h2-mobile;
+    color: $c-white;
+    text-align: left;
+    margin-top: 64px;
+  }
+
+  &__social-media-list {
+    display: flex;
+    align-items: flex-start;
+    gap: 32px;
+    margin-block: 40px;
+  }
+
+  &__copyright {
+    @extend %body-text;
+
+    color: $c-grey;
+  }
+
+  @include tablet {
+    &__wrapper {
+      padding: 88px 44px;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 48px 24px;
+    }
+    &__container {
+      gap: 40px;
+
+      &:first-child {
+        gap: 96px;
+      }
+    }
+
+    &__subtitle {
+      margin-top: 0;
+      font-size: 56px;
+    }
+
+    &__social-media-list {
+      margin-block: 0;
+    }
+  }
+
+  @include desktop {
+    &__wrapper {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    &__container {
+      &:not(:first-child) {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    &__subtitle {
+      font-size: 72px;
+      grid-column: 1 / -1;
+    }
+  }
+
+  @include desktop-wide {
+    &__wrapper {
+      padding: 88px 124px;
+      max-width: 1440px;
+    }
+  }
+}
+
+.logo-btn {
+  @extend %logo;
+  .logo-icon-footer {
+    background-color: $c-white;
+  }
+}
+
+.footer-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+
+  &__title {
+    @extend %text-uppercase;
+
+    color: $c-grey;
+  }
+
+  &__link {
+    @extend %body-text;
+    color: $c-white;
+    &:hover {
+      color: $c-accent-orange;
+    }
+    &-social-media {
+      display: block;
+      width: 24px;
+      height: 24px;
+
+      background-color: $c-accent-orange;
+
+      mask-repeat: no-repeat;
+      mask-size: contain;
+
+      &:hover,
+      &:focus {
+        background-color: $c-white;
+      }
+    }
+  }
+}
+
+.social-media-facebook {
+  mask-image: url('/src//images/icons/Icon-facebook.svg');
+}
+
+.social-media-instagram {
+  mask-image: url('/src//images/icons/Icon-instagram.svg');
+}
+
+.social-media-twitter {
+  mask-image: url('/src//images/icons/Icon-twitter.svg');
+}
diff --git a/src/styles/blocks/header/header.scss b/src/styles/blocks/header/header.scss
new file mode 100644
index 000000000..0a5bfc384
--- /dev/null
+++ b/src/styles/blocks/header/header.scss
@@ -0,0 +1,146 @@
+.header-container {
+  padding: 16px 20px 16px 16px;
+  margin: 0 auto;
+
+  @include desktop {
+    padding: 28px 32px;
+    max-width: 1200px;
+  }
+
+  @include desktop-wide {
+    max-width: 1440px;
+  }
+}
+
+.header {
+  position: relative;
+  z-index: 102;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__burger-menu {
+    display: block;
+    width: 24px;
+    height: 24px;
+
+    background-color: $c-black;
+    mask-image: url('/src//images/icons/Icon-menu.svg');
+
+    mask-repeat: no-repeat;
+    mask-size: contain;
+
+    &:hover {
+      background-color: $c-accent-orange;
+    }
+    &--open {
+      mask-image: url('/src//images/icons/Icon-close.svg');
+    }
+  }
+  &__burger-btn {
+    @include desktop {
+      display: none;
+    }
+  }
+}
+
+.logo-btn {
+  @extend %logo;
+  .logo-icon {
+    height: 32px;
+  }
+}
+
+.mobile-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-top: 64px;
+  z-index: 100;
+
+  background-color: $c-light-pink;
+
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
+
+  &__list {
+    margin-top: 132px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+  }
+
+  &--open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  @include desktop {
+    opacity: 1;
+    visibility: visible;
+    position: static;
+    margin-top: 0;
+    &__list {
+      margin-top: 0;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 64px;
+    }
+  }
+}
+
+.menu-item {
+  @include desktop {
+    &:last-child {
+      margin-left: -44px;
+    }
+  }
+}
+
+.menu-link {
+  @extend %body-text;
+
+  &:hover,
+  &:focus {
+    color: $c-accent-orange;
+  }
+}
+
+.link {
+  @extend %link;
+
+  &__btn {
+    &-icon-contact-us {
+      mask-image: url('/src/images/icons/Icon-phone.svg');
+    }
+    &-icon-theme-switcher {
+      display: block;
+      width: 18px;
+      height: 18px;
+      background-color: $c-accent-orange;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      mask-image: url('/src/images/icons/theme.svg');
+
+      &:hover {
+        background-color: $c-dark-orange;
+      }
+    }
+  }
+}
+
+.menu-link-contact-us {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/src/styles/blocks/hero-section/hero-section.scss b/src/styles/blocks/hero-section/hero-section.scss
new file mode 100644
index 000000000..3723662b8
--- /dev/null
+++ b/src/styles/blocks/hero-section/hero-section.scss
@@ -0,0 +1,106 @@
+.hero-section-container {
+  padding: 32px 16px 40px;
+  margin: 0 auto;
+
+  @include tablet {
+    padding: 80px 44px 228px;
+  }
+
+  @include desktop {
+    padding: 0 44px 66px;
+    max-width: 1200px;
+  }
+
+  @include desktop-wide {
+    padding: 0 124px 66px;
+    max-width: 1440px;
+  }
+}
+
+.hero-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &__text {
+    @extend %body-text;
+
+    text-align: center;
+    margin-bottom: 32px;
+  }
+
+  &__title {
+    text-align: center;
+
+    @extend %h1-mobile;
+  }
+
+  &__image {
+    width: 288px;
+    height: 290px;
+  }
+
+  @include tablet {
+    position: relative;
+    &__text {
+      text-align: left;
+      margin-bottom: 146px;
+      max-width: 280px;
+      align-self: flex-start;
+    }
+
+    &__title {
+      font-size: 80px;
+      z-index: 3;
+    }
+
+    &__image {
+      position: absolute;
+      top: 13%;
+      left: 28%;
+      width: 326px;
+      height: 328px;
+      z-index: 2;
+    }
+  }
+
+  @include desktop {
+    &__text {
+      margin-bottom: 8px;
+      margin-top: 135px;
+
+      max-width: 260px;
+    }
+
+    &__title {
+      font-size: 136px;
+      text-wrap: nowrap;
+    }
+
+    &__image {
+      top: 0;
+      left: 29%;
+      width: 544px;
+      height: 546px;
+    }
+  }
+}
+
+.button {
+  @extend %button;
+
+  &__icon {
+    mask-image: url('/src//images/icons/Icon-cookie.svg');
+  }
+
+  @include tablet {
+    margin-top: 210px;
+  }
+
+  @include desktop {
+    margin-top: 64px;
+    align-self: flex-start;
+    margin-bottom: calc(161px - 66px);
+  }
+}
diff --git a/src/styles/blocks/we-bake/we-bake.scss b/src/styles/blocks/we-bake/we-bake.scss
new file mode 100644
index 000000000..513747d20
--- /dev/null
+++ b/src/styles/blocks/we-bake/we-bake.scss
@@ -0,0 +1,137 @@
+.we-bake-container {
+  margin: 0 auto;
+  padding: 32px 16px 0;
+
+  @include tablet {
+    padding: 0 44px;
+  }
+
+  @include desktop {
+    max-width: 1200px;
+    padding: 152px 44px 178px;
+  }
+
+  @include desktop-wide {
+    max-width: 1440px;
+    padding: 152px 124px 178px;
+  }
+}
+
+.we-bake {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  &__title {
+    @extend %h2-mobile;
+
+    text-align: left;
+  }
+
+  &__text {
+    @extend %body-text;
+  }
+
+  @include tablet {
+    &__wrapper {
+      margin-right: 190px;
+    }
+    &__title {
+      font-size: 56px;
+    }
+  }
+
+  @include desktop {
+    align-items: start;
+    justify-content: start;
+    &__wrapper {
+      margin: 0;
+    }
+    &__title {
+      font-size: 72px;
+    }
+  }
+}
+
+.link {
+  &__btn {
+    &-icon-order {
+      mask-image: url('/src//images/icons/Icon-arrow.svg');
+    }
+  }
+}
+
+.product-card-wrapper {
+  display: grid;
+  justify-content: center;
+  row-gap: 56px;
+  margin-top: 56px;
+
+  @include tablet {
+    grid-template-columns: repeat(2, 328px);
+    gap: 24px;
+    margin-top: 80px;
+  }
+
+  @include desktop {
+    grid-template-columns: repeat(2, 402px);
+    justify-content: start;
+    width: 100%;
+    &:nth-child(3) {
+      justify-content: end;
+    }
+  }
+}
+
+.product-card {
+  width: 288px;
+
+  &__image {
+    width: inherit;
+    height: 356px;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    transition: transform 0.5s;
+
+    @include desktop {
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  &__name {
+    @extend %text-uppercase;
+
+    margin-bottom: 8px;
+    color: $c-grey;
+  }
+
+  &__text {
+    @extend %body-text;
+
+    margin-bottom: 16px;
+  }
+
+  @include tablet {
+    width: 328px;
+
+    &__image {
+      height: 424px;
+    }
+  }
+
+  @include desktop {
+    width: 402px;
+
+    &__image {
+      height: 512px;
+    }
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index fb9195d12..de8e4a726 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,7 +1,29 @@
 @import 'utils';
+@import 'reset';
 @import 'fonts';
-@import 'typography';
+@import './blocks/header/header';
+@import './blocks/hero-section/hero-section';
+@import './blocks/we-bake/we-bake';
+@import './blocks/about-us/about-us';
+@import './blocks/footer/footer';
 
 body {
-  background: $c-gray;
+  background: $c-light-pink;
+}
+
+body.light-theme {
+  background-color: $c-light-blue;
+
+  .mobile-menu {
+    background-color: $c-light-blue;
+  }
+
+  h1,
+  h2:not(.footer__subtitle) {
+    color: $c-black;
+  }
+
+  .big-text {
+    color: $c-black;
+  }
 }
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 000000000..191d12b75
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,103 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: block;
+
+  overflow-wrap: break-word;
+}
+
+a {
+  display: block;
+
+  color: inherit;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  display: block;
+
+  list-style: none;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  display: block;
+
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+button {
+  display: block;
+
+  cursor: pointer;
+}
+
+textarea {
+  display: block;
+
+  resize: vertical;
+}
+
+table {
+  display: block;
+
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+[hidden] {
+  display: none !important;
+}
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
index d7201e7b3..44b5db691 100644
--- a/src/styles/utils/_extends.scss
+++ b/src/styles/utils/_extends.scss
@@ -1,4 +1,182 @@
-%h1 {
-  font-family: Roboto, sans-serif;
+%h1-desktop {
+  display: block;
+
+  font-family: Inter, sans-serif;
   font-weight: 400;
+  font-size: 144px;
+  line-height: 85%;
+  letter-spacing: -0.05em;
+  text-transform: uppercase;
+  text-align: center;
+  color: $c-accent-orange;
+}
+
+%h2-desktop {
+  @extend %h1-desktop;
+
+  font-size: 72px;
+}
+
+%h1-tablet {
+  @extend %h1-desktop;
+
+  font-size: 80px;
+}
+
+%h2-tablet {
+  @extend %h2-desktop;
+
+  font-size: 56px;
+}
+
+%h1-mobile {
+  @extend %h1-desktop;
+
+  font-size: 64px;
+}
+
+%h2-mobile {
+  @extend %h2-desktop;
+
+  font-size: 48px;
+}
+
+%big-text {
+  display: block;
+
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 96px;
+  line-height: 85%;
+  letter-spacing: -0.05em;
+  text-transform: uppercase;
+  color: $c-accent-orange;
+}
+
+%body-text {
+  display: block;
+
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  letter-spacing: -0.01em;
+  color: $c-black;
+}
+
+%text-uppercase {
+  display: block;
+
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: $c-accent-orange;
+}
+
+%button {
+  width: 288px;
+  height: 56px;
+  border-radius: 32px;
+  border: 2px solid $c-accent-orange;
+
+  .button__wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .button__icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+
+    background-color: $c-accent-orange;
+
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+  .button__text {
+    @extend %text-uppercase;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: $c-accent-orange;
+    .button__icon {
+      background-color: $c-white;
+    }
+    .button__text {
+      color: $c-white;
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: $c-dark-orange;
+    border-color: $c-dark-orange;
+
+    .button__icon {
+      background-color: $c-white;
+    }
+    .button__text {
+      color: $c-white;
+    }
+  }
+
+  &:disabled {
+    border-color: $c-light-orange;
+    .button__icon {
+      background-color: $c-light-orange;
+    }
+    .button__text {
+      color: $c-light-orange;
+    }
+  }
+}
+
+%link {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  width: max-content;
+  gap: 4px;
+  &:hover,
+  &:focus {
+    .link__btn-icon {
+      background-color: $c-dark-orange;
+    }
+    .link__text {
+      color: $c-dark-orange;
+    }
+  }
+
+  .link__btn-icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+    background-color: $c-accent-orange;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+  .link__text {
+    @extend %text-uppercase;
+  }
+}
+
+%logo {
+  .logo-icon {
+    display: block;
+    width: 168px;
+    height: 40px;
+
+    background-color: $c-black;
+
+    mask-image: url('/src//images/icons/Logo.svg');
+
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
 }
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index 80c79780d..6aabf9c72 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -4,3 +4,21 @@
     #{$_property}: $_toValue;
   }
 }
+
+@mixin tablet {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin desktop-wide {
+  @media (min-width: 1440px) {
+    @content;
+  }
+}
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
index aeb006ffb..1473af2be 100644
--- a/src/styles/utils/_vars.scss
+++ b/src/styles/utils/_vars.scss
@@ -1 +1,8 @@
-$c-gray: #eee;
+$c-dark-orange: #b2341a;
+$c-accent-orange: #f9512e;
+$c-light-orange: #fba28f;
+$c-light-pink: #ffeefc;
+$c-light-blue: #eef7ff;
+$c-black: #1c1a26;
+$c-grey: #7f8096;
+$c-white: #fff;
