From deec01fbd582f0434b52e9ec9e4462b1937f46bf Mon Sep 17 00:00:00 2001
From: preston176 <prestonnyamweya@gmail.com>
Date: Wed, 21 Feb 2024 21:13:58 +0300
Subject: [PATCH] Add typewriter-effect library and update Header component

---
 package-lock.json                | 29 ++++++++++++++++++++++++++++-
 package.json                     |  3 ++-
 src/Components/Header/Header.jsx |  3 +--
 src/Components/Hero/Hero.jsx     |  9 ++++++++-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ffc3f9b..dc7e105 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "react-router-dom": "^6.22.1",
         "react-scroll": "^1.9.0",
         "react-slideshow-image": "^4.3.0",
-        "react-social-icons": "^6.12.0"
+        "react-social-icons": "^6.12.0",
+        "typewriter-effect": "^2.21.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.55",
@@ -4805,6 +4806,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/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -5075,6 +5081,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",
@@ -6093,6 +6107,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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",
diff --git a/package.json b/package.json
index 8209b14..e6f045d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
     "react-router-dom": "^6.22.1",
     "react-scroll": "^1.9.0",
     "react-slideshow-image": "^4.3.0",
-    "react-social-icons": "^6.12.0"
+    "react-social-icons": "^6.12.0",
+    "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
index cb877e0..d7f996c 100644
--- a/src/Components/Header/Header.jsx
+++ b/src/Components/Header/Header.jsx
@@ -8,8 +8,7 @@ import { ThemeContext } from '@emotion/react';
 const Header = () => {
     const links = [
         { name: 'About', link: 'about' },
-        { name: 'Pricing', link: 'projects' },
-        { name: 'Login', link: 'contact' },
+        { name: 'Generate Image', link: 'generate_image' },
     ];
 
     const [open, setOpen] = useState(false);
diff --git a/src/Components/Hero/Hero.jsx b/src/Components/Hero/Hero.jsx
index 3a4019d..75f3d1f 100644
--- a/src/Components/Hero/Hero.jsx
+++ b/src/Components/Hero/Hero.jsx
@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import ImageSlider from '../ImageSlider/ImageSlider'
 import defaultImage from '../../assets/defaultImage.jpg'
 import { Link } from 'react-router-dom'
+import Typewriter from 'typewriter-effect';
 
 const Hero = ({ isDarkMode }) => {
 
@@ -17,7 +18,13 @@ const Hero = ({ isDarkMode }) => {
             <div className={`${isDarkMode ? ThemeStyles.dark : ThemeStyles.light} mb-4 mt-8 flex flex-col justify-evenly items-center h-[40vh] rounded-3xl`}>
 
 
-                <h2 className='bg-gradient-to-r from-red-500 to-blue-500 text-transparent bg-clip-text laptop:text-[60px] font-mono p-4 md:text-[76px] sm:text-[46px] mobile:text-[28px] small_mobile:text-[25px] text-center' >Create Stunning Images with AI</h2>
+                <h2 className='bg-gradient-to-r from-red-500 to-blue-500 text-transparent bg-clip-text laptop:text-[60px] font-mono p-4 md:text-[76px] sm:text-[46px] mobile:text-[28px] small_mobile:text-[25px] text-center' ><Typewriter
+                    options={{
+                        strings: ['Create Stunning Images in Seconds', 'Describe and Create any Content in Seconds', 'AI Powered', 'Free to Use'],
+                        autoStart: true,
+                        loop: true,
+                    }}
+                /></h2>