feat(frontend): logo updates

src/components/Common/ImageFader/index.tsx

@@ -0,0 +1,50 @@
+import React, {
+  useState,
+  useEffect,
+  HTMLAttributes,
+  ForwardRefRenderFunction,
+} from 'react';
+
+interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {
+  backgroundImages: string[];
+  rotationSpeed?: number;
+}
+
+const DEFAULT_ROTATION_SPEED = 6000;
+
+const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
+  { backgroundImages, rotationSpeed = DEFAULT_ROTATION_SPEED, ...props },
+  ref
+) => {
+  const [activeIndex, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setIndex((ai) => (ai + 1) % backgroundImages.length),
+      rotationSpeed
+    );
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [backgroundImages, rotationSpeed]);
+
+  return (
+    <div ref={ref}>
+      {backgroundImages.map((imageUrl, i) => (
+        <div
+          key={`banner-image-${i}`}
+          className={`absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
+            i === activeIndex ? 'opacity-100' : 'opacity-0'
+          }`}
+          style={{
+            backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(${imageUrl})`,
+          }}
+          {...props}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default React.forwardRef<HTMLDivElement, ImageFaderProps>(ImageFader);