- Added dynamic scroll prompt functionality triggered by timeline completion.

- Introduced reusable `Nav` and `Footer` components.
- Updated layout with new navigation, footer, and responsive styling.
- Refactored timeline buttons for clarity and relocation.
- Improved global and scroll prompt styles for better UI/UX.
- Set up mobile responsiveness for navigation bar.

src/app/globals.css

@@ -138,16 +138,18 @@ html {
 
 .scrollPrompt {
     position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    color: #fff;
+    bottom: 40px;
+    left: 0;
+    width: 100%;
+    text-align: center;
     font-size: 1rem;
+    padding: 0.5rem 1rem;
+    color: #fff;
+    border-radius: 5px;
     z-index: 1000;
     background: none;
     animation: pulsePrompt 2s infinite ease-in-out;
+    pointer-events: none;
 }
 
 .fade-in-section.is-visible {
@@ -312,3 +314,58 @@ body {
     animation: fadeInButton 0.5s ease-out;
 }
 
+/* === Navigation Styles === */
+nav.navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    background-color: #1a001a;
+    border-bottom: 2px solid #3d003d;
+    position: sticky;
+    top: 0;
+    z-index: 999;
+}
+
+.navbar .nav-logo {
+    color: #fff;
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.navbar .nav-links {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.navbar .nav-link {
+    color: #fff;
+    text-decoration: none;
+    font-size: 1rem;
+    transition: color 0.3s ease;
+}
+
+.navbar .nav-link:hover {
+    color: #ff99ff;
+}
+
+/* Optional: mobile responsiveness */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 1rem;
+    }
+
+    .navbar .nav-links {
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    .navbar .nav-link {
+        width: 100%;
+    }
+}
+