Refactor index.html to modularize sections, implement sticky navigation, and enhance CSS styles for improved UI responsiveness

components/header.html

@@ -0,0 +1,59 @@
+<!-- Preloader -->
+<section class="preloader">
+  <div class="spinner">
+    <span class="spinner-rotate"></span>
+  </div>
+</section>
+
+<!-- Navigation -->
+<nav class="navbar navbar-expand-lg">
+  <div class="container">
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarNav"
+      aria-controls="navbarNav"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
+
+    <div class="d-flex align-items-center d-lg-none">
+      <i class="navbar-icon bi-telephone-plus me-3"></i>
+      <a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav ms-lg-5">
+        <li class="nav-item">
+          <a class="nav-link click-scroll" href="#section_1">Home</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link click-scroll" href="#section_2">About</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link click-scroll" href="#section_3">Services</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link click-scroll" href="#section_4">Projects</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link click-scroll" href="#section_5">Contact</a>
+        </li>
+      </ul>
+
+      <div class="d-lg-flex align-items-center d-none ms-auto">
+        <i class="navbar-icon bi-telephone-plus me-3"></i>
+        <a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
+      </div>
+    </div>
+  </div>
+</nav>