diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6c78e21..963ef31 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,7 +9,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.formatOnSave": true,
-  "explorer.confirmDelete": true,
+  "explorer.confirmDelete": false,
   "editor.wordWrap": "on",
   "editor.tabSize": 2
 }
diff --git a/package.json b/package.json
index b1df20c..a7fae5a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "private": true,
   "scripts": {
     "start": "parcel \"./src/index.html\"",
-    "build": "parcel build \"./src/index.html\" --dist-dir build --public-url https://anfaalabs.github.io/Digipro_internal-website"
+    "build": "parcel build \"./src/index.html\" --dist-dir build --public-url https://anfaalabs.github.io/Digipro_internal-website",
+    "build:local": "parcel build \"./src/index.html\" --dist-dir build"
   },
   "author": "",
   "license": "ISC",
diff --git a/src/assets/about-us-image-480w.png b/src/assets/about-us-image-480w.png
new file mode 100644
index 0000000..53bc101
Binary files /dev/null and b/src/assets/about-us-image-480w.png differ
diff --git a/src/assets/about-us-image-768w.png b/src/assets/about-us-image-768w.png
new file mode 100644
index 0000000..1645394
Binary files /dev/null and b/src/assets/about-us-image-768w.png differ
diff --git a/src/assets/about-us-image.png b/src/assets/about-us-image.png
new file mode 100644
index 0000000..c1d1b76
Binary files /dev/null and b/src/assets/about-us-image.png differ
diff --git a/src/assets/cta-banner-image-480w.png b/src/assets/cta-banner-image-480w.png
new file mode 100644
index 0000000..9c90da3
Binary files /dev/null and b/src/assets/cta-banner-image-480w.png differ
diff --git a/src/assets/cta-banner-image-768w.png b/src/assets/cta-banner-image-768w.png
new file mode 100644
index 0000000..69bd435
Binary files /dev/null and b/src/assets/cta-banner-image-768w.png differ
diff --git a/src/assets/cta-banner-image.png b/src/assets/cta-banner-image.png
new file mode 100644
index 0000000..69bd435
Binary files /dev/null and b/src/assets/cta-banner-image.png differ
diff --git a/src/assets/divider.svg b/src/assets/divider.svg
deleted file mode 100644
index 5fc4041..0000000
--- a/src/assets/divider.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg
-  width="1440"
-  height="2"
-  viewBox="0 0 1440 2"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M680 0L0 2C0 2 414.441 4.00346 680 4C944.778 3.99655 1440 2 1440 2L680 0Z"
-    fill="url(#paint0_linear_203_241)"
-  />
-  <defs>
-    <linearGradient
-      id="paint0_linear_203_241"
-      x1="679"
-      y1="1"
-      x2="679"
-      y2="3.00001"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="#D9D9D9" stop-opacity="0" />
-      <stop offset="0.479167" stop-color="#0DC3F2" />
-      <stop offset="0.6" stop-color="#0DC3F2" />
-      <stop offset="1" stop-color="#D9D9D9" stop-opacity="0" />
-    </linearGradient>
-  </defs>
-</svg>
\ No newline at end of file
diff --git a/src/assets/header-bottom-illustration.svg b/src/assets/header-bottom-illustration.svg
deleted file mode 100644
index f74b96c..0000000
--- a/src/assets/header-bottom-illustration.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg class="c2xi1" width="564" height="552" viewBox="0 0 564 552" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <linearGradient id="illustration-02" x1="-3.766" y1="300.204" x2="284.352" y2="577.921" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#0dc3f2" stop-opacity=".01"></stop>
-          <stop offset="1" stop-color="#0dc3f2" stop-opacity=".32"></stop>
-      </linearGradient>
-  </defs>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M151.631 22.954c19.025-13.987 40.754-20.902 67.157-20.902 18.865 0 40.12 3.534 64.461 10.542 15.855 4.566 30.274 8.448 43.282 11.908-3.117-.73-6.316-1.474-9.604-2.238-13.789-3.205-29.419-6.84-46.941-11.331C153.37-18.963 125.867 40.456 75.939 148.322l-.003.006a7576.221 7576.221 0 01-7.711 16.624c-29.474 63.279-43.616 99.759-44.264 135.927-.659 36.738 12.251 72.311 47.633 131.253 35.391 58.957 60.19 86.192 91.501 100.484.962.439 1.93.865 2.905 1.279-9.73-2.472-18.561-5.625-26.916-9.633-32.753-15.71-57.88-43.982-92.714-104.315-34.834-60.333-46.755-96.23-43.984-132.449 2.732-35.713 20.082-71.213 55.526-132.603a7349.326 7349.326 0 009.317-16.2l.004-.007c29.787-51.892 53.315-92.88 84.398-115.734zm34.507 514.934a241.712 241.712 0 01-5.151-.83c-5.964-1.702-11.607-3.772-17.062-6.262-30.898-14.104-55.459-41.124-90.616-99.693-35.167-58.584-48-93.868-47.349-130.187.642-35.809 14.725-72.101 44.078-135.12 2.513-5.395 4.96-10.683 7.356-15.857l.357-.771.002-.005c24.651-53.256 44.122-95.32 71.478-119.633 18.318-16.282 40.065-24.26 67.588-24.26 15.567 0 32.985 2.554 52.67 7.6 14.706 3.77 28.076 6.935 40.144 9.75-2.797-.558-5.665-1.125-8.609-1.707h-.003l-.003-.001-.053-.01h-.001c-12.823-2.535-27.354-5.407-43.664-9.044C148.495-12.404 126.33 48.27 86.092 158.42l-.004.011-.016.042a8434.991 8434.991 0 01-6.201 16.936c-23.765 64.604-34.847 101.709-33.55 137.844C47.638 349.957 61.359 384.852 96.945 442c35.541 57.077 59.736 83.093 89.193 95.888zm16.598 2.005a338.416 338.416 0 01-8.148-.869 103.656 103.656 0 01-7.5-2.904c-28.737-12.428-53.535-39.114-88.445-95.176-35.381-56.82-49.02-91.447-50.323-127.762-1.285-35.802 9.756-72.729 33.428-137.083 1.94-5.276 3.831-10.449 5.683-15.517l.007-.017.007-.021.522-1.427c19.862-54.372 35.55-97.317 59.408-122.911C172.358 9.403 206.126 2.494 256.864 13.81c13.649 3.043 26.048 5.55 37.243 7.773-2.531-.411-5.124-.828-7.785-1.255l-.071-.011h-.003c-11.906-1.914-25.397-4.082-40.56-6.926C144.349-5.618 127.156 56.06 95.945 168.03l-.003.009a8355.73 8355.73 0 01-4.821 17.248c-18.45 65.652-26.689 103.234-23.608 139.244 3.09 36.109 18.017 71.465 53.24 126.105 33.482 51.938 56.333 76.988 81.983 89.257zm15.827 1.2a485.788 485.788 0 01-9.653-.664l-.264-.107c-27.037-11.022-51.209-36.471-86.212-90.77-35.484-55.044-49.829-88.975-52.928-125.19-3.055-35.705 5.157-73.119 23.541-138.534a8620.925 8620.925 0 004.497-16.087l.325-1.165.002-.006c15.402-55.255 27.568-98.9 48.147-125.608 16.123-20.925 37.347-30.952 66.801-30.952 9.869 0 20.667 1.127 32.5 3.347 12.636 2.37 24.106 4.27 34.467 5.944-2.277-.28-4.608-.562-6.997-.85h-.001l-.001-.001h-.001c-11.054-1.338-23.584-2.855-37.688-4.97-94.204-14.122-106.775 48.314-129.594 161.65l-.003.014-.047.235-.002.008a8400.92 8400.92 0 01-3.479 17.22c-13.513 66.44-19.115 104.361-14.4 140.163 4.727 35.898 20.289 70.48 55.506 123.345 31.385 47.111 52.956 71.08 75.484 82.978zm15.539.719a709.825 709.825 0 01-10.437-.441c-23.548-10.908-46.233-35.298-78.922-84.366-35.486-53.268-50.443-86.468-55.187-122.497-3.728-28.301-2.526-56.394 14.377-139.503 1.21-5.95 2.383-11.773 3.529-17.466 11.26-55.927 20.154-100.102 37.666-127.768 18.294-28.901 45.951-38.863 89.673-32.313 11.708 1.755 22.326 3.099 31.917 4.27-2.072-.167-4.193-.334-6.366-.505h-.002l-.018-.002c-10.221-.803-21.804-1.714-34.864-3.146-87.388-9.576-95.67 53.388-110.705 167.692l-.002.014-.047.36c-.74 5.623-1.496 11.372-2.28 17.244-8.937 66.993-12.098 105.125-5.896 140.639 6.221 35.612 22.326 69.391 57.443 120.48 29.544 42.981 49.981 65.798 70.121 77.308zm54.655.656c-2.322.006-4.68.009-7.073.009-15.823 0-30.079-.135-43.037-.519-20.923-10.699-42.32-33.928-73.018-78.587-35.393-51.49-50.874-83.93-57.12-119.691-4.907-28.091-5.274-56.21 5.907-140.03.786-5.887 1.544-11.65 2.286-17.287v-.001l.042-.32c7.418-56.4 13.278-100.948 27.923-129.427 13.148-25.57 33.385-37.482 64.556-37.482 5.049 0 10.388.312 16.027.93 13.049 1.43 24.617 2.341 34.829 3.145h.001l.114.009h.001c59.526 4.682 79.579 6.26 136.926 89.687 36.003 52.377 54.831 83.312 64.453 117.449 9.765 34.64 10.139 71.93 1.38 137.589-8.64 64.766-18.645 98.41-35.683 119.994-16.965 21.491-41.268 32.104-86.06 46.46-1.661.532-3.296 1.052-4.905 1.56a1391.5 1391.5 0 01-10.245 2.482 1345.267 1345.267 0 01-11.347 1.958 1812.762 1812.762 0 01-12.481 1.367 2129.386 2129.386 0 01-13.476.705zm27.18 1.709c50.448-1.039 82.218-5.164 109.211-18.112 33.159-15.904 58.522-44.394 93.581-105.118 35.06-60.724 47.051-96.934 44.246-133.603-2.762-36.096-20.19-71.792-55.788-133.449-56.949-98.64-86.21-106.404-173.068-129.448l-.056-.014c-14.774-3.92-31.516-8.363-50.261-13.76C159.031-25.254 125.808 32.624 65.497 137.694l-.002.003a6915.634 6915.634 0 01-9.316 16.197C20.581 215.552 3.154 251.247.392 287.344c-2.806 36.669 9.186 72.879 44.245 133.603 35.06 60.724 60.423 89.214 93.582 105.118 12.593 6.04 26.224 10.16 42.307 12.943 6.906 1.966 14.23 3.443 22.172 4.508 6.442 1.628 13.241 2.748 20.583 3.429 5.999 1.314 12.297 2.105 19.071 2.433 5.603 1.028 11.455 1.517 17.722 1.517l.314-.001c3.67.505 7.416.742 11.25.742 13.466 0 28.027-2.926 44.299-7.459zm18.196-2.551c42.427-3.518 69.755-9.295 92.704-22.832 29.646-17.487 51.462-47.164 80.495-109.498 29.027-62.318 38.148-99.046 33.653-135.513-4.425-35.901-22.303-70.703-58.23-130.556-39.939-66.535-65.307-89.912-104.239-104.3 53.844 16.863 81.528 37.31 126.939 115.968 35.443 61.39 52.793 96.891 55.525 132.603 2.772 36.219-9.149 72.116-43.983 132.449-34.834 60.333-59.962 88.605-92.714 104.315-23.296 11.175-50.3 15.706-90.15 17.364zm93.883-30.185c-20.416 14.652-45.267 21.74-84.153 27.302 36.558-3.571 61.14-9.392 81.957-21.671 29.256-17.257 50.857-46.697 79.7-108.619 28.849-61.94 37.924-98.373 33.479-134.425-4.381-35.543-22.179-70.166-57.959-129.772-45.707-76.146-72.185-95.334-122.253-109.565 36.374 12.515 60.888 34.697 100.963 99.056 36.138 58.035 54.382 91.924 60.326 127.553 6.035 36.185-.421 73.291-23.824 136.909-23.412 63.646-41.906 94.334-68.236 113.232zm-75.097 23.912c35.377-7.423 57.817-15.704 75.801-31.314 23.206-20.143 38.593-51.68 56.77-116.363 18.167-64.644 22.158-101.999 14.722-137.83-7.323-35.285-25.856-68.245-62.092-124.454-40.109-62.219-63.784-83.239-97.755-94.01 46.513 11.797 71.824 29.769 117.688 103.423 35.995 57.806 54.162 91.528 60.05 126.824 5.972 35.804-.459 72.634-23.728 135.889-22.96 62.416-41.892 93.9-67.525 112.298-18.433 13.228-40.651 20.217-73.931 25.537zm76.065-38.742c-16.398 17.18-38.639 26.625-66.953 34.691 29.631-6.852 49.359-14.869 65.378-28.773 22.583-19.603 38.327-51.956 56.156-115.394 18.071-64.301 22.052-101.4 14.688-136.882-7.258-34.975-25.716-67.78-61.814-123.777-45.857-71.136-70.036-87.963-113.146-97.515 31.663 9.156 54.508 29.065 94.518 89.127 36.23 54.385 54.981 86.404 63.553 121.278 8.703 35.411 6.992 72.898-6.313 138.315-13.314 65.463-25.8 97.696-46.067 118.93zm-59.762 30.414c25.551-9.413 45.464-19.917 59.62-37.85 17.506-22.178 27.29-54.964 36.094-120.97 8.799-65.956 8.41-103.465-1.437-138.395-4.847-17.196-12.323-34.408-23.53-54.17-10.572-18.643-24.116-39.015-41.2-63.869-39.854-57.98-61.888-76.799-91.408-84.443 39.946 7.477 63.031 23.183 108.786 91.868 36.098 54.188 54.774 86.063 63.275 120.648 8.626 35.092 6.91 72.342-6.33 137.439-13.062 64.216-25.834 97.286-45.555 117.947-13.941 14.607-31.58 23.548-58.315 31.795z" fill="url(#illustration-02)"></path>
-</svg>
\ No newline at end of file
diff --git a/src/assets/header-image.jpg b/src/assets/header-image.jpg
deleted file mode 100644
index a31e34c..0000000
Binary files a/src/assets/header-image.jpg and /dev/null differ
diff --git a/src/assets/header-overlay.png b/src/assets/header-overlay.png
new file mode 100644
index 0000000..da97631
Binary files /dev/null and b/src/assets/header-overlay.png differ
diff --git a/src/assets/header-top-illustration.svg b/src/assets/header-top-illustration.svg
deleted file mode 100644
index 1aeafa4..0000000
--- a/src/assets/header-top-illustration.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg class="chsg9 ce7t8 c81vu cvbjg ccx13 chjf9" width="722" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <linearGradient id="illustration-01" x1="-4.14" y1="43.12" x2="303.145" y2="391.913" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#0dc3f2" stop-opacity=".01"></stop>
-          <stop offset=".538" stop-color="#0dc3f2" stop-opacity=".32"></stop>
-          <stop offset="1" stop-color="#0dc3f2" stop-opacity=".01"></stop>
-      </linearGradient>
-  </defs>
-  <path d="M292.512 0h-2.485c4.1 5.637 8.143 10.76 12.185 15.446 9.096 10.552 19.043 19.174 29.583 25.644l1.077.653c10.95 6.545 23.653 11.451 37.755 14.581 10.83 2.404 22.918 4.156 36.801 5.33 1.983.167 4.003.323 6.061.467l8.683.586 13.802.908c7.255.481 14.609.992 21.813 1.59 15.862 1.32 29.664 3.387 42.19 6.323 12.94 3.037 25.656 7.543 37.793 13.392 10.864 5.262 21.212 11.088 33.257 18.156l4.89 2.881 8.261 4.882 8.936 5.294c4.433 2.63 8.802 5.225 13.05 7.75l111.75 66.854-.302 17.311-119.133-71.27-8.026-4.755c-5.739-3.402-11.479-6.804-17.226-10.201l-8.627-5.093-2.22-1.304c-9.734-5.702-20.902-12.052-32.624-17.476-12.24-5.606-25.329-9.783-38.902-12.416-12.707-2.466-26.845-4.136-43.222-5.103-5.134-.304-10.349-.577-15.499-.837l-12.699-.634c-5.501-.278-11.071-.572-16.549-.903-16.278-.983-30.242-2.79-42.691-5.52-13.922-3.054-26.434-7.865-37.189-14.297l-.216-.13c-10.674-6.415-20.743-15.096-29.926-25.804-7.789-9.08-15.45-19.67-23.372-32.305h-2.375c8.231 13.22 16.162 24.228 24.215 33.613 9.087 10.589 19.033 19.232 29.585 25.71l1.05.638c10.95 6.546 23.663 11.436 37.786 14.533 12.543 2.753 26.61 4.574 43 5.565 6.569.396 13.266.739 19.819 1.066l9.412.47c5.157.26 10.38.533 15.519.837 16.294.964 30.346 2.622 42.959 5.07 13.438 2.609 26.375 6.737 38.446 12.27 11.344 5.25 22.063 11.267 34.668 18.686 11.234 6.623 22.437 13.273 33.62 19.911l.134.079L717.605 210.4l-.118 6.611-9.378 5.2-118.373-70.814-5.613-3.333c-6.164-3.66-12.333-7.322-18.511-10.98l-9.728-5.749c-10.269-6.053-22.289-12.98-34.985-18.587-12.052-5.285-25.318-9.17-39.43-11.549-12.67-2.137-26.94-3.58-43.621-4.412a2849 2849 0 00-9.384-.446l-12.33-.569c-7.68-.36-15.464-.752-23.091-1.24-16.073-1.029-29.986-2.919-42.533-5.775-13.463-3.07-25.643-7.76-36.221-13.946l-1.1-.652c-10.681-6.42-20.782-15.045-30.025-25.638-8.423-9.651-16.628-20.952-25.086-34.547-2.86-4.598-5.712-9.285-8.535-13.974h-2.353c3.03 5.04 6.097 10.089 9.174 15.034 8.522 13.69 16.789 25.075 25.276 34.805 9.117 10.456 19.078 19.029 29.623 25.503l1.107.67c10.957 6.551 23.633 11.496 37.678 14.698 12.632 2.88 26.648 4.784 42.85 5.822 7.628.488 15.41.88 23.084 1.24l8.893.411c4.29.197 8.577.395 12.857.607l2.743.143c15.419.84 28.74 2.232 40.645 4.241 13.952 2.352 27.06 6.192 38.957 11.41 11.732 5.179 22.905 11.511 32.637 17.221l2.138 1.258a8484.147 8484.147 0 0118.821 11.139l15.013 8.911 117.373 70.217-15.197 8.425-109.893-65.739a12699.359 12699.359 0 00-33.842-20.079l-2.513-1.48c-10.108-5.938-20.911-12.023-32.56-16.979-11.955-5.048-25.326-8.759-39.741-11.026-12.693-1.997-26.58-3.346-43.705-4.248l-14.663-.763c-9.945-.525-20.054-1.099-29.906-1.866-15.822-1.231-29.613-3.321-42.162-6.387-13.681-3.341-26.103-8.316-36.925-14.783l-.238-.142c-10.726-6.447-20.889-14.965-30.212-25.321-8.603-9.56-16.927-20.658-25.447-33.931-6.08-9.475-12.083-19.349-17.921-29.011h-2.336c1.509 2.496 3.032 5.009 4.56 7.525 2.933 4.83 5.897 9.678 8.894 14.474.465.745.933 1.48 1.401 2.217.278.438.556.875.833 1.315l1.922 3.046.968 1.52c8.573 13.361 16.963 24.544 25.646 34.19 9.188 10.206 19.186 18.655 29.736 25.131l1.174.712c10.991 6.569 23.6 11.619 37.474 15.009 12.661 3.092 26.556 5.198 42.483 6.437 9.865.768 19.977 1.343 29.925 1.868l14.695.766c17.014.891 30.836 2.234 43.498 4.225 14.254 2.242 27.468 5.907 39.272 10.892 12.491 5.314 24.059 11.973 34.838 18.339 11.306 6.68 22.581 13.381 33.836 20.076l108.895 65.144-15.191 8.432-135.199-80.881-3.428-1.983c-9.651-5.569-20.371-11.579-31.743-16.306-11.852-4.927-25.245-8.594-39.809-10.901l-1.755-.272c-11.757-1.794-24.735-3.133-40.57-4.187l-9.563-.627c-11.892-.788-24.004-1.646-35.753-2.81-15.522-1.538-29.148-3.901-41.66-7.223-13.481-3.58-25.829-8.692-36.702-15.191l-.258-.155c-10.768-6.471-21.01-14.855-30.446-24.92-8.819-9.41-17.308-20.236-25.953-33.101-6.81-10.136-13.402-20.596-19.809-30.87l-3.821-6.139A784.13 784.13 0 00213.574 0h-2.377a797.304 797.304 0 014.292 6.818l3.839 6.166c6.435 10.32 13.049 20.813 19.831 30.9 8.707 12.96 17.262 23.87 26.152 33.353 9.273 9.894 19.32 18.185 29.882 24.665l1.256.761c11.03 6.594 23.55 11.777 37.214 15.406 12.614 3.351 26.344 5.732 41.976 7.281 12.999 1.288 26.422 2.201 39.508 3.059l4.682.305 3.533.238c15.49 1.079 28.215 2.449 39.802 4.28 14.392 2.276 27.633 5.899 39.354 10.771 12.615 5.243 24.474 12.113 34.925 18.167l.004.002 134.169 80.265-15.194 8.418-126.705-75.799-3.424-1.993c-9.642-5.598-20.351-11.637-31.706-16.377-11.784-4.92-25.128-8.664-39.66-11.129l-1.632-.273c-11.217-1.848-23.778-3.36-39.208-4.72l-2.278-.198c-5.128-.438-10.212-.88-15.25-1.341l-2.682-.248c-2.236-.209-4.461-.424-6.679-.644a922.679 922.679 0 01-9.956-1.044 621.162 621.162 0 01-4.88-.56l-4.086-.492c-15.234-1.908-28.673-4.582-41.088-8.177-13.282-3.846-25.55-9.105-36.465-15.627-10.916-6.535-21.343-14.825-30.979-24.662-9.015-9.203-17.69-19.72-26.52-32.151a645.536 645.536 0 01-3.61-5.142c-5.904-8.495-11.711-17.27-17.283-25.798l-4.663-7.147c-4.16-6.357-8.022-12.084-11.691-17.333h-2.443c4.089 5.816 8.415 12.229 13.13 19.453l3.563 5.466c5.831 8.932 11.941 18.178 18.228 27.198 1.046 1.5 2.093 2.99 3.144 4.468 8.888 12.517 17.629 23.112 26.722 32.393 9.373 9.567 19.481 17.695 30.065 24.181l1.317.797c11.061 6.612 23.487 11.938 36.933 15.832 12.515 3.624 26.057 6.32 41.397 8.24l1.647.192a658.952 658.952 0 0011.469 1.303c1.956.208 3.919.409 5.89.604l3.27.32 4.723.446 1.443.133c3.766.343 7.545.681 11.352 1.012l6.086.526c16.116 1.42 29.094 3.007 40.683 4.973 14.384 2.439 27.58 6.14 39.227 11.002 12.623 5.268 24.453 12.169 34.883 18.253l.003.002 125.701 75.197-15.191 8.422-118.241-70.735-4.584-2.679c-9.331-5.431-19.619-11.216-30.431-15.858-11.836-5.081-24.695-8.904-39.315-11.688l-1.55-.292c-11.408-2.121-23.837-3.9-39.899-5.712l-5.712-.642c-11.977-1.355-25.348-2.954-38.236-4.945-14.942-2.308-28.187-5.309-40.496-9.175-13.07-4.103-25.259-9.506-36.226-16.063l-.274-.164-1.352-.84-.226-.139c-.759-.466-1.517-.932-2.272-1.416-7.736-4.973-15.239-10.75-22.381-17.235a45.03 45.03 0 00-.466-.418 45.818 45.818 0 01-.619-.558l-.245-.232a184.96 184.96 0 01-3.418-3.247c-9.21-8.984-18.082-19.176-27.125-31.162l-1.507-2.007c-7.269-9.72-14.35-19.8-22.529-31.663l-2.095-3.036C191.451 18.119 184.439 8.547 177.667 0h-2.657l.351.44c6.939 8.712 14.099 18.463 22.92 31.212l4.604 6.67c7.71 11.14 14.515 20.748 21.574 30.104 9.105 12.066 18.043 22.332 27.324 31.388a182.785 182.785 0 006.033 5.607c.197.175.393.352.589.53.294.266.588.532.886.791l.924.784c6.103 5.256 12.444 10.01 18.967 14.195a154.57 154.57 0 002.946 1.835l.107.065 1.171.728c11.104 6.637 23.436 12.104 36.656 16.252 12.403 3.897 25.745 6.921 40.788 9.244 11.799 1.824 23.991 3.318 35.153 4.597l9.965 1.126c16.237 1.849 28.714 3.668 40.21 5.857 14.466 2.752 27.19 6.533 38.9 11.561 12.537 5.383 24.361 12.314 34.787 18.427l117.21 70.118-15.191 8.421L512.24 204.3l-3.584-2.109c-10.661-6.26-20.553-11.929-31.029-17.158a246.546 246.546 0 00-39.045-12.038l-1.519-.33c-10.674-2.296-22.3-4.33-37.111-6.49l-8.817-1.268c-11.414-1.652-24.095-3.579-36.516-5.887-14.656-2.725-27.709-6.054-39.904-10.176-12.886-4.357-24.999-9.899-36.003-16.476l-.252-.152c-.387-.233-.773-.475-1.159-.716l-.612-.381-1.432-.881a77.05 77.05 0 01-.713-.449 185.943 185.943 0 01-17.595-12.766l-2.244-1.846a43.697 43.697 0 01-.657-.567c-.152-.133-.304-.266-.458-.398a196.7 196.7 0 01-6.393-5.701c-9.373-8.753-18.441-18.622-27.72-30.171-8.247-10.263-16.376-21.13-23.997-31.474l-1.625-2.207c-10.181-13.846-18.17-24.081-25.906-33.187A247.583 247.583 0 00157.567 0h-2.792c4.039 4.13 7.93 8.395 11.652 12.773l1.479 1.75c6.919 8.238 14.145 17.51 23.055 29.582l1.284 1.744c8.079 10.986 16.779 22.68 25.673 33.749 9.322 11.602 18.452 21.539 27.917 30.379 9.896 9.246 20.49 17.285 31.493 23.898l.36.215c11.126 6.65 23.368 12.253 36.39 16.654 12.285 4.153 25.427 7.505 40.177 10.246 12.72 2.362 25.519 4.317 40.669 6.488l1.523.217c17.103 2.446 29.966 4.684 41.708 7.257a244.644 244.644 0 0138.692 11.929c11.568 5.779 22.862 12.355 34.371 19.142l108.742 65.054-15.19 8.421-101.26-60.575-3.468-2.05a1552.578 1552.578 0 00-6.779-3.978l-2.69-1.566-1.575-.908-2.67-1.532c-5.735-3.273-11.4-6.398-17.219-9.413l-.066-.032c-12.547-5.416-25.459-9.837-38.379-13.139l-2.233-.563c-10.238-2.551-21.443-4.901-35.655-7.477l-9.452-1.694c-1.537-.277-3.051-.552-4.545-.825l-3.732-.687-2.514-.469-3.59-.676-1.796-.344-3.274-.636-1.95-.384-3.295-.658-1.788-.366-3.524-.728c-.949-.199-1.894-.405-2.84-.608l-.591-.126c-.539-.115-1.078-.229-1.615-.347-14.382-3.144-27.244-6.797-39.322-11.163a218.82 218.82 0 01-9.406-3.645c-9.169-3.803-17.92-8.182-26.125-13.066l-.279-.162c-9.917-5.981-19.604-12.98-28.777-20.894l-1.144-.994-.654-.57c-.389-.338-.778-.676-1.163-1.02-9.55-8.551-18.812-18.102-28.316-29.201-8.47-9.886-16.85-20.337-24.714-30.283l-3.029-3.833c-9.828-12.4-17.695-21.758-25.346-30.158-7.939-8.71-16.62-17.003-25.89-24.728h-3.138c9.865 8.07 19.126 16.835 27.547 26.073l1.013 1.116c7.109 7.86 14.507 16.678 23.615 28.146l5.354 6.767c7.38 9.31 15.181 18.996 23.065 28.2 9.568 11.168 18.891 20.782 28.501 29.389.324.29.652.575.98.86l.6.522.579.51c.552.486 1.104.973 1.662 1.45l.286.24c8.422 7.173 17.248 13.598 26.321 19.144l1.441.872.463.272c8.276 4.93 17.114 9.352 26.381 13.194a220.411 220.411 0 009.496 3.683c12.134 4.391 25.079 8.065 39.575 11.235l1.099.236 3.958.844 1.705.353c1.208.251 2.418.502 3.637.749l3.247.648 2.677.527 3.178.614 3.25.617 2.998.563 4.977.917 5.067.919 8.782 1.575c15.209 2.756 26.956 5.251 37.752 8.01 12.776 3.264 25.577 7.645 38.047 13.024l1.904 1 .789.414c.531.278 1.063.557 1.591.839l1.105.598c1.069.574 2.137 1.148 3.2 1.73l1.089.604.006.003c1.053.581 2.107 1.162 3.159 1.751l1.608.91c.877.493 1.753.986 2.628 1.485l3.042 1.748 2.079 1.202c4.012 2.329 8.022 4.698 12.057 7.091l100.266 59.981-15.19 8.422-92.779-55.501c-10.863-6.503-22.453-13.383-34.263-19.76-11.843-5.511-24.426-10.458-37.446-14.719-12.293-3.312-25.504-6.48-40.387-9.682l-4.924-1.062c-11.569-2.504-23.679-5.197-35.642-8.211-14.103-3.551-26.783-7.514-38.762-12.117-12.569-4.829-24.546-10.625-35.596-17.23-11.007-6.555-21.797-14.378-31.99-23.144-9.691-8.335-19.142-17.58-28.897-28.263-8.313-9.103-16.341-18.416-23.934-27.33l-5.251-6.169c-9.047-10.589-17.348-19.903-25.346-28.435-9.762-9.395-19.915-18.108-30.223-25.931-5.842-3.907-11.708-7.64-17.952-11.493h-3.842c7.293 4.462 13.996 8.696 20.624 13.13 10.231 7.766 20.324 16.427 29.962 25.706l1.775 1.9c7.715 8.294 15.754 17.361 24.482 27.613l5.88 6.91c7.932 9.29 15.017 17.432 22.341 25.455 9.833 10.764 19.341 20.065 29.07 28.432a240.266 240.266 0 0015.696 12.406c.753.545 1.51 1.077 2.268 1.61l.378.266 1.303.923c.887.614 1.779 1.213 2.671 1.811l.142.095 1.279.865.93.603.931.6.407.263c.673.437 1.347.873 2.024 1.299l.436.268c1.113.698 2.228 1.391 3.349 2.065l.453.271c11.169 6.669 23.249 12.517 35.904 17.38 12.032 4.626 24.787 8.613 38.991 12.187 12.789 3.22 26.028 6.14 37.738 8.667l2.894.624c14.849 3.194 28.027 6.353 40.236 9.643 12.907 4.223 25.405 9.136 37.149 14.602 11.083 5.989 21.888 12.372 32.07 18.466l93.812 56.122-15.191 8.421-84.3-50.429c-10.283-6.155-20.389-12.172-30.664-17.976l-3.474-1.95c-11.758-5.82-24.11-11.14-36.755-15.829-11.699-3.754-24.048-7.317-37.696-10.878l-8.257-2.141c-10.959-2.847-22.15-5.798-33.191-8.973-13.907-3.999-26.402-8.276-38.201-13.075-11.934-4.857-23.372-10.492-34.022-16.762l-1.878-1.116c-10.885-6.542-21.554-14.117-31.716-22.519-9.807-8.105-19.447-17.042-29.472-27.323l-1.878-1.931c-7.8-8.046-15.334-16.143-24.014-25.537l-2.106-2.28c-9.989-10.819-19.25-20.356-28.345-29.185-9.967-8.87-20.342-17.2-30.88-24.79-10.291-6.67-20.91-13.102-31.01-19.154L71.17 0h-3.91l12.012 7.186c10.623 6.356 21.932 13.164 33.066 20.378 10.437 7.52 20.76 15.807 30.647 24.604 9.031 8.771 18.267 18.282 28.237 29.077l4.565 4.94c7.373 7.969 15.399 16.577 23.471 24.848 10.079 10.334 19.771 19.32 29.627 27.469 10.238 8.463 20.983 16.092 31.947 22.682l.512.307c11.127 6.651 23.132 12.612 35.68 17.72 11.863 4.828 24.424 9.129 38.401 13.143 13.393 3.846 27.415 7.479 39.784 10.683l3.168.827c13.095 3.443 24.943 6.873 36.091 10.45 12.542 4.652 24.829 9.943 36.478 15.707 11.436 6.383 22.627 13.042 34.038 19.872l83.312 49.837-15.188 8.419-83.375-49.87c-8.949-5.339-17.01-10.109-25.31-14.885l-1.167-.669a445.552 445.552 0 00-36.095-16.888c-12.157-4.498-25.091-8.851-38.44-12.94l-12.683-3.877c-3.222-.987-6.465-1.985-9.711-2.992a1326.146 1326.146 0 01-16.497-5.223c-13.752-4.464-26.065-9.053-37.641-14.029-12.329-5.297-24.177-11.33-35.222-17.93-11.016-6.575-21.952-14.167-32.423-22.488l-.885-.709-.885-.715c-8.445-6.798-16.887-14.192-25.668-22.487l-1.74-1.647-.875-.833c-6.61-6.333-13.23-12.856-19.721-19.291l-9.127-9.06c-9.831-9.756-19.681-19.025-29.305-27.578a450.321 450.321 0 00-31.508-23.698l-1.346-.838c-9.307-5.829-18.72-11.514-28.315-17.26L37.99 0h-3.896l36.507 21.838c7.908 4.73 15.682 9.398 23.36 14.11l2.923 1.805 2.914 1.81c.417.26.836.52 1.254.778.894.554 1.789 1.109 2.679 1.668a448.243 448.243 0 0131.305 23.547c9.573 8.506 19.396 17.751 29.196 27.478l9.203 9.136c6.472 6.417 13.074 12.923 19.671 19.24l1.028.976 1.024.969c8.639 8.189 16.952 15.511 25.26 22.246l1.247 1.006.674.544c.32.258.639.517.959.771 10.037 7.981 20.471 15.299 31.122 21.728l1.526.914c11.118 6.645 23.049 12.719 35.457 18.052 11.634 5 24.004 9.611 37.814 14.094 2.744.89 5.505 1.773 8.274 2.649 1.479.467 2.962.927 4.443 1.389l1.234.387c.824.259 1.649.518 2.474.774 3.406 1.057 6.809 2.104 10.189 3.139l12.309 3.763c13.313 4.078 26.21 8.418 38.296 12.889a446.07 446.07 0 0135.864 16.78c9.992 5.735 19.775 11.549 30.386 17.895l78.389 46.892-15.194 8.425-77.43-46.317a3615.384 3615.384 0 00-23.849-14.143 535.697 535.697 0 00-35.491-17.853c-11.788-4.911-24.05-9.655-37.499-14.509l-13.016-4.542c-8.326-2.912-16.772-5.887-25.069-8.901-13.567-4.932-25.698-9.833-37.086-14.982-12.204-5.519-23.993-11.665-35.041-18.267a351.216 351.216 0 01-32.639-22.173c-9.931-7.588-19.948-15.916-30.627-25.458-8.047-7.191-16.135-14.595-24.017-21.83l-5.649-5.187c-10.488-9.436-20.367-17.939-30.228-26.016a533.817 533.817 0 00-32.08-22.7l-2.994-1.831C82.682 46.58 72.182 40.299 62.823 34.704L4.807 0H.912L72.92 43.08A2667.18 2667.18 0 0195.09 56.503a531.987 531.987 0 0131.911 22.578c9.808 8.036 19.665 16.519 30.123 25.928l2.765 2.54c8.788 8.069 17.874 16.411 26.914 24.489 10.716 9.576 20.773 17.935 30.744 25.556 9.896 7.563 20.119 14.569 30.425 20.849l2.402 1.451c11.113 6.641 22.97 12.822 35.243 18.372 11.435 5.17 23.613 10.091 37.228 15.04 8.306 3.017 16.758 5.995 25.089 8.908l13.009 4.54c13.408 4.839 25.642 9.572 37.368 14.457a533.965 533.965 0 0135.304 17.759l2.985 1.755a4160.789 4160.789 0 0122.852 13.576L535.843 320l17.217-9.546.008.005 19.242-10.667-.003-.002 17.213-9.543-.004-.002 17.241-9.558-.003-.002 17.212-9.543-.001-.001 15.193-8.424.015.009 19.243-10.669-.017-.011 15.2-8.423.012.007 19.242-10.679-.011-.007 15.214-8.434.015.009 11.395-6.319.158-8.949-.032-.019.302-17.325.02.012.384-21.951-.018-.01.304-17.347.017.011.383-21.951-.005-.003.302-17.333.004.002.382-21.95-.011-.007.344-19.635L602.072 0h-3.894L719.98 72.867l-.303 17.33-102.535-61.341-7.049-4.107-7.64-4.461c-4.239-2.476-8.479-4.953-12.725-7.424l-6.674-3.872-2.309-1.327A778.468 778.468 0 00567.066 0h-4.202c5.968 3.215 12.285 6.749 19.184 10.726a4181.24 4181.24 0 0113.15 7.649l7.533 4.4c4.465 2.608 8.928 5.216 13.385 7.806l103.532 61.937-.302 17.328-110.945-66.372-19.166-11.105a2476.893 2476.893 0 00-15.007-8.622c-12.604-7.122-24.165-13.031-35.347-18.067A373.292 373.292 0 00525.486 0h-5.465a376.339 376.339 0 0118.035 7.506c11.125 5.01 22.633 10.892 35.182 17.984A2660.44 2660.44 0 01590.989 35.7l12.877 7.464 3.517 2.034 111.918 66.953-.302 17.334-119.342-71.396-12.521-7.206c-7.176-4.127-14.49-8.302-21.782-12.332-12.421-6.827-24.185-12.421-35.962-17.105-1.516-.6-3.046-1.19-4.589-1.77-10.806-4.067-22.282-7.67-34.189-10.734-9.091-2.324-18.353-4.392-27.412-6.295-3.021-.635-6.02-1.253-8.982-1.854L450.3 0h-9.853c2.507.54 5.097 1.08 7.781 1.623l1.19.24c13.106 2.628 27.11 5.54 40.699 9.015a370.4 370.4 0 015.046 1.338c11.707 3.197 22.952 6.92 33.492 11.09 11.72 4.662 23.408 10.222 35.735 16.996 6.44 3.562 12.9 7.237 19.266 10.89l14.983 8.622 120.325 71.983-.302 17.335-93.969-56.217-10.422-6.176c-4.801-2.849-9.609-5.696-14.422-8.543-1.202-.711-2.402-1.423-3.602-2.135a2375.985 2375.985 0 00-5.41-3.203l-3.604-2.12c-9.694-5.69-20.038-11.642-30.765-17.346-12.322-6.525-24.316-11.757-36.67-15.989-12.4-4.23-25.9-7.693-40.126-10.298-13.015-2.383-26.346-4.282-39.321-6.094l-2.987-.417c-16.378-2.284-29.489-4.811-41.267-7.95C384.335 9.511 373.496 5.264 363.804 0h-4.102c10.613 6.161 22.673 11.065 35.873 14.583 11.859 3.16 25.047 5.7 41.505 7.996l5.978.835c12.006 1.685 24.268 3.47 36.248 5.662 14.127 2.587 27.533 6.027 39.839 10.223 12.25 4.2 24.15 9.388 36.378 15.866 12.032 6.395 23.592 13.114 34.293 19.42l9.022 5.336c4.807 2.844 9.613 5.69 14.41 8.537l9.203 5.462 96.153 57.517-.304 17.337-91.088-54.493-1.005-.6-10.289-6.156-.864-.513c-7.208-4.278-14.418-8.556-21.639-12.828l-11.341-6.697-3.644-2.139c-9.796-5.733-20.213-11.667-30.881-17.1-12.225-6.18-24.819-11.15-37.435-14.772-12.55-3.585-26.099-6.252-41.42-8.152-10.731-1.331-21.784-2.408-32.573-3.433l-10.945-1.038c-16.544-1.586-29.916-3.67-42.083-6.562-13.402-3.188-25.541-7.93-36.101-14.107l-1.089-.646C337.306 14.371 329.064 7.818 321.325 0h-2.798c7.986 8.28 16.517 15.224 25.435 20.699l1.109.672c10.943 6.546 23.582 11.549 37.567 14.87 12.256 2.912 25.714 5.011 42.354 6.606l14.532 1.381c9.629.922 19.412 1.904 28.931 3.085 15.215 1.886 28.665 4.534 41.116 8.09 12.489 3.584 24.966 8.509 37.081 14.633 10.619 5.409 21.008 11.325 30.779 17.044l3.696 2.17c10.23 6.033 20.434 12.084 30.622 18.128l106.529 63.712-.304 17.339-110.852-66.315c-4.859-2.885-9.723-5.77-14.591-8.654l-19.185-11.345-2.584-1.516c-11.514-6.739-21.542-12.354-32.112-17.48-12.288-5.92-25.144-10.475-38.208-13.537-12.624-2.959-26.519-5.042-42.481-6.368-7.233-.602-14.611-1.115-21.889-1.597l-13.793-.907-8.66-.584a425.314 425.314 0 01-6.015-.464c-13.793-1.166-25.794-2.905-36.536-5.29-13.526-3.002-25.737-7.657-36.307-13.84l-1.039-.616c-10.685-6.422-20.774-15.094-29.988-25.776-3.723-4.317-7.449-9.01-11.222-14.14z" fill="url(#illustration-01)"></path>
-</svg>
\ No newline at end of file
diff --git a/src/assets/hero-image-480w.png b/src/assets/hero-image-480w.png
new file mode 100644
index 0000000..9818126
Binary files /dev/null and b/src/assets/hero-image-480w.png differ
diff --git a/src/assets/hero-image-768w.png b/src/assets/hero-image-768w.png
new file mode 100644
index 0000000..e3bd47f
Binary files /dev/null and b/src/assets/hero-image-768w.png differ
diff --git a/src/assets/hero-image.png b/src/assets/hero-image.png
new file mode 100644
index 0000000..87add9b
Binary files /dev/null and b/src/assets/hero-image.png differ
diff --git a/src/assets/portfolios/sample-1.png b/src/assets/portfolios/sample-1.png
new file mode 100644
index 0000000..4384c89
Binary files /dev/null and b/src/assets/portfolios/sample-1.png differ
diff --git a/src/assets/portfolios/sample-2.png b/src/assets/portfolios/sample-2.png
new file mode 100644
index 0000000..e8a26a2
Binary files /dev/null and b/src/assets/portfolios/sample-2.png differ
diff --git a/src/assets/portfolios/sample-3.png b/src/assets/portfolios/sample-3.png
new file mode 100644
index 0000000..24b769c
Binary files /dev/null and b/src/assets/portfolios/sample-3.png differ
diff --git a/src/assets/portfolios/sample-4.png b/src/assets/portfolios/sample-4.png
new file mode 100644
index 0000000..73d1390
Binary files /dev/null and b/src/assets/portfolios/sample-4.png differ
diff --git a/src/assets/portfolios/sample-5.png b/src/assets/portfolios/sample-5.png
new file mode 100644
index 0000000..473d52f
Binary files /dev/null and b/src/assets/portfolios/sample-5.png differ
diff --git a/src/assets/portfolios/sample-6.png b/src/assets/portfolios/sample-6.png
new file mode 100644
index 0000000..af40cfe
Binary files /dev/null and b/src/assets/portfolios/sample-6.png differ
diff --git a/src/assets/process.png b/src/assets/process.png
new file mode 100644
index 0000000..c7367ee
Binary files /dev/null and b/src/assets/process.png differ
diff --git a/src/index.html b/src/index.html
index 021f2f9..848e483 100644
--- a/src/index.html
+++ b/src/index.html
@@ -64,198 +64,606 @@
     <script src="./scripts/index.js" defer type="module"></script>
   </head>
   <body>
-    <div
-      id="navigation"
-      class="absolute z-40 top-0 left-0 w-full"
-      data-sal="slide-down"
-      data-sal-delay="300"
-      data-sal-duration="500"
-    >
-      <div
-        class="container p-4 lg:px-6 lg:py-8 flex flex-wrap lg:flex-nowrap items-center justify-between relative"
-      >
+    <div id="navigation" class="nav">
+      <div class="nav-container">
         <img
           src="./assets/logo.svg"
           alt="Logo"
           width="56"
           height="56"
-          class="h-12 w-12 lg:h-14 lg:w-14 lg:mr-20"
+          class="h-12 w-12 lg:h-14 lg:w-14 lg:mr-40 xl:mr-52"
         />
 
-        <button class="navigation-toggler" type="button" title="Open menu">
-          <span class="icon"></span>
-          <span class="icon"></span>
-          <span class="icon"></span>
+        <button type="button" class="nav__toggler">
+          <i class="icon"></i>
+          <i class="icon"></i>
+          <i class="icon"></i>
         </button>
 
-        <nav class="navigation-menu">
-          <ul>
-            <li>
-              <a class="navigation-link" href="#about" title="About Us"
-                >About Us</a
-              >
-            </li>
-            <li>
-              <a class="navigation-link" href="#services" title="Services"
-                >Services</a
-              >
-            </li>
-            <li>
-              <a class="navigation-link" href="#portfolio" title="Portfolio"
-                >Portfolio</a
-              >
-            </li>
-            <li>
-              <a class="navigation-link" href="#pricing" title="Pricing"
-                >Pricing</a
-              >
-            </li>
-            <li>
-              <a
-                class="navigation-link"
-                href="#testimonials"
-                title="Testimonials"
-                >Testimonials</a
-              >
-            </li>
-            <li>
-              <a
-                class="navigation-link"
-                href="#frequently-asked-questions"
-                title="Frequently asked questions"
-                >FAQ</a
-              >
-            </li>
+        <nav class="nav-menu">
+          <ul
+            class="container lg:w-[unset] px-4 mb-2 lg:mb-0 lg:px-0 nav-menu-links"
+          >
+            <li><a href="#about-us">About Us</a></li>
+            <li><a href="#services">Services</a></li>
+            <li><a href="#portfolio">Portfolio</a></li>
+            <li><a href="#pricing">Pricing</a></li>
           </ul>
-        </nav>
 
-        <a
-          href="#"
-          class="whitespace-nowrap hidden lg:block btn btn-primary"
-          title="Whatsapp us"
-        >
-          <i class="fa fa-whatsapp text-lg mr-1"></i>
-          Whatsapp
-        </a>
+          <div
+            class="container lg:w-[unset] px-4 lg:px-0 nav-menu-buttons"
+            id="navbar-buttons"
+          >
+            <div class="border-t lg:hidden w-full mb-2"></div>
+            <button
+              type="button"
+              class="btn hover:text-heading focus:text-heading"
+            >
+              See Pricing
+            </button>
+            <button type="button" class="btn btn--default">
+              <i class="fab fa-whatsapp mr-1"></i>
+              Whatsapp
+            </button>
+          </div>
+        </nav>
       </div>
     </div>
 
     <main>
-      <div id="header-wrapper" class="bg-zinc-950 z-0">
-        <!-- Header -->
-        <header class="container relative px-4 pt-36 lg:px-6 lg:pt-56">
-          <!-- Top Header Illustration -->
-          <img
-            src="./assets/header-top-illustration.svg"
-            class="h-44 md:h-56 lg:h-60 w-auto absolute right-0 top-0 -z-0 pointer-events-none"
-            alt="Top page illustration"
-            data-sal="fade"
-            data-sal-duration="1000"
-          />
+      <header
+        class="container relative px-4 pt-32 pb-12 lg:pt-[152px] lg:px-6 lg:pb-20"
+      >
+        <!-- Overlays -->
+        <img
+          src="./assets/header-overlay.png"
+          alt="Overlay 1"
+          class="hidden md:block absolute w-40 h-40 -z-10 bottom-[15%] left-0"
+        />
+        <img
+          src="./assets/header-overlay.png"
+          alt="Overlay 2"
+          class="hidden md:block w-56 h-56 absolute -z-10 bottom-[45%] -right-[2.5%]"
+        />
 
+        <section id="header-text" class="mb-8">
           <h1
-            class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-poppins max-w-lg md:max-w-3xl mx-auto font-bold text-center text-white md:leading-[56px] lg:leading-[64px] mb-4 lg:mb-8"
-            data-sal="slide-up"
-            data-sal-delay="500"
-            data-sal-duration="500"
+            class="text-4xl md:text-6xl lg:text-6xl xl:text-7xl text-center font-bold font-poppins tracking-tighter text-gray-950 mb-4 leading-[1.2] md:leading-[1.1] lg:leading-[1.3] xl:leading-[1.1] mx-auto sm:max-w-md md:max-w-lg lg:max-w-4xl"
           >
-            Pocket-Friendly Website Development in Indonesia.
+            <!-- Pocket-Friendly Website Development in Indonesia. -->
+            Make your dream business goal come true
           </h1>
           <p
-            class="text-center max-w-2xl mx-auto lg:text-xl mb-4 lg:mb-8"
-            data-sal="slide-up"
-            data-sal-delay="600"
-            data-sal-duration="500"
+            class="md:text-lg lg:text-xl text-center mx-auto mb-4 max-w-lg lg:max-w-2xl lg:mb-6"
           >
-            Get a High Quality Website without Overspending
+            <!-- Get a High Quality Website without Overspending -->
+            when you need us for improve your business, then come with us to
+            help your business have reach it, you just sit and feel that goal
           </p>
 
           <div
-            class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4"
+            class="w-full flex flex-col items-center justify-center gap-2 sm:flex-row"
           >
             <button
               type="button"
-              class="w-[90%] max-w-[250px] md:w-[180px] btn btn-primary"
-              title="Whatsapp Us"
-              data-sal="slide-up"
-              data-sal-delay="700"
-              data-sal-duration="500"
+              class="btn btn--primary w-full max-w-[250px] sm:max-w-[200px]"
             >
-              <i class="fa fa-whatsapp text-lg mr-1"></i>
-              Whatsapp
+              Start Project
             </button>
+          </div>
+        </section>
 
-            <button
-              type="button"
-              class="w-[90%] max-w-[250px] md:w-[180px] btn btn-primary-outline"
-              title="See pricing"
-              data-sal="slide-up"
-              data-sal-delay="750"
-              data-sal-duration="500"
+        <div id="header-image">
+          <figure
+            class="w-full max-w-4xl mx-auto min-h-[212px] sm:min-h-[337px] md:min-h-[397px] lg:min-h-[526px] xl:min-h-[555px]"
+          >
+            <img
+              src="./assets/hero-image.png"
+              srcset="
+                ./assets/hero-image-480w.png  480w,
+                ./assets/hero-image-768w.png  768w,
+                ./assets/hero-image.png      1080w
+              "
+              sizes="(max-width: 768px) 480px, (min-width: 768px) 768px, (min-width: 1080px) 1080px"
+              alt="Hero image"
+              class="rounded-2xl"
+              loading="lazy"
+            />
+          </figure>
+        </div>
+      </header>
+
+      <!-- About Us -->
+      <section id="about-us" class="py-12 xl:py-20 bg-[#ffffff]">
+        <div class="container p-4 md:p-6">
+          <h2
+            class="text-3xl md:text-4xl lg:text-5xl font-poppins font-bold text-center text-heading tracking-tighter mb-6 lg:mb-8"
+          >
+            <span
+              class="text-primary block text-xl font-sans font-semibold mb-1 md:mb-2 tracking-normal"
             >
-              See Pricing
-            </button>
+              About us
+            </span>
+            Our Teammate
+          </h2>
+
+          <div
+            class="flex flex-col lg:flex-row-reverse lg:items-center gap-6 lg:gap-10"
+          >
+            <div
+              id="about-us-text"
+              class="mb-4 lg:mb-0 lg:w-1/2 text-base md:text-lg text-center lg:text-left md:max-w-xl md:mx-auto lg:max-w-[unset] lg:mx-0"
+            >
+              <p class="mb-4">
+                We move with make a Creative Strategy for help your business
+                goal, we help to improve your income by a services we have. make
+                your content look interesting and make people look for your
+                business
+              </p>
+              <p>
+                We move with make a Creative Strategy for help your business
+                goal, we help to improve your income by a services we have. make
+                your content look interesting and make people look for your
+                business
+              </p>
+            </div>
+
+            <div id="about-us-image" class="lg:w-1/2">
+              <figure
+                class="min-h-[232px] sm:min-h-[260px] lg:min-h-[282px] xl:min-h-[369px]"
+              >
+                <img
+                  src="./assets/about-us-image.png"
+                  alt="About us image"
+                  srcset="
+                    ./assets/about-us-image-480w.png  480w,
+                    ./assets/about-us-image-768w.png  768w,
+                    ./assets/about-us-image.png      1080w
+                  "
+                  sizes="(max-width: 768px) 480px, (min-width: 768px) 768px, (min-width: 1080px) 1080px"
+                  loading="lazy"
+                  class="w-full h-full max-w-sm lg:max-w-none mx-auto"
+                />
+              </figure>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Services -->
+      <div id="services" class="py-14 lg:py-20">
+        <div
+          class="flex flex-col lg:flex-row lg:gap-10 container p-4 md:p-6 lg:items-center"
+        >
+          <section
+            class="text-center w-full lg:text-left md:max-w-xl md:mx-auto lg:max-w-[unset] lg:mx-0 flex-grow mb-6 lg:mb-0"
+          >
+            <h2
+              class="text-3xl md:text-4xl lg:text-5xl font-poppins font-bold text-heading tracking-tighter mb-4 md:mb-6"
+            >
+              <span
+                class="text-primary block text-xl font-sans font-semibold mb-1 md:mb-2 tracking-normal"
+              >
+                Services
+              </span>
+              Perfect and Fast Movement
+            </h2>
+            <p class="lg:text-lg">
+              We move with make a Creative Strategy for help your business goal,
+              we help to improve your income by a services we have. make your
+              content look interesting and make people look for your business
+            </p>
+          </section>
+          <div class="w-full lg:min-w-[50%]">
+            <ul class="grid grid-rows-2 grid-cols-2 gap-4">
+              <li
+                class="bg-[#ffffff] border border-white-alt px-4 py-6 rounded flex flex-col items-center justify-center text-center gap-4 cursor-pointer hover:shadow-lg transition-all duration-300 ease-in-out group"
+              >
+                <div
+                  class="h-20 w-20 border bg-heading border-heading rounded-full flex items-center justify-center text-white transition-all duration-300 ease-in-out"
+                >
+                  <i class="fa fa-tv text-2xl"></i>
+                </div>
+                <span class="block mx-auto max-w-[150px]"
+                  >Social Media Management</span
+                >
+              </li>
+
+              <li
+                class="bg-[#ffffff] border border-white-alt px-4 py-6 rounded flex flex-col items-center justify-center text-center gap-4 cursor-pointer hover:shadow-lg transition-all duration-300 ease-in-out group"
+              >
+                <div
+                  class="h-20 w-20 border bg-heading border-heading rounded-full flex items-center justify-center text-white transition-all duration-300 ease-in-out"
+                >
+                  <i class="far fa-code text-3xl"></i>
+                </div>
+                <span class="block mx-auto max-w-[150px]"
+                  >Website Development</span
+                >
+              </li>
+
+              <li
+                class="bg-[#ffffff] border border-white-alt px-4 py-6 rounded flex flex-col items-center justify-center text-center gap-4 cursor-pointer hover:shadow-lg transition-all duration-300 ease-in-out group"
+              >
+                <div
+                  class="h-20 w-20 border bg-heading border-heading rounded-full flex items-center justify-center text-white transition-all duration-300 ease-in-out"
+                >
+                  <i class="far fa-pen-nib text-3xl"></i>
+                </div>
+                <span class="block mx-auto max-w-[150px]">Design</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <figure class="container hidden lg:block lg:h-[268px] xl:h-[345px]">
+          <img
+            loading="lazy"
+            src="./assets/process.png"
+            alt="Development process"
+          />
+        </figure>
+      </div>
+
+      <!-- Portfolio -->
+      <div id="portfolio" class="py-14 lg:py-20 bg-[#ffffff]">
+        <section class="container relative p-4 md:p-6 mb-4">
+          <!-- Overlays -->
+          <img
+            src="./assets/header-overlay.png"
+            alt="Overlay 2"
+            class="hidden md:block w-66 h-66 absolute -z-10 bottom-[45%] -left-0"
+          />
+          <img
+            src="./assets/header-overlay.png"
+            alt="Overlay 1"
+            class="hidden md:block absolute w-40 h-40 -z-10 -bottom-5 right-0"
+          />
+
+          <h2
+            class="text-3xl md:text-4xl lg:text-5xl font-poppins font-bold text-heading tracking-tighter mb-4 text-center md:mb-6"
+          >
+            <span
+              class="text-primary block text-xl font-sans font-semibold mb-1 md:mb-2 tracking-normal"
+            >
+              Our Portfolio
+            </span>
+            What do we do
+          </h2>
+
+          <p class="mx-auto text-center lg:max-w-2xl">
+            all projects that we have already done, proven can help to use more
+            comfortable, then can used by client from our business
+          </p>
+        </section>
+
+        <div
+          class="container relative z-30 grid grid-cols-1 md:grid-cols-2 md:gap-4"
+        >
+          <!-- Featured Project 1 -->
+          <div
+            class="relative w-full group h-[200px] sm:h-[250px] md:h-[300px] overflow-hidden md:rounded"
+          >
+            <img
+              loading="lazy"
+              src="./assets/portfolios/sample-1.png"
+              alt="Example portfolio"
+              class="absolute -z-[1] w-full h-full object-cover"
+            />
+            <div
+              class="absolute opacity-0 invisible z-[1] bg-black group-hover:bg-opacity-75 group-hover:visible group-hover:opacity-100 inset-0 w-full h-full transition-all duration-200 ease-in-out text-white p-4 md:p-6 flex flex-col justify-center items-center text-center"
+            >
+              <p class="text-xl font-semibold mb-2 md:text-2xl">
+                Example Portfolio
+              </p>
+              <p class="text-sm max-w-xs text-white-alt">
+                These images are only used as examples and are obtained from
+                <a
+                  href="https://dribbble.com/halolab"
+                  class="font-bold text-white"
+                  title="Halo Lab."
+                  >Halo Lab</a
+                >.
+              </p>
+            </div>
+          </div>
+
+          <!-- Featured Project 2 -->
+          <div
+            class="relative w-full group h-[200px] sm:h-[250px] md:h-[300px] overflow-hidden md:rounded"
+          >
+            <img
+              loading="lazy"
+              src="./assets/portfolios/sample-2.png"
+              alt="Example portfolio"
+              class="absolute -z-[1] w-full h-full object-cover"
+            />
+            <div
+              class="absolute opacity-0 invisible z-[1] bg-black group-hover:bg-opacity-75 group-hover:visible group-hover:opacity-100 inset-0 w-full h-full transition-all duration-200 ease-in-out text-white p-4 md:p-6 flex flex-col justify-center items-center text-center"
+            >
+              <p class="text-xl font-semibold mb-2 md:text-2xl">
+                Example Portfolio
+              </p>
+              <p class="text-sm max-w-xs text-white-alt">
+                These images are only used as examples and are obtained from
+                <a
+                  href="https://dribbble.com/halolab"
+                  class="font-bold text-white"
+                  title="Halo Lab."
+                  >Halo Lab</a
+                >.
+              </p>
+            </div>
           </div>
 
-          <!-- Header website illustration -->
+          <!-- Featured Project 3 -->
           <div
-            class="h-auto sm:h-[285px] md:h-[332px] lg:h-[418px] w-full max-w-[767px] rounded-t-3xl overflow-hidden mx-auto relative z-[1] mt-8"
+            class="relative w-full group h-[200px] sm:h-[250px] md:h-[300px] overflow-hidden md:rounded"
           >
             <img
-              src="./assets/header-image.jpg"
-              alt="Header illustration"
-              height="418"
-              width="767"
-              class="w-full h-auto sm:h-[285px] md:h-[332px] lg:h-[418px] pointer-events-none rounded-t-3xl max-w-[767px] mx-auto header-image-animation"
+              loading="lazy"
+              src="./assets/portfolios/sample-3.png"
+              alt="Example portfolio"
+              class="absolute -z-[1] w-full h-full object-cover"
             />
+            <div
+              class="absolute opacity-0 invisible z-[1] bg-black group-hover:bg-opacity-75 group-hover:visible group-hover:opacity-100 inset-0 w-full h-full transition-all duration-200 ease-in-out text-white p-4 md:p-6 flex flex-col justify-center items-center text-center"
+            >
+              <p class="text-xl font-semibold mb-2 md:text-2xl">
+                Example Portfolio
+              </p>
+              <p class="text-sm max-w-xs text-white-alt">
+                These images are only used as examples and are obtained from
+                <a
+                  href="https://dribbble.com/halolab"
+                  class="font-bold text-white"
+                  title="Halo Lab."
+                  >Halo Lab</a
+                >.
+              </p>
+            </div>
           </div>
 
-          <!-- Bottom Header Illustration -->
+          <!-- Featured Project 4 -->
+          <div
+            class="relative w-full group h-[200px] sm:h-[250px] md:h-[300px] overflow-hidden md:rounded"
+          >
+            <img
+              loading="lazy"
+              src="./assets/portfolios/sample-4.png"
+              alt="Example portfolio"
+              class="absolute -z-[1] w-full h-full object-cover"
+            />
+            <div
+              class="absolute opacity-0 invisible z-[1] bg-black group-hover:bg-opacity-75 group-hover:visible group-hover:opacity-100 inset-0 w-full h-full transition-all duration-200 ease-in-out text-white p-4 md:p-6 flex flex-col justify-center items-center text-center"
+            >
+              <p class="text-xl font-semibold mb-2 md:text-2xl">
+                Example Portfolio
+              </p>
+              <p class="text-sm max-w-xs text-white-alt">
+                These images are only used as examples and are obtained from
+                <a
+                  href="https://dribbble.com/halolab"
+                  class="font-bold text-white"
+                  title="Halo Lab."
+                  >Halo Lab</a
+                >.
+              </p>
+            </div>
+          </div>
+
+          <!-- Featured Project 5 -->
+          <div
+            class="relative w-full group h-[200px] sm:h-[250px] md:h-[300px] overflow-hidden md:rounded"
+          >
+            <img
+              loading="lazy"
+              src="./assets/portfolios/sample-5.png"
+              alt="Example portfolio"
+              class="absolute -z-[1] w-full h-full object-cover"
+            />
+            <div
+              class="absolute opacity-0 invisible z-[1] bg-black group-hover:bg-opacity-75 group-hover:visible group-hover:opacity-100 inset-0 w-full h-full transition-all duration-200 ease-in-out text-white p-4 md:p-6 flex flex-col justify-center items-center text-center"
+            >
+              <p class="text-xl font-semibold mb-2 md:text-2xl">
+                Example Portfolio
+              </p>
+              <p class="text-sm max-w-xs text-white-alt">
+                These images are only used as examples and are obtained from
+                <a
+                  href="https://dribbble.com/halolab"
+                  class="font-bold text-white"
+                  title="Halo Lab."
+                  >Halo Lab</a
+                >.
+              </p>
+            </div>
+          </div>
+
+          <!-- Featured Project 6 -->
+          <div
+            class="relative w-full group h-[200px] sm:h-[250px] md:h-[300px] overflow-hidden md:rounded"
+          >
+            <img
+              loading="lazy"
+              src="./assets/portfolios/sample-6.png"
+              alt="Example portfolio"
+              class="absolute -z-[1] w-full h-full object-cover"
+            />
+            <div
+              class="absolute opacity-0 invisible z-[1] bg-black group-hover:bg-opacity-75 group-hover:visible group-hover:opacity-100 inset-0 w-full h-full transition-all duration-200 ease-in-out text-white p-4 md:p-6 flex flex-col justify-center items-center text-center"
+            >
+              <p class="text-xl font-semibold mb-2 md:text-2xl">
+                Example Portfolio
+              </p>
+              <p class="text-sm max-w-xs text-white-alt">
+                These images are only used as examples and are obtained from
+                <a
+                  href="https://dribbble.com/halolab"
+                  class="font-bold text-white"
+                  title="Halo Lab."
+                  >Halo Lab</a
+                >.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="container px-4 pt-12 md:px-6 md:pt-14 flex items-center justify-center"
+        >
+          <button type="button" class="btn btn--default w-full max-w-[200px]">
+            See all Portfolio
+          </button>
+        </div>
+      </div>
+
+      <!-- Pricing -->
+      <div id="pricing" class="py-14 lg:py-20">
+        <section class="container relative p-4 md:p-6 mb-4">
+          <h2
+            class="text-3xl md:text-4xl lg:text-5xl font-poppins font-bold text-heading tracking-tighter mb-4 text-center md:mb-6"
+          >
+            <span
+              class="text-primary block text-xl font-sans font-semibold mb-1 md:mb-2 tracking-normal"
+            >
+              Pricing
+            </span>
+            Our Pricing Table
+          </h2>
+
+          <p class="mx-auto text-center lg:max-w-2xl">
+            It is along estabilished fact that a reader will be distracted by
+            the readable content of a page when looking at its layout
+          </p>
+        </section>
+
+        <div class="container p-4 md:p-6 pricing-container">
+          <div class="w-full pricing-box text-center">
+            <h3>Starter</h3>
+            <a href="#" class="btn btn--primary">
+              <i class="far fa-phone mr-1"></i>
+              Contact us
+            </a>
+            <ul>
+              <li>Free hosting</li>
+              <li class="text-red-500">
+                <i class="fa fa-times mr-0.5"></i>
+                Free Domain
+              </li>
+              <li>Free SSL</li>
+              <li>Max 5 pages</li>
+              <li>Responsive Web Design</li>
+              <li>Built-in Basic SEO</li>
+              <li>Free 3x Revision</li>
+            </ul>
+          </div>
+
+          <div
+            class="w-full pricing-box text-center bg-heading text-white-alt border-heading"
+          >
+            <h3 class="text-white inverted">Enterprise</h3>
+            <a href="#" class="btn btn--default--inverted">
+              <i class="far fa-phone mr-1"></i>
+              Contact us
+            </a>
+            <ul class="inverted">
+              <li>Free VPS Server (adapted to the scale of the application)</li>
+              <li>Free Domain with Cloudflare full control</li>
+              <li>Free Setup VPS</li>
+              <li>Responsive Web Design</li>
+              <li>Cross-Browser Support</li>
+              <li>Unlimited Revision</li>
+              <li>
+                Suitable for creating Dashboards, SaaS Applications, e-Commerce,
+                or other Website Applications
+              </li>
+            </ul>
+          </div>
+
+          <div class="w-full pricing-box text-center">
+            <h3>Professional</h3>
+            <a href="#" class="btn btn--primary">
+              <i class="far fa-phone mr-1"></i>
+              Contact us
+            </a>
+            <ul>
+              <li>Free hosting</li>
+              <li class="text-green-500">
+                <i class="far fa-check mr-0.5"></i>
+                Free Domain
+              </li>
+              <li>Free SSL</li>
+              <li>Max 10 pages</li>
+              <li>Responsive Web Design</li>
+              <li>Built-in Basic SEO</li>
+              <li>Free 15x Revision</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- CTA Banner / Call to Action Banner -->
+      <div id="cta-banner" class="py-14 lg:py-20 bg-[#ffffff]">
+        <div
+          class="container relative p-4 md:p-6 flex flex-col-reverse lg:flex-row items-center justify-between gap-8 sm:gap-12 md:gap-16"
+        >
+          <!-- Overlays -->
           <img
-            src="./assets/header-bottom-illustration.svg"
-            class="h-56 md:h-60 lg:h-80 w-auto absolute left-0 bottom-[150px] sm:bottom-1/3 z-0 pointer-events-none"
-            alt="Top page illustration"
-            data-sal="fade"
-            data-sal-duration="1000"
+            src="./assets/header-overlay.png"
+            alt="Overlay 2"
+            class="hidden lg:block w-66 h-66 absolute -z-10 -bottom-12 -left-1"
           />
-        </header>
-
-        <svg
-          width="1440"
-          height="4"
-          viewBox="0 0 1440 2"
-          class="w-full max-w-[1440px] h-auto mx-auto -translate-y-[2px]"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M680 0L0 2C0 2 414.441 4.00346 680 4C944.778 3.99655 1440 2 1440 2L680 0Z"
-            fill="url(#paint0_linear_203_241)"
+          <img
+            src="./assets/header-overlay.png"
+            alt="Overlay 1"
+            class="hidden lg:block absolute w-40 h-40 -z-10 top-16 -right-12"
           />
-          <defs>
-            <linearGradient
-              id="paint0_linear_203_241"
-              x1="679"
-              y1="1"
-              x2="679"
-              y2="3.00001"
-              gradientUnits="userSpaceOnUse"
+
+          <section
+            class="w-full flex-grow text-center lg:text-left xl:max-w-[40%]"
+          >
+            <h2
+              class="text-3xl md:text-4xl lg:text-5xl xl:text-[56px] xl:leading-tight font-poppins font-bold text-heading tracking-tighter mb-4 md:mb-6"
             >
-              <stop offset="0.3" stop-color="#D9D9D9" stop-opacity="0" />
-              <stop offset="0.5" stop-color="#0DC3F2" />
-              <stop offset="0.8" stop-color="#D9D9D9" stop-opacity="0" />
-            </linearGradient>
-          </defs>
-        </svg>
-      </div>
+              Interesting Collaboration With Us?
+            </h2>
+            <p class="mb-4 md:mb-6">Help you to reach your business goal</p>
 
-      <!-- <img
-        src="./assets/divider.svg"
-        alt="Divider"
-        class="w-full max-w-[1440px] h-auto mx-auto"
-      /> -->
+            <button type="button" class="btn btn--primary w-full max-w-[200px]">
+              Get Started
+            </button>
+          </section>
 
-      <div class="h-screen"></div>
+          <figure class="w-full flex-grow">
+            <img
+              loading="lazy"
+              alt="CTA Banner Image"
+              src="./assets/cta-banner-image.png"
+              srcset="
+                ./assets/cta-banner-image-480w.png  480w,
+                ./assets/cta-banner-image-768w.png  768w,
+                ./assets/cta-banner-image.png      1080w
+              "
+              sizes="(max-width: 768px) 480px, (min-width: 768px) 768px, (min-width: 1080px) 1080px"
+              class="w-full h-full max-w-sm lg:max-w-none mx-auto"
+            />
+          </figure>
+        </div>
+      </div>
     </main>
+
+    <footer class="py-14 lg:pt-20">
+      <div class="container p-4 md:p-6">
+        <img
+          src="./assets/logo.svg"
+          alt="Digipro Logo"
+          class="w-full max-w-[100px] mx-auto mb-8"
+        />
+        <p class="text-center">
+          Copyright @ 2023 <span class="font-bold text-heading">Digipro</span>.
+          All Right Reserved
+        </p>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 38fda51..8f04967 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -14,7 +14,7 @@ import NavigationToggler from "./navbar/navigation-toggler";
   });
 
   new NavigationToggler({
-    toggler: document.querySelector(".navigation-toggler"),
-    target: document.querySelector(".navigation-menu"),
+    toggler: document.querySelector(".nav__toggler"),
+    target: document.querySelector(".nav-menu"),
   }).activate();
 })();
