feat: implement admin page with data import and editing functionality

src/sections/Hero.tsx

@@ -1,4 +1,5 @@
-"use client";
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 export function Hero({
   glowColor,
@@ -19,9 +20,48 @@ export function Hero({
   setShowOldNames: (show: boolean) => void;
   oldUsernames: string[];
 }) {
+  const router = useRouter();
+  const [movementCount, setMovementCount] = useState(0);
+  const lastX = useRef<number | null>(null);
+  const lastDir = useRef<"left" | "right" | null>(null);
+  const lastTime = useRef<number>(0);
+  const resetTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const currentX = e.clientX;
+    const currentTime = Date.now();
+
+    if (lastX.current !== null) {
+      const deltaX = currentX - lastX.current;
+      const velocity = Math.abs(deltaX) / (currentTime - lastTime.current || 1);
+      const direction = deltaX > 0 ? "right" : "left";
+
+      // Thresholds: velocity > 2 (approx 2px/ms) and changed direction
+      if (velocity > 2 && direction !== lastDir.current) {
+        setMovementCount((prev) => {
+          const newCount = prev + 1;
+          if (newCount >= 10) {
+            // Trigger navigation outside of the state update to avoid React warning
+            setTimeout(() => router.push("/admin"), 0);
+            return 0;
+          }
+          return newCount;
+        });
+        lastDir.current = direction;
+
+        // Reset if no movement for a while
+        if (resetTimeout.current) clearTimeout(resetTimeout.current);
+        resetTimeout.current = setTimeout(() => setMovementCount(0), 1000);
+      }
+    }
+
+    lastX.current = currentX;
+    lastTime.current = currentTime;
+  };
+
   return (
     <section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
-      <div className="relative group">
+      <div className="relative group" onMouseMove={handleMouseMove}>
         <div
           className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
           style={{ backgroundColor: glowColor }}