x

apps/spa/src/components/CartDrawer.tsx

@@ -68,7 +68,7 @@ export default function CartDrawer() {
               <div key={item.cartItemId} className="flex gap-4 p-4 rounded-2xl bg-white border border-spa-stone/10 shadow-sm group relative">
                 <div className="w-18 h-22 rounded-lg bg-spa-sage/30 overflow-hidden flex-shrink-0" style={{ width: '72px', height: '88px' }}>
                   <img 
-                    src={item.productImage || '/images/oil_ozone.png'} 
+                    src={item.productImage || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/oil_ozone.png`} 
                     alt={item.productName}
                     className="w-full h-full object-cover"
                   />

apps/spa/src/components/DynamicHero.tsx

@@ -38,7 +38,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
     <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-night-900">
       <div className="absolute inset-0 z-0">
         <img
-          src={imageUrl || "/images/hero.png"}
+          src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`}
           className="w-full h-full object-cover scale-[1.02]"
           alt="Hero Background"
           onError={(e) => {

apps/spa/src/pages/OrderSuccessPage.tsx

@@ -264,7 +264,7 @@ export default function OrderSuccessPage() {
             {order.items.map(item => (
               <div key={item.id} className="flex items-center gap-4 text-sm">
                 <div className="w-12 h-12 rounded-lg bg-spa-stone/10 flex-shrink-0 overflow-hidden border border-spa-stone/10">
-                  <img src={item.productImage || '/images/oil_ozone.png'} alt="Product" className="w-full h-full object-cover" />
+                  <img src={item.productImage || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/oil_ozone.png`} alt="Product" className="w-full h-full object-cover" />
                 </div>
                 <div className="flex-1">
                   <p className="font-bold text-pop-black">{item.productName}</p>

apps/spa/src/pages/ProfilePage.tsx

@@ -481,7 +481,7 @@ export default function ProfilePage() {
                               {order.items.map(item => (
                                 <div key={item.id} className="flex items-center gap-3 text-xs">
                                   <div className="w-10 h-10 rounded-md bg-spa-stone/10 overflow-hidden border border-spa-stone/15 flex-shrink-0">
-                                    <img src={item.productImage || '/images/oil_ozone.png'} alt="Product" className="w-full h-full object-cover" />
+                                    <img src={item.productImage || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/oil_ozone.png`} alt="Product" className="w-full h-full object-cover" />
                                   </div>
                                   <div className="flex-1 min-w-0">
                                     <p className="font-bold text-pop-black truncate">{item.productName}</p>