diff --git a/src/scripts/navbar/navigation-toggler.js b/src/scripts/navbar/navigation-toggler.js
index 383df97..f9dd1a3 100644
--- a/src/scripts/navbar/navigation-toggler.js
+++ b/src/scripts/navbar/navigation-toggler.js
@@ -1,32 +1,32 @@
 class NavbarToggler {
   constructor({ toggler, target }) {
     this.toggler = toggler;
-    this.target = target;
+    this.menu = target;
   }
 
   activate() {
-    this.toggler.addEventListener("click", () => this._toggle());
+    this.toggler?.addEventListener("click", () => this._toggle());
 
     this._activateOnClickMenu();
   }
 
   _toggle() {
-    if (this.toggler.classList.contains("active")) {
-      this.toggler.classList.remove("active");
-      this.target.classList.remove("active");
+    if (this.toggler?.classList.contains("active")) {
+      this.toggler?.classList.remove("active");
+      this.menu?.classList.remove("active");
     } else {
-      this.toggler.classList.add("active");
-      this.target.classList.add("active");
+      this.toggler?.classList.add("active");
+      this.menu?.classList.add("active");
     }
   }
 
   _activateOnClickMenu() {
-    const links = [...document.querySelectorAll(".navigation-link")];
+    const links = [...document.querySelectorAll(".nav-menu a")];
 
     links.forEach((link) =>
       link.addEventListener("click", () => {
-        this.toggler.classList.remove("active");
-        this.target.classList.remove("active");
+        this.toggler?.classList.remove("active");
+        this.menu?.classList.remove("active");
       })
     );
   }
diff --git a/src/styles/animations/_index.scss b/src/styles/animations/_index.scss
index 3512253..ce2bf5d 100644
--- a/src/styles/animations/_index.scss
+++ b/src/styles/animations/_index.scss
@@ -1,2 +1,22 @@
 @import "./navigation-icon.scss";
 @import "./header-animation.scss";
+
+.animate {
+  &-flip {
+    opacity: 0;
+    transform: rotatex(180deg);
+    animation: flip 0.5s ease-in-out forwards;
+    animation-delay: 1s;
+  }
+}
+
+@keyframes flip {
+  0% {
+    opacity: 0;
+    transform: rotatex(180deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotatex(0);
+  }
+}
diff --git a/src/styles/animations/navigation-icon.scss b/src/styles/animations/navigation-icon.scss
index e69de29..3a45121 100644
--- a/src/styles/animations/navigation-icon.scss
+++ b/src/styles/animations/navigation-icon.scss
@@ -0,0 +1,47 @@
+@keyframes nav-icon-1 {
+  0% {
+    transform: translateY(0) rotate(225deg);
+  }
+  50% {
+    transform: translateY(0) rotate(0);
+  }
+  100% {
+    transform: translateY(-8px) rotate(0);
+  }
+}
+
+@keyframes nav-icon-1--active {
+  0% {
+    transform: translateY(-8px) rotate(0);
+  }
+  50% {
+    transform: translateY(0) rotate(0);
+  }
+  100% {
+    transform: translateY(0) rotate(225deg);
+  }
+}
+
+@keyframes nav-icon-3 {
+  0% {
+    transform: translateY(0) rotate(135deg);
+  }
+  50% {
+    transform: translateY(0) rotate(0);
+  }
+  100% {
+    transform: translateY(8px) rotate(0);
+  }
+}
+
+@keyframes nav-icon-3--active {
+  0% {
+    transform: translateY(8px) rotate(0);
+  }
+  50% {
+    transform: translateY(0) rotate(0);
+  }
+  100% {
+    transform: translateY(0) rotate(135deg);
+  }
+}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 7183768..7fb3bac 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -2,11 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+  @apply scroll-m-20 scroll-smooth;
+}
+
 @layer base {
   body {
-    @apply bg-zinc-950 text-zinc-300;
-    @apply text-base lg:text-lg font-sans;
+    @apply bg-white text-body;
+    // @apply bg-slate-50 text-slate-500;
+    // @apply bg-white text-gray-500;
+    // @apply bg-gray-950 text-zinc-300;
+
+    @apply text-base md:text-lg font-sans;
     @apply scroll-smooth;
+
+    &.lock {
+      @apply overflow-hidden;
+    }
   }
 }
 
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index f139f24..4d00057 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -1,2 +1,3 @@
 @import "./button.scss";
 @import "./navigation.scss";
+@import "./pricing.scss";
diff --git a/src/styles/components/button.scss b/src/styles/components/button.scss
index 409556f..8724d51 100644
--- a/src/styles/components/button.scss
+++ b/src/styles/components/button.scss
@@ -1,20 +1,41 @@
 .btn {
   @apply py-3 px-5;
-  @apply rounded-lg;
+  @apply rounded;
   @apply transition-all duration-200 ease-in-out;
-  @apply font-semibold;
+  @apply font-semibold text-sm;
+  @apply xl:text-base;
 
-  &-primary {
+  &--primary {
     @apply border border-primary;
     @apply bg-primary text-white;
     @apply hover:bg-primary-700 hover:border-primary-700;
     @apply focus:bg-primary-700 focus:border-primary-700 focus:outline-primary;
-    @apply hover:ring-4 hover:ring-primary hover:ring-opacity-25;
+    // @apply hover:ring-4 hover:ring-primary hover:ring-opacity-25;
+    @apply focus:ring-4 focus:ring-primary focus:ring-opacity-25;
 
-    &-outline {
+    &--outline {
       @apply border border-primary;
       @apply text-primary bg-transparent;
-      @apply hover:ring-4 hover:ring-primary hover:ring-opacity-25;
+      // @apply hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:bg-primary hover:bg-opacity-10;
+      @apply focus:ring-4 focus:ring-primary focus:ring-opacity-25 focus:bg-primary focus:bg-opacity-10;
+    }
+  }
+
+  &--default {
+    @apply bg-slate-950 text-white;
+    @apply hover:bg-slate-800;
+    @apply focus:bg-slate-800 focus:ring-4 focus:ring-slate-800 focus:ring-opacity-25;
+
+    &--outline {
+      @apply bg-transparent border border-slate-950 text-slate-950;
+      @apply hover:bg-slate-100;
+      @apply focus:bg-slate-100;
+    }
+
+    &--inverted {
+      @apply bg-white text-heading;
+      @apply hover:bg-white-alt;
+      @apply focus:bg-white-alt focus:ring-4 focus:ring-white-alt focus:ring-opacity-25;
     }
   }
 }
diff --git a/src/styles/components/navigation.scss b/src/styles/components/navigation.scss
index 0c09ca3..94b5a11 100644
--- a/src/styles/components/navigation.scss
+++ b/src/styles/components/navigation.scss
@@ -1,83 +1,91 @@
-$nav_menu_height: 296px;
+.nav {
+  @apply bg-white fixed z-40 top-0 left-0 w-full;
+  @apply lg:bg-opacity-75 lg:backdrop-blur;
+
+  // Navigation container
+  &-container {
+    @apply container;
+    @apply p-4 lg:p-6;
+    @apply flex flex-row flex-wrap items-center justify-between;
+  }
 
-.navigation {
-  // Navigation Toggler
-  &-toggler {
-    @apply w-8 h-8;
+  // Navigation toggler
+  &__toggler {
+    @apply w-11 h-11;
     @apply flex flex-col items-center justify-center;
+    @apply lg:hidden;
 
-    @screen lg {
-      @apply hidden;
-    }
-
-    > .icon {
-      @apply w-7 h-[2px] bg-white;
-      @apply absolute z-0;
-      @apply transition-all duration-200 ease-in-out;
+    & > .icon {
+      @apply w-6 h-[1.4px];
+      @apply bg-heading absolute;
+      @apply transition-all duration-[250] ease-in-out;
 
       &:nth-child(1) {
-        @apply -translate-y-2.5;
+        @apply translate-y-2;
+        animation: nav-icon-1 300ms ease-in-out forwards;
       }
 
       &:nth-child(3) {
-        @apply translate-y-2.5;
+        @apply -translate-y-2;
+        animation: nav-icon-3 300ms ease-in-out forwards;
       }
     }
 
     &.active > .icon {
       &:nth-child(1) {
-        @apply translate-y-0 rotate-[135deg];
+        animation: nav-icon-1--active 300ms ease-in-out forwards;
       }
 
       &:nth-child(2) {
-        @apply opacity-0 invisible;
+        @apply w-0;
       }
 
       &:nth-child(3) {
-        @apply translate-y-0 rotate-[225deg];
+        animation: nav-icon-3--active 300ms ease-in-out forwards;
       }
     }
   }
 
-  // Navigation Menu
+  // Navigation menu
   &-menu {
-    @apply w-full h-0 mt-4;
-    @apply transition-all duration-200 ease-in-out overflow-y-hidden;
+    @apply w-full h-full bg-white lg:bg-transparent;
+    @apply fixed top-20 left-0 -z-10;
+    @apply opacity-0 invisible -translate-y-4;
+    @apply transition-all duration-300 ease-in-out;
 
-    @screen lg {
-      @apply mt-0 w-full h-auto;
-    }
+    @apply lg:static lg:z-0 lg:w-auto lg:h-auto;
+    @apply lg:opacity-100 lg:visible lg:translate-y-0;
+    @apply lg:flex lg:flex-row lg:flex-grow;
 
     &.active {
-      height: $nav_menu_height;
-
-      @screen lg {
-        height: auto;
-      }
+      @apply opacity-100 visible translate-y-0;
     }
 
-    > ul {
-      @apply bg-zinc-800 lg:bg-transparent;
-      @apply rounded-md p-4;
-
-      @screen lg {
-        @apply flex flex-row items-center justify-center xl:gap-2 2xl:gap-4;
-        @apply p-0;
+    &-links {
+      @apply flex flex-col items-start justify-start;
+      @apply lg:flex-row lg:items-center lg:justify-end lg:gap-x-6 xl:gap-x-8 lg:flex-grow;
 
-        > li {
-          @apply inline-block;
+      > li {
+        @apply w-full;
+        @apply lg:w-auto;
 
-          > a {
-            @apply inline-block xl:whitespace-nowrap;
-          }
+        > a {
+          @apply py-2.5 block;
+          @apply lg:text-base xl:text-lg;
+          @apply hover:text-heading;
+          @apply focus:text-heading;
+          @apply lg:whitespace-nowrap;
         }
       }
+    }
 
-      > li {
-        > a {
-          @apply block p-2.5 rounded;
-          @apply text-white hover:text-primary focus:text-primary;
-        }
+    &-buttons {
+      @apply flex flex-col items-center justify-center gap-2;
+      @apply lg:flex-row lg:justify-end flex-grow;
+
+      > button {
+        @apply w-full;
+        @apply lg:w-auto;
       }
     }
   }
diff --git a/src/styles/components/pricing.scss b/src/styles/components/pricing.scss
new file mode 100644
index 0000000..ca7826c
--- /dev/null
+++ b/src/styles/components/pricing.scss
@@ -0,0 +1,41 @@
+.pricing {
+  &-container {
+    @apply flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-0;
+  }
+
+  &-box {
+    @apply border border-white-alt first:lg:border-r-0 first:lg:border-heading last:lg:border-l-0 last:lg:border-heading;
+    @apply lg:shadow-lg;
+    @apply rounded lg:rounded-lg first:lg:rounded-l-lg first:lg:rounded-r-none last:lg:rounded-r-lg last:lg:rounded-l-none;
+    @apply p-8 px-12 lg:px-8 lg:py-12;
+
+    > h3 {
+      &.inverted {
+        @apply text-white;
+      }
+
+      @apply text-2xl md:text-3xl font-bold text-heading tracking-tight mb-4 md:mb-6;
+    }
+
+    > a {
+      @apply mb-8 block max-w-[200px] mx-auto;
+    }
+
+    > ul {
+      @apply text-center mt-4;
+
+      &.inverted {
+        > li {
+          @apply border-b-slate-700;
+        }
+      }
+
+      > li {
+        @apply py-2;
+        @apply text-sm md:text-base;
+        @apply border-b border-b-white-alt;
+        @apply last:border-0;
+      }
+    }
+  }
+}
diff --git a/src/styles/config.scss b/src/styles/config.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/tailwind.config.js b/tailwind.config.js
index a73a888..e155a69 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,8 @@ module.exports = {
   content: ["./src/**/*.{ts,tsx,html,css}"],
   theme: {
     extend: {
-      colors: {
+      colors: ({ colors }) => ({
+        ...colors,
         primary: {
           200: "#C3F0FC",
           300: "#86E1F9",
@@ -15,7 +16,13 @@ module.exports = {
           700: "#0CB1DC",
           800: "#0BA1C8",
         },
-      },
+        // color: {
+        white: colors.slate[50],
+        "white-alt": colors.slate[200],
+        heading: colors.slate[900],
+        body: colors.slate[500],
+        // },
+      }),
       screens: {
         "3xl": "1420px",
       },