Added typewriter effect

Author: bsaikiran618

package-lock.json

@@ -16,6 +16,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",
+    "typewriter-effect": "^2.18.2",
     "validator": "^13.7.0"
   },
   "devDependencies": {

package.json

@@ -11,35 +11,31 @@ import Registered from "./Components/Registered";
 import { MantineProvider } from "@mantine/core";
 function App() {
   return (
-    <MantineProvider theme={{colorScheme:'dark'}}>
-
-    <Routes>
-      
-      <Route path="/registered" element={<Registered />} />
-
-      <Route path="/getUglyTableSecretlyButOpenly" element={<AllUsers />} />
-      <Route
-        path="/"
-        element={
-          <NotificationsProvider position="top-right">
-            <div className="App scroll-smooth">
-              <div className="min-h-screen relative">
-                <Navbar />
-                <Event />
-                <div className="absolute bottom-0 z-[-10]  w-full">
-                  <Waves />
+    <MantineProvider theme={{ colorScheme: "dark" }}>
+      <Routes>
+        <Route path="/registered" element={<Registered />} />
+        <Route path="/getUglyTableSecretlyButOpenly" element={<AllUsers />} />
+        <Route
+          path="/"
+          element={
+            <NotificationsProvider position="top-right">
+              <div className="App scroll-smooth">
+                <div className="min-h-screen relative">
+                  <Navbar />
+                  <Event />
+                  <div className="absolute bottom-0 z-[-10]  w-full">
+                    <Waves />
+                  </div>
+                </div>
+                <div className="text-[#e1e1e1] bg-[#121212]">
+                  <Form />
                 </div>
               </div>
-              <div className="text-[#e1e1e1] bg-[#121212]" >
-                <Form />
-              </div>
-            </div>
-          </NotificationsProvider>
-        }
-      />
-    </Routes>
+            </NotificationsProvider>
+          }
+        />
+      </Routes>
     </MantineProvider>
-
   );
 }
 

src/App.jsx

@@ -12,7 +12,7 @@ export default function AboutEvent() {
       </span>
       <div className="mt-2">
         <span>
-          Initialize is a 5-week long event focused on competitive programming,
+          Initialize is a five-week long event focused on competitive programming,
           data structures, and algorithms. Over five weeks, you will be learning
           DSA and CP concepts right from the basics and also be competing with
           your peers in weekly contests. The event will conclude in a final show

src/Components/AboutEvent.jsx

@@ -1,15 +1,26 @@
 import React from "react";
 import Logo from "./../frlogo.png";
+import TypewriterComponent from "typewriter-effect";
+
+
 export default function Event() {
   return (
     <div className="grid  md:grid-cols-2 grid-cols-1 place-content-center w-[75%] gap-[2rem] mx-auto md:mt-16 mt-8">
       <div className="self-center md:justify-self-start justify-self-center w-[70%] h-full 	">
         <img src={Logo} alt="logo" />
       </div>
-      <span className="md:text-[4rem] text-[2rem] text-[#e1e1e1] md:text-right text-center self-center  font-mono">
-     
-          Boot-up your CP journey with <em><span className="text-[#9333ea]" >initialize</span>();</em>
-        
+      <span className="md:text-[3.5rem] text-[2rem] text-[#e1e1e1] md:text-right text-center self-center  font-mono">
+        Boot-up your CP journey with{" "}
+        {/* <em>
+          <span className="text-[#9333ea]">initialize</span>();
+        </em> */}
+        <TypewriterComponent
+  options={{
+    strings: ['<em><span style="color:#9333ea;">initialize</span>();</>'],
+    autoStart: true,
+    loop: true,
+  }}
+/>
         <span className="mt-2 block text-[1.1rem] md:text-right text-center font-sans">
           Registration closes on 13th March 2022, 11:59 PM
         </span>

src/Components/Event.jsx

@@ -4,7 +4,7 @@ import React from "react";
 export default function Navbar() {
   return (
     <div className="flex flex-col sm:flex-row bg-[#121212]  w-full items-center gap-4 sm:justify-between md:px-[6rem] px-[2rem] py-4">
-      <span className="text-[1.25rem] md:text-[1.75rem] text-[#e1e1e1] font-mono text-center"><span className="text-[#16e2f3]">from</span> cS<span className="text-[#9333ea]">.events </span><span ><span className="text-[#16e2f3]">import </span>initialize</span>  </span>
+      <span className="text-[1.25rem] md:text-[1.75rem] text-[#e1e1e1] font-mono text-center"><span className="text-[#6ADDF0]">from</span> cS<span className="text-[#9333ea]">.events </span><span ><span className="text-[#EF8B0E]">import </span>initialize</span>  </span>
       <div>
         <a target="_blank" href="https://www.codingstudio.club/">
           <span className="text-[#e1e1e1] cursor-pointer mr-8 text-[1.1rem]">About Us</span>