feat: enhance ProgressiveImage component with dynamic error handling and improved no-image state

- Updated the ProgressiveImage component to display a dynamic error message based on the image availability, including a specific message for no-image scenarios.
- Modified ProductCard, ProductDetailDialog, and CheckoutPage components to utilize the enhanced ProgressiveImage, ensuring a consistent user experience when images are unavailable.
- Improved visual feedback by adding a placeholder for missing images across various components.

These changes enhance the user experience by providing clearer messaging and visual cues when images fail to load or are not available.

refactor: update background colors and gradients for theme-aware semantic styling consistency across components

- Changed background colors in ProgressiveImage, ProductCard, ProductDetailDialog, and CheckoutPage components to utilize theme-aware colors instead of fixed values.
- Enhanced gradient backgrounds to ensure better visual integration with the overall theme, improving the user interface and experience.

These updates promote a more cohesive design and improve maintainability by leveraging theme variables.

src/components/ui/ProgressiveImage.vue

@@ -3,7 +3,10 @@
     <!-- Blur placeholder background -->
     <div v-if="!isLoaded"
          :class="['progressive-image-placeholder', { 'shimmer-active': !isLoaded && !hasError }]"
-         :style="placeholderStyle" />
+         :style="placeholderStyle">
+      <!-- Branded shimmer effect using semantic colors -->
+      <div v-if="!isLoaded && !hasError" class="absolute inset-0 bg-gradient-to-r from-accent/40 via-primary/40 via-accent/70 to-accent/50 animate-pulse"></div>
+    </div>
 
     <!-- Main image -->
     <img ref="imageRef" :src="src" :alt="alt" :class="[
@@ -14,19 +17,19 @@
         'progressive-image-loaded': isLoaded,
         'progressive-image-error': hasError
       }
-    ]" :loading="loading" @load="handleLoad" @error="handleError" />
+    ]" :loading="loading" @load="handleLoad" @error="handleError" /> -->
 
     <!-- Loading indicator (optional) -->
     <div v-if="showLoadingIndicator && !isLoaded && !hasError" class="progressive-image-loading-indicator">
       <div class="progressive-image-spinner" />
     </div>
 
-    <!-- Error state (optional) -->
+    <!-- Error or no image state (optional) -->
     <div v-if="hasError && showErrorState" class="progressive-image-error-state">
       <slot name="error">
         <div class="progressive-image-error-content">
           <Package class="w-6 h-6 text-muted-foreground" />
-          <span class="text-xs text-muted-foreground">Failed to load</span>
+          <span class="text-xs text-muted-foreground">{{ errorMessage }}</span>
         </div>
       </slot>
     </div>
@@ -109,7 +112,7 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   blurRadius: 10,
-  backgroundColor: '#f3f4f6',
+  backgroundColor: 'hsl(var(--muted))',
   transitionDuration: 300,
   loading: 'lazy',
   showLoadingIndicator: false,
@@ -124,14 +127,29 @@ const isLoaded = ref(false)
 const hasError = ref(false)
 const isLoading = ref(false)
 
+// Check if this is a placeholder/no-image URL
+const isNoImage = computed(() => {
+  return props.src.includes('/placeholder-product.png') ||
+         props.src === '' ||
+         !props.src
+})
+
+// Dynamic error message based on whether image exists
+const errorMessage = computed(() => {
+  if (isNoImage.value) {
+    return 'No image available'
+  }
+  return 'Failed to load'
+})
+
 // Computed styles
 const placeholderStyle = computed(() => {
   const hasThumb = props.thumbnail && props.thumbnail.trim()
 
-  // Create a subtle gradient pattern when no thumbnail
+  // Create a subtle gradient pattern when no thumbnail (theme-aware)
   const gradientBg = hasThumb
     ? 'none'
-    : `linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%)`
+    : `linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--muted) / 0.5) 50%, hsl(var(--muted)) 100%)`
 
   return {
     '--blur-radius': `${props.blurRadius}px`,
@@ -208,24 +226,21 @@ defineExpose({
   transition: opacity var(--transition-duration, 300ms) ease-out;
 }
 
-/* Add shimmer effect when image is loading */
+/* Add shimmer effect when image is loading - follows Tailwind animation patterns */
 .progressive-image-placeholder.shimmer-active {
-  background-image:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.3) 25%,
-      rgba(255, 255, 255, 0.7) 50%,
-      rgba(255, 255, 255, 0.3) 75%,
-      transparent 100%
-    ),
-    linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
-  background-size: 200px 100%, 100% 100%;
-  background-position: -200px 0, 0 0;
-  background-repeat: no-repeat, no-repeat;
-  animation: shimmer 1.2s infinite linear;
+  position: relative;
+  background: linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--muted) / 0.5) 50%, hsl(var(--muted)) 100%) !important;
+  overflow: hidden;
 }
 
+/* Accessibility: Respect user's reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-overlay {
+    animation: none !important;
+  }
+}
+
+
 .progressive-image {
   width: 100%;
   height: 100%;
@@ -281,7 +296,7 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsl(var(--muted));
+  background: linear-gradient(135deg, hsl(var(--muted) / 0.5), hsl(var(--muted)));
 }
 
 .progressive-image-error-content {
@@ -307,12 +322,13 @@ defineExpose({
   }
 }
 
+/* DEBUG: Enhanced keyframes for testing */
 @keyframes shimmer {
   0% {
-    background-position: -200px 0, 0 0;
+    background-position: -100% 0;
   }
   100% {
-    background-position: calc(200px + 100%) 0, 0 0;
+    background-position: 100% 0;
   }
 }
 
@@ -332,3 +348,4 @@ defineExpose({
   animation: fadeInScale var(--transition-duration, 300ms) ease-out;
 }
 </style>
+