Repository: kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds
Pull request #5: Frontpage
Author: login: ANU-2524
Labels: name: Review effort 3/5
Created: 2025-05-03T20:35:21Z | Merged: 2025-05-03T20:36:17Z

### **User description**
Add some good css on FrontPage.


___

### **PR Type**
Enhancement, Tests


___

### **Description**
- Introduced a modern, animated FrontPage with advanced CSS and globe visualization
  - Added animated globe using `react-globe.gl` and `three`
  - Implemented section-based animations and improved layout
  - Enhanced call-to-action and feature presentation

- Added Dashboard, Navbar, and Sidebar components for navigation and layout
  - Created dedicated CSS for Dashboard, Navbar, and Sidebar
  - Sidebar provides dashboard navigation links
  - Navbar styled and expanded with new links

- Updated dependencies to support new features and animations
  - Added `framer-motion`, `react-globe.gl`, `three`, and `intersection-observer`

- Refactored routing and component structure in App.jsx
  - Integrated Navbar and Dashboard routes
  - Improved code organization for scalability


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>10 files</summary><table>
<tr>
  <td><strong>FrontPage.css</strong><dd><code>Major redesign with advanced animations and layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-fd056d4d6d46f7e7da131e9ab6d8a227f0b9688ba85216ab09c74908abb606d6">+286/-96</a></td>

</tr>

<tr>
  <td><strong>FrontPage.jsx</strong><dd><code>Animated, sectioned FrontPage with globe and CTA</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-7726db888abd167fc39a186d1e7a65d7396196388eca7a32aa52f124d51d96f6">+152/-39</a></td>

</tr>

<tr>
  <td><strong>AnimatedGlobe.jsx</strong><dd><code>New animated globe visualization component</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-52a90fb16d79ec949a4dfad3827baea55c23b7a9593036f1db14aed2c81ed9e0">+29/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>Dashboard.jsx</strong><dd><code>New Dashboard page with sections and layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-c3016b3ed3447d097a79ca6a897abb8baf292ce5a7d2c8ef619399398279837d">+33/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>Navbar.jsx</strong><dd><code>Redesigned Navbar with new links and styles</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-fbc78d5e63f96fca9dab5da0749dfd5e6d884c6a670faf1c0466b3a522eba732">+15/-7</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>Sidebar.jsx</strong><dd><code>Sidebar for dashboard navigation</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-514594d47c153e058bcb05c2baf4369159f95463a2843bedbb28bb7307ed3552">+20/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>Navbar.css</strong><dd><code>New CSS for Navbar styling and layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-c2f6f922fb372c15dc969db34a936c09b9f7ab429fca99b7261c86c105c33766">+34/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>Sidebar.css</strong><dd><code>New CSS for Sidebar styling and layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-2b55f0a96a2ab14967174c43262f39cbd6e76a8b82d804b1736944bb64002274">+30/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>Dashboard.css</strong><dd><code>New CSS for Dashboard layout and sections</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-e8c41ff1653fbea9d7d10e871411715c2b449b64d702fa8f18cb0ba25ddb28cd">+35/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>App.jsx</strong><dd><code>Refactored routing, added Dashboard and Navbar</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-a0eba768ed9d2a17091f82d46efb5e1c988f08185cc1e9989366995cdb4e3ba9">+13/-10</a>&nbsp; </td>

</tr>
</table></details></td></tr><tr><td><strong>Dependencies</strong></td><td><details><summary>1 files</summary><table>
<tr>
  <td><strong>package.json</strong><dd><code>Added dependencies for animation and globe features</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-da6498268e99511d9ba0df3c13e439d10556a812881c9d03955b2ef7c6c1c655">+5/-1</a>&nbsp; &nbsp; &nbsp; </td>

</tr>
</table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>2 files</summary><table>
<tr>
  <td><strong>App.css</strong><dd><code>Commented out default styles, prepping for new design</code>&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-a335e6772310196bfa0c52a745f82a727e22185ac26025ee94a46364f7fe09aa">+2/-2</a>&nbsp; &nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>main.jsx</strong><dd><code>Minor cleanup, removed unused import</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
  <td><a href="https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-e8a2a5ac2a7b3308c1a32f6d2a01d85706b57173f359ce86b8cf2c82c16e2de3">+1/-2</a>&nbsp; &nbsp; &nbsp; </td>

</tr>
</table></details></td></tr></tr></tbody></table>

___

> <details> <summary>  Need help?</summary><li>Type <code>/help how to ...</code> in the comments thread for any questions about Qodo Merge usage.</li><li>Check out the <a href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a> for more information.</li></details>


Diff:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a74197d..96cb979 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,9 +8,13 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "framer-motion": "^12.9.4",
+        "intersection-observer": "^0.12.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-router-dom": "^7.5.3"
+        "react-globe.gl": "^2.33.2",
+        "react-router-dom": "^7.5.3",
+        "three": "^0.176.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.22.0",
@@ -262,6 +266,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
+      "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.1.tgz",
@@ -1317,6 +1330,55 @@
         "win32"
       ]
     },
