feat(intro content): add typewriter effect to intro text

- use botresponse component inside introsection component to show typewriter effect

client/src/App.css

@@ -75,12 +75,13 @@ nav {
   padding: 0;
   text-indent: 0;
   white-space: pre-wrap;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   position: relative;
   top: -45px;
 }
-
+pre {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
 @keyframes fadeInChar {
   0% {
     opacity: 0;
@@ -152,6 +153,10 @@ nav svg {
 #introsection ul {
   list-style-type: square;
 }
+#introsection pre {
+  margin: 0;
+  display: inline;
+}
 .chatLogWrapper {
   height: 80vh;
   overflow-y: auto;
@@ -301,8 +306,10 @@ nav svg {
     padding: 20px 20px 40px 20px;
     font-size: 14px;
   }
-  #introsection h1 {
+  #introsection h1,
+  pre {
     font-size: 25px;
+    white-space: pre-wrap;
   }
   #introsection h2 {
     font-size: 14px;

client/src/App.js

@@ -61,7 +61,7 @@ function App() {
             </svg>
           </button>
         </div>
-        <h1>ChatGPT</h1>
+        <h1>TalkBot</h1>
       </header>
       {showMenu && (
         <nav>

client/src/components/IntroSection.jsx

@@ -1,9 +1,13 @@
 import React from "react";
+import BotResponse from "./BotResponse";
 
 const IntroSection = () => {
   return (
     <div id="introsection">
-      <h1>Introducing Talkbot - The Ultimate AI Assistant</h1>
+      <h1>
+        Introducing Talkbot
+        <BotResponse response=" - The Ultimate AI Assistant" />
+      </h1>
       <h2>
         A cutting-edge AI-powered app that provides instant answers to any
         question you may have. With Talkbot, you'll never be left searching for