From 2a1b55198636c36189080a1b6acb20f81dbede55 Mon Sep 17 00:00:00 2001
From: Nitin <nitinrana01125532553@gmail.com>
Date: Sun, 30 Jul 2023 21:34:20 +0530
Subject: [PATCH] Added typewriter effect

---
 package-lock.json            | 29 ++++++++++++++++++++++++++++-
 package.json                 |  3 ++-
 src/components/hero/Hero.jsx | 12 +++++++++++-
 src/components/hero/hero.css |  7 ++++++-
 4 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 90d147c..fa13d6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,8 @@
         "react-responsive-carousel": "^3.2.23",
         "react-router-dom": "^6.14.2",
         "react-slick": "^0.29.0",
-        "slick-carousel": "^1.8.1"
+        "slick-carousel": "^1.8.1",
+        "typewriter-effect": "^2.20.1"
       },
       "devDependencies": {
         "@types/react": "^18.2.14",
@@ -3070,6 +3071,11 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "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",
@@ -3164,6 +3170,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",
@@ -3769,6 +3783,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.20.1.tgz",
+      "integrity": "sha512-3yQW4fUzCuIEgGHA5k+2Y2RzdsHUC9pPJpRahDREfloDpoPiMLj4GjMcuobdKD4CQ0pRBW4DD3pdNz7ZhfR96g==",
+      "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 ce7fb8d..635a86c 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.14.2",
     "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "typewriter-effect": "^2.20.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",
diff --git a/src/components/hero/Hero.jsx b/src/components/hero/Hero.jsx
index cc3303b..df09d35 100644
--- a/src/components/hero/Hero.jsx
+++ b/src/components/hero/Hero.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import "./hero.css"
 import image from "../../assets/images/22635333_6583017.svg";   
+import Typewriter from 'typewriter-effect'
 
 export default function Hero() {
   return (
@@ -8,7 +9,16 @@ export default function Hero() {
       <div className="hero-section">
         <div className="left">
           <h1>Welcome To Our <span>Hackathon</span></h1>
-          <p>a weekend of innovation and creativity awaits! Join us for electrifying challenges, collaborative brilliance, and the chance to shape the future. Unleash y            our potential and be part of a vibrant community driving positive change. Let's hack together!</p>
+          <h2>
+            <Typewriter 
+              options={{
+                strings: ['A weekend of innovation', 'A weekend of creativity', 'A weekend of challenges'],
+                autoStart: true,
+                loop: true,
+              }}
+            />
+          </h2>
+          <p>A weekend of innovation and creativity awaits! Join us for electrifying challenges, collaborative brilliance, and the chance to shape the future. Unleash y            our potential and be part of a vibrant community driving positive change. Let's hack together!</p>
           <div className="action-buttons">
             <button className="apply-button">Apply Now</button>
           </div>
diff --git a/src/components/hero/hero.css b/src/components/hero/hero.css
index 18cbf3b..99d37d3 100644
--- a/src/components/hero/hero.css
+++ b/src/components/hero/hero.css
@@ -75,6 +75,11 @@
   color: #6b5b95;
 }
 
+.left h2 {
+  font-size: 2.5vw;
+  margin-top: 20px;
+}
+
 .left p {
   font-size: 20px;
   margin-top: 2vw;
@@ -117,7 +122,7 @@
     margin-bottom: 5vw;
   }
   .left p {
-    font-size: 3.5vw;
+    font-size: 5vw;
     margin-bottom: 8vw;
   }
   .apply-button {