diff --git a/package.json b/package.json index 23eb5cd72..a02f7e517 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "react-icons": "^4.7.1", "react-spinners": "^0.13.8", "react-transition-state": "^2.1.0", - "typescript": "4.9.4" + "typescript": "4.9.4", + "typewriter-effect": "^2.19.0" }, "devDependencies": { "autoprefixer": "^10.4.13", diff --git a/pages/index.tsx b/pages/index.tsx index 8e900bd4f..5ce57c191 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,8 +2,16 @@ import React from "react"; import Head from "next/head"; import Logo from "components/logo"; import { TopBar } from "components/TopBar/TopBar"; - +import TypewriterComponent from "typewriter-effect"; +import { sidebarData } from "../database/data"; export default function Home() { + //storing sub categories names for using in typewriter effect + let subCategoriesNames:string[] = []; + sidebarData.forEach((c) => { + c.subcategory.forEach((a) =>{ + subCategoriesNames.push(a.name.toUpperCase()); + }); + }) return ( <> @@ -14,9 +22,22 @@ export default function Home() {
-
- - 👾 +
+
+ + 👾 + +
+
+

Navigate through menu for

+

+