feat(web): dynamic-homepage-header

Author: tractorss

web/src/pages/Home/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 
@@ -19,10 +19,21 @@ const StyledSpan = styled.span`
 `;
 
 const Header: React.FC = () => {
+  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const words = ["Lists", "Knowledge"];
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentWordIndex((prevIndex) => (prevIndex === 0 ? 1 : 0));
+    }, 3000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <StyledHeader>
       <StyledH1>
-        Community Curated <StyledSpan>Lists</StyledSpan>
+        Community Curated <StyledSpan>{words[currentWordIndex]}</StyledSpan>
       </StyledH1>
     </StyledHeader>
   );