From c908859f1092ffce584572905d3541a5bf007c86 Mon Sep 17 00:00:00 2001
From: mark <mark@athenanetworks.com.au>
Date: Wed, 28 May 2025 08:13:48 +0800
Subject: [PATCH] fix: update image paths to use BASE_URL environment variable
 for proper asset loading

---
 .../admin/migrant/form-steps/PhotosStep.tsx   |  2 +-
 src/components/home/HeroSection.tsx           | 34 +++++++++----------
 .../home/MigrantProfileComponent.tsx          |  8 ++---
 src/components/home/SearchResults.tsx         |  2 +-
 src/components/ui/ProfileSettings.tsx         |  2 +-
 src/components/ui/animated-image.tsx          |  2 +-
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/admin/migrant/form-steps/PhotosStep.tsx b/src/components/admin/migrant/form-steps/PhotosStep.tsx
index 4b66553..4c3aa7d 100644
--- a/src/components/admin/migrant/form-steps/PhotosStep.tsx
+++ b/src/components/admin/migrant/form-steps/PhotosStep.tsx
@@ -144,7 +144,7 @@ const PhotosStep: React.FC<PhotosStepProps> = ({
                 <Card key={`new-${index}`} className="overflow-hidden">
                   <div className="relative">
                     <img
-                      src={photoPreviews[index] || "/placeholder.svg"}
+                      src={photoPreviews[index] || `${import.meta.env.BASE_URL}placeholder.svg`}
                       alt={`Preview ${index}`}
                       className="w-full h-48 object-cover"
                     />
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 5f04ad7..11319cc 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -44,19 +44,19 @@ export default function Home() {
 
   const backgroundImages = [
     {
-      src: "/slide1.avif",
+      src: `${import.meta.env.BASE_URL}slide1.avif`,
       alt: "Italian countryside landscape",
     },
     {
-      src: "/slide2.avif",
+      src: `${import.meta.env.BASE_URL}slide2.avif`,
       alt: "Vintage Italian architecture",
     },
     {
-      src: "/slide3.avif",
+      src: `${import.meta.env.BASE_URL}slide3.avif`,
       alt: "Italian coastal town",
     },
     {
-      src: "/slide4.avif",
+      src: `${import.meta.env.BASE_URL}slide4.avif`,
       alt: "Italian countryside with vineyards",
     },
   ]
@@ -143,11 +143,10 @@ export default function Home() {
             {backgroundImages.map((image, index) => (
               <div
                 key={index}
-                className={`absolute inset-0 transition-opacity duration-1000 ${
-                  index === currentSlide ? "opacity-100" : "opacity-0"
-                }`}
+                className={`absolute inset-0 transition-opacity duration-1000 ${index === currentSlide ? "opacity-100" : "opacity-0"
+                  }`}
               >
-                <img src={image.src || "/placeholder.svg"} alt={image.alt} className="w-full h-full object-cover" />
+                <img src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`} alt={image.alt} className="w-full h-full object-cover" />
                 <div className="absolute inset-0 bg-black/60" />
               </div>
             ))}
@@ -353,7 +352,7 @@ export default function Home() {
                         <div className="p-1">
                           <div className="overflow-hidden rounded-xl aspect-square">
                             <img
-                              src={image.src || "/placeholder.svg"}
+                              src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`}
                               alt={image.alt}
                               className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
                             />
@@ -560,21 +559,22 @@ export default function Home() {
                 </div>
               </div>
               <nav className="flex gap-6">
-                <Link to="/terms" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Terms of Service
-                </Link>
-                <Link to="/privacy" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                </a>
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Privacy Policy
-                </Link>
-                <Link to="/accessibility" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                </a>
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Accessibility
-                </Link>
-                <Link to="/admin" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                </a>
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Admin
-                </Link>
+                </a>
               </nav>
             </div>
           </div>
+
         </div>
       </footer>
     </div>
diff --git a/src/components/home/MigrantProfileComponent.tsx b/src/components/home/MigrantProfileComponent.tsx
index 0535cfd..f7715ba 100644
--- a/src/components/home/MigrantProfileComponent.tsx
+++ b/src/components/home/MigrantProfileComponent.tsx
@@ -71,12 +71,12 @@ export default function MigrantProfile() {
                         ? profilePhoto.file_path.startsWith('http')
                           ? profilePhoto.file_path
                           : `${API_BASE_URL}${profilePhoto.file_path}`
-                        : '/placeholder.svg?height=600&width=450'}
+                        : `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`}
                       alt={`${migrant.full_name || 'Migrant photo'}`}
                       className="aspect-[3/4] object-cover w-full"
                       onError={(e) => {
                         // Handle image loading errors by setting a fallback
-                        e.currentTarget.src = '/placeholder.svg?height=600&width=450';
+                        e.currentTarget.src = `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`;
                       }}
                     />
                   </div>
@@ -189,12 +189,12 @@ export default function MigrantProfile() {
                                     ? photo.file_path.startsWith('http')
                                       ? photo.file_path
                                       : `${API_BASE_URL}${photo.file_path}`
-                                    : '/placeholder.svg?height=400&width=600'}
+                                    : `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`}
                                   alt={photo.caption || "Migrant photo"}
                                   className="aspect-video object-cover w-full"
                                   onError={(e) => {
                                     // Handle image loading errors
-                                    e.currentTarget.src = '/placeholder.svg?height=400&width=600';
+                                    e.currentTarget.src = `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`;
                                   }}
                                 />
                               </div>
diff --git a/src/components/home/SearchResults.tsx b/src/components/home/SearchResults.tsx
index 946add3..8c7bd5b 100644
--- a/src/components/home/SearchResults.tsx
+++ b/src/components/home/SearchResults.tsx
@@ -75,7 +75,7 @@ export default function SearchResults() {
                           src={
                             migrant.profilePhoto
                               ? `${API_BASE_URL}${migrant.profilePhoto.file_path}`
-                              : "/placeholder.svg?height=300&width=300"
+                              : `${import.meta.env.BASE_URL}placeholder.svg?height=300&width=300`
                           }
                           alt={migrant.full_name || "Unknown"}
                           className="w-full h-full object-cover object-center transition-transform hover:scale-105"
diff --git a/src/components/ui/ProfileSettings.tsx b/src/components/ui/ProfileSettings.tsx
index 1540825..2100833 100644
--- a/src/components/ui/ProfileSettings.tsx
+++ b/src/components/ui/ProfileSettings.tsx
@@ -255,7 +255,7 @@ export default function ProfileSettings() {
                       <div className="h-24 w-24 rounded-full bg-gray-200 overflow-hidden">
                         {profile.avatar ? (
                           <img
-                            src={profile.avatar || "/placeholder.svg"}
+                            src={profile.avatar || `${import.meta.env.BASE_URL}placeholder.svg`}
                             alt="Profile"
                             className="h-full w-full object-cover"
                           />
diff --git a/src/components/ui/animated-image.tsx b/src/components/ui/animated-image.tsx
index 31de5d7..80117ef 100644
--- a/src/components/ui/animated-image.tsx
+++ b/src/components/ui/animated-image.tsx
@@ -32,7 +32,7 @@ export default function AnimatedImage({
       transition={{ duration: 0.5 }}
     >
       <img
-        src={src || "/placeholder.svg"}
+        src={src || `${import.meta.env.BASE_URL}placeholder.svg`}
         alt={alt}
         width={!fill ? width : undefined}
         height={!fill ? height : undefined}