+    "node_modules/@turf/boolean-point-in-polygon": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.2.0.tgz",
+      "integrity": "sha512-lvEOjxeXIp+wPXgl9kJA97dqzMfNexjqHou+XHVcfxQgolctoJiRYmcVCWGpiZ9CBf/CJha1KmD1qQoRIsjLaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.2.0",
+        "@turf/invariant": "^7.2.0",
+        "@types/geojson": "^7946.0.10",
+        "point-in-polygon-hao": "^1.1.0",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.2.0.tgz",
+      "integrity": "sha512-cXo7bKNZoa7aC7ydLmUR02oB3IgDe7MxiPuRz3cCtYQHn+BJ6h1tihmamYDWWUlPHgSNF0i3ATc4WmDECZafKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/invariant": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.2.0.tgz",
+      "integrity": "sha512-kV4u8e7Gkpq+kPbAKNC21CmyrXzlbBgFjO1PhrHPgEdNqXqDawoZ3i6ivE3ULJj2rSesCjduUaC/wyvH/sNr2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^7.2.0",
+        "@types/geojson": "^7946.0.10",
+        "tslib": "^2.8.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "25.0.0",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-25.0.0.tgz",
+      "integrity": "sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1369,6 +1431,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1430,6 +1498,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/accessor-fn": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.5.3.tgz",
+      "integrity": "sha512-rkAofCwe/FvYFUlMB0v0gWmhqtfAtV1IUkdPbfhTUyYniu5LrC0A0UJkTH0Jv3S8SvwkmfuAlY+mQIJATdocMA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -1767,6 +1844,180 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-voronoi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-voronoi/-/d3-geo-voronoi-2.1.0.tgz",
+      "integrity": "sha512-kqE4yYuOjPbKdBXG0xztCacPwkVSK2REF1opSNrnqqtXJmNcM++UbwQ8SxvwP6IQTj9RvIjjK4qeiVsEfj0Z2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-delaunay": "6",
+        "d3-geo": "3",
+        "d3-tricontour": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-octree": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-octree/-/d3-octree-1.1.0.tgz",
+      "integrity": "sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A==",
+      "license": "MIT"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-tricontour": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d3-tricontour/-/d3-tricontour-1.0.2.tgz",
+      "integrity": "sha512-HIRxHzHagPtUPNabjOlfcyismJYIsc+Xlq4mlsts4e8eAcwyq9Tgk/sYdyhlBpQ0MHwVquc/8j+e29YjXnmxeA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-delaunay": "6",
+        "d3-scale": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-bind-mapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/data-bind-mapper/-/data-bind-mapper-1.0.3.tgz",
+      "integrity": "sha512-QmU3lyEnbENQPo0M1F9BMu4s6cqNNp8iJA+b/HP2sSb7pf3dxwF3+EP1eO69rwBfH9kFJ1apmzrtogAmVt2/Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "accessor-fn": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -1792,6 +2043,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -1817,6 +2077,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/earcut": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.1.tgz",
+      "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==",
+      "license": "ISC"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2322,6 +2588,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/float-tooltip": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/float-tooltip/-/float-tooltip-1.7.5.tgz",
+      "integrity": "sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-selection": "2 - 3",
+        "kapsule": "^1.16",
+        "preact": "10"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2332,6 +2612,42 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frame-ticker": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/frame-ticker/-/frame-ticker-1.0.3.tgz",
+      "integrity": "sha512-E0X2u2JIvbEMrqEg5+4BpTqaD22OwojJI63K7MdKHdncjtAhGRbCR8nJCr2vwEt9NWBPCPcu70X9smPviEBy8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "simplesignal": "^2.1.6"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "12.9.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.9.4.tgz",
+      "integrity": "sha512-yaeGDmGQ3eCQEwZ95/pRQMaSh/Q4E2CK6JYOclG/PdjyQad0MULJ+JFVV8911Fl5a6tF6o0wgW8Dpl5Qx4Adjg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.9.4",
+        "motion-utils": "^12.9.4",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -2442,6 +2758,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globe.gl": {
+      "version": "2.41.4",
+      "resolved": "https://registry.npmjs.org/globe.gl/-/globe.gl-2.41.4.tgz",
+      "integrity": "sha512-ExddewF46ncxFSG+ci62Vz7QO4NmLmTtJ386zLoZSgLdbKl9bWz6DN7DxXNkvo6M6mSV94E18uOvLbvr7YmsGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "kapsule": "^1.16",
+        "three": ">=0.154 <1",
+        "three-globe": "^2.42",
+        "three-render-objects": "^1.39"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -2455,6 +2788,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/h3-js": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-4.2.1.tgz",
+      "integrity": "sha512-HYiUrq5qTRFqMuQu3jEHqxXLk1zsSJiby9Lja/k42wHjabZG7tN9rOuzT/PEFf+Wa7rsnHLMHRWIu0mgcJ0ewQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=4",
+        "npm": ">=3",
+        "yarn": ">=1.3.0"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2558,6 +2902,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/index-array-by": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/index-array-by/-/index-array-by-1.4.2.tgz",
+      "integrity": "sha512-SP23P27OUKzXWEC/TOyWlwLviofQkCSCKONnc62eItjp69yCZZPqDQtr3Pw5gJDnPeUMqExmKydNZaJO0FU9pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -2565,6 +2918,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/intersection-observer": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
+      "integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -2612,11 +2980,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jerrypick": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/jerrypick/-/jerrypick-1.1.2.tgz",
+      "integrity": "sha512-YKnxXEekXKzhpf7CLYA0A+oDP8V0OhICNCr5lv96FvSsDEmrb0GKM776JgQvHTMjr7DTTPEVv/1Ciaw0uEWzBA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -2679,6 +3055,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/kapsule": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/kapsule/-/kapsule-1.16.3.tgz",
+      "integrity": "sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2719,6 +3107,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2726,6 +3120,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2805,6 +3211,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.9.4",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.9.4.tgz",
+      "integrity": "sha512-25TWkQPj5I18m+qVjXGtCsxboY11DaRC5HMjd29tHKExazW4Zf4XtAagBdLpyKsVuAxEQ6cx5/E4AB21PFpLnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.9.4"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.9.4",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.9.4.tgz",
+      "integrity": "sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2859,7 +3280,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3034,6 +3454,27 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/point-in-polygon-hao": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/point-in-polygon-hao/-/point-in-polygon-hao-1.2.4.tgz",
+      "integrity": "sha512-x2pcvXeqhRHlNRdhLs/tgFapAbSSe86wa/eqmj1G6pWftbEs5aVRJhRGM6FYSUERKu0PjekJzMq0gsI2XyiclQ==",
+      "license": "MIT",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -3063,6 +3504,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.26.5",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.5.tgz",
+      "integrity": "sha512-fmpDkgfGU6JYux9teDWLhj9mKN55tyepwYbxHgQuIxbWQzgFg5vk7Mrrtfx7xRxq798ynkY4DDDxZr235Kk+4w==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3073,6 +3524,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -3160,6 +3622,44 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-globe.gl": {
+      "version": "2.33.2",
+      "resolved": "https://registry.npmjs.org/react-globe.gl/-/react-globe.gl-2.33.2.tgz",
+      "integrity": "sha512-+keFNBxw4B45nyPm9fq2IeZNKgK6qfEivKXtaG6mSe6PRZF1QL5UeFxUZs07fSraY4GDPt2hL7xhlk2GunyZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "globe.gl": "^2.41",
+        "prop-types": "15",
+        "react-kapsule": "^2.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-kapsule": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-kapsule/-/react-kapsule-2.5.7.tgz",
+      "integrity": "sha512-kifAF4ZPD77qZKc4CKLmozq6GY1sBzPEJTIJb0wWFK6HsePJatK3jXplZn2eeAt3x67CDozgi7/rO8fNQ/AL7A==",
+      "license": "MIT",
+      "dependencies": {
+        "jerrypick": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3228,6 +3728,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.40.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.1.tgz",
@@ -3480,6 +3986,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simplesignal": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/simplesignal/-/simplesignal-2.1.7.tgz",
+      "integrity": "sha512-PEo2qWpUke7IMhlqiBxrulIFvhJRLkl1ih52Rwa+bPjzhJepcd4GIjn2RiQmFSx3dQvsEAgF0/lXMwMN7vODaA==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3526,6 +4038,123 @@
         "node": ">=8"
       }
     },
+    "node_modules/three": {
+      "version": "0.176.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.176.0.tgz",
+      "integrity": "sha512-PWRKYWQo23ojf9oZSlRGH8K09q7nRSWx6LY/HF/UUrMdYgN9i1e2OwJYHoQjwc6HF/4lvvYLC5YC1X8UJL2ZpA==",
+      "license": "MIT"
+    },
+    "node_modules/three-conic-polygon-geometry": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/three-conic-polygon-geometry/-/three-conic-polygon-geometry-2.1.2.tgz",
+      "integrity": "sha512-NaP3RWLJIyPGI+zyaZwd0Yj6rkoxm4FJHqAX1Enb4L64oNYLCn4bz1ESgOEYavgcUwCNYINu1AgEoUBJr1wZcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^7.2",
+        "d3-array": "1 - 3",
+        "d3-geo": "1 - 3",
+        "d3-geo-voronoi": "2",
+        "d3-scale": "1 - 4",
+        "delaunator": "5",
+        "earcut": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.72.0"
+      }
+    },
+    "node_modules/three-geojson-geometry": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/three-geojson-geometry/-/three-geojson-geometry-2.1.1.tgz",
+      "integrity": "sha512-dC7bF3ri1goDcihYhzACHOBQqu7YNNazYLa2bSydVIiJUb3jDFojKSy+gNj2pMkqZNSVjssSmdY9zlmnhEpr1w==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-geo": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "earcut": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.72.0"
+      }
+    },
+    "node_modules/three-globe": {
+      "version": "2.42.4",
+      "resolved": "https://registry.npmjs.org/three-globe/-/three-globe-2.42.4.tgz",
+      "integrity": "sha512-YWWFtl2MNT3CDDjgE4blmWaIgSjVOqJdtx9BaLIwWwVo4oTto6dU6w/tHkLKx/hCpGCQfhWJFszvereUaeknEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "d3-array": "3",
+        "d3-color": "3",
+        "d3-geo": "3",
+        "d3-interpolate": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "data-bind-mapper": "1",
+        "frame-ticker": "1",
+        "h3-js": "4",
+        "index-array-by": "1",
+        "kapsule": "^1.16",
+        "three-conic-polygon-geometry": "2",
+        "three-geojson-geometry": "2",
+        "three-slippy-map-globe": "1",
+        "tinycolor2": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.154"
+      }
+    },
+    "node_modules/three-render-objects": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.40.0.tgz",
+      "integrity": "sha512-Ub2IebRGrV+ctxkOe7lkLzIraJDTtz5s31Z2rvaQb7sHAXfofv02CwtEJmIPIkEy6jpGreuqJbCGEnQpvKKDFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "float-tooltip": "^1.7",
+        "kapsule": "^1.16",
+        "polished": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.168"
+      }
+    },
+    "node_modules/three-slippy-map-globe": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/three-slippy-map-globe/-/three-slippy-map-globe-1.0.3.tgz",
+      "integrity": "sha512-Y9WCA/tTL8yH8FHVSXVQss/P0V36utTNhuixzFPj0Bs0SXxO+Vui133oAQmMpx4BLXYZpWZwcqHM2i3MfFlYWw==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-geo": "1 - 3",
+        "d3-octree": "^1.1",
+        "d3-scale": "1 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.154"
+      }
+    },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -3553,6 +4182,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 53c9808..8f3ac71 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.9.4",
+    "intersection-observer": "^0.12.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.3"
+    "react-globe.gl": "^2.33.2",
+    "react-router-dom": "^7.5.3",
+    "three": "^0.176.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
diff --git a/frontend/src/App.css b/frontend/src/App.css
index b9d355d..3fb3548 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,4 +1,4 @@
-#root {
+/* #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
@@ -39,4 +39,4 @@
 
 .read-the-docs {
   color: #888;
-}
+} */
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8ecebf0..4d602bd 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,17 +1,20 @@
-import React from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import FrontPage from "./Components/FrontPage";  // Import the FrontPage component
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import FrontPage from './Components/FrontPage';
+import Dashboard from './Components/Dashboard'; // Import Dashboard component
+// import LoginPage from './Components/LoginPage'; // Import your LoginPage component
+import Navbar from './Components/Navbar'; // Import Navbar component
 
 function App() {
   return (
     <Router>
-      <div>
-        <Routes>
-          {/* Define your routes */}
-          <Route path="/" element={<FrontPage />} />
-          {/* Add other routes as your app grows, like login, dashboard, etc. */}
-        </Routes>
-      </div>
+      <Navbar /> {/* Display Navbar on all pages */}
+      <Routes>
+        <Route path="/" element={<FrontPage />} />
+        {/* <Route path="/login" element={<LoginPage />} /> */}
+        <Route path="/dashboard" element={<Dashboard />} />
+        {/* Add more routes as needed */}
+      </Routes>
     </Router>
   );
 }
