diff --git a/components/Footer.tsx b/components/Footer.tsx
index b5cda84..1357835 100644
--- a/components/Footer.tsx
+++ b/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>
diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
index 7b9dc30..1c6fb43 100644
--- a/components/sections/HeroSection.tsx
+++ b/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{" "}
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 8343d78..e8d7f0e 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from '@contentlayer/source-files'
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
export const Post = defineDocumentType(() => ({
name: 'Post',
diff --git a/package-lock.json b/package-lock.json
index 990088c..364d5a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,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"
@@ -6154,6 +6155,11 @@
"node": ">=8"
}
},
+ "node_modules/performance-now": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+ "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+ },
"node_modules/periscopic": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -6402,6 +6408,14 @@
}
]
},
+ "node_modules/raf": {
+ "version": "3.4.1",
+ "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+ "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+ "dependencies": {
+ "performance-now": "^2.1.0"
+ }
+ },
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -6443,6 +6457,16 @@
"react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/react-type-animation": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+ "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+ "peerDependencies": {
+ "prop-types": "^15.5.4",
+ "react": ">= 15.0.0",
+ "react-dom": ">= 15.0.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7419,6 +7443,19 @@
"node": ">=12.20"
}
},
+ "node_modules/typewriter-effect": {
+ "version": "2.21.0",
+ "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+ "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+ "dependencies": {
+ "prop-types": "^15.8.1",
+ "raf": "^3.4.1"
+ },
+ "peerDependencies": {
+ "react": "^17.x || ^18.x",
+ "react-dom": "^17.x || ^18.x"
+ }
+ },
"node_modules/unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -11920,6 +11957,11 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
+ "performance-now": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+ "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+ },
"periscopic": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -12065,6 +12107,14 @@
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
},
+ "raf": {
+ "version": "3.4.1",
+ "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+ "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+ "requires": {
+ "performance-now": "^2.1.0"
+ }
+ },
"react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -12096,6 +12146,12 @@
"prop-types": "^15.7.2"
}
},
+ "react-type-animation": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz",
+ "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==",
+ "requires": {}
+ },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -12771,6 +12827,15 @@
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw=="
},
+ "typewriter-effect": {
+ "version": "2.21.0",
+ "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+ "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+ "requires": {
+ "prop-types": "^15.8.1",
+ "raf": "^3.4.1"
+ }
+ },
"unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 8384fe9..02c52be 100644
--- a/package.json
+++ b/package.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"