Fix image paths and router basename for GitHub Pages subdirectory - Fix missing ImageWithFallback import in Header - Fix all image paths to work with /xktrading base path - Add assets utility for base path handling - Fix jsx attribute warning in HowItWorks

Author: stackified

src/components/Footer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { getAssetPath } from '../utils/assets.js';
 
 function Footer() {
   return (
@@ -8,7 +9,7 @@ function Footer() {
         <div>
           <Link to="/" className="flex items-center gap-2 mb-4">
             <img
-              src="/assets/logo.png"
+              src={getAssetPath("/assets/logo.png")}
               alt="XK Trading Floor Logo"
               className="h-8 w-8 rounded object-cover"
             />

src/components/Header.jsx

@@ -5,6 +5,8 @@ import { ChevronDown } from "lucide-react";
 import { useDispatch, useSelector } from "react-redux";
 import { logout, syncUserFromCookie } from "../redux/slices/authSlice.js";
 import { getUserCookie } from "../utils/cookies.js";
+import { getAssetPath } from "../utils/assets.js";
+import ImageWithFallback from "./shared/ImageWithFallback.jsx";
 
 const navItems = [
   { to: "/", label: "Home" },
@@ -60,12 +62,13 @@ function Header() {
   const location = useLocation();
   const reduxUser = useSelector((state) => state.auth.user);
   // Fallback to cookie if Redux user is not available (for cross-tab sync)
-  const user = reduxUser || (typeof window !== 'undefined' ? getUserCookie() : null);
+  const user =
+    reduxUser || (typeof window !== "undefined" ? getUserCookie() : null);
   const [menuOpen, setMenuOpen] = React.useState(false);
 
   // Sync user from cookie on mount and when storage changes (cross-tab sync)
   const lastSyncedRef = React.useRef(null);
-  
+
   React.useEffect(() => {
     // Only sync once on mount if needed - don't re-sync on every reduxUser change
     const cookieUser = getUserCookie();
@@ -77,7 +80,7 @@ function Header() {
         lastSyncedRef.current = cookieStr;
       }
     }
-    
+
     const handleStorageChange = () => {
       // Storage events only fire from other tabs, so safe to sync
       dispatch(syncUserFromCookie());
@@ -86,10 +89,10 @@ function Header() {
         lastSyncedRef.current = JSON.stringify(updatedCookie);
       }
     };
-    
+
     // Listen for storage events (cross-tab sync)
-    window.addEventListener('storage', handleStorageChange);
-    
+    window.addEventListener("storage", handleStorageChange);
+
     // Also check periodically for cookie changes (since cookies don't trigger storage events)
     const interval = setInterval(() => {
       const currentCookieUser = getUserCookie();
@@ -106,9 +109,9 @@ function Header() {
         lastSyncedRef.current = null;
       }
     }, 3000); // Check every 3 seconds
-    
+
     return () => {
-      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener("storage", handleStorageChange);
       clearInterval(interval);
     };
   }, [dispatch]); // Only dispatch in dependencies - sync once on mount
@@ -138,7 +141,7 @@ function Header() {
           className="flex items-center gap-1.5 md:gap-2 transition-transform hover:scale-105 flex-shrink-0"
         >
           <img
-            src="/assets/logo.png"
+            src={getAssetPath("/assets/logo.png")}
             alt="XK Trading Floor Logo"
             className="h-10 w-8 md:h-14 md:w-10 rounded object-cover"
           />
@@ -244,8 +247,9 @@ function Header() {
                 aria-expanded={menuOpen}
                 aria-label="User menu"
               >
-                <img
+                <ImageWithFallback
                   src={user.avatar || "/assets/users/default-avatar.jpg"}
+                  fallback="/assets/users/default-avatar.jpg"
                   alt="User avatar"
                   className="h-7 w-7 lg:h-8 lg:w-8 rounded-full object-cover ring-2 ring-blue-500/20 flex-shrink-0"
                 />
@@ -268,13 +272,13 @@ function Header() {
                     className="absolute right-0 top-12 w-48 border border-gray-800 bg-gray-900/95 backdrop-blur-xl rounded-lg shadow-2xl overflow-hidden"
                     role="menu"
                   >
-                    {(user?.role === 'admin' || user?.role === 'operator') && (
+                    {(user?.role === "admin" || user?.role === "operator") && (
                       <button
                         onClick={() => {
                           setMenuOpen(false);
                           // Use navigate with a small delay to ensure menu closes first
                           setTimeout(() => {
-                            navigate('/dashboard');
+                            navigate("/dashboard");
                           }, 100);
                         }}
                         className="block w-full text-left px-4 py-3 text-sm text-gray-200 hover:bg-gray-800/50 transition-colors border-b border-gray-800"
@@ -364,12 +368,12 @@ function Header() {
               <div className="pt-4 mt-2 border-t border-gray-800 flex flex-col gap-2">
                 {user ? (
                   <>
-                    {(user?.role === 'admin' || user?.role === 'operator') && (
+                    {(user?.role === "admin" || user?.role === "operator") && (
                       <button
                         onClick={() => {
                           setOpen(false);
                           setTimeout(() => {
-                            navigate('/dashboard');
+                            navigate("/dashboard");
                           }, 100);
                         }}
                         className="w-full text-left px-4 py-3 text-sm text-gray-300 hover:text-white hover:bg-gray-800/50 rounded-lg transition-colors"

src/components/academy/EventsGrid.jsx

@@ -2,13 +2,15 @@ import React from "react";
 import { motion } from "framer-motion";
 import { getAllEvents } from "../../controllers/eventsController.js";
 import { Calendar, User } from "lucide-react";
+import ImageWithFallback from "../shared/ImageWithFallback.jsx";
 
 function EventCard({ evt, onRegister }) {
   return (
     <motion.div whileHover={{ y: -4 }} className="card overflow-hidden">
       <div className="h-40 w-full bg-muted">
-        <img
+        <ImageWithFallback
           src={evt.image}
+          fallback="/assets/placeholder.jpg"
           alt={evt.title}
           className="h-full w-full object-cover"
         />

src/components/academy/PodcastSection.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { getAllPodcasts } from '../../controllers/podcastsController.js';
+import ImageWithFallback from '../shared/ImageWithFallback.jsx';
 
 function PodcastCard({ item }) {
   const [playing, setPlaying] = React.useState(false);
   return (
     <motion.div whileHover={{ y: -4 }} className="min-w-[260px] card overflow-hidden">
       <div className="h-36 w-full bg-muted">
-        <img src={item.thumbnail} alt={item.title} className="h-full w-full object-cover" />
+        <ImageWithFallback src={item.thumbnail} fallback="/assets/placeholder.jpg" alt={item.title} className="h-full w-full object-cover" />
       </div>
       <div className="card-body">
         <div className="text-xs text-gray-400">{item.duration}</div>

src/components/blog/BlogAuthorInfo.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Linkedin, Twitter } from 'lucide-react';
+import ImageWithFallback from '../shared/ImageWithFallback.jsx';
 
 function BlogAuthorInfo({ author }) {
   if (!author) return null;
   return (
     <div className="card mt-8">
       <div className="card-body flex items-center gap-4">
         <div className="h-14 w-14 rounded-full bg-muted overflow-hidden">
-          {author.avatar && <img src={author.avatar} alt={author.name} className="h-full w-full object-cover" />}
+          {author.avatar && <ImageWithFallback src={author.avatar} fallback="/assets/users/default-avatar.jpg" alt={author.name} className="h-full w-full object-cover" />}
         </div>
         <div className="flex-1">
           <div className="font-semibold">{author.name}</div>

src/components/blog/BlogCard.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import ImageWithFallback from '../shared/ImageWithFallback.jsx';
 
 function BlogCard({ post, onClick }) {
   return (
     <motion.div whileHover={{ y: -4, scale: 1.01 }} className="card overflow-hidden cursor-pointer shadow-lg shadow-blue-500/10" onClick={onClick}>
       <div className="h-40 w-full bg-muted">
-        <img src={post.image} alt={post.title} className="h-full w-full object-cover" />
+        <ImageWithFallback src={post.image} fallback="/assets/placeholder.jpg" alt={post.title} className="h-full w-full object-cover" />
       </div>
       <div className="card-body">
         <div className="text-xs text-blue-300">{post.category}</div>

src/components/home/FeaturedEvents.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { getAllEvents } from '../../controllers/eventsController.js';
 import { Link, useNavigate } from 'react-router-dom';
+import ImageWithFallback from '../shared/ImageWithFallback.jsx';
 
 function EventCard({ evt, onClick }) {
   const formatDate = (dateString) => {
@@ -17,7 +18,7 @@ function EventCard({ evt, onClick }) {
   return (
     <motion.div whileHover={{ y: -4 }} className="card overflow-hidden cursor-pointer" onClick={onClick}>
       <div className="h-40 w-full bg-muted">
-        <img src={evt.image || '/assets/placeholder.jpg'} alt={evt.title} className="h-full w-full object-cover" />
+        <ImageWithFallback src={evt.image || '/assets/placeholder.jpg'} fallback="/assets/placeholder.jpg" alt={evt.title} className="h-full w-full object-cover" />
       </div>
       <div className="card-body">
         <div className="text-xs text-gray-400">{formatDate(evt.dateTime || evt.date)}</div>

src/components/home/HeroSection.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { ArrowRight } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { getAssetPath } from '../../utils/assets.js';
 
 function HeroSection() {
   return (
@@ -99,7 +100,7 @@ function HeroSection() {
               className="absolute z-30 flex items-center justify-center"
             >
               <motion.img
-                src="/assets/logo.png"
+                src={getAssetPath("/assets/logo.png")}
                 alt="XK Trading Floor Logo"
                 className="h-64 w-48 md:h-80 md:w-60 lg:h-96 lg:w-72 object-contain drop-shadow-2xl"
                 animate={{