diff --git a/frontend/src/Components/AnimatedGlobe.jsx b/frontend/src/Components/AnimatedGlobe.jsx
new file mode 100644
index 0000000..815addf
--- /dev/null
+++ b/frontend/src/Components/AnimatedGlobe.jsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+import Globe from 'react-globe.gl';
+
+const AnimatedGlobe = () => {
+  const globeEl = useRef();
+
+  useEffect(() => {
+    // Auto-rotate
+    globeEl.current.controls().autoRotate = true;
+    globeEl.current.controls().autoRotateSpeed = 0.8;
+    globeEl.current.pointOfView({ altitude: 2 }, 4000);
+  }, []);
+
+  return (
+    <div className="globe-container">
+      <Globe
+        ref={globeEl}
+        globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
+        backgroundColor="rgba(0,0,0,0)"
+        showGlobe={true}
+        showAtmosphere={true}
+        atmosphereColor="lightskyblue"
+        atmosphereAltitude={0.25}
+      />
+    </div>
+  );
+};
+
+export default AnimatedGlobe;
diff --git a/frontend/src/Components/Dashboard.jsx b/frontend/src/Components/Dashboard.jsx
new file mode 100644
index 0000000..edefecd
--- /dev/null
+++ b/frontend/src/Components/Dashboard.jsx
@@ -0,0 +1,33 @@
+// Dashboard.jsx
+import React from 'react';
+import Sidebar from './Sidebar';  // Import Sidebar component
+import Navbar from './Navbar';  // Import Navbar component
+import '../Styles/Dashboard.css';
+
+const Dashboard = () => {
+  return (
+    <div className="dashboard-container">
+      <Navbar />
+      <div className="dashboard-main">
+        <Sidebar />
+        <div className="dashboard-content">
+          <h2>Welcome to Your Dashboard</h2>
+          <p>Here you can manage your projects, teams, and more!</p>
+
+          {/* Add sections as you build more */}
+          <section className="section">
+            <h3>Overview</h3>
+            <p>This section gives you a quick view of your active projects and teams.</p>
+          </section>
+
+          <section className="section">
+            <h3>Your Projects</h3>
+            <p>Manage and collaborate on your ongoing projects.</p>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/frontend/src/Components/FrontPage.jsx b/frontend/src/Components/FrontPage.jsx
index d1b43de..5471bd6 100644
--- a/frontend/src/Components/FrontPage.jsx
+++ b/frontend/src/Components/FrontPage.jsx
@@ -1,63 +1,176 @@
-import React from "react";
+import React, { useEffect } from "react";
 import '../Styles/FrontPage.css';
-
+import AnimatedGlobe from "../Components/AnimatedGlobe";
+import { motion } from "framer-motion";
 const FrontPage = () => {
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('show');
+        }
+      });
+    });
+
+    const hiddenElements = document.querySelectorAll('.hidden');
+    hiddenElements.forEach(el => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className="frontpage-container">
       {/* Hero Section */}
-      <header className="hero">
+      <header className="hero hidden">
+      <div className="globe-overlay">
+        <AnimatedGlobe />
+      </div>
         <div className="hero-content">
-          <h1>Welcome to CollabNerds</h1>
-          <p>The ultimate platform for students to pitch ideas, find collaborators, and manage projects</p>
-          <button className="cta-button">Get Started</button>
+         
+
+<motion.h1
+  className="hero-title"
+  initial="hidden"
+  animate="visible"
+  variants={{
+    visible: {
+      transition: {
+        staggerChildren: 0.15
+      }
+    }
+  }}
+>
+  {"Find Your Perfect Team for Innovation".split(" ").map((word, index) => (
+    <motion.span
+      key={index}
+      variants={{
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0 }
+      }}
+      style={{ display: "inline-block", marginRight: "8px" }}
+    >
+      {word}
+    </motion.span>
+  ))}
+</motion.h1>
+          <p className="subtitle">CollabNerds connects students with brilliant ideas to talented collaborators. Pitch your project, build your team, and bring your vision to life.</p>
+          
+          <div className="cta-buttons">
+            <button className="primary-button hover-scale">
+              Get Started
+              <span className="button-glow"></span>
+            </button>
+            <button className="secondary-button hover-scale">
+              Explore Projects
+              <span className="button-glow"></span>
+            </button>
+          </div>
+        </div>
+        
+        <div className="hero-deco">
+          <div className="deco-orb purple"></div>
+          <div className="deco-orb blue"></div>
         </div>
       </header>
 
-      {/* About Section */}
-      <section className="about">
-        <h2>About CollabNerds</h2>
-        <p>
-          CollabNerds is a collaborative platform designed to help students connect with like-minded individuals,
-          pitch innovative ideas, and bring them to life through teamwork. It's a space for growth, collaboration, and creativity.
-        </p>
+      {/* Innovation Section */}
+      <section className="innovation-section hidden">
+        <div className="section-inner">
+          <h2>Fueling Innovation One Collab at a Time</h2>
+          <div className="innovation-grid">
+            {['💡', '👥', '💬'].map((icon, index) => (
+              <div className="innovation-card hover-float" key={index}>
+                <div className="card-icon">{icon}</div>
+                <h3>{['Project Pitching', 'Team Management', 'Built-in Communication'][index]}</h3>
+                <p>{[
+                  'Share your idea with goals, description & required skills to attract the perfect team.',
+                  'Accept or decline contributor requests and manage team roles efficiently.',
+                  'Chat with team members and schedule meetings using our integrated tools.'
+                ][index]}</p>
+                <div className="card-glow"></div>
+              </div>
+            ))}
+          </div>
+        </div>
       </section>
 
-      {/* Key Features Section */}
-      <section className="features">
-        <h2>Core Features</h2>
-        <div className="feature-cards">
-          <div className="feature-card">
-            <h3>Pitch Ideas</h3>
-            <p>Share your innovative project ideas with the community and find collaborators.</p>
-          </div>
-          <div className="feature-card">
-            <h3>Team Management</h3>
-            <p>Easily manage your project teams with built-in task assignments, schedules, and progress tracking.</p>
-          </div>
-          <div className="feature-card">
-            <h3>Real-Time Chat</h3>
-            <p>Communicate with your team in real-time through our integrated chat system.</p>
+      {/* How It Works Section */}
+      <section className="how-it-works">
+        <div className="section-inner">
+          <h2>How CollabNerds Works</h2>
+          <div className="steps-grid">
+            <div className="step-card">
+              <div className="step-number">1</div>
+              <h3>Create Account</h3>
+              <p>Sign up with email or Google in seconds</p>
+            </div>
+            <div className="step-card">
+              <div className="step-number">2</div>
+              <h3>Pitch Your Idea</h3>
+              <p>Share project details and required skills</p>
+            </div>
+            <div className="step-card">
+              <div className="step-number">3</div>
+              <h3>Build Your Team</h3>
+              <p>Review and accept contributor requests</p>
+            </div>
+            <div className="step-card">
+              <div className="step-number">4</div>
+              <h3>Collaborate</h3>
+              <p>Use built-in tools to bring your idea to life</p>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Sign-Up / Log-In Section */}
-      <section className="auth">
-        <h2>Join CollabNerds</h2>
-        <button className="cta-button">Sign Up</button>
-        <p>Already have an account? <a href="/login">Log In</a></p>
+      {/* Final CTA Section */}
+      <section className="final-cta">
+        <div className="cta-content">
+          <h2>Ready to Find Your Dream Team?</h2>
+          <p>Join CollabNerds today and turn your ideas into reality with the perfect collaborators.</p>
+          <button className="cta-button">Get Started Now</button>
+        </div>
       </section>
 
       {/* Footer */}
