Merge pull request #23 from intelowlproject/develop

0.1.1

Author: mlodic

components/Footer.tsx

@@ -39,7 +39,7 @@ export default function Footer() {
                   >
                     Matteo Lodi{" "}
                     <span className="ml-12 font-small text-sm opacity-90 font-SpaceGrotesk">
-                      Author and Creator{" "}
+                      Author and Principal Maintainer{" "}
                     </span>
                   </a>
                 </li>
@@ -50,7 +50,7 @@ export default function Footer() {
                   >
                     Eshaan Bansal{" "}
                     <span className="ml-7 font-small text-sm opacity-90 font-SpaceGrotesk">
-                      Principal Maintainer{" "}
+                      Key Contributor{" "}
                     </span>
                   </a>
                 </li>
@@ -61,7 +61,7 @@ export default function Footer() {
                   >
                     Simone Berni{" "}
                     <span className="ml-10 font-small text-sm opacity-90 font-SpaceGrotesk">
-                      Key Contributor and Backend Maintainer{" "}
+                      Backend Maintainer{" "}
                     </span>
                   </a>
                 </li>
@@ -72,7 +72,7 @@ export default function Footer() {
                   >
                     Daniele Rosetti{" "}
                     <span className="ml-6 font-small text-sm opacity-90 font-SpaceGrotesk">
-                      Key Contributor and Frontend Maintainer{" "}
+                      Frontend Maintainer{" "}
                     </span>
                   </a>
                 </li>

components/sections/HeroSection.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { useState, useEffect } from "react";
+import { TypeAnimation } from 'react-type-animation';
 
 /* eslint-disable react/jsx-no-undef */
 interface HeroSectionProps {
@@ -12,15 +12,8 @@ interface HeroSectionProps {
 
 export default function HeroSection(props: HeroSectionProps) {
   const { isMobile } = props;
-  const [words] = useState(["a hash.", "an ip.", "a malware.", "a domain."]);
-  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const words = ["a hash.", 2000, "an ip.", 2000, "a malware.", 2000, "a domain.", 2000];
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setCurrentWordIndex((currentIndex) => (currentIndex + 1) % words.length);
-    }, 3000);
-    return () => clearInterval(intervalId);
-  }, [words]);
   return (
     <>
       {isMobile ? (
@@ -31,7 +24,16 @@ export default function HeroSection(props: HeroSectionProps) {
           <div className="bg-inherit w-full flex flex-col items-center justify-center px-5">
             <h1 className="text-white text-center text-3xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
               Get Threat Intelligence data about {" "}
-              <span className="text-[#00ADEF]">{words[currentWordIndex]}</span>
+              <span className="text-[#00ADEF]">
+                <TypeAnimation
+                  sequence={words}
+                  preRenderFirstString={false}
+                  wrapper="span"
+                  speed={20}
+                  style={{ fontSize: '1em', display: 'inline-block' }}
+                  repeat={Infinity}
+                />
+              </span>
             </h1>
             <h2 className=" text-white text-center text-lg mt-8 font-SpaceGrotesk font-extralight px-4">
               From multiple sources with just a{" "}
@@ -69,7 +71,16 @@ export default function HeroSection(props: HeroSectionProps) {
           <div className="bg-inherit w-4/6 flex flex-col items-left justify-center px-16">
             <h1 className="text-white text-left text-5xl lg:text-6xl xl:text-7xl leading-snug lg:leading-snug xl:leading-snug font-SpaceGrotesk font-semibold ">
               Get Threat Intelligence data about {" "}
-              <span className="text-[#00ADEF]">{words[currentWordIndex]}</span>
+              <span className="text-[#00ADEF]">
+                <TypeAnimation
+                  sequence={words}
+                  preRenderFirstString={false}
+                  wrapper="span"
+                  speed={20}
+                  style={{ fontSize: '1em', display: 'inline-block' }}
+                  repeat={Infinity}
+                />
+              </span>
             </h1>
             <h2 className=" text-white text-left text-3xl lg:text-3xl xl:text-4xl mt-8 font-SpaceGrotesk font-extralight">
               From multiple sources with just a{" "}

package-lock.json

@@ -24,6 +24,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-scroll": "^1.8.9",
+    "react-type-animation": "^3.2.0",
     "swiper": "^9.3.2",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"