Fix: Fix homepage image

src/components/common/CarouselSection.tsx

@@ -7,6 +7,7 @@ import useAnimateOnScroll from '@/hooks/useAnimateOnScroll.ts';
 import { IImageContent } from '@/types/IImageContent.ts';
 import getImageUrl from '@/utils/getImageUrl.ts';
 import { fadeIn } from '@/styles/animation.ts';
+import { STATIC_DATA_API } from '@/constants';
 
 const Section = styled.section`
   background-color: #b1dde6;
@@ -112,19 +113,22 @@ interface CarouselSectionProps {
   title: string;
   subtitles?: string[];
   imageContentsSections: IImageContent[][];
+  useStaticDataApi?: boolean;
 }
 
 /**
  * Carousel section component, display multiple carousels as cards, each carousel contains multiple images
  * @param title - Section title
  * @param subtitles - Section subtitles
  * @param imageContentsSections - Array of image content arrays
+ * @param useStaticDataApi - Flag to use static data api
  * @constructor CarouselSection - React Function Component
  */
 const CarouselSection: React.FC<CarouselSectionProps> = ({
   title,
   subtitles: sectionSubtitle = [],
   imageContentsSections,
+  useStaticDataApi = false,
 }: CarouselSectionProps) => {
   const { ref, animate } = useAnimateOnScroll();
 
@@ -145,7 +149,11 @@ const CarouselSection: React.FC<CarouselSectionProps> = ({
                   <LazyLoadImage
                     alt={imageContent.title}
                     effect='blur'
-                    src={getImageUrl(imageContent.imageUrl)}
+                    src={
+                      useStaticDataApi
+                        ? `${STATIC_DATA_API}/images/${imageContent.imageUrl}`
+                        : getImageUrl(imageContent.imageUrl)
+                    }
                   />
                 </ImageWrapper>
               ))}

src/pages/HomePage.tsx

@@ -51,12 +51,14 @@ const HomePage = () => {
   ];
 
   if (redstoneCollection) {
-    imageContentsSections.push(createSections(redstoneCollection, 'redstone'));
+    imageContentsSections.push(
+      createSections(redstoneCollection, 'redstoneCollection'),
+    );
   }
 
   if (architectureCollection) {
     imageContentsSections.push(
-      createSections(architectureCollection, 'architecture'),
+      createSections(architectureCollection, 'architectureCollection'),
     );
   }
 
@@ -101,6 +103,7 @@ const HomePage = () => {
           t('home.carousel.subtitles', { returnObjects: true }) as string[]
         }
         imageContentsSections={imageContentsSections}
+        useStaticDataApi={true}
       />
     </>
   );