-      <footer className="footer">
-        <p>&copy; 2025 CollabNerds. All rights reserved.</p>
-        <div className="social-links">
-          <a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a>
-          <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">Twitter</a>
+      <footer className="main-footer">
+        <div className="footer-content">
+          <div className="footer-section">
+            <h4>Platform</h4>
+            <ul>
+              <li>How It Works</li>
+              <li>Features</li>
+              <li>Pricing</li>
+            </ul>
+          </div>
+          
+          <div className="footer-section">
+            <h4>Resources</h4>
+            <ul>
+              <li>Blog</li>
+              <li>Documentation</li>
+              <li>Support</li>
+            </ul>
+          </div>
+
+          <div className="footer-section">
+            <h4>Company</h4>
+            <ul>
+              <li>About Us</li>
+              <li>Contact</li>
+              <li>Privacy Policy</li>
+            </ul>
+          </div>
+
+          <div className="footer-branding">
+            <h3>CollabNerds</h3>
+            <p>By students, for students. Fueling innovation one collab at a time.</p>
+            <p className="copyright">© 2025 CollabNerds. All rights reserved.</p>
+          </div>
         </div>
       </footer>
     </div>
   );
 };
 
-export default FrontPage;
+export default FrontPage;
\ No newline at end of file
diff --git a/frontend/src/Components/Navbar.jsx b/frontend/src/Components/Navbar.jsx
index d02fe74..0247d6e 100644
--- a/frontend/src/Components/Navbar.jsx
+++ b/frontend/src/Components/Navbar.jsx
@@ -1,15 +1,23 @@
+// Navbar.jsx
 import React from 'react';
 import { Link } from 'react-router-dom';
+import '../Styles/Navbar.css';
 
 const Navbar = () => {
   return (
-    <nav>
-      <ul>
-        <li><Link to="/">Home</Link></li>
-        <li><Link to="/login">Login</Link></li>
-        <li><Link to="/signup">Signup</Link></li>
-      </ul>
-    </nav>
+    <header className="navbar">
+      <div className="navbar-brand">
+        <h1>CollabNerds</h1>
+      </div>
+      <nav className="navbar-nav">
+        <ul>
+          <li><Link to="/">Home</Link></li>
+          <li><Link to="/dashboard">Dashboard</Link></li>
+          <li><Link to="/profile">Profile</Link></li>
+          <li><Link to="/login">Logout</Link></li>
+        </ul>
+      </nav>
+    </header>
   );
 };
 
