Add CSS animations for rotating stars in MainPageLayout: Implemented new animations for star graphics to enhance visual appeal. Updated SharedCarousel to support dynamic language changes and improved category fetching logic. Enhanced localization files with new text for indoor season prompts in multiple languages.

src/components/SharedCarousel.js

@@ -38,28 +38,52 @@ const getProductCache = () => {
 };
 
 // Initialize categories
-const initializeCategories = () => {
+const initializeCategories = (language = 'en') => {
   const productCache = getProductCache();
 
+  if (productCache && productCache[`categoryTree_209_${language}`]) {
+    const cached = productCache[`categoryTree_209_${language}`];
+    if (cached.categoryTree) {
+      return processCategoryTree(cached.categoryTree);
+    }
+  }
+  
+  // Fallback to old cache format if language-specific cache doesn't exist
   if (productCache && productCache["categoryTree_209"]) {
     const cached = productCache["categoryTree_209"];
     if (cached.categoryTree) {
       return processCategoryTree(cached.categoryTree);
     }
   }
+  
   return [];
 };
 
 const SharedCarousel = () => {
   const { carouselRef, filteredCategories, setFilteredCategories, moveCarousel } = useCarousel();
   const context = useContext(SocketContext);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [rootCategories, setRootCategories] = useState([]);
+  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
 
   useEffect(() => {
-    const initialCategories = initializeCategories();
+    const initialCategories = initializeCategories(currentLanguage);
     setRootCategories(initialCategories);
-  }, []);
+  }, [currentLanguage]);
+
+  // Listen for language changes
+  useEffect(() => {
+    const handleLanguageChange = (lng) => {
+      setCurrentLanguage(lng);
+      // Clear categories to force refetch
+      setRootCategories([]);
+    };
+
+    i18n.on('languageChanged', handleLanguageChange);
+    return () => {
+      i18n.off('languageChanged', handleLanguageChange);
+    };
+  }, [i18n]);
 
   useEffect(() => {
     // Only fetch from socket if we don't already have categories
@@ -68,12 +92,30 @@ const SharedCarousel = () => {
       context && context.socket && context.socket.connected &&
       typeof window !== "undefined"
     ) {
-      context.socket.emit("categoryList", { categoryId: 209, language: 'en', requestTranslation: true }, (response) => {
-        if (response && response.categoryTree) {
-          // Store in cache
+      context.socket.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
+        if (response && response.success) {
+          // Use translated data if available, otherwise fall back to original
+          const categoryTreeToUse = response.translation || response.categoryTree;
+          
+          if (categoryTreeToUse) {
+            // Store in cache with language-specific key
+            try {
+              if (!window.productCache) window.productCache = {};
+              window.productCache[`categoryTree_209_${currentLanguage}`] = {
+                categoryTree: categoryTreeToUse,
+                timestamp: Date.now(),
+              };
+            } catch (err) {
+              console.error(err);
+            }
+            setRootCategories(categoryTreeToUse.children || []);
+          }
+        } else if (response && response.categoryTree) {
+          // Fallback for old response format
+          // Store in cache with language-specific key
           try {
             if (!window.productCache) window.productCache = {};
-            window.productCache["categoryTree_209"] = {
+            window.productCache[`categoryTree_209_${currentLanguage}`] = {
               categoryTree: response.categoryTree,
               timestamp: Date.now(),
             };
@@ -84,7 +126,7 @@ const SharedCarousel = () => {
         }
       });
     }
-  }, [context, context?.socket?.connected, rootCategories.length]);
+  }, [context, context?.socket?.connected, rootCategories.length, currentLanguage]);
 
   useEffect(() => {
     const filtered = rootCategories.filter(