diff --git a/README.md b/README.md
index 93d9738cc4..14db73e0b6 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,7 @@ Adapt the page to the following screens:
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/layout_dia/).
+  [DEMO LINK](https://PodvAx.github.io/layout_dia/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
deleted file mode 100755
index 8aa07d7310..0000000000
Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ
diff --git a/src/images/expertises/branding.png b/src/images/expertises/branding.png
new file mode 100644
index 0000000000..b8e2e6b0a5
Binary files /dev/null and b/src/images/expertises/branding.png differ
diff --git a/src/images/expertises/communication.png b/src/images/expertises/communication.png
new file mode 100644
index 0000000000..003bfa7e1d
Binary files /dev/null and b/src/images/expertises/communication.png differ
diff --git a/src/images/expertises/strategy.png b/src/images/expertises/strategy.png
new file mode 100644
index 0000000000..da15e7792b
Binary files /dev/null and b/src/images/expertises/strategy.png differ
diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg
deleted file mode 100644
index 36b7a748d3..0000000000
Binary files a/src/images/features/features-bg.jpg and /dev/null differ
diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg
deleted file mode 100644
index 2eb2ee14c3..0000000000
--- a/src/images/features/features-item-icon-1.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="32" cy="32" r="32" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7008 24.5773C36.1258 25.7273 35.7413 27.3859 35.7413 29.2726C35.7413 31.1593 36.1258 32.8179 36.7008 33.9679C37.3057 35.1777 37.9563 35.5452 38.3776 35.5452C38.7989 35.5452 39.4496 35.1777 40.0545 33.9679C40.6294 32.8179 41.0139 31.1593 41.0139 29.2726C41.0139 27.3859 40.6294 25.7273 40.0545 24.5773C39.4496 23.3675 38.7989 23 38.3776 23C37.9563 23 37.3057 23.3675 36.7008 24.5773ZM24.1362 27.4981L34.7049 24.1285C34.0915 25.5507 33.7413 27.3496 33.7413 29.2726C33.7413 31.1956 34.0915 32.9945 34.7049 34.4167L24.1362 31.0471L24.1176 31.0414C23.7677 30.9372 23.4652 30.7139 23.2626 30.41C23.0601 30.1062 22.9702 29.7411 23.0087 29.378C23.0161 29.3079 23.0161 29.2373 23.0087 29.1672C22.9702 28.8041 23.0601 28.439 23.2626 28.1352C23.4652 27.8313 23.7677 27.608 24.1176 27.5038L24.1362 27.4981ZM23.5371 25.5899L37.3612 21.1824C37.6781 21.0651 38.017 21 38.3776 21C39.9646 21 41.1321 22.2605 41.8433 23.6829C42.5844 25.1651 43.0139 27.1427 43.0139 29.2726C43.0139 31.4024 42.5844 33.3801 41.8433 34.8623C41.1321 36.2847 39.9646 37.5452 38.3776 37.5452C38.017 37.5452 37.6781 37.4801 37.3612 37.3628L31.9439 35.6356L32.8266 38.3031C33.0919 38.9878 33.0795 39.7496 32.7913 40.4259C32.4985 41.1128 31.9452 41.6555 31.2526 41.9348L31.2512 41.9354C30.5583 42.2136 29.7832 42.2054 29.0963 41.9127C28.4094 41.6199 27.8667 41.0666 27.5874 40.374C27.5824 40.3616 27.5776 40.349 27.5731 40.3364L25.1169 33.4589L23.5371 32.9553C22.7438 32.7166 22.0582 32.209 21.5985 31.5194C21.1565 30.8564 20.95 30.0652 21.0103 29.2726C20.95 28.48 21.1565 27.6888 21.5985 27.0258C22.0582 26.3362 22.7438 25.8286 23.5371 25.5899ZM29.5888 34.8847L27.5135 34.2231L29.4485 39.641C29.5312 39.8351 29.6859 39.9899 29.8804 40.0728C30.0796 40.1577 30.3044 40.1601 30.5055 40.0796C30.7061 39.9984 30.8665 39.841 30.9514 39.6418C31.0364 39.4424 31.0388 39.2173 30.958 39.0161C30.9503 38.9969 30.9431 38.9774 30.9366 38.9577L29.5888 34.8847ZM38.9336 27.4634C39.3793 27.9608 39.6263 28.6048 39.6275 29.2726C39.6263 29.9404 39.3793 30.5845 38.9336 31.0818C38.4879 31.5791 37.8747 31.895 37.211 31.9692C37.0005 31.0859 36.8961 30.1806 36.9001 29.2726C36.8961 28.3646 37.0005 27.4593 37.211 26.576C37.8747 26.6502 38.4879 26.9661 38.9336 27.4634Z" fill="#56CCF2"/>
-</svg>
diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg
deleted file mode 100644
index 194e788e11..0000000000
--- a/src/images/features/features-item-icon-2.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="32" cy="32" r="32" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8787 21.8787C24.4413 21.3161 25.2044 21 26 21H34C34.2652 21 34.5196 21.1054 34.7071 21.2929L40.7071 27.2929C40.8946 27.4804 41 27.7348 41 28V40C41 40.7957 40.6839 41.5587 40.1213 42.1213C39.5587 42.6839 38.7957 43 38 43H26C25.2043 43 24.4413 42.6839 23.8787 42.1213C23.3161 41.5587 23 40.7957 23 40V24C23 23.2044 23.3161 22.4413 23.8787 21.8787ZM26 23C25.7348 23 25.4804 23.1054 25.2929 23.2929C25.1054 23.4804 25 23.7348 25 24V40C25 40.2652 25.1054 40.5196 25.2929 40.7071C25.4804 40.8946 25.7348 41 26 41H38C38.2652 41 38.5196 40.8946 38.7071 40.7071C38.8946 40.5196 39 40.2652 39 40V28.4142L33.5858 23H26Z" fill="#03D542"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34 21C34.5523 21 35 21.4477 35 22V27H40C40.5523 27 41 27.4477 41 28C41 28.5523 40.5523 29 40 29H34C33.4477 29 33 28.5523 33 28V22C33 21.4477 33.4477 21 34 21Z" fill="#03D542"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 33C27 32.4477 27.4477 32 28 32H36C36.5523 32 37 32.4477 37 33C37 33.5523 36.5523 34 36 34H28C27.4477 34 27 33.5523 27 33Z" fill="#03D542"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 37C27 36.4477 27.4477 36 28 36H36C36.5523 36 37 36.4477 37 37C37 37.5523 36.5523 38 36 38H28C27.4477 38 27 37.5523 27 37Z" fill="#03D542"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 29C27 28.4477 27.4477 28 28 28H30C30.5523 28 31 28.4477 31 29C31 29.5523 30.5523 30 30 30H28C27.4477 30 27 29.5523 27 29Z" fill="#03D542"/>
-</svg>
diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg
deleted file mode 100644
index b278d8d16f..0000000000
--- a/src/images/features/features-item-icon-3.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="32" cy="32" r="32" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25 25C24.4477 25 24 25.4477 24 26V40C24 40.5523 24.4477 41 25 41H39C39.5523 41 40 40.5523 40 40V26C40 25.4477 39.5523 25 39 25H25ZM22 26C22 24.3431 23.3431 23 25 23H39C40.6569 23 42 24.3431 42 26V40C42 41.6569 40.6569 43 39 43H25C23.3431 43 22 41.6569 22 40V26Z" fill="#F25656"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36 21C36.5523 21 37 21.4477 37 22V26C37 26.5523 36.5523 27 36 27C35.4477 27 35 26.5523 35 26V22C35 21.4477 35.4477 21 36 21Z" fill="#F25656"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28 21C28.5523 21 29 21.4477 29 22V26C29 26.5523 28.5523 27 28 27C27.4477 27 27 26.5523 27 26V22C27 21.4477 27.4477 21 28 21Z" fill="#F25656"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 30C22 29.4477 22.4477 29 23 29H41C41.5523 29 42 29.4477 42 30C42 30.5523 41.5523 31 41 31H23C22.4477 31 22 30.5523 22 30Z" fill="#F25656"/>
-</svg>
diff --git a/src/images/icons/double-quotes.svg b/src/images/icons/double-quotes.svg
new file mode 100644
index 0000000000..48dedd7977
--- /dev/null
+++ b/src/images/icons/double-quotes.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 19">
+<path id="&#226;&#128;&#156;" d="M2 21.48C2 20.36 2 19.24 2 18.12C2 16.9533 2 15.81 2 14.69C2 11.0967 2.51333 8.27334 3.54 6.22C4.56667 4.16667 6.36333 3.09333 8.93 3L10.26 5.73C8.81333 5.87 7.81 6.57 7.25 7.83C6.73667 9.04333 6.48 10.98 6.48 13.64H10.19V21.48H2ZM14.32 21.48C14.32 20.36 14.32 19.24 14.32 18.12C14.32 16.9533 14.32 15.81 14.32 14.69C14.32 11.0967 14.8333 8.27334 15.86 6.22C16.8867 4.16667 18.6833 3.09333 21.25 3L22.58 5.73C21.1333 5.87 20.13 6.57 19.57 7.83C19.0567 9.04333 18.8 10.98 18.8 13.64H22.51V21.48H14.32Z" fill="#2060F6"/>
+</g>
+</svg>
diff --git a/src/images/icons/icon-arrow-right.svg b/src/images/icons/icon-arrow-right.svg
new file mode 100644
index 0000000000..18494210c1
--- /dev/null
+++ b/src/images/icons/icon-arrow-right.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mdi_arrow_forward" clip-path="url(#clip0_22904_1375)">
+<path id="Vector" d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_22904_1375">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg
new file mode 100644
index 0000000000..bc6f5230e9
--- /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="M19.1943 6.41714C19.6393 5.97216 19.6393 5.2507 19.1943 4.80571C18.7493 4.36073 18.0278 4.36073 17.5829 4.80571L12 10.3886L6.41714 4.80572C5.97216 4.36073 5.2507 4.36073 4.80571 4.80571C4.36073 5.2507 4.36073 5.97216 4.80571 6.41714L10.3886 12L4.80572 17.5829C4.36073 18.0278 4.36073 18.7493 4.80571 19.1943C5.2507 19.6393 5.97216 19.6393 6.41714 19.1943L12 13.6114L17.5829 19.1943C18.0278 19.6393 18.7493 19.6393 19.1943 19.1943C19.6393 18.7493 19.6393 18.0278 19.1943 17.5829L13.6114 12L19.1943 6.41714Z" fill="white"/>
+</svg>
diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg
new file mode 100644
index 0000000000..01604ae5d5
--- /dev/null
+++ b/src/images/icons/icon-menu.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu">
+<g id="Group">
+<path id="Vector" d="M21 16H3V14H21V16ZM21 10H3V8H21V10Z" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/images/icons/icon-moon.svg b/src/images/icons/icon-moon.svg
new file mode 100644
index 0000000000..8a366994fe
--- /dev/null
+++ b/src/images/icons/icon-moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/icon-sun.svg b/src/images/icons/icon-sun.svg
new file mode 100644
index 0000000000..068f12331d
--- /dev/null
+++ b/src/images/icons/icon-sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/red-double-quotes.svg b/src/images/icons/red-double-quotes.svg
new file mode 100644
index 0000000000..6f830bb9b9
--- /dev/null
+++ b/src/images/icons/red-double-quotes.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 19">
+<path id="&#226;&#128;&#156;" d="M2 21.48C2 20.36 2 19.24 2 18.12C2 16.9533 2 15.81 2 14.69C2 11.0967 2.51333 8.27334 3.54 6.22C4.56667 4.16667 6.36333 3.09333 8.93 3L10.26 5.73C8.81333 5.87 7.81 6.57 7.25 7.83C6.73667 9.04333 6.48 10.98 6.48 13.64H10.19V21.48H2ZM14.32 21.48C14.32 20.36 14.32 19.24 14.32 18.12C14.32 16.9533 14.32 15.81 14.32 14.69C14.32 11.0967 14.8333 8.27334 15.86 6.22C16.8867 4.16667 18.6833 3.09333 21.25 3L22.58 5.73C21.1333 5.87 20.13 6.57 19.57 7.83C19.0567 9.04333 18.8 10.98 18.8 13.64H22.51V21.48H14.32Z" fill="#F25656"/>
+</g>
+</svg>
diff --git a/src/images/icons/sky-double-quotes.svg b/src/images/icons/sky-double-quotes.svg
new file mode 100644
index 0000000000..aa00a12940
--- /dev/null
+++ b/src/images/icons/sky-double-quotes.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 19">
+<path id="&#226;&#128;&#156;" d="M2 21.48C2 20.36 2 19.24 2 18.12C2 16.9533 2 15.81 2 14.69C2 11.0967 2.51333 8.27334 3.54 6.22C4.56667 4.16667 6.36333 3.09333 8.93 3L10.26 5.73C8.81333 5.87 7.81 6.57 7.25 7.83C6.73667 9.04333 6.48 10.98 6.48 13.64H10.19V21.48H2ZM14.32 21.48C14.32 20.36 14.32 19.24 14.32 18.12C14.32 16.9533 14.32 15.81 14.32 14.69C14.32 11.0967 14.8333 8.27334 15.86 6.22C16.8867 4.16667 18.6833 3.09333 21.25 3L22.58 5.73C21.1333 5.87 20.13 6.57 19.57 7.83C19.0567 9.04333 18.8 10.98 18.8 13.64H22.51V21.48H14.32Z" fill="#56CCF2"/>
+</g>
+</svg>
diff --git a/src/images/icons/yellow-double-quotes.svg b/src/images/icons/yellow-double-quotes.svg
new file mode 100644
index 0000000000..0b05243d5d
--- /dev/null
+++ b/src/images/icons/yellow-double-quotes.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 19">
+<path id="&#226;&#128;&#156;" d="M2 21.48C2 20.36 2 19.24 2 18.12C2 16.9533 2 15.81 2 14.69C2 11.0967 2.51333 8.27334 3.54 6.22C4.56667 4.16667 6.36333 3.09333 8.93 3L10.26 5.73C8.81333 5.87 7.81 6.57 7.25 7.83C6.73667 9.04333 6.48 10.98 6.48 13.64H10.19V21.48H2ZM14.32 21.48C14.32 20.36 14.32 19.24 14.32 18.12C14.32 16.9533 14.32 15.81 14.32 14.69C14.32 11.0967 14.8333 8.27334 15.86 6.22C16.8867 4.16667 18.6833 3.09333 21.25 3L22.58 5.73C21.1333 5.87 20.13 6.57 19.57 7.83C19.0567 9.04333 18.8 10.98 18.8 13.64H22.51V21.48H14.32Z" fill="#FCC304"/>
+</g>
+</svg>
diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg
new file mode 100644
index 0000000000..70749a6e74
--- /dev/null
+++ b/src/images/logo/air-logo.svg
@@ -0,0 +1,9 @@
+<svg width="46" height="28" viewBox="0 0 46 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Air">
+<path d="M8.128 18.964L14.428 5.356L20.728 18.964H8.128ZM22.24 22.204L24.292 26.632H27.856L16.12 1.432H12.736L1 26.632H4.564L6.616 22.204H22.24Z" fill="white"/>
+<path d="M28.2025 3.448C28.2025 4.168 28.4185 4.744 28.8865 5.212C29.3545 5.68 29.9305 5.896 30.6505 5.896C31.3345 5.896 31.9105 5.68 32.3785 5.212C32.8465 4.744 33.0985 4.168 33.0985 3.448C33.0985 2.764 32.8465 2.188 32.3785 1.72C31.9105 1.252 31.3345 1 30.6505 1C29.9305 1 29.3545 1.252 28.8865 1.72C28.4185 2.188 28.2025 2.764 28.2025 3.448ZM32.1985 8.632H29.1025V26.632H32.1985V8.632Z" fill="white"/>
+<path d="M38.6183 11.332V8.632H35.6303V26.632H38.7263V18.244C38.7263 17.236 38.7983 16.336 38.9783 15.472C39.1223 14.644 39.4103 13.924 39.8423 13.312C40.2743 12.736 40.8143 12.268 41.4983 11.944C42.1463 11.62 43.0103 11.44 44.0183 11.44C44.3423 11.44 44.6303 11.476 44.9183 11.512C45.2063 11.548 45.4943 11.584 45.8183 11.656V8.38C45.5303 8.344 45.2423 8.308 44.9543 8.272C44.6663 8.236 44.3423 8.2 44.0543 8.2C42.7583 8.2 41.6783 8.488 40.7783 9.028C39.8783 9.568 39.1583 10.324 38.6183 11.332Z" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg
deleted file mode 100644
index a81933296e..0000000000
--- a/src/images/logo/dia-logo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="49" height="25" viewBox="0 0 49 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.464 1.21698H8.848C12.5813 1.21698 15.472 2.20898 17.52 4.19298C19.5893 6.17698 20.624 8.97164 20.624 12.577C20.624 16.2036 19.5893 19.0196 17.52 21.025C15.472 23.009 12.5813 24.001 8.848 24.001H0.464V1.21698ZM8.592 20.641C13.84 20.641 16.464 17.953 16.464 12.577C16.464 7.24364 13.84 4.57697 8.592 4.57697H4.592V20.641H8.592ZM24.551 7.84098H28.519V24.001H24.551V7.84098ZM28.743 0.512976V4.44898H24.295V0.512976H28.743ZM48.3507 7.84098V24.001H44.4148V21.409C43.9241 22.305 43.2201 23.009 42.3028 23.521C41.3854 24.0116 40.3401 24.257 39.1667 24.257C37.7588 24.257 36.5108 23.9156 35.4227 23.233C34.3348 22.5503 33.4921 21.5796 32.8948 20.321C32.2974 19.0623 31.9988 17.601 31.9988 15.937C31.9988 14.273 32.2974 12.801 32.8948 11.521C33.5134 10.2196 34.3668 9.21698 35.4548 8.51298C36.5428 7.78764 37.7801 7.42498 39.1667 7.42498C40.3401 7.42498 41.3854 7.68098 42.3028 8.19298C43.2201 8.68364 43.9241 9.37698 44.4148 10.273V7.84098H48.3507ZM40.2548 21.121C41.5774 21.121 42.6014 20.6623 43.3268 19.745C44.0521 18.8276 44.4148 17.537 44.4148 15.873C44.4148 14.1663 44.0521 12.8543 43.3268 11.937C42.6014 11.0196 41.5668 10.561 40.2228 10.561C38.9001 10.561 37.8654 11.041 37.1188 12.001C36.3934 12.9396 36.0308 14.2516 36.0308 15.937C36.0308 17.601 36.3934 18.881 37.1188 19.777C37.8654 20.673 38.9108 21.121 40.2548 21.121Z" fill="white"/>
-</svg>
diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg
index 66daed19a5..88c9d7327f 100644
--- a/src/images/slider/arrow-left.svg
+++ b/src/images/slider/arrow-left.svg
@@ -1,3 +1,10 @@
-<svg width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.2305 1L1.23047 13L13.2305 25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mdi_chevron_left" clip-path="url(#clip0_22904_1338)">
+<path id="Vector" d="M11.5575 5.5575L10.5 4.5L6 9L10.5 13.5L11.5575 12.4425L8.1225 9L11.5575 5.5575Z" fill="#253757"/>
+</g>
+<defs>
+<clipPath id="clip0_22904_1338">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg
index e9ddf85873..e9562cb1a6 100644
--- a/src/images/slider/arrow-right.svg
+++ b/src/images/slider/arrow-right.svg
@@ -1,3 +1,10 @@
-<svg width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.23047 0.999999L13.2305 13L1.23047 25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="mdi_chevron_left" clip-path="url(#clip0_22904_1333)">
+<path id="Vector" d="M6.4425 5.5575L7.5 4.5L12 9L7.5 13.5L6.4425 12.4425L9.8775 9L6.4425 5.5575Z" fill="#253757"/>
+</g>
+<defs>
+<clipPath id="clip0_22904_1333">
+<rect width="18" height="18" fill="white" transform="matrix(-1 0 0 1 18 0)"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg
deleted file mode 100644
index 98c4188508..0000000000
Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ
diff --git a/src/images/slider/slider-img-1.jpg b/src/images/slider/slider-img-1.jpg
new file mode 100644
index 0000000000..84b6e3eb33
Binary files /dev/null and b/src/images/slider/slider-img-1.jpg differ
diff --git a/src/images/slider/slider-img-2_1.jpg b/src/images/slider/slider-img-2_1.jpg
new file mode 100644
index 0000000000..2dab3fb6d7
Binary files /dev/null and b/src/images/slider/slider-img-2_1.jpg differ
diff --git a/src/images/slider/slider-img-3_1.jpg b/src/images/slider/slider-img-3_1.jpg
new file mode 100644
index 0000000000..76dc8c56e7
Binary files /dev/null and b/src/images/slider/slider-img-3_1.jpg differ
diff --git a/src/images/slider/slider-img-4_1.jpg b/src/images/slider/slider-img-4_1.jpg
new file mode 100644
index 0000000000..712492c5b7
Binary files /dev/null and b/src/images/slider/slider-img-4_1.jpg differ
diff --git a/src/images/slider/slider-img-5_1.jpg b/src/images/slider/slider-img-5_1.jpg
new file mode 100644
index 0000000000..f4c0a64f8f
Binary files /dev/null and b/src/images/slider/slider-img-5_1.jpg differ
diff --git a/src/images/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg
deleted file mode 100644
index 9fcdfa10cd..0000000000
--- a/src/images/sub-title/sub-title-icon-dark.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 13.5C0.5 12.9477 0.947715 12.5 1.5 12.5C2.05228 12.5 2.5 12.9477 2.5 13.5C2.5 14.0523 2.05228 14.5 1.5 14.5C0.947715 14.5 0.5 14.0523 0.5 13.5ZM6.49998 13.5001C6.49998 12.9478 6.94769 12.5001 7.49998 12.5001C8.05226 12.5001 8.49998 12.9478 8.49998 13.5001C8.49998 14.0523 8.05226 14.5001 7.49998 14.5001C6.94769 14.5001 6.49998 14.0523 6.49998 13.5001ZM12.5 13.5001C12.5 12.9478 12.9477 12.5001 13.5 12.5001C14.0523 12.5001 14.5 12.9478 14.5 13.5001C14.5 14.0523 14.0523 14.5001 13.5 14.5001C12.9477 14.5001 12.5 14.0523 12.5 13.5001ZM18.5 13.5001C18.5 12.9478 18.9477 12.5001 19.5 12.5001C20.0523 12.5001 20.5 12.9478 20.5 13.5001C20.5 14.0523 20.0523 14.5001 19.5 14.5001C18.9477 14.5001 18.5 14.0523 18.5 13.5001ZM0.5 19.5C0.5 18.9478 0.947715 18.5 1.5 18.5C2.05228 18.5 2.5 18.9478 2.5 19.5C2.5 20.0523 2.05228 20.5 1.5 20.5C0.947715 20.5 0.5 20.0523 0.5 19.5ZM6.49998 19.5C6.49998 18.9478 6.94769 18.5 7.49998 18.5C8.05226 18.5 8.49998 18.9478 8.49998 19.5C8.49998 20.0523 8.05226 20.5 7.49998 20.5C6.94769 20.5 6.49998 20.0523 6.49998 19.5ZM12.5 19.5C12.5 18.9478 12.9477 18.5 13.5 18.5C14.0523 18.5 14.5 18.9478 14.5 19.5C14.5 20.0523 14.0523 20.5 13.5 20.5C12.9477 20.5 12.5 20.0523 12.5 19.5ZM18.5 19.5C18.5 18.9478 18.9477 18.5 19.5 18.5C20.0523 18.5 20.5 18.9478 20.5 19.5C20.5 20.0523 20.0523 20.5 19.5 20.5C18.9477 20.5 18.5 20.0523 18.5 19.5ZM0.5 1.5C0.5 0.947715 0.947715 0.5 1.5 0.5C2.05228 0.5 2.5 0.947715 2.5 1.5C2.5 2.05228 2.05228 2.5 1.5 2.5C0.947715 2.5 0.5 2.05228 0.5 1.5ZM6.49998 1.50005C6.49998 0.947768 6.94769 0.500053 7.49998 0.500053C8.05226 0.500053 8.49998 0.947768 8.49998 1.50005C8.49998 2.05234 8.05226 2.50005 7.49998 2.50005C6.94769 2.50005 6.49998 2.05234 6.49998 1.50005ZM12.5 1.50005C12.5 0.947768 12.9477 0.500053 13.5 0.500053C14.0523 0.500053 14.5 0.947768 14.5 1.50005C14.5 2.05234 14.0523 2.50005 13.5 2.50005C12.9477 2.50005 12.5 2.05234 12.5 1.50005ZM18.5 1.50005C18.5 0.947769 18.9477 0.500053 19.5 0.500053C20.0523 0.500053 20.5 0.947769 20.5 1.50005C20.5 2.05234 20.0523 2.50005 19.5 2.50005C18.9477 2.50005 18.5 2.05234 18.5 1.50005ZM0.5 7.50005C0.5 6.94777 0.947715 6.50005 1.5 6.50005C2.05228 6.50005 2.5 6.94777 2.5 7.50005C2.5 8.05233 2.05228 8.50005 1.5 8.50005C0.947716 8.50005 0.5 8.05233 0.5 7.50005ZM6.49998 7.50005C6.49998 6.94777 6.94769 6.50005 7.49998 6.50005C8.05226 6.50005 8.49998 6.94777 8.49998 7.50005C8.49998 8.05233 8.05226 8.50005 7.49998 8.50005C6.94769 8.50005 6.49998 8.05233 6.49998 7.50005ZM12.5 7.50005C12.5 6.94777 12.9477 6.50005 13.5 6.50005C14.0523 6.50005 14.5 6.94777 14.5 7.50005C14.5 8.05233 14.0523 8.50005 13.5 8.50005C12.9478 8.50005 12.5 8.05233 12.5 7.50005ZM18.5 7.50005C18.5 6.94777 18.9477 6.50005 19.5 6.50005C20.0523 6.50005 20.5 6.94777 20.5 7.50005C20.5 8.05233 20.0523 8.50005 19.5 8.50005C18.9477 8.50005 18.5 8.05233 18.5 7.50005Z" fill="url(#paint0_linear)" fill-opacity="0.25" stroke="#56CCF2"/>
-<defs>
-<linearGradient id="paint0_linear" x1="19.5" y1="6" x2="19.5" y2="9" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg
deleted file mode 100644
index 5ec041c15e..0000000000
--- a/src/images/sub-title/sub-title-icon-light.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.5 13.5C0.5 12.9477 0.947715 12.5 1.5 12.5C2.05228 12.5 2.5 12.9477 2.5 13.5C2.5 14.0523 2.05228 14.5 1.5 14.5C0.947715 14.5 0.5 14.0523 0.5 13.5ZM6.49998 13.5001C6.49998 12.9478 6.94769 12.5001 7.49998 12.5001C8.05226 12.5001 8.49998 12.9478 8.49998 13.5001C8.49998 14.0523 8.05226 14.5001 7.49998 14.5001C6.94769 14.5001 6.49998 14.0523 6.49998 13.5001ZM12.5 13.5001C12.5 12.9478 12.9477 12.5001 13.5 12.5001C14.0523 12.5001 14.5 12.9478 14.5 13.5001C14.5 14.0523 14.0523 14.5001 13.5 14.5001C12.9477 14.5001 12.5 14.0523 12.5 13.5001ZM18.5 13.5001C18.5 12.9478 18.9477 12.5001 19.5 12.5001C20.0523 12.5001 20.5 12.9478 20.5 13.5001C20.5 14.0523 20.0523 14.5001 19.5 14.5001C18.9477 14.5001 18.5 14.0523 18.5 13.5001ZM0.5 19.5C0.5 18.9478 0.947715 18.5 1.5 18.5C2.05228 18.5 2.5 18.9478 2.5 19.5C2.5 20.0523 2.05228 20.5 1.5 20.5C0.947715 20.5 0.5 20.0523 0.5 19.5ZM6.49998 19.5C6.49998 18.9478 6.94769 18.5 7.49998 18.5C8.05226 18.5 8.49998 18.9478 8.49998 19.5C8.49998 20.0523 8.05226 20.5 7.49998 20.5C6.94769 20.5 6.49998 20.0523 6.49998 19.5ZM12.5 19.5C12.5 18.9478 12.9477 18.5 13.5 18.5C14.0523 18.5 14.5 18.9478 14.5 19.5C14.5 20.0523 14.0523 20.5 13.5 20.5C12.9477 20.5 12.5 20.0523 12.5 19.5ZM18.5 19.5C18.5 18.9478 18.9477 18.5 19.5 18.5C20.0523 18.5 20.5 18.9478 20.5 19.5C20.5 20.0523 20.0523 20.5 19.5 20.5C18.9477 20.5 18.5 20.0523 18.5 19.5ZM0.5 1.5C0.5 0.947715 0.947715 0.5 1.5 0.5C2.05228 0.5 2.5 0.947715 2.5 1.5C2.5 2.05228 2.05228 2.5 1.5 2.5C0.947715 2.5 0.5 2.05228 0.5 1.5ZM6.49998 1.50005C6.49998 0.947768 6.94769 0.500053 7.49998 0.500053C8.05226 0.500053 8.49998 0.947768 8.49998 1.50005C8.49998 2.05234 8.05226 2.50005 7.49998 2.50005C6.94769 2.50005 6.49998 2.05234 6.49998 1.50005ZM12.5 1.50005C12.5 0.947768 12.9477 0.500053 13.5 0.500053C14.0523 0.500053 14.5 0.947768 14.5 1.50005C14.5 2.05234 14.0523 2.50005 13.5 2.50005C12.9477 2.50005 12.5 2.05234 12.5 1.50005ZM18.5 1.50005C18.5 0.947769 18.9477 0.500053 19.5 0.500053C20.0523 0.500053 20.5 0.947769 20.5 1.50005C20.5 2.05234 20.0523 2.50005 19.5 2.50005C18.9477 2.50005 18.5 2.05234 18.5 1.50005ZM0.5 7.50005C0.5 6.94777 0.947715 6.50005 1.5 6.50005C2.05228 6.50005 2.5 6.94777 2.5 7.50005C2.5 8.05233 2.05228 8.50005 1.5 8.50005C0.947716 8.50005 0.5 8.05233 0.5 7.50005ZM6.49998 7.50005C6.49998 6.94777 6.94769 6.50005 7.49998 6.50005C8.05226 6.50005 8.49998 6.94777 8.49998 7.50005C8.49998 8.05233 8.05226 8.50005 7.49998 8.50005C6.94769 8.50005 6.49998 8.05233 6.49998 7.50005ZM12.5 7.50005C12.5 6.94777 12.9477 6.50005 13.5 6.50005C14.0523 6.50005 14.5 6.94777 14.5 7.50005C14.5 8.05233 14.0523 8.50005 13.5 8.50005C12.9478 8.50005 12.5 8.05233 12.5 7.50005ZM18.5 7.50005C18.5 6.94777 18.9477 6.50005 19.5 6.50005C20.0523 6.50005 20.5 6.94777 20.5 7.50005C20.5 8.05233 20.0523 8.50005 19.5 8.50005C18.9477 8.50005 18.5 8.05233 18.5 7.50005Z" fill="url(#paint0_linear)" fill-opacity="0.25" stroke="white"/>
-<defs>
-<linearGradient id="paint0_linear" x1="19.5" y1="6" x2="19.5" y2="9" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-we-do/what-we-do-1.jpg
deleted file mode 100644
index 9481d8eeb2..0000000000
Binary files a/src/images/what-we-do/what-we-do-1.jpg and /dev/null differ
diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-we-do/what-we-do-2.jpg
deleted file mode 100644
index 724e65566f..0000000000
Binary files a/src/images/what-we-do/what-we-do-2.jpg and /dev/null differ
diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-we-do/what-we-do-3.jpg
deleted file mode 100644
index 7a69cc03f1..0000000000
Binary files a/src/images/what-we-do/what-we-do-3.jpg and /dev/null differ
diff --git a/src/index.html b/src/index.html
index f619b6d70b..570c6dea57 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,610 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="page">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dia</title>
+
+    <title>Air</title>
+
+    <link
+      rel="shortcut icon"
+      href="./images/logo/air-logo.svg"
+      type="image/x-icon"
+    >
     <link rel="stylesheet" href="./styles/main.scss">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    >
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@600;700&display=swap"
+      rel="stylesheet"
+    >
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    >
+    <script src="https://cdn.jsdelivr.net/npm/wow.js"></script>
+    <script>
+      new WOW().init();
+    </script>
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
+    >
+    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+
+    <script src="https://kit.fontawesome.com/430619f517.js" crossorigin="anonymous"></script>
   </head>
-  <body>
-    <h1>Dia</h1>
-    <script type="text/javascript" src="scripts/main.js"></script>
+
+  <body class="page__body">
+    <header class="header page__header">
+      <div class="header__container">
+        <div class="top-bar header__top-bar">
+          <div class="top-bar__left-side">
+            <a href="#" class="top-bar__logo-link logo-link">
+              <img
+                src="./images/logo/air-logo.svg"
+                alt="Air logo"
+                class="top-bar__logo"
+              >
+            </a>
+
+            <a href="#menu" class="top-bar__icon icon icon--menu"></a>
+          </div>
+
+          <div class="top-bar__center-side">
+            <nav class="nav top-bar__nav">
+              <ul class="nav__list">
+                <li class="nav__item">
+                  <a href="#about-us" class="nav__link link subhead">About Us</a>
+                </li>
+                <li class="nav__item">
+                  <a href="#services" class="nav__link link subhead">Services</a>
+                </li>
+                <li class="nav__item">
+                  <a href="#testimonials" class="nav__link link subhead">Testimonials</a>
+                </li>
+                <li class="nav__item">
+                  <a href="#contact-us" class="nav__link link subhead">Contact Us</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+
+          <div class="top-bar__right-side">
+            <a href="#feedback" class="link link--hire-us subhead">Hire Us</a>
+
+            <div class="page__switcher">
+              <div class="page__theme-switcher"></div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="header__content wow animate__fadeInLeft"
+          data-wow-duration="2s"
+        >
+          <h1 class="header__title">Strategic Agency</h1>
+
+          <p class="header__text text text--mid">
+            We believe in the power of bold ideas that can solve business challenges.
+          </p>
+
+          <a href="#expertise" class="header__button button button--header">Learn more</a>
+        </div>
+      </div>
+
+      <div
+        class="page__swiper swiper header__swiper wow animate__fadeInUp"
+        id="header__swiper"
+        data-wow-duration="2s"
+      >
+        <div class="swiper-wrapper">
+          <div class="swiper-slide swiper-slide--first">
+            <img
+              src="./images/slider/slider-img-1.jpg"
+              alt="Working man and woman"
+              class="swiper__picture"
+            >
+          </div>
+
+          <div class="swiper-slide swiper-slide--second">
+            <img
+              src="./images/slider/slider-img-2_1.jpg"
+              alt="Stairs on the pink background"
+              class="swiper__picture"
+            >
+          </div>
+
+          <div class="swiper-slide swiper-slide--third">
+            <img
+              src="./images/slider/slider-img-3_1.jpg"
+              alt="Watch on hand"
+              class="swiper__picture"
+            >
+          </div>
+
+          <div class="swiper-slide swiper-slide--fourth">
+            <img
+              src="./images/slider/slider-img-4_1.jpg"
+              alt="Different devices on table"
+              class="swiper__picture"
+            >
+          </div>
+
+          <div class="swiper-slide swiper-slide--fifth">
+            <img
+              src="./images/slider/slider-img-5_1.jpg"
+              alt="Different devices on the table with plant"
+              class="swiper__picture"
+            >
+          </div>
+        </div>
+
+        <div class="swiper__content">
+          <div class="swiper__controls">
+            <div class="swiper__button swiper__button--prev"></div>
+            <div class="swiper__button swiper__button--next"></div>
+          </div>
+
+          <div class="swiper__intro">
+            <h4 class="swiper__subhead subhead">Intro</h4>
+
+            <p class="swiper__text text">
+              By the same illusion which lifts the
+              <br>
+              horizon.
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <aside class="mobile-menu page__mobile-menu" id="menu">
+      <div class="top-bar">
+        <div class="top-bar__left-side">
+          <a href="#" class="top-bar__logo-link logo-link">
+            <img
+              src="./images/logo/air-logo.svg"
+              alt="Air logo"
+              class="top-bar__logo"
+            >
+          </a>
+          <a href="#" class="icon icon--close"></a>
+        </div>
+
+        <div class="top-bar__right-side">
+          <a href="#feedback" class="link link--hire-us subhead">Hire Us</a>
+
+          <div class="page__switcher">
+            <div class="page__theme-switcher"></div>
+          </div>
+        </div>
+      </div>
+
+      <nav class="nav">
+        <ul class="nav__list nav__list--mobile">
+          <li class="nav__item">
+            <a href="#about-us" class="nav__link link subhead">About Us</a>
+          </li>
+          <li class="nav__item">
+            <a href="#services" class="nav__link link subhead">Services</a>
+          </li>
+          <li class="nav__item">
+            <a href="#testimonials" class="nav__link link subhead">Testimonials</a>
+          </li>
+          <li class="nav__item">
+            <a href="#contact-us" class="nav__link link subhead">Contact Us</a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+
+    <main class="main-content page__main-content">
+      <section class="main-content__section about-us" id="about-us">
+        <div
+          class="about-us__content wow animate__fadeInDown"
+          data-wow-duration="2s"
+        >
+          <h2 class="about-us__title section-title section-title--about-us">Who we are</h2>
+
+          <p class="about-us__text text text--big">
+            We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges.
+          </p>
+        </div>
+      </section>
+
+      <section class="main-content__section expertise" id="expertise">
+        <div class="expertise__container">
+          <h2 class="expertise__title section-title section-title--big">Our expertise</h2>
+
+          <div class="expertise__content">
+            <article
+              class="expertise__card card wow animate__fadeInLeft"
+              data-wow-duration="2s"
+              data-wow-offset="200"
+            >
+              <img
+                src="./images/expertises/branding.png"
+                alt="Painting tools"
+                class="card__img"
+              >
+
+              <h3 class="card__title">Branding</h3>
+
+              <p class="card__text text">
+                We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience.
+              </p>
+            </article>
+
+            <article
+              class="expertise__card card wow animate__fadeInUp"
+              data-wow-duration="2s"
+              data-wow-offset="200"
+            >
+              <img
+                src="./images/expertises/communication.png"
+                alt="Posters on the wall"
+                class="card__img"
+              >
+
+              <h3 class="card__title">Communication</h3>
+
+              <p class="card__text text">
+                We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies.
+              </p>
+            </article>
+
+            <article
+              class="expertise__card card wow animate__fadeInRight"
+              data-wow-duration="2s"
+              data-wow-offset="200"
+            >
+              <img
+                src="./images/expertises/branding.png"
+                alt="Painting tools"
+                class="card__img"
+              >
+
+              <h3 class="card__title">Strategy</h3>
+
+              <p class="card__text text">
+                We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators.
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="main-content__section services wow animate__fadeInRight"
+        data-wow-duration="2s"
+        id="services"
+      >
+        <div class="services__container">
+          <h4 class="services__subhead subhead">Services</h4>
+
+          <div class="services__description">
+            <h2 class="services__title section-title section-title--services">Air is a full service creative agency</h2>
+
+            <p class="services__text text">
+              Deep analytics, strong strategy and bright creative ideas.
+              <br>
+              <br>
+              We are sure that first-rate job is possible only if all three components are united.
+            </p>
+          </div>
+
+          <article class="services__service service">
+            <h3 class="service__title service__title--1">001</h3>
+
+            <p class="service__text text text--small">
+              Brand Development<br>
+              Copywriting<br>
+              Logo & Webite Design<br>
+              Packaging
+            </p>
+
+            <a href="#contact-us" class="service__link">
+              <span class="service__icon service__icon--1 icon icon--arrow-right"></span>
+              <span>Learn more</span>
+            </a>
+          </article>
+
+          <article class="services__service service">
+            <h3 class="service__title service__title--2">002</h3>
+
+            <p class="service__text text text--small">
+              Сontent Production<br>
+              Graphic Design<br>
+              Video Production<br>
+              Post Production
+            </p>
+
+            <a href="#contact-us" class="service__link">
+              <span class="service__icon service__icon--2 icon icon--arrow-right"></span>
+              <span>Learn more</span>
+            </a>
+          </article>
+
+          <article class="services__service service">
+            <h3 class="service__title service__title--3">003</h3>
+
+            <p class="service__text text text--small">
+              Marketing Strategy<br>
+              Email Marketing<br>
+              Paid Advertising<br>
+              Blog Content & SEO
+            </p>
+
+            <a href="#contact-us" class="service__link">
+              <span class="service__icon service__icon--3 icon icon--arrow-right"></span>
+              <span>Learn more</span>
+            </a>
+          </article>
+
+          <article class="services__service service">
+            <h3 class="service__title service__title--4">004</h3>
+
+            <p class="service__text text text--small">
+              Digital Communications<br>
+              Influencer Marketing<br>
+              Product Placements<br>
+              Strategic Partnerships
+            </p>
+
+            <a href="#contact-us" class="service__link">
+              <span class="service__icon service__icon--4 icon icon--arrow-right"></span>
+              <span>Learn more</span>
+            </a>
+          </article>
+        </div>
+      </section>
+
+      <section class="main-content__section testimonials" id="testimonials">
+        <div class="testimonials__container">
+          <h4 class="testimonials__subhead subhead">Testimonials</h4>
+
+          <h2 class="testimonials__title section-title section-title--testimonials"><span>What</span> <span>people say</span></h2>
+
+          <div class="testimonials__content">
+            <article
+              class="testimonials__customer customer wow animate__fadeInLeft"
+              data-wow-duration="2s"
+              data-wow-offset="200"
+            >
+              <div class="testimonaials__ava ava">
+                <div class="ava__rectangle ava__rectangle--1 ava__rectangle--first"></div>
+                <img
+                  src="./images/testimonials/testimonial-ava-1.jpg"
+                  alt="Men's ava of the customer with dreadlocks"
+                  class="ava__img"
+                >
+                <div class="ava__rectangle ava__rectangle--1 ava__rectangle--last"></div>
+              </div>
+
+              <span class="customer__icon customer__icon--1 icon"></span>
+
+              <p class="customer__text text text--small">
+                AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand.
+              </p>
+
+              <h5 class="customer__name text text--small">Tal Gilad</h5>
+              <h4 class="customer__subhead subhead">Teach for America</h4>
+            </article>
+
+            <article
+              class="testimonials__customer customer wow animate__fadeInUp"
+              data-wow-duration="2s"
+              data-wow-offset="200"
+            >
+              <div class="testimonaials__ava ava">
+                <div class="ava__rectangle ava__rectangle--2 ava__rectangle--first"></div>
+                <img
+                  src="./images/testimonials/testimonial-ava-2.jpg"
+                  alt="Women's ava of the customer with asian look"
+                  class="ava__img"
+                >
+                <div class="ava__rectangle ava__rectangle--2 ava__rectangle--last"></div>
+              </div>
+
+              <span class="customer__icon customer__icon--2 icon"></span>
+
+              <p class="customer__text text text--small">
+                AIR is an exceptional agency that leads with creative talent, first-class account servicing.
+              </p>
+
+              <h5 class="customer__name text text--small">Azadeh Hawkins</h5>
+              <h4 class="customer__subhead subhead">Hawkins Consulting</h4>
+            </article>
+
+            <article
+              class="testimonials__customer customer wow animate__fadeInRight"
+              data-wow-duration="2s"
+              data-wow-offset="200"
+            >
+              <div class="testimonaials__ava ava">
+                <div class="ava__rectangle ava__rectangle--3 ava__rectangle--first"></div>
+                <img
+                  src="./images/testimonials/testimonial-ava-3.jpg"
+                  alt="Women's ava of the customer with european look"
+                  class="ava__img"
+                >
+                <div class="ava__rectangle ava__rectangle--3 ava__rectangle--last"></div>
+              </div>
+
+              <span class="customer__icon customer__icon--3 icon"></span>
+
+              <p class="customer__text text text--small">
+                AIR raises the agency bar to stratospheric heights on both creative output and client service.
+              </p>
+
+              <h5 class="customer__name text text--small">Michel Grover</h5>
+              <h4 class="customer__subhead subhead">Hulu</h4>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="main-content__section apply-section" id="apply-section">
+        <div
+          class="apply-section__container wow animate__fadeInUp"
+          data-wow-duration="2s"
+          data-wow-offset="200"
+        >
+          <h2 class="apply-section__title section-title section-title--big">Vision, Passion, Results</h2>
+
+          <p class="apply-section__text text text--big">
+            We are sure that first-rate job is possible only if all three components are united.
+          </p>
+
+          <a href="#feedback" class="apply-section__button button">Apply</a>
+        </div>
+      </section>
+    </main>
+
+    <div class="page__footer-wrapper">
+      <footer class="footer page__footer">
+        <div class="footer__container">
+          <section class="footer__feedback feedback" id="feedback">
+            <h2 class="feedback__title section-title section-title--footer section-title--footer--feedback">Send us  a message</h2>
+
+            <form
+              class="feedback__form"
+              onsubmit="this.reset(); return false"
+            >
+              <input
+                type="email"
+                class="feedback__user-email input"
+                id="user-email"
+                placeholder="Your email"
+                required
+                autocomplete="email"
+              >
+
+              <input
+                type="text"
+                class="feedback__user-name input"
+                id="user-name"
+                placeholder="Your name"
+                required
+                autocomplete="given-name"
+              >
+
+              <textarea
+                id="user-message"
+                class="feedback__user-message input"
+                placeholder="Your message"
+                rows="1"
+                required
+                oninput="autoResize(this)"
+              ></textarea>
+
+              <button type="submit" class="feedback__button button">Send</button>
+            </form>
+          </section>
+
+          <section class="footer__contact-us contact-us" id="contact-us">
+            <h2 class="contact-us__title section-title section-title--footer">Contact us</h2>
+
+            <article class="contact-us__article">
+              <h4 class="subhead">Call us</h4>
+              <a href="tel:653 321 987" class="contact-us__link">654 321 987</a>
+            </article>
+
+            <article class="contact-us__article">
+              <h4 class="subhead">Visit us</h4>
+              <a
+                href="https://www.google.com/maps?q=2905 West Drive, Buffalo Grove"
+                class="contact-us__link"
+                target="_blank"
+              >
+                2905 West Drive, Buffalo Grove
+              </a>
+            </article>
+
+            <article class="contact-us__article">
+              <h4 class="subhead">Our socials</h4>
+              <div class="contact-us__social-links">
+                <a
+                href="https://www.facebook.com/kpszsu"
+                class="contact-us__social-link"
+                target="_blank"
+                >
+                  <span class="fa-brands fa-facebook-f contact-us__icon"></span>
+                </a>
+
+                <a
+                  href="https://twitter.com/KpsZSU"
+                  class="contact-us__social-link"
+                  target="_blank"
+                >
+                  <span class="fa-brands fa-twitter contact-us__icon"></span>
+                </a>
+
+                <a
+                  href="https://www.instagram.com/air.force.ua.official/"
+                  class="contact-us__social-link"
+                  target="_blank"
+                >
+                  <span class="fa-brands fa-instagram contact-us__icon"></span>
+                </a>
+              </div>
+            </article>
+          </section>
+
+          <section class="footer__bottom-bar bottom-bar">
+            <a href="#" class="bottom-bar__link logo-link">
+              <img
+                src="./images/logo/air-logo.svg"
+                alt="Air logo"
+                class="bottom-bar__logo"
+              >
+            </a>
+
+            <nav class="nav">
+              <ul class="nav__list nav__list--mobile nav__list--mobile--footer">
+                <li class="nav__item">
+                  <a href="#about-us" class="nav__link link subhead">About Us</a>
+                </li>
+                <li class="nav__item">
+                  <a href="#services" class="nav__link link subhead">Services</a>
+                </li>
+                <li class="nav__item">
+                  <a href="#testimonials" class="nav__link link subhead">Testimonials</a>
+                </li>
+                <li class="nav__item">
+                  <a href="#contact-us" class="nav__link link subhead">Contact Us</a>
+                </li>
+              </ul>
+            </nav>
+          </section>
+        </div>
+      </footer>
+    </div>
+
+    <script type="text/javascript" src="scripts/light-theme.js"></script>
+    <script type="text/javascript" src="scripts/swiper.js"></script>
+    <script>
+      window.addEventListener('load', function() {
+        window.scrollTo(0, 0);
+        var currentURL = window.location.href;
+
+        var cleanURL = currentURL.split('#')[0].split('?')[0];
+
+        window.history.replaceState({}, document.title, cleanURL);
+      });
+
+      function autoResize(textarea) {
+        textarea.style.height = 'auto';
+        textarea.style.height = (textarea.scrollHeight - 32) + 'px';
+      }
+    </script>
   </body>
 </html>
diff --git a/src/scripts/light-theme.js b/src/scripts/light-theme.js
new file mode 100644
index 0000000000..8f2f5c628e
--- /dev/null
+++ b/src/scripts/light-theme.js
@@ -0,0 +1,134 @@
+'use strict';
+
+const page = document.documentElement;
+const switchers = document.querySelectorAll('.page__theme-switcher');
+const links = document.querySelectorAll('.link');
+const buttons = document.querySelectorAll('.button');
+const inputs = document.querySelectorAll('.input');
+const services = document.querySelectorAll('.service');
+const contactUs = document.querySelector('.contact-us');
+const avas = document.querySelectorAll('.ava');
+const customers = document.querySelectorAll('.customer');
+
+function setThemeBasedOnUserPreference() {
+  if (window.matchMedia
+    && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    if (page.classList.contains('.page--theme--light')) {
+      page.classList.remove('page--theme--light');
+      contactUs.classList.remove('contact-us--theme--light');
+
+      links.forEach(link => {
+        link.classList.remove('link--theme--light');
+      });
+
+      buttons.forEach(button => {
+        button.classList.remove('button--theme--light');
+      });
+
+      inputs.forEach(input => {
+        input.classList.remove('input--theme--light');
+      });
+
+      services.forEach(service => {
+        service.classList.remove('service--theme--light');
+      });
+
+      avas.forEach(ava => {
+        ava.classList.remove('ava--theme--light');
+      });
+
+      customers.forEach(customer => {
+        customer.classList.remove('customer--theme--light');
+      });
+    }
+  } else {
+    page.classList.add('page--theme--light');
+    contactUs.classList.add('contact-us--theme--light');
+
+    links.forEach(link => {
+      link.classList.add('link--theme--light');
+    });
+
+    buttons.forEach(button => {
+      button.classList.add('button--theme--light');
+    });
+
+    inputs.forEach(input => {
+      input.classList.add('input--theme--light');
+    });
+
+    services.forEach(service => {
+      service.classList.add('service--theme--light');
+    });
+
+    avas.forEach(ava => {
+      ava.classList.add('ava--theme--light');
+    });
+
+    customers.forEach(customer => {
+      customer.classList.add('customer--theme--light');
+    });
+  }
+}
+
+setThemeBasedOnUserPreference();
+
+switchers.forEach(switcher => {
+  switcher.addEventListener('click', () => {
+    if (page.classList.contains('page--theme--light')) {
+      page.classList.remove('page--theme--light');
+      contactUs.classList.remove('contact-us--theme--light');
+
+      links.forEach(link => {
+        link.classList.remove('link--theme--light');
+      });
+
+      buttons.forEach(button => {
+        button.classList.remove('button--theme--light');
+      });
+
+      inputs.forEach(input => {
+        input.classList.remove('input--theme--light');
+      });
+
+      services.forEach(service => {
+        service.classList.remove('service--theme--light');
+      });
+
+      avas.forEach(ava => {
+        ava.classList.remove('ava--theme--light');
+      });
+
+      customers.forEach(customer => {
+        customer.classList.remove('customer--theme--light');
+      });
+    } else {
+      page.classList.add('page--theme--light');
+      contactUs.classList.add('contact-us--theme--light');
+
+      links.forEach(link => {
+        link.classList.add('link--theme--light');
+      });
+
+      buttons.forEach(button => {
+        button.classList.add('button--theme--light');
+      });
+
+      inputs.forEach(input => {
+        input.classList.add('input--theme--light');
+      });
+
+      services.forEach(service => {
+        service.classList.add('service--theme--light');
+      });
+
+      avas.forEach(ava => {
+        ava.classList.add('ava--theme--light');
+      });
+
+      customers.forEach(customer => {
+        customer.classList.add('customer--theme--light');
+      });
+    }
+  });
+});
diff --git a/src/scripts/main.js b/src/scripts/main.js
index ad9a93a7c1..b8ac33d133 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1 +1,36 @@
 'use strict';
+// import swiper from './swiper';
+// swiper.start();
+
+// import Swiper from 'swiper/swiper-bundle.min.mjs';
+
+// const swiper = new Swiper('.swiper', {
+//   loop: true,
+//   grabCursor: true,
+//   speed: 1500,
+//   effect: 'fade',
+//   crossFade: true,
+
+//   navigation: {
+//     nextEl: '.swiper__button--next',
+//     prevEl: '.swiper__button--prev',
+//   },
+
+//   autoplay: {
+//     delay: 3000,
+//     disableOnInteraction: false,
+//     pauseOnMouseEnter: true,
+//   },
+
+//   on: {
+//     transitionStart: function() {
+//       swiper.params.speed = 1500;
+//     },
+//     transitionEnd: function() {
+//       swiper.params.speed = 300;
+//     },
+//     click: function() {
+//       swiper.params.speed = 300;
+//     },
+//   },
+// });
diff --git a/src/scripts/swiper.js b/src/scripts/swiper.js
new file mode 100644
index 0000000000..359d1042c0
--- /dev/null
+++ b/src/scripts/swiper.js
@@ -0,0 +1,33 @@
+'use strict';
+import Swiper from 'swiper/swiper-bundle.min.mjs';
+
+const swiper = new Swiper('.swiper', {
+  loop: true,
+  grabCursor: true,
+  speed: 1500,
+  effect: 'fade',
+  crossFade: true,
+
+  navigation: {
+    nextEl: '.swiper__button--next',
+    prevEl: '.swiper__button--prev',
+  },
+
+  autoplay: {
+    delay: 3000,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: true,
+  },
+
+  on: {
+    transitionStart: function() {
+      swiper.params.speed = 1500;
+    },
+    transitionEnd: function() {
+      swiper.params.speed = 300;
+    },
+    click: function() {
+      swiper.params.speed = 300;
+    },
+  },
+});
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
deleted file mode 100644
index 2067b3fca2..0000000000
--- a/src/styles/_fonts.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
-  font-family: "Roboto";
-  src: url("../fonts/Roboto-Regular-webfont.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
index 1837eb46e2..eb94f6d79a 100644
--- a/src/styles/_typography.scss
+++ b/src/styles/_typography.scss
@@ -1,3 +1,15 @@
-h1 {
-  @extend %h1;
+h1,
+h2,
+h3,
+h4,
+.link,
+.button,
+.subhead,
+.input {
+  @extend %poppins;
+}
+
+a,
+button {
+  @extend %link;
 }
diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss
new file mode 100644
index 0000000000..efa6cc46a9
--- /dev/null
+++ b/src/styles/blocks/about-us.scss
@@ -0,0 +1,27 @@
+.about-us {
+
+  &__content {
+    @include page-padding-inline;
+    @include grid-template;
+  }
+
+  &__title {
+    grid-column: 1 / -1;
+  }
+
+  &__text {
+    grid-column: 1 / -1;
+
+    text-align: center;
+
+    margin-top: 24px;
+
+    @include onSmallDesktop {
+      grid-column: 2 / -2;
+    }
+
+    @include onBigDesktop {
+      grid-column: 3 / -3;
+    }
+  }
+}
diff --git a/src/styles/blocks/apply-section.scss b/src/styles/blocks/apply-section.scss
new file mode 100644
index 0000000000..40f6ac33a6
--- /dev/null
+++ b/src/styles/blocks/apply-section.scss
@@ -0,0 +1,38 @@
+.apply-section {
+  background-color: white;
+  background-image: url("../images/Shapes.png");
+  background-repeat: no-repeat;
+  background-size: auto;
+  background-position: center;
+
+  @include max-width-centered-onBigDesktop;
+
+  &__container {
+    @include page-padding-inline;
+    @include max-width-centered;
+    max-width: 754px;
+    padding-block: 72px;
+
+    @include onTablet {
+      padding-block: 200px;
+    }
+  }
+
+  &__text {
+    text-align: center;
+
+    margin-top: 24px;
+  }
+
+  &__button {
+    padding-top: 17px;
+    padding-bottom: 16px;
+
+    margin: 0 auto;
+    margin-top: 56px;
+
+    @include onTablet {
+      margin-top: 64px;
+    }
+  }
+}
diff --git a/src/styles/blocks/ava.scss b/src/styles/blocks/ava.scss
new file mode 100644
index 0000000000..2ab8983308
--- /dev/null
+++ b/src/styles/blocks/ava.scss
@@ -0,0 +1,88 @@
+.ava {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  --sky-color: #2060f6;
+  --yellow-color: #2060f6;
+  --red-color: #2060f6;
+
+  &--theme--light {
+    --sky-color: #56ccf2;
+    --yellow-color: #fcc91d;
+    --red-color: #f36363;
+  }
+
+  &__img {
+    width: 110px;
+    height: 110px;
+    border-radius: 100%;
+    object-fit: cover;
+    object-position: center;
+    z-index: 2;
+    position: relative;
+
+    @include scale(1.5);
+
+    @include onTablet {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include onSmallDesktop {
+      width: 110px;
+      height: 110px;
+    }
+
+    @include onMidDesktop {
+      width: 140px;
+      height: 140px;
+    }
+  }
+
+  &__rectangle {
+    transform: rotate(-60deg);
+    position: relative;
+    width: 109px;
+    height: 44px;
+    border-radius: 12px;
+
+    &--1 {
+      background-color: var(--sky-color);
+    }
+
+    &--2 {
+      background-color: var(--yellow-color);
+    }
+
+    &--3 {
+      background-color: var(--red-color);
+    }
+
+    @include onTablet {
+      width: 139px;
+      height: 56px;
+    }
+
+    @include onSmallDesktop {
+      width: 109px;
+      height: 44px;
+    }
+
+    @include onMidDesktop {
+      width: 139px;
+      height: 56px;
+    }
+
+    &--first {
+      top: 20%;
+      right: 35%;
+    }
+
+    &--last {
+      bottom: 20%;
+      left: 35%;
+    }
+  }
+}
diff --git a/src/styles/blocks/bottom-bar.scss b/src/styles/blocks/bottom-bar.scss
new file mode 100644
index 0000000000..3f7f713e29
--- /dev/null
+++ b/src/styles/blocks/bottom-bar.scss
@@ -0,0 +1,16 @@
+.bottom-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+
+  @include onTablet {
+    gap: 24px;
+  }
+
+  @include onSmallDesktop {
+    flex-direction: row;
+    gap: 0;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
new file mode 100644
index 0000000000..599945e5d5
--- /dev/null
+++ b/src/styles/blocks/button.scss
@@ -0,0 +1,27 @@
+.button {
+  --btn-color: #2060f6;
+  --hover-btn-color: #144ed4;
+
+  border: none;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  background-color: var(--btn-color);
+  border-radius: 8px;
+  text-align: center;
+
+  @include hover(background-color, var(--hover-btn-color));
+
+  @include onTablet {
+    width: 264px;
+  }
+
+  &--theme--light {
+    --btn-color: #ff9c8e;
+    --hover-btn-color: #ff7e6c;
+    border-radius: 64px;
+  }
+}
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss
new file mode 100644
index 0000000000..377ac4c303
--- /dev/null
+++ b/src/styles/blocks/card.scss
@@ -0,0 +1,43 @@
+.card {
+  width: 100%;
+  max-width: 362px;
+
+  @include onSmallDesktop {
+    width: 214px;
+  }
+
+  @include onBigDesktop {
+    width: 264px;
+  }
+
+  &__img {
+    display: block;
+    width: 166px;
+    height: 166px;
+    object-fit: cover;
+    object-position: center;
+
+    border-radius: 15px;
+
+    margin: 0 auto;
+
+    @include scale(1.2);
+  }
+
+  &__title {
+    color: $mainAccent;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 140%;
+
+    text-align: center;
+
+    margin-top: 32px;
+  }
+
+  &__text {
+    text-align: center;
+
+    margin-top: 16px;
+  }
+}
diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss
new file mode 100644
index 0000000000..7fd1769fd9
--- /dev/null
+++ b/src/styles/blocks/contact-us.scss
@@ -0,0 +1,56 @@
+.contact-us {
+  --hover-color: #2060f6;
+
+  &--theme--light {
+    --hover-color: #ff9c8e;
+  }
+
+  &__title {
+    margin-bottom: 8px;
+  }
+
+  &__article {
+    margin-top: 40px;
+
+    @include onTablet {
+      margin-top: 48px;
+    }
+  }
+
+  &__link {
+    color: white;
+    font-size: 24px;
+    line-height: 150%;
+
+    margin-top: 8px;
+
+    @include hover(color, var(--hover-color));
+  }
+
+  &__social-links {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+
+    margin-top: 16px;
+  }
+
+  &__icon {
+    color: white;
+    font-size: 24px;
+    transition: 0.5s;
+  }
+
+  &__social-link {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+
+    &:hover .contact-us__icon {
+      color: var(--hover-color);
+    }
+  }
+}
diff --git a/src/styles/blocks/customer.scss b/src/styles/blocks/customer.scss
new file mode 100644
index 0000000000..c55a550f36
--- /dev/null
+++ b/src/styles/blocks/customer.scss
@@ -0,0 +1,66 @@
+.customer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  border-radius: 16px;
+  box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03);
+
+  --sky-quotes: url("../images/icons/double-quotes.svg");
+  --yellow-quotes: url("../images/icons/double-quotes.svg");
+  --red-quotes: url("../images/icons/double-quotes.svg");
+
+  &--theme--light {
+    --sky-quotes: url("../images/icons/sky-double-quotes.svg");
+    --yellow-quotes: url("../images/icons/yellow-double-quotes.svg");
+    --red-quotes: url("../images/icons/red-double-quotes.svg");
+  }
+
+  &__icon {
+    margin-top: 23px;
+
+    &--1 {
+      background-image: var(--sky-quotes);
+    }
+
+    &--2 {
+      background-image: var(--yellow-quotes);
+    }
+
+    &--3 {
+      background-image: var(--red-quotes);
+    }
+
+  }
+
+  &__text {
+    text-align: center;
+
+    margin-top: 8px;
+    padding-inline: 42px;
+
+    @include onTablet {
+      margin-top: 16px;
+      padding-inline: 98px;
+    }
+
+    @include onSmallDesktop {
+      margin-top: 8px;
+      padding-inline: 48px;
+    }
+
+    @include onMidDesktop {
+      padding-inline: 56px;
+    }
+  }
+
+  &__name {
+    color: $mainAccent;
+
+    margin-top: 16px;
+  }
+
+  &__subhead {
+    margin-top: 4px;
+  }
+}
diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss
new file mode 100644
index 0000000000..c59e476c35
--- /dev/null
+++ b/src/styles/blocks/expertise.scss
@@ -0,0 +1,42 @@
+.expertise {
+  background-color: white;
+  border-radius: 30px;
+
+  @include max-width-centered-onBigDesktop;
+
+  &__container {
+    @include page-padding-inline;
+    padding-block: 72px;
+
+    @include onTablet {
+      padding-block: 128px;
+    }
+
+    @include onSmallDesktop {
+      padding-bottom: 134px;
+    }
+  }
+
+  &__title {
+    margin-bottom: 56px;
+
+    @include onTablet {
+      margin-bottom: 64px;
+    }
+  }
+
+  &__content {
+    @include max-width-centered;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 56px;
+
+    @include onSmallDesktop {
+      flex-direction: row;
+      gap: 0;
+      justify-content: space-between;
+    }
+  }
+}
diff --git a/src/styles/blocks/feedback.scss b/src/styles/blocks/feedback.scss
new file mode 100644
index 0000000000..3edebfc66d
--- /dev/null
+++ b/src/styles/blocks/feedback.scss
@@ -0,0 +1,41 @@
+.feedback {
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    @include onTablet {
+      gap: 32px;
+    }
+  }
+
+  &__title {
+    margin-bottom: 32px;
+
+    @include onTablet {
+      margin-bottom: 40px;
+    }
+  }
+
+  &__user-message {
+    resize: none;
+  }
+
+  &__button {
+    padding-top: 17px;
+    padding-bottom: 16px;
+
+    margin: 0 auto;
+    margin-top: 28px;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    @include onTablet {
+      margin-left: 0;
+      margin-top: 48px;
+    }
+  }
+}
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
new file mode 100644
index 0000000000..4a1069d653
--- /dev/null
+++ b/src/styles/blocks/footer.scss
@@ -0,0 +1,58 @@
+.footer {
+  color: white;
+
+  &__container {
+    @include grid-template;
+    @include page-padding-inline;
+    padding-top: 72px;
+    padding-bottom: 80px;
+
+    @include onTablet {
+      padding-top: 180px;
+    }
+  }
+
+  &__feedback {
+    grid-column: 1 / -1;
+
+    @include onTablet {
+      grid-column: 1 / 5;
+    }
+
+    @include onSmallDesktop {
+      grid-column: 1 / 6;
+    }
+  }
+
+  &__contact-us {
+    grid-column: 1 / -1;
+    margin-top: 80px;
+
+    @include onTablet {
+      grid-column: 1 / 5;
+      margin-top: 120px;
+    }
+
+    @include onSmallDesktop {
+      grid-column: 7 / -2;
+      margin: 0;
+    }
+
+    @include onMidDesktop {
+      grid-column: 8 / -2;
+    }
+  }
+
+  &__bottom-bar {
+    grid-column: 1 / -1;
+    margin-top: 80px;
+
+    @include onTablet {
+      margin-top: 140px;
+    }
+
+    @include onSmallDesktop {
+      margin-top: 120px;
+    }
+  }
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
new file mode 100644
index 0000000000..7fd0c4619a
--- /dev/null
+++ b/src/styles/blocks/header.scss
@@ -0,0 +1,131 @@
+.header {
+  color: white;
+  @include max-width-centered-onBigDesktop;
+
+  &__top-bar {
+    @include max-width-centered;
+  }
+
+  &__container {
+    @include page-padding-inline;
+    padding-top: 18px;
+
+    @include onSmallDesktop {
+      padding-top: 52px;
+      padding-bottom: 205px;
+    }
+  }
+
+  &__content {
+    @include grid-template;
+
+    margin-top: 48px;
+
+    @include onTablet {
+      margin-top: 56px;
+    }
+
+    @include onSmallDesktop {
+      margin-top: 156px;
+    }
+  }
+
+  &__title {
+    grid-column: 1 / -1;
+
+    font-size: 52px;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: -2px;
+    margin: 0;
+
+    @include onTablet {
+      font-size: 64px;
+      line-height: 68px;
+    }
+
+    @include onSmallDesktop {
+      grid-column: 1 / 6;
+    }
+
+    @include onMidDesktop {
+      grid-column: 1 / 5;
+    }
+  }
+
+  &__text {
+    grid-column: 1 / -1;
+    color: white;
+
+    margin-top: 32px;
+
+    @include onTablet {
+      grid-column: 1 / 5;
+      margin-top: 24px;
+    }
+
+    @include onSmallDesktop {
+      grid-column: 1 / 6;
+      margin-top: 32px;
+    }
+
+    @include onMidDesktop {
+      grid-column: 1 / 5;
+    }
+  }
+
+  &__button {
+    grid-column: 1 / -1;
+
+    padding-top: 14px;
+    padding-bottom: 13px;
+
+    margin-top: 72px;
+
+    @include onTablet {
+      margin-top: 56px;
+    }
+
+    @include onSmallDesktop {
+      margin-top: 83px;
+    }
+  }
+
+  &__swiper {
+    position: relative;
+    bottom: 0;
+    height: 390px;
+    width: 100%;
+
+    margin-top: 44px;
+
+    @include onTablet {
+      margin-top: 143px;
+    }
+
+    @include onSmallDesktop {
+      top: 120px;
+      right: 0;
+      height: auto;
+      width: 49%;
+      left: 51%;
+    }
+
+    @include onBigDesktop {
+      width: 43%;
+      left: 57%;
+    }
+
+    @include onLargeScreen {
+      width: 46%;
+      left: 54%;
+    }
+  }
+}
+
+#header__swiper {
+  @include onSmallDesktop {
+    position: absolute;
+    margin: 0;
+  }
+}
diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
new file mode 100644
index 0000000000..5e9f820bb8
--- /dev/null
+++ b/src/styles/blocks/icon.scss
@@ -0,0 +1,23 @@
+.icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &--menu {
+    background-image: url("../images/icons/icon-menu.svg");
+
+    @include onSmallDesktop {
+      display: none;
+    }
+  }
+
+  &--close {
+    background-image: url("../images/icons/icon-close.svg");
+  }
+
+  &--arrow-right {
+    background-image: url("../images/icons/icon-arrow-right.svg");
+  }
+}
diff --git a/src/styles/blocks/input.scss b/src/styles/blocks/input.scss
new file mode 100644
index 0000000000..4cc0eeb888
--- /dev/null
+++ b/src/styles/blocks/input.scss
@@ -0,0 +1,44 @@
+.input {
+  --form-bg: #2c2c2c;
+  --brdr-color: #144ed4;
+
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  background-color: var(--form-bg);
+  padding: 16px 0;
+  border: none;
+  border-bottom: 1px solid white;
+
+  @include hover(border-color, var(--brdr-color));
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus {
+    border-bottom: 2px solid var(--brdr-color);
+  }
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-text-fill-color: white;
+    -webkit-box-shadow: 0 0 0 1000px var(--form-bg) inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  &:focus:invalid {
+    border-color: red;
+  }
+
+  &::placeholder {
+    color: white;
+    opacity: 0.7;
+  }
+
+  &--theme--light {
+    --form-bg: #008aff;
+    --brdr-color: #ff9c8e;
+  }
+}
diff --git a/src/styles/blocks/link.scss b/src/styles/blocks/link.scss
new file mode 100644
index 0000000000..2a2328f832
--- /dev/null
+++ b/src/styles/blocks/link.scss
@@ -0,0 +1,40 @@
+.link {
+  --underscoreAccent: #2060f6;
+
+  display: inline-block;
+  position: relative;
+  color: white;
+  padding-bottom: 8px;
+
+  @include hover(color, $grayAccent);
+
+  &::after {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    content: "";
+    background-color: var(--underscoreAccent);
+    width: 100%;
+    height: 2px;
+    transition: transform 0.3s;
+    transform: scale(0);
+    border-radius: 4px;
+  }
+
+  &--theme--light {
+    --underscoreAccent: #ff9c8e;
+  }
+
+  &--hire-us {
+    @include scale(1.7);
+    &::after {
+      transform: scale(1);
+    }
+  }
+
+  &:hover {
+    &::after {
+      transform: scale(1);
+    }
+  }
+}
diff --git a/src/styles/blocks/logo-link.scss b/src/styles/blocks/logo-link.scss
new file mode 100644
index 0000000000..eb9f6f7c73
--- /dev/null
+++ b/src/styles/blocks/logo-link.scss
@@ -0,0 +1,5 @@
+.logo-link {
+  height: 28px;
+  @include scale(1.7);
+  @include to-default_on-click(transform, scale(1));
+}
diff --git a/src/styles/blocks/main-content.scss b/src/styles/blocks/main-content.scss
new file mode 100644
index 0000000000..6b9c04da1c
--- /dev/null
+++ b/src/styles/blocks/main-content.scss
@@ -0,0 +1,13 @@
+.main-content {
+  &__section {
+    margin-top: 120px;
+
+    @include onTablet {
+      margin-top: 148px;
+    }
+
+    @include onBigDesktop {
+      margin-top: 148px;
+    }
+  }
+}
diff --git a/src/styles/blocks/mobile-menu.scss b/src/styles/blocks/mobile-menu.scss
new file mode 100644
index 0000000000..fa711f9654
--- /dev/null
+++ b/src/styles/blocks/mobile-menu.scss
@@ -0,0 +1,8 @@
+.mobile-menu {
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+}
diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss
new file mode 100644
index 0000000000..ee86a789b9
--- /dev/null
+++ b/src/styles/blocks/nav.scss
@@ -0,0 +1,22 @@
+.nav {
+  &__list {
+    list-style: none;
+    display: flex;
+    gap: 48px;
+
+    &--mobile {
+      margin-top: 48px;
+      flex-direction: column;
+      gap: 24px;
+
+      &--footer {
+        margin: 0;
+
+        @include onTablet {
+          flex-direction: row;
+          gap: 40px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
new file mode 100644
index 0000000000..d3fa8b9855
--- /dev/null
+++ b/src/styles/blocks/page.scss
@@ -0,0 +1,143 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.page {
+  transition: color 0.5s, background-color 0.5s;
+
+  --page-bg: #f2f6fa;
+  --header-footer-bg: #2c2c2c;
+  --bg-icon: url("../images/icons/icon-moon.svg");
+  --move: translateX(0);
+
+  --header-border-rds: 0 0 30px 30px;
+  --footer-border-rds: 30px 30px 0 0;
+  --swiper-border-rds: 30px;
+
+  @include onSmallDesktop {
+    --swiper-border-rds: 30px 0;
+  }
+
+  &--theme--light {
+    --page-bg: #f2f9ff;
+    --header-footer-bg: #008aff;
+    --bg-icon: url("../images/icons/icon-sun.svg");
+    --move: translateX(100%);
+
+    --header-border-rds: 0 0 0 200px;
+    --footer-border-rds: 0 200px 0 0;
+    --swiper-border-rds: 200px 0 0 0;
+
+    @include onSmallDesktop {
+      --swiper-border-rds: 200px 0 0 0;
+    }
+  }
+
+  font-family: "Open Sans", sans-serif;
+  line-height: 150%;
+  scroll-behavior: smooth;
+
+  &:has(.page__mobile-menu:target) {
+    overflow: hidden;
+  }
+
+  &__body {
+    margin: 0;
+    background: var(--page-bg);
+  }
+
+  &__header {
+    position: relative;
+    background-color: var(--header-footer-bg);
+    border-radius: var(--header-border-rds);
+
+    transition: 0.5s;
+  }
+
+  &__mobile-menu {
+    background-color: var(--header-footer-bg);
+
+    @include page-padding-inline;
+    padding-top: 18px;
+
+    transform: translateX(100%);
+
+    transition: 0.5s;
+
+    &:target {
+      transform: translate(0);
+    }
+
+    @include onSmallDesktop {
+      display: none;
+    }
+  }
+
+  &__footer-wrapper {
+    background-color: var(--page-bg);
+    @include max-width-centered-onBigDesktop;
+
+    margin-top: 120px;
+
+    @include onTablet {
+      margin-top: 0;
+    }
+
+    @include onTablet {
+      background-color: white;
+    }
+  }
+
+  &__footer {
+    background-color: var(--header-footer-bg);
+    border-radius: var(--footer-border-rds);
+
+    transition: 0.5s;
+  }
+
+  &__swiper {
+    border-radius: var(--swiper-border-rds);
+    transition: 0.5s;
+  }
+
+  &__switcher {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+    color: white;
+
+    transition: 0.5s;
+  }
+
+  &__theme-switcher {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 5px;
+    width: 40px;
+    height: 25px;
+    background-color: var(--page-bg);
+    border-radius: 20px;
+    cursor: pointer;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 50%;
+      background-image: var(--bg-icon);
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      border-radius: 100%;
+      padding-bottom: 50%;
+      transform: var(--move);
+      transition: 0.5s;
+    }
+  }
+}
diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss
new file mode 100644
index 0000000000..d54e2727d3
--- /dev/null
+++ b/src/styles/blocks/section-title.scss
@@ -0,0 +1,38 @@
+.section-title {
+  color: $mainAccent;
+  text-align: left;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 150%;
+
+  &--about-us {
+    text-align: center;
+  }
+
+  &--big {
+    font-size: 44px;
+    line-height: 120%;
+    text-align: center;
+
+    @include onTablet {
+      font-size: 52px;
+      line-height: 150%;
+    }
+  }
+
+  &--services {
+    line-height: 130%;
+  }
+
+  &--footer {
+    color: white;
+
+    &--feedback {
+      line-height: 130%;
+
+      @include onTablet {
+        line-height: 150%;
+      }
+    }
+  }
+}
diff --git a/src/styles/blocks/service.scss b/src/styles/blocks/service.scss
new file mode 100644
index 0000000000..aaa3fe7df3
--- /dev/null
+++ b/src/styles/blocks/service.scss
@@ -0,0 +1,102 @@
+.service {
+  background-color: white;
+  border-radius: 16px;
+  box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03);
+
+  --sky-color: #2060f6;
+  --sky-color-bg: #2060f610;
+  --yellow-color: #2060f6;
+  --yellow-color-bg: #2060f610;
+  --green-color: #2060f6;
+  --green-color-bg: #2060f610;
+  --red-color: #2060f6;
+  --red-color-bg: #2060f610;
+
+  &--theme--light {
+    --sky-color: #56ccf2;
+    --sky-color-bg: #56ccf210;
+    --yellow-color: #fcc91d;
+    --yellow-color-bg: #fcc91d10;
+    --green-color: #15d850;
+    --green-color-bg: #15d85010;
+    --red-color: #f36363;
+    --red-color-bg: #f3636310;
+  }
+
+  &__title {
+    display: inline-block;
+
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    border-radius: 23px;
+
+    padding: 2px 12px;
+    margin-bottom: 24px;
+
+    &--1 {
+      color: var(--sky-color);
+      background-color: var(--sky-color-bg);
+    }
+
+    &--2 {
+      color: var(--yellow-color);
+      background-color: var(--yellow-color-bg);
+    }
+
+    &--3 {
+      color: var(--green-color);
+      background-color: var(--green-color-bg);
+    }
+
+    &--4 {
+      color: var(--red-color);
+      background-color: var(--red-color-bg);
+    }
+  }
+
+  &__text {
+    margin-bottom: 32px;
+  }
+
+  &__icon {
+    padding: 8px;
+    border-radius: 100%;
+    transition: transform 0.5s;
+
+    &--1 {
+      background-color: var(--sky-color);
+    }
+
+    &--2 {
+      background-color: var(--yellow-color);
+    }
+
+    &--3 {
+      background-color: var(--green-color);
+    }
+
+    &--4 {
+      background-color: var(--red-color);
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    gap: 16px;
+
+    color: #334563;
+    font-size: 15px;
+    font-weight: 600;
+
+    @include onSmallDesktop {
+      &:hover .icon--arrow-right {
+        transform: scale(1.2);
+        @include to-default_on-click(transform, scale(1));
+
+      }
+    }
+  }
+}
diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss
new file mode 100644
index 0000000000..35bab2f979
--- /dev/null
+++ b/src/styles/blocks/services.scss
@@ -0,0 +1,98 @@
+.services {
+
+  &__container {
+    @include page-padding-inline;
+    @include grid-template;
+  }
+
+  &__description {
+    grid-column: 1 / -1;
+    margin-bottom: 48px;
+
+    @include onTablet {
+      grid-column: 1 / 4;
+      margin-bottom: 56px;
+    }
+
+    @include onSmallDesktop {
+      grid-column: 1 / 5;
+      margin: 0;
+    }
+  }
+
+  &__subhead {
+    grid-column: 1 / -1;
+
+    margin-bottom: 16px;
+
+    @include onSmallDesktop {
+      margin-top: 95px;
+    }
+  }
+
+  &__title {
+    margin-bottom: 24px;
+  }
+
+  &__service {
+    grid-column: 1 / -1;
+    margin-top: 24px;
+    padding: 32px 0 32px 32px;
+    height: fit-content;
+
+    @include scale(1.1);
+    @include hover(box-shadow, 0 9px 18px 0 rgba(37, 41, 49, 0.5));
+
+    &:nth-of-type(1) {
+      margin: 0;
+    }
+
+    &:nth-of-type(2) {
+      @include onTablet {
+        margin: 0;
+      }
+    }
+
+    @include onTablet {
+      margin-top: 30px;
+    }
+
+    @include onSmallDesktop {
+      margin-top: 20px;
+    }
+
+    @include onBigDesktop {
+      margin-top: 30px;
+    }
+
+    &:nth-of-type(2n + 1) {
+      grid-column: 1 / -1;
+
+      @include onTablet {
+        grid-column: 1 / 4;
+      }
+
+      @include onSmallDesktop {
+        grid-column: 7 / 10;
+      }
+    }
+
+    &:nth-of-type(2n) {
+      grid-column: 1 / -1;
+      transform-origin: top;
+
+      @include onTablet {
+        grid-column: 4 / -1;
+        transform: translateY(-50%);
+      }
+
+      @include onSmallDesktop {
+        grid-column: 10 / -1;
+
+        &:hover {
+          transform: scale(1.1) translateY(-50%);
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/blocks/subhead.scss b/src/styles/blocks/subhead.scss
new file mode 100644
index 0000000000..6e06172880
--- /dev/null
+++ b/src/styles/blocks/subhead.scss
@@ -0,0 +1,7 @@
+.subhead {
+  color: $grayAccent;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+}
diff --git a/src/styles/blocks/swiper.scss b/src/styles/blocks/swiper.scss
new file mode 100644
index 0000000000..5b270a74b1
--- /dev/null
+++ b/src/styles/blocks/swiper.scss
@@ -0,0 +1,93 @@
+.swiper {
+
+  &-slide {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        to bottom,
+        transparent 50%,
+        rgba(0, 0, 0, 0.3) 100%
+      );
+      z-index: 1;
+    }
+  }
+
+  &__picture {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  &__content {
+    padding-inline: 20px;
+    position: absolute;
+    bottom: 24px;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    @include onTablet {
+      bottom: 32px;
+      padding-inline: 41px;
+    }
+
+    @include onSmallDesktop {
+      padding-left: 78px;
+      bottom: 48px;
+      flex-direction: row;
+      align-items: center;
+      gap: 24px;
+    }
+
+    @include onBigDesktop {
+      padding-inline: 48px;
+    }
+  }
+
+  &__subhead {
+    color: white;
+  }
+
+  &__text {
+    margin-top: 8px;
+    color: white;
+  }
+
+  &__controls {
+    display: flex;
+    gap: 16px;
+  }
+
+  &__button {
+    @include hover(box-shadow, 0 0 20px 10px rgba(255, 255, 255, 0.5));
+    @include hover(background-color, $secondaryAccent);
+    @include scale(1.2);
+    @include to-default_on-click(transform, scale(1));
+
+    width: 32px;
+    height: 32px;
+    background-color: white;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto;
+    border-radius: 100%;
+    cursor: pointer;
+
+    &--prev {
+      background-image: url("../images/slider/arrow-left.svg");
+    }
+
+    &--next {
+      background-image: url("../images/slider/arrow-right.svg");
+    }
+  }
+}
diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss
new file mode 100644
index 0000000000..6580d8c1bc
--- /dev/null
+++ b/src/styles/blocks/testimonials.scss
@@ -0,0 +1,49 @@
+.testimonials {
+
+  &__container {
+    @include page-padding-inline;
+    @include max-width-centered;
+  }
+
+  &__subhead {
+    margin-bottom: 16px;
+  }
+
+  &__title {
+    display: inline-block;
+
+    margin-bottom: 48px;
+
+    @include onTablet {
+      margin-bottom: 56px;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    @include onSmallDesktop {
+      margin-bottom: 85px;
+    }
+  }
+
+  &__content {
+    @include grid-template;
+    row-gap: 24px;
+
+    @include onTablet {
+      row-gap: 30px;
+    }
+  }
+
+  &__customer {
+    grid-column: 1 / -1;
+    padding-block: 32px;
+
+    @include scale(1.1);
+    @include hover(box-shadow, 0 9px 18px 0 rgba(37, 41, 49, 0.5));
+
+    @include onSmallDesktop {
+      grid-column: span 4;
+    }
+  }
+}
diff --git a/src/styles/blocks/text.scss b/src/styles/blocks/text.scss
new file mode 100644
index 0000000000..29ceb8de51
--- /dev/null
+++ b/src/styles/blocks/text.scss
@@ -0,0 +1,20 @@
+.text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 150%;
+  color: $secondaryAccent;
+
+  &--big {
+    font-size: 22px;
+    font-weight: 600;
+  }
+
+  &--small {
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  &--mid {
+    font-size: 18px;
+  }
+}
diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss
new file mode 100644
index 0000000000..318147dd4d
--- /dev/null
+++ b/src/styles/blocks/top-bar.scss
@@ -0,0 +1,35 @@
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+
+  @include onSmallDesktop {
+    align-items: center;
+  }
+
+  &__left-side {
+    display: flex;
+    align-items: end;
+    gap: 32px;
+  }
+
+  &__center-side {
+    display: none;
+
+    @include onSmallDesktop {
+      display: block;
+    }
+  }
+
+  &__right-side {
+    display: flex;
+    align-items: start;
+    gap: 32px;
+  }
+
+  &__logo-link {
+    @include onSmallDesktop {
+      padding-bottom: 12px;
+    }
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0f8860e4d7..b5e7681fa8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,7 +1,32 @@
 @import "utils";
-@import "fonts";
 @import "typography";
 
-body {
-  background: $c-gray;
-}
+@import "./blocks/subhead";
+@import "./blocks/logo-link";
+@import "./blocks/link";
+@import "./blocks/section-title";
+@import "./blocks/text";
+@import "./blocks/button";
+@import "./blocks/top-bar";
+@import "./blocks/swiper";
+@import "./blocks/nav";
+@import "./blocks/icon";
+@import "./blocks/card";
+@import "./blocks/service";
+@import "./blocks/customer";
+@import "./blocks/ava";
+@import "./blocks/contact-us";
+@import "./blocks/feedback";
+@import "./blocks/input";
+@import "./blocks/bottom-bar";
+
+@import "./blocks/page";
+@import "./blocks/header";
+@import "./blocks/mobile-menu";
+@import "./blocks/about-us";
+@import "./blocks/expertise";
+@import "./blocks/services";
+@import "./blocks/testimonials";
+@import "./blocks/apply-section";
+@import "./blocks/footer";
+@import "./blocks/main-content";
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
index a1a5dd0e37..b754c5c00a 100644
--- a/src/styles/utils/_extends.scss
+++ b/src/styles/utils/_extends.scss
@@ -1,4 +1,7 @@
-%h1 {
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
+%poppins {
+  font-family: "Poppins", sans-serif;
+}
+
+%link {
+  text-decoration: none;
 }
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index 80c79780dc..b9c38c5dc2 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -1,6 +1,100 @@
 @mixin hover($_property, $_toValue) {
-  transition: #{$_property} 0.3s;
-  &:hover {
-    #{$_property}: $_toValue;
+  transition: 0.5s;
+  @include onSmallDesktop {
+    &:hover {
+      #{$_property}: $_toValue;
+    }
+  }
+}
+
+@mixin to-default_on-click($_property, $_toValue) {
+  @include onSmallDesktop {
+    &:active {
+      #{$_property}: $_toValue;
+    }
+  }
+}
+
+@mixin scale($_toValue) {
+  @include hover(transform, scale($_toValue));
+}
+
+@mixin onLargeScreen {
+  @media (min-width: 2560px) {
+    @content;
+  }
+}
+
+@mixin onBigDesktop {
+  @media (min-width: 1600px) {
+    @content;
+  }
+}
+
+@mixin onMidDesktop {
+  @media (min-width: 1280px) {
+    @content;
+  }
+}
+
+@mixin onSmallDesktop {
+  @media (min-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin onTablet {
+  @media (min-width: 640px) {
+    @content;
+  }
+}
+
+@mixin grid-template {
+  @include max-width-centered;
+  --column-count: 2;
+  display: grid;
+  grid-template-columns: repeat(var(--column-count), 1fr);
+  column-gap: 20px;
+
+  @include onTablet {
+    --column-count: 6;
+    column-gap: 30px;
+  }
+
+  @include onSmallDesktop() {
+    --column-count: 12;
+    column-gap: 20px;
+  }
+
+  @include onMidDesktop() {
+    column-gap: 30px;
+  }
+}
+
+@mixin page-padding-inline {
+  padding-inline: 20px;
+
+  @include onTablet {
+    padding-inline: 41px;
+  }
+
+  @include onSmallDesktop {
+    padding-inline: 54px;
+  }
+
+  @include onMidDesktop {
+    padding-inline: 77px;
+  }
+}
+
+@mixin max-width-centered {
+  max-width: 1146px;
+  margin: 0 auto;
+}
+
+@mixin max-width-centered-onBigDesktop {
+  @include onBigDesktop {
+    max-width: 1600px;
+    margin: 0 auto;
   }
 }
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
index aeb006ffbb..71de51a553 100644
--- a/src/styles/utils/_vars.scss
+++ b/src/styles/utils/_vars.scss
@@ -1 +1,7 @@
-$c-gray: #eee;
+$whiteBg: #f2f6fa;
+$blackBg: #2c2c2c;
+$blueAccent: #2060f6;
+$formBlueAccent: #144ed4;
+$mainAccent: #253757;
+$secondaryAccent: #6c788b;
+$grayAccent: #c0cdd7;