diff --git a/frontend/src/Components/Sidebar.jsx b/frontend/src/Components/Sidebar.jsx
new file mode 100644
index 0000000..4d8c408
--- /dev/null
+++ b/frontend/src/Components/Sidebar.jsx
@@ -0,0 +1,20 @@
+// Sidebar.jsx
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../Styles/Sidebar.css';
+
+const Sidebar = () => {
+  return (
+    <aside className="sidebar">
+      <ul>
+        <li><Link to="/dashboard/overview">Overview</Link></li>
+        <li><Link to="/dashboard/projects">Projects</Link></li>
+        <li><Link to="/dashboard/teams">Teams</Link></li>
+        <li><Link to="/dashboard/messages">Messages</Link></li>
+        <li><Link to="/dashboard/settings">Settings</Link></li>
+      </ul>
+    </aside>
+  );
+};
+
+export default Sidebar;
diff --git a/frontend/src/Styles/Dashboard.css b/frontend/src/Styles/Dashboard.css
new file mode 100644
index 0000000..7f44c13
--- /dev/null
+++ b/frontend/src/Styles/Dashboard.css
@@ -0,0 +1,35 @@
+/* Dashboard Styles */
+.dashboard-container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .dashboard-main {
+    display: flex;
+    margin-top: 20px;
+  }
+  
+  .dashboard-content {
+    margin-left: 270px; /* Sidebar width */
+    padding: 20px;
+    flex-grow: 1;
+  }
+  
+  .dashboard-content h2 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+  }
+  
+  .section {
+    background-color: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  h3 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/Styles/FrontPage.css b/frontend/src/Styles/FrontPage.css
index 74d89cf..3a1b627 100644
--- a/frontend/src/Styles/FrontPage.css
+++ b/frontend/src/Styles/FrontPage.css
@@ -1,165 +1,355 @@
-/* Global Styles */
-* {
+/* === FrontPage.css === */
+
+body, html {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    scroll-behavior: smooth;
+    background: linear-gradient(to bottom right, #0f0c29, #302b63, #24243e);
+    color: #fff;
+    overflow-x: hidden;
   }
   
-  body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f7f7f7;
-    color: #333;
+  .frontpage-container {
+    animation: fadeIn 2s ease-in-out;
   }
   
-  /* Hero Section */
+  /* === Animations === */
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  
+  @keyframes floatOrb {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+  }
+  
+  @keyframes glowPulse {
+    0%, 100% { box-shadow: 0 0 10px #fff5, 0 0 20px #fff2; }
+    50% { box-shadow: 0 0 20px #fff8, 0 0 30px #fffc; }
+  }
+  
+  @keyframes spinGlobe {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  .hidden {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.8s ease-in-out;
+  }
+  
+  .show {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  /* === Hero Section === */
   .hero {
-    background-color: #3b82f6;
-    color: white;
-    padding: 60px 20px;
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
+    padding: 2rem;
+    background: radial-gradient(circle, #1f1c2c, #928dab);
+    overflow: hidden;
+  }
+  
+  .globe-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    z-index: 0;
+    opacity: 0.7;
+    pointer-events: none;
+  }
+  
+  .hero-content {
+    position: relative;
+    z-index: 2;
   }
   
-  .hero h1 {
+  .hero {
+    position: relative;
+    overflow: hidden;
+  }
+  
+
+  .hero::before {
+    content: '';
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    border-radius: 50%;
+    background: radial-gradient(circle, #29abe2, #4f00bc);
+    top: -100px;
+    left: -100px;
+    filter: blur(120px);
+    opacity: 0.3;
+  }
+  
+  .hero::after {
+    content: '';
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    border-radius: 50%;
+    background: radial-gradient(circle, #f953c6, #b91d73);
+    bottom: -100px;
+    right: -100px;
+    filter: blur(120px);
+    opacity: 0.3;
+  }
+  
+  .hero-globe {
+    position: absolute;
+    top: 10%;
+    right: 5%;
+    width: 250px;
+    height: 250px;
+    background: url('https://upload.wikimedia.org/wikipedia/commons/e/ef/Globe_icon.svg');
+    background-size: cover;
+    opacity: 0.2;
+    animation: spinGlobe 60s linear infinite;
+    z-index: 0;
+  }
+  
+  .hero-content {
+    position: relative;
+    z-index: 1;
+  }
+  
+  .hero-content h1 {
     font-size: 3rem;
-    margin-bottom: 20px;
+    background: linear-gradient(90deg, #ff8a00, #e52e71);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
   
-  .hero p {
-    font-size: 1.2rem;
-    margin-bottom: 30px;
+  .subtitle {
+    font-size: 1.25rem;
+    margin-top: 1rem;
+    color: #ccc;
   }
   
-  .cta-button {
-    background-color: #ffffff;
-    color: #3b82f6;
-    padding: 12px 30px;
-    font-size: 1rem;
+  .cta-buttons {
+    margin-top: 2rem;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+  }
+  
+  .primary-button,
+  .secondary-button {
+    padding: 0.75rem 2rem;
     border: none;
+    border-radius: 30px;
+    font-size: 1rem;
     cursor: pointer;
-    border-radius: 5px;
-    transition: background-color 0.3s ease;
+    background: linear-gradient(135deg, #ff6ec4, #7873f5);
+    color: white;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s ease;
   }
   
-  .cta-button:hover {
-    background-color: #dbeafe;
+  .primary-button:hover,
+  .secondary-button:hover {
+    transform: scale(1.05);
   }
   
-  /* About Section */
-  .about {
-    background-color: #ffffff;
-    padding: 60px 20px;
-    text-align: center;
+  .button-glow {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-shadow: 0 0 20px #ffffff50;
+    z-index: -1;
+    border-radius: inherit;
+    animation: glowPulse 2s infinite;
   }
   
-  .about h2 {
-    font-size: 2.5rem;
-    margin-bottom: 20px;
+  /* === Decorative Orbs === */
+  .hero-deco .deco-orb {
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    filter: blur(100px);
+    opacity: 0.6;
+    animation: floatOrb 6s ease-in-out infinite;
   }
   
-  .about p {
-    font-size: 1.1rem;
-    color: #666;
+  .deco-orb.purple {
+    background: #9f44d3;
+    top: 20%;
+    left: 10%;
   }
   
-  /* Features Section */
-  .features {
-    background-color: #f3f4f6;
-    padding: 60px 20px;
-    text-align: center;
+  .deco-orb.blue {
+    background: #45a3f5;
+    bottom: 10%;
+    right: 10%;
   }
   
-  .features h2 {
-    font-size: 2.5rem;
-    margin-bottom: 40px;
+  /* === Innovation Section === */
+  .innovation-section {
+    padding: 4rem 2rem;
+    background: linear-gradient(to bottom, #24243e, #141e30);
   }
   
-  .feature-cards {
+  .innovation-grid {
     display: flex;
-    justify-content: space-around;
-    gap: 30px;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 2rem;
   }
   
-  .feature-card {
-    background-color: #ffffff;
-    padding: 30px;
-    width: 250px;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  .innovation-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    border-radius: 16px;
+    width: 300px;
+    text-align: center;
+    position: relative;
+    transition: transform 0.3s;
   }
   
-  .feature-card h3 {
-    font-size: 1.6rem;
-    margin-bottom: 15px;
+  .innovation-card:hover {
+    transform: translateY(-10px);
   }
   
-  .feature-card p {
-    color: #666;
-    font-size: 1rem;
+  .card-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
   }
   
-  /* Auth Section */
-  .auth {
+  .card-glow {
+    position: absolute;
+    inset: 0;
+    border-radius: 16px;
+    box-shadow: 0 0 30px #ffffff20;
+    z-index: -1;
+    animation: glowPulse 3s infinite;
+  }
+  
+  /* === How It Works Section === */
+  .how-it-works {
+    padding: 4rem 2rem;
+    background-color: #121212;
+  }
+  
+  .steps-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+  }
+  
+  .step-card {
+    background: #1e1e2f;
+    border: 1px solid #444;
+    border-radius: 12px;
+    padding: 1.5rem;
     text-align: center;
-    padding: 50px 20px;
+    transition: transform 0.3s;
+  }
+  
+  .step-card:hover {
+    transform: scale(1.05);
+  }
+  
+  .step-number {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #ff6ec4;
+    margin-bottom: 1rem;
   }
   
-  .auth button {
-    background-color: #10b981;
+  /* === Final CTA Section === */
+  .final-cta {
+    background: linear-gradient(to right, #ff6ec4, #7873f5);
+    text-align: center;
+    padding: 4rem 2rem;
     color: white;
-    padding: 15px 30px;
-    font-size: 1.1rem;
+  }
+  
+  .final-cta h2 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .cta-button {
+    margin-top: 1rem;
+    background: white;
+    color: #ff6ec4;
+    padding: 0.75rem 2rem;
+    border-radius: 30px;
     border: none;
+    font-size: 1rem;
     cursor: pointer;
-    border-radius: 5px;
-    transition: background-color 0.3s ease;
+    transition: transform 0.3s;
   }
   
-  .auth button:hover {
-    background-color: #059669;
+  .cta-button:hover {
+    transform: scale(1.05);
   }
   
-  .auth p {
-    margin-top: 20px;
-    font-size: 1rem;
+  /* === Footer === */
+  .main-footer {
+    background: #0e0e1a;
+    padding: 3rem 2rem;
+    color: #aaa;
   }
   
-  .auth a {
-    color: #3b82f6;
-    text-decoration: none;
+  .footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: space-between;
   }
   
-  /* Footer */
-  .footer {
-    background-color: #333;
-    color: white;
-    text-align: center;
-    padding: 20px;
+  .footer-section ul {
+    list-style: none;
+    padding: 0;
   }
   
-  .footer p {
-    margin-bottom: 10px;
+  .footer-section li {
+    margin: 0.5rem 0;
   }
   
-  .social-links a {
-    color: #ffffff;
-    margin: 0 10px;
-    text-decoration: none;
+  .footer-branding h3 {
+    font-size: 1.5rem;
+    color: #fff;
+    margin-bottom: 0.5rem;
   }
   
-  .social-links a:hover {
-    text-decoration: underline;
+  .footer-branding p {
+    margin: 0.25rem 0;
+    font-size: 0.9rem;
+    color: #ccc;
   }
   
-  /* Responsive Styles */
-  @media screen and (max-width: 768px) {
-    .feature-cards {
+  /* === Responsive === */
+  @media (max-width: 768px) {
+    .cta-buttons {
       flex-direction: column;
       align-items: center;
     }
   
-    .feature-card {
-      width: 80%;
-      margin-bottom: 20px;
+    .footer-content {
+      flex-direction: column;
+    }
+  
+    .hero-globe {
+      display: none;
     }
   }
   
\ No newline at end of file
diff --git a/frontend/src/Styles/Navbar.css b/frontend/src/Styles/Navbar.css
new file mode 100644
index 0000000..3c3d62b
--- /dev/null
+++ b/frontend/src/Styles/Navbar.css
@@ -0,0 +1,34 @@
+/* Navbar Styles */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #333;
+    color: white;
+    padding: 10px 20px;
+  }
+  
+  .navbar-brand h1 {
+    font-size: 1.8rem;
+  }
+  
+  .navbar-nav ul {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+  }
+  
+  .navbar-nav li {
+    margin: 0;
+  }
+  
+  .navbar-nav a {
+    color: white;
+    text-decoration: none;
+    font-size: 1.1rem;
+  }
+  
+  .navbar-nav a:hover {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/Styles/Sidebar.css b/frontend/src/Styles/Sidebar.css
new file mode 100644
index 0000000..27c4341
--- /dev/null
+++ b/frontend/src/Styles/Sidebar.css
@@ -0,0 +1,30 @@
+/* Sidebar Styles */
+.sidebar {
+    width: 250px;
+    background-color: #f4f4f4;
+    padding: 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+  }
+  
+  .sidebar ul {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .sidebar li {
+    margin-bottom: 20px;
+  }
+  
+  .sidebar a {
+    color: #333;
+    text-decoration: none;
+    font-size: 1.2rem;
+  }
+  
+  .sidebar a:hover {
+    text-decoration: underline;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 18858da..a0c35ef 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,11 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+// import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-
     <App />
   </StrictMode>,
 )


Reviews:
user: login: qodo-free-for-open-source-projects[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-03T20:36:32Z
user: login: qodo-code-review[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-03T20:36:32Z

Review comments:
diff_hunk: @@ -0,0 +1,33 @@
+// Dashboard.jsx
+import React from 'react';
+import Sidebar from './Sidebar';  // Import Sidebar component
+import Navbar from './Navbar';  // Import Navbar component
+import '../Styles/Dashboard.css';
+
+const Dashboard = () => {
+  return (
+    <div className="dashboard-container">
+      <Navbar />
+      <div className="dashboard-main">
+        <Sidebar />
+        <div className="dashboard-content">
path: frontend/src/Components/Dashboard.jsx
user: login: qodo-free-for-open-source-projects[bot]
body: **Suggestion:** Remove duplicate component
```suggestion
    <div className="dashboard-container">
      <div className="dashboard-main">
        <Sidebar />
        <div className="dashboard-content">
```

<!-- manually_applied -->
created_at: 2025-05-03T20:36:32Z
author_association: NONE
diff_hunk: @@ -0,0 +1,33 @@
+// Dashboard.jsx
+import React from 'react';
+import Sidebar from './Sidebar';  // Import Sidebar component
+import Navbar from './Navbar';  // Import Navbar component
+import '../Styles/Dashboard.css';
+
+const Dashboard = () => {
+  return (
+    <div className="dashboard-container">
+      <Navbar />
+      <div className="dashboard-main">
+        <Sidebar />
+        <div className="dashboard-content">
path: frontend/src/Components/Dashboard.jsx
user: login: qodo-code-review[bot]
body: **Suggestion:** Remove duplicate component
```suggestion
    <div className="dashboard-container">
      <div className="dashboard-main">
        <Sidebar />
        <div className="dashboard-content">
```

<!-- manually_applied -->
created_at: 2025-05-03T20:36:32Z
author_association: NONE

PR comments:
user: login: ANU-2524
created_at: 2025-05-03T20:35:33Z
body: @CodiumAI-Agent /review
author_association: COLLABORATOR
user: login: qodo-free-for-open-source-projects[bot]
created_at: 2025-05-03T20:35:49Z
body: ## PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

<table>
<tr><td>⏱️&nbsp;<strong>Estimated effort to review</strong>: 3 🔵🔵🔵⚪⚪</td></tr>
<tr><td>🧪&nbsp;<strong>No relevant tests</strong></td></tr>
<tr><td>🔒&nbsp;<strong>No security concerns identified</strong></td></tr>
<tr><td>⚡&nbsp;<strong>Recommended focus areas for review</strong><br><br>

<details><summary><a href='https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-c3016b3ed3447d097a79ca6a897abb8baf292ce5a7d2c8ef619399398279837dR10-R10'><strong>Component Duplication</strong></a>

The Dashboard component imports and renders Navbar, but Navbar is already rendered in App.jsx for all routes. This creates duplicate Navbar instances when viewing the Dashboard.
</summary>

```jsx
<Navbar />
<div className="dashboard-main">
```

</details>

<details><summary><a href='https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-7726db888abd167fc39a186d1e7a65d7396196388eca7a32aa52f124d51d96f6R18-R18'><strong>Resource Loading</strong></a>

The globe image URL is loaded from an external unpkg CDN without fallback. If the CDN is unavailable, the globe visualization will fail to render properly.
</summary>

```jsx
  return () => observer.disconnect();
}, []);
```

</details>

<details><summary><a href='https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-52a90fb16d79ec949a4dfad3827baea55c23b7a9593036f1db14aed2c81ed9e0R9-R10'><strong>Performance Concern</strong></a>

The globe animation runs continuously with autoRotate enabled, which may cause performance issues on lower-end devices. Consider adding a way to pause animation or reduce quality based on device capabilities.
</summary>

```jsx
globeEl.current.controls().autoRotate = true;
globeEl.current.controls().autoRotateSpeed = 0.8;
```

</details>

</td></tr>
</table>

author_association: NONE
user: login: QodoAI-Agent
created_at: 2025-05-03T20:36:11Z
body: **[Persistent review](https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5#issuecomment-2848798481)** updated to latest commit https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/commit/dd647436df9908dc8fbbe59e3e50407984c3169a
author_association: NONE
user: login: qodo-free-for-open-source-projects[bot]
created_at: 2025-05-03T20:36:11Z
body: ## PR Code Suggestions ✨

<!-- dd64743 -->

Explore these optional code suggestions:

<table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=1>Possible issue</td>
<td>



<details><summary>✅ 
Remove duplicate component
</summary>

___


**The Dashboard component already imports and renders the Navbar component, but <br>the App.jsx also renders Navbar for all routes. This creates duplicate Navbar <br>elements when viewing the Dashboard. Remove the Navbar from Dashboard.jsx to <br>prevent duplication.**

[frontend/src/Components/Dashboard.jsx [9-13]](https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-c3016b3ed3447d097a79ca6a897abb8baf292ce5a7d2c8ef619399398279837dR9-R13)

```diff
 <div className="dashboard-container">
-  <Navbar />
   <div className="dashboard-main">
     <Sidebar />
     <div className="dashboard-content">
```

`[Suggestion has been applied]`

<details><summary>Suggestion importance[1-10]: 6</summary>

__

Why: The suggestion correctly identifies that the `Navbar` component is rendered globally in `App.jsx` and also within `Dashboard.jsx`, leading to duplication. Removing it from `Dashboard.jsx` resolves this UI issue.


</details></details></td><td align=center>Low

</td></tr><tr><td rowspan=2>Possible issue</td>
<td>



<details><summary>Add null check for ref</summary>

___


**The code assumes <code>globeEl.current</code> is always defined, but it could be null if the <br>ref hasn't been assigned yet. Add a null check to prevent potential runtime <br>errors when accessing properties of undefined.**

[frontend/src/Components/AnimatedGlobe.jsx [7-12]](https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-52a90fb16d79ec949a4dfad3827baea55c23b7a9593036f1db14aed2c81ed9e0R7-R12)

```diff
 useEffect(() => {
-  // Auto-rotate
-  globeEl.current.controls().autoRotate = true;
-  globeEl.current.controls().autoRotateSpeed = 0.8;
-  globeEl.current.pointOfView({ altitude: 2 }, 4000);
+  if (globeEl.current) {
+    // Auto-rotate
+    globeEl.current.controls().autoRotate = true;
+    globeEl.current.controls().autoRotateSpeed = 0.8;
+    globeEl.current.pointOfView({ altitude: 2 }, 4000);
+  }
 }, []);
```

- [ ] **Apply this suggestion** <!-- /improve --apply_suggestion=1 -->

<details><summary>Suggestion importance[1-10]: 7</summary>

__

Why: The suggestion correctly identifies a potential runtime error if `globeEl.current` is accessed before the ref is assigned. Adding a null check (`if (globeEl.current)`) is a standard defensive practice when working with refs in `useEffect` and improves code robustness.


</details></details></td><td align=center>Medium

</td></tr><tr><td>



<details><summary>Fix IntersectionObserver cleanup</summary>

___


**The IntersectionObserver cleanup function doesn't properly unobserve elements <br>before disconnecting. This can lead to memory leaks. Modify the cleanup function <br>to unobserve each element individually before disconnecting the observer.**

[frontend/src/Components/FrontPage.jsx [6-19]](https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5/files#diff-7726db888abd167fc39a186d1e7a65d7396196388eca7a32aa52f124d51d96f6R6-R19)

```diff
 useEffect(() => {
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         entry.target.classList.add('show');
       }
     });
   });
 
   const hiddenElements = document.querySelectorAll('.hidden');
   hiddenElements.forEach(el => observer.observe(el));
 
-  return () => observer.disconnect();
+  return () => {
+    hiddenElements.forEach(el => observer.unobserve(el));
+    observer.disconnect();
+  };
 }, []);
```

- [ ] **Apply this suggestion** <!-- /improve --apply_suggestion=2 -->

<details><summary>Suggestion importance[1-10]: 4</summary>

__

Why: The suggestion correctly points out that explicitly unobserving elements in the `IntersectionObserver` cleanup is good practice, although `disconnect()` should implicitly handle this. The proposed change improves clarity and robustness slightly, but it's not fixing a definite memory leak in this context.


</details></details></td><td align=center>Low

</td></tr>
<tr><td align="center" colspan="2">

- [ ] More <!-- /improve --more_suggestions=true -->

</td><td></td></tr></tbody></table>


author_association: NONE
user: login: QodoAI-Agent
created_at: 2025-05-03T20:36:40Z
body: **[Persistent review](https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5#issuecomment-2848798481)** updated to latest commit https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/commit/dd647436df9908dc8fbbe59e3e50407984c3169a
author_association: NONE
user: login: QodoAI-Agent
created_at: 2025-05-03T20:36:55Z
body: **[Persistent review](https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/pull/5#issuecomment-2848798481)** updated to latest commit https://github.com/kalviumcommunity/S_84_ANU_CAPSTONE_CollabNerds/commit/dd647436df9908dc8fbbe59e3e50407984c3169a
author_association: NONE