From e081441c228b68c3f18147e2d8be8511554cdbf5 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 2 Sep 2026 15:27:41 +0330
Subject: [PATCH] perf(images): enable Next.js image optimization with fast
 internal docker proxy routing and clean button text SSR

---
 frontend/application/components/Hero.tsx      | 10 +++++---
 frontend/application/components/SafeImage.tsx | 25 ++++++++-----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/frontend/application/components/Hero.tsx b/frontend/application/components/Hero.tsx
index 523757c..0995a7d 100644
--- a/frontend/application/components/Hero.tsx
+++ b/frontend/application/components/Hero.tsx
@@ -147,7 +147,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
                 }}
                 className="bg-canina-blue text-white px-3 sm:px-10 py-2 sm:py-5 rounded-full font-bold text-lg hover:bg-canina-blue/90 hover:shadow-2xl focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all flex items-center gap-2 group font-vazir min-h-[58px] shadow-lg shadow-canina-blue/20 cursor-pointer"
               >
-                {mounted && isInitialized ? getText('hero_btn_advisor', "دستیار سلامت پت") : "دستیار سلامت پت"}
+                {getText('hero_btn_advisor', "دستیار سلامت پت")}
                 <ChevronLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
               </button>
               <button
@@ -160,7 +160,7 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
                 }}
                 className="bg-white border-2 border-medical-gray-900 text-medical-gray-900 px-3 sm:px-10 py-2 sm:py-5 rounded-full font-bold text-lg hover:bg-medical-gray-50 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all font-vazir min-h-[58px] shadow-sm cursor-pointer"
               >
-                {mounted && isInitialized ? getText('hero_btn_products', "مشاهده محصولات") : "مشاهده محصولات"}
+                {getText('hero_btn_products', "مشاهده محصولات")}
               </button>
             </div>
           </div>
@@ -198,7 +198,8 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
                       alt={banner.title || "Canina Pharma Germany"}
                       fill
                       priority={idx === 0}
-                      unoptimized={true}
+                      sizes="(max-width: 1024px) 100vw, 600px"
+                      quality={85}
                       className="object-cover"
                     />
                   </motion.div>
@@ -210,7 +211,8 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
                     alt={activeBanner?.title || "Canina Pharma Germany"}
                     fill
                     priority
-                    unoptimized={true}
+                    sizes="(max-width: 1024px) 100vw, 600px"
+                    quality={85}
                     className="object-cover"
                   />
                 </div>
diff --git a/frontend/application/components/SafeImage.tsx b/frontend/application/components/SafeImage.tsx
index 37f103a..733da6f 100644
--- a/frontend/application/components/SafeImage.tsx
+++ b/frontend/application/components/SafeImage.tsx
@@ -19,10 +19,10 @@ interface SafeImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
   height?: number;
 }
 
-export default function SafeImage({ 
-  src: rawSrc, 
-  alt = "تصویر مکمل کنینا", 
-  className, 
+export default function SafeImage({
+  src: rawSrc,
+  alt = "تصویر مکمل کنینا",
+  className,
   imgClassName,
   fallbackText = "در حال بروزرسانی تصویر...",
   priority = false,
@@ -92,9 +92,9 @@ export default function SafeImage({
           <Sparkles className="w-6 h-6 text-canina-blue/20" />
         </div>
       )}
-      <Image 
-        src={src} 
-        alt={alt} 
+      <Image
+        src={src}
+        alt={alt}
         width={width}
         height={height}
         priority={priority}
@@ -102,20 +102,15 @@ export default function SafeImage({
         sizes={sizes}
         quality={quality}
         unoptimized={
-          isBlobOrData || 
+          isBlobOrData ||
           !isAllowedHost ||
-          (typeof src === 'string' && (
-            src.startsWith('/api/uploads/') || 
-            src.startsWith('/api/media/') || 
-            src.startsWith('/uploads/') || 
-            src.toLowerCase().endsWith('.svg')
-          ))
+          (typeof src === 'string' && src.toLowerCase().endsWith('.svg'))
         }
         className={cn(
           "transition-all duration-500 w-full h-full object-contain",
           imgClassName,
           loading && !priority ? "opacity-0 scale-105" : "opacity-100 scale-100"
-        )} 
+        )}
         onLoad={() => setLoading(false)}
         onError={() => setError(true)}
       />