feat: Centralized navigation system with HandleNavigate hook

BREAKING CHANGE: Replaced all direct useNavigate() usage with HandleNavigate hook

## Summary
- Complete frontend navigation refactoring
- Centralized route management with routes.js
- Converted 18+ components to use HandleNavigate
- Enhanced navigation with 20+ type-safe functions

## New Files
- src/utils/routes.js - Central route constants and helpers
- Documentations/FRONTEND_CODING_GUIDELINES.md - Frontend best practices (300+ lines)
- Documentations/NAVIGATION_REFACTORING_REPORT.md - Detailed refactoring report (400+ lines)

## Modified Components (18+)
### Pages
- Home.jsx, LoginForm.jsx, RegisterForm.jsx
- ResetPassword.jsx, VerifyEmailPage.jsx
- DeckCreator.jsx, Card_display.jsx
- Lobby.jsx, GameTest.jsx, ChooseDeck.jsx, PlayerSetup.jsx
- Landingpage.jsx

### Components
- Userdetails.jsx, DeckInfoPopUp.jsx
- PlayMenu.jsx, LandingPage.jsx, DeckManager.jsx

### Hooks
- useRequireAuth.jsx

### Core
- App.jsx - Route constants integration
- HandleNavigate.jsx - Enhanced with 20+ navigation functions

## Key Improvements
 Type-safe navigation (goDeckDetails(id) vs navigate('/deck/'+id))
 Automatic scroll management
 Centralized state passing
 Single source of truth for routes
 Backwards compatibility aliases
 Zero compile errors
 Production ready

## Validation
- useNavigate: Only in HandleNavigate.jsx
- navigate() calls: 0 direct usage
- Compile errors: 0
- Documentation: Complete

SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { useNavigate } from "react-router-dom"
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
 import {
   FaPlus,
   FaFilter,
@@ -64,7 +64,7 @@ const sortOptions = [
 ]
 
 const DeckManager = () => {
-  const navigate = useNavigate()
+  const { goDeckCreator } = HandleNavigate()
 
   const [selectedType, setSelectedType] = useState("All")
   const [selectedOrigin, setSelectedOrigin] = useState("Mind")
@@ -319,7 +319,7 @@ const DeckManager = () => {
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
           {/* Create New Deck (Mockup) */}
           <div
-            onClick={() => navigate("/deck-creator")}
+            onClick={() => goDeckCreator()}
             className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
           >
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />