fix: update image paths to use BASE_URL environment variable for proper asset loading

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"
                     />

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 ${
+                className={`absolute inset-0 transition-opacity duration-1000 ${index === currentSlide ? "opacity-100" : "opacity-0"
-                  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>
+                </a>
-                <Link to="/privacy" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Privacy Policy
-                </Link>
+                </a>
-                <Link to="/accessibility" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Accessibility
-                </Link>
+                </a>
-                <Link to="/admin" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Admin
-                </Link>
+                </a>
               </nav>
             </div>
           </div>
+
         </div>
       </footer>
     </div>

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>

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"

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"
                           />

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}