UI revamp

.env

@@ -1,4 +1,4 @@
 # Backend API URL
 VITE_API_URL=http://localhost:5000
 VITE_HCAPTCHA_SITE_KEY=d1288a8e-6dfa-4e3c-a478-816662d659fe
-VITE_TURNSTILE_SITE_KEY=0x4AAAAAACLn2IKs96pbDFS5
+VITE_TURNSTILE_SITE_KEY=0x4AAAAAACLn2IKs96pbDFS5

package.json

@@ -65,9 +65,11 @@
     "react-router-dom": "^7.10.1",
     "recharts": "^3.5.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "svg-dotted-map": "^2.0.1",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.1.17",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.184.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13"
   },

src/App.jsx

@@ -7,7 +7,7 @@ import { Privacy } from './pages/legal/Privacy';
 import { AUP } from './pages/legal/AUP';
 import { Abuse } from './pages/legal/Abuse';
 import { About } from './pages/About';
-import { IncidentAnnouncement } from './components/IncidentAnnouncement';
+
 
 import Login from './pages/Login';
 import Signup from './pages/Signup';
@@ -78,7 +78,7 @@ function App() {
   return (
     <AuthProvider>
       <Router>
-        <IncidentAnnouncement />
+
         <Routes>
           <Route path="/" element={<Landing />} />
           <Route path="/docs" element={<Docs />} />
@@ -129,10 +129,27 @@ function App() {
           {/* Catch-all for 404 */}
           <Route path="*" element={<NotFound />} />
         </Routes>
+        <DiscordPill />
         <Toaster />
       </Router>
     </AuthProvider>
   );
 }
 
+const DiscordPill = () => (
+  <a
+    href="https://discord.gg/wr7s97cfM7"
+    target="_blank"
+    rel="noreferrer"
+    className="fixed bottom-24 right-6 z-50 flex items-center gap-2.5 bg-black dark:bg-white text-white dark:text-black px-4 py-2.5 rounded-full font-bold text-sm shadow-[0_8px_30px_rgb(0,0,0,0.12)] hover:scale-105 hover:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 group"
+  >
+    <div className="bg-white/20 dark:bg-black/10 p-1.5 rounded-full text-white dark:text-black flex items-center justify-center">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 127.14 96.36" fill="currentColor">
+        <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.08 0A72.37 72.37 0 0 0 45.67 0a105.14 105.14 0 0 0-26.23 8.07C2.04 33.72-2.38 58.62.9 83.33a105.73 105.73 0 0 0 32.17 16.14A77.7 77.7 0 0 0 40 85.34a69.8 69.8 0 0 1-10.87-5.18c.9-.67 1.8-1.34 2.66-2a75.57 75.57 0 0 0 63.56 0c.88.66 1.77 1.34 2.67 2a69.8 69.8 0 0 1-10.88 5.18 77.34 77.34 0 0 0 6.9 14.13 105.74 105.74 0 0 0 32.2-16.14c3.85-28.53-2.12-52.6-18.54-75.26zM42.3 65.23c-5.86 0-10.66-5.32-10.66-11.83 0-6.5 4.7-11.82 10.66-11.82 5.96 0 10.74 5.3 10.66 11.82 0 6.5-4.7 11.83-10.66 11.83zm42.54 0c-5.86 0-10.66-5.32-10.66-11.83 0-6.5 4.7-11.82 10.66-11.82 5.96 0 10.73 5.3 10.66 11.82 0 6.5-4.72 11.83-10.66 11.83z"/>
+      </svg>
+    </div>
+    <span>Need help? Join Discord</span>
+  </a>
+);
+
 export default App;

src/components/Globe3DDemo.jsx

@@ -0,0 +1,121 @@
+import { Globe3D } from "./ui/3d-globe";
+
+const sampleMarkers = [
+  {
+    lat: 40.7128,
+    lng: -74.006,
+    src: "https://assets.aceternity.com/avatars/1.webp",
+    label: "New York",
+  },
+  {
+    lat: 51.5074,
+    lng: -0.1278,
+    src: "https://assets.aceternity.com/avatars/2.webp",
+    label: "London",
+  },
+  {
+    lat: 35.6762,
+    lng: 139.6503,
+    src: "https://assets.aceternity.com/avatars/3.webp",
+    label: "Tokyo",
+  },
+  {
+    lat: -33.8688,
+    lng: 151.2093,
+    src: "https://assets.aceternity.com/avatars/4.webp",
+    label: "Sydney",
+  },
+  {
+    lat: 48.8566,
+    lng: 2.3522,
+    src: "https://assets.aceternity.com/avatars/5.webp",
+    label: "Paris",
+  },
+  {
+    lat: 28.6139,
+    lng: 77.209,
+    src: "https://assets.aceternity.com/avatars/6.webp",
+    label: "New Delhi",
+  },
+  {
+    lat: 55.7558,
+    lng: 37.6173,
+    src: "https://assets.aceternity.com/avatars/7.webp",
+    label: "Moscow",
+  },
+  {
+    lat: -22.9068,
+    lng: -43.1729,
+    src: "https://assets.aceternity.com/avatars/8.webp",
+    label: "Rio de Janeiro",
+  },
+  {
+    lat: 31.2304,
+    lng: 121.4737,
+    src: "https://assets.aceternity.com/avatars/9.webp",
+    label: "Shanghai",
+  },
+  {
+    lat: 25.2048,
+    lng: 55.2708,
+    src: "https://assets.aceternity.com/avatars/10.webp",
+    label: "Dubai",
+  },
+  {
+    lat: -34.6037,
+    lng: -58.3816,
+    src: "https://assets.aceternity.com/avatars/11.webp",
+    label: "Buenos Aires",
+  },
+  {
+    lat: 1.3521,
+    lng: 103.8198,
+    src: "https://assets.aceternity.com/avatars/12.webp",
+    label: "Singapore",
+  },
+  {
+    lat: 37.5665,
+    lng: 126.978,
+    src: "https://assets.aceternity.com/avatars/13.webp",
+    label: "Seoul",
+  },
+];
+
+export function Globe3DDemoThird() {
+  return (
+    <div
+      className="relative mx-auto h-[450px] w-full max-w-4xl overflow-hidden rounded-xl bg-white dark:bg-[#111] border border-slate-200 dark:border-[#27272a] shadow-xl flex flex-col items-center pt-8 md:pt-12">
+      <div className="relative z-10 text-center px-6">
+        <h2
+          className="mb-2 text-2xl font-bold tracking-tight text-neutral-900 md:text-3xl">
+          All over the world
+        </h2>
+        <p
+          className="max-w-md mx-auto text-sm text-neutral-500 md:text-base">
+          Meet our distributed team of experts working across 6 continents.
+        </p>
+      </div>
+      {/* Globe container - centered and peeking out from the bottom */}
+      <div
+        className="absolute -bottom-64 left-1/2 -translate-x-1/2 z-10 w-[36rem] h-[36rem] md:-bottom-72 md:w-[42rem] md:h-[42rem]">
+        <Globe3D
+          className="h-full w-full"
+          markers={sampleMarkers}
+          config={{
+            textureUrl: "https://unpkg.com/three-globe@2.31.0/example/img/earth-blue-marble.jpg",
+            showAtmosphere: false,
+            bumpScale: 1.0,
+            autoRotateSpeed: 0.4,
+          }}
+          onMarkerClick={(marker) => {
+            console.log("Clicked marker:", marker.label);
+          }}
+          onMarkerHover={(marker) => {
+            if (marker) {
+              console.log("Hovering:", marker.label);
+            }
+          }} />
+      </div>
+    </div>
+  );
+}