image fix

app/[hackathon]/InteractionClient.tsx

@@ -13,6 +13,12 @@ import { Label } from "@/components/ui/label"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 
+// Helper function to get the correct image path for GitHub Pages
+const getImagePath = (path: string) => {
+  const basePath = process.env.NODE_ENV === 'production' ? '/HackHub-WebUI' : '';
+  return `${basePath}${path}`;
+};
+
 import { HackathonData, getHackathonStatus, getDaysRemaining, Judge, Project } from "@/hooks/useHackathons"
 import { getPublicClient } from "@wagmi/core"
 import { config } from "@/utils/config"
@@ -476,7 +482,7 @@ export default function InteractionClient() {
         {/* Background Image */}
         <div className="absolute inset-0">
           <img 
-            src="/hacka-thon.jpg"
+            src={getImagePath("/hacka-thon.jpg")}
             alt="Hackathon Background"
             className="w-full h-80 object-cover"
           />

app/explorer/page.tsx

@@ -4,6 +4,12 @@ import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+// Helper function to get the correct image path for GitHub Pages
+const getImagePath = (path: string) => {
+  const basePath = process.env.NODE_ENV === 'production' ? '/HackHub-WebUI' : '';
+  return `${basePath}${path}`;
+};
 import { HackathonData, getHackathonStatus } from "@/hooks/useHackathons"
 import { getPublicClient } from "@wagmi/core"
 import { config } from "@/utils/config"
@@ -374,7 +380,7 @@ export default function ExplorerPage() {
                           <div className="flex-shrink-0 mx-8 relative h-full flex items-center">
                             <div className="h-32 w-32 relative group-hover:scale-105 transition-transform duration-300">
                               <Image
-                                src="/block.png"
+                                src={getImagePath("/block.png")}
                                 alt="Blockchain Block"
                                 width={128}
                                 height={128}
@@ -453,7 +459,7 @@ export default function ExplorerPage() {
                           <div className="flex-shrink-0 mx-8 relative h-full flex items-center">
                             <div className="h-32 w-32 relative group-hover:scale-105 transition-transform duration-300">
                               <Image
-                                src="/block.png"
+                                src={getImagePath("/block.png")}
                                 alt="Blockchain Block"
                                 width={128}
                                 height={128}

app/organizer/[address]/OrganizerClient.tsx

@@ -4,6 +4,12 @@ import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+// Helper function to get the correct image path for GitHub Pages
+const getImagePath = (path: string) => {
+  const basePath = process.env.NODE_ENV === 'production' ? '/HackHub-WebUI' : '';
+  return `${basePath}${path}`;
+};
 import { HackathonData, getHackathonStatus } from "@/hooks/useHackathons"
 import { getPublicClient } from "@wagmi/core"
 import { config } from "@/utils/config"
@@ -469,7 +475,7 @@ export default function OrganizerClient({ address }: OrganizerClientProps) {
                               <div className="flex-shrink-0 mx-8 relative h-full flex items-center">
                                 <div className="h-32 w-32 relative group-hover:scale-105 transition-transform duration-300">
                                   <Image
-                                    src="/block.png"
+                                    src={getImagePath("/block.png")}
                                     alt="Blockchain Block"
                                     width={128}
                                     height={128}
@@ -548,7 +554,7 @@ export default function OrganizerClient({ address }: OrganizerClientProps) {
                               <div className="flex-shrink-0 mx-8 relative h-full flex items-center">
                                 <div className="h-32 w-32 relative group-hover:scale-105 transition-transform duration-300">
                                   <Image
-                                    src="/block.png"
+                                    src={getImagePath("/block.png")}
                                     alt="Blockchain Block"
                                     width={128}
                                     height={128}

app/organizer/[address]/page.tsx

@@ -13,4 +13,4 @@ export default async function OrganizerPage({ params }: { params: Promise<{ addr
       <OrganizerClient address={address} />
     </Suspense>
   )
-} 
+}

app/page.tsx

@@ -30,6 +30,12 @@ import {
 } from "lucide-react"
 import { formatUTCTimestamp } from '@/utils/timeUtils'
 
+// Helper function to get the correct image path for GitHub Pages
+const getImagePath = (path: string) => {
+  const basePath = process.env.NODE_ENV === 'production' ? '/HackHub-WebUI' : '';
+  return `${basePath}${path}`;
+};
+
 export default function HomePage() {
   const [recentHackathons, setRecentHackathons] = useState<HackathonData[]>([])
   const [loading, setLoading] = useState(true)
@@ -268,7 +274,7 @@ export default function HomePage() {
         <div className="flex justify-center lg:justify-end pt-0">
           <div className="relative -mt-8">
             <img 
-              src="/hackhub.png" 
+              src={getImagePath("/hackhub.png")} 
               alt="HackHub - Think, Build, Innovate" 
               className="w-full max-w-md h-auto object-contain drop-shadow-2xl"
             />
@@ -288,7 +294,7 @@ export default function HomePage() {
 
                 <div className="relative z-10">
                   <img 
-                    src="/handRevolution.png" 
+                    src={getImagePath("/handRevolution.png")} 
                     alt="Be Part of the Revolution" 
                     className="w-full max-w-sm h-auto object-contain drop-shadow-2xl transform hover:scale-105 transition-transform duration-300"
                   />

next.config.mjs

@@ -1,6 +1,8 @@
 const nextConfig = {
   output: 'export',
   distDir: 'out',
+  basePath: process.env.NODE_ENV === 'production' ? '/HackHub-WebUI' : '',
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/HackHub-WebUI/' : '',
   images: {
       unoptimized: true,
   }