Add typewriter-effect library and update Header component

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",

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);

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>