feat: add landing page content

- brief description of the app
- a list of features

client/src/App.css

@@ -131,6 +131,27 @@ nav svg {
   color: #d1d5db;
   font-size: 16px;
 }
+#introsection::before,
+#introsection::after {
+  content: "<HomePage/>";
+  float: left;
+  color: rgb(0, 134, 244);
+}
+#introsection {
+  text-align: left;
+  padding: 20px;
+}
+#introsection h1 {
+  padding-top: 20px;
+  line-height: 33px;
+}
+#introsection h2 {
+  font-size: 16px;
+  font-weight: 400;
+}
+#introsection ul {
+  list-style-type: square;
+}
 .chatLogWrapper {
   height: 80vh;
   overflow-y: auto;
@@ -212,10 +233,11 @@ nav svg {
 
 .inputPromptWrapper {
   padding: 8px;
-  position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
+  position: relative;
+  padding-top: 20px;
 }
 .inputPrompttTextarea {
   width: 80%;
@@ -233,7 +255,13 @@ nav svg {
   overflow-y: hidden;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 768px) {
+  .inputPromptWrapper {
+    position: absolute;
+  }
+}
+
+@media screen and (max-width: 1024px) {
   .App {
     display: block;
   }
@@ -269,4 +297,14 @@ nav svg {
     width: 30px;
     height: 30px;
   }
+  #introsection {
+    padding: 20px 20px 40px 20px;
+    font-size: 14px;
+  }
+  #introsection h1 {
+    font-size: 25px;
+  }
+  #introsection h2 {
+    font-size: 14px;
+  }
 }

client/src/App.js

@@ -8,6 +8,7 @@ import Loading from "./components/Loading";
 import Error from "./components/Error";
 import NavLinks from "./components/NavLink";
 import BotResponse from "./components/BotResponse";
+import IntroSection from "./components/IntroSection";
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
@@ -195,6 +196,7 @@ function App() {
       </aside>
 
       <section className="chatBox">
+        {chatLog.length > 0 ? (
           <div className="chatLogWrapper">
             {chatLog.length > 0 &&
               chatLog.map((chat, idx) => (
@@ -253,6 +255,9 @@ function App() {
                 </div>
               ))}
           </div>
+        ) : (
+          <IntroSection />
+        )}
 
         <form onSubmit={handleSubmit}>
           <div className="inputPromptWrapper">

client/src/components/IntroSection.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+const IntroSection = () => {
+  return (
+    <div id="introsection">
+      <h1>Introducing Talkbot - 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
+        answers again. Whether you need information for school or work, or just
+        want to know the latest news, Talkbot has you covered.
+      </h2>
+      <p>
+        Features:
+        <ul>
+          <li>Instant answers to any question</li>
+          <li>Deep learning technology that improves with usage</li>
+          <li>Continuously Learning</li>
+          <li>User-friendly interface</li>
+          <li>Available 24/7</li>
+        </ul>
+      </p>
+      <p>
+        Say goodbye to endless searching and typing, and say hello to TalkBot,
+        your personal AI assistant. Try it now and see for yourself how TalkBot
+        can make your life easier.
+      </p>
+    </div>
+  );
+};
+
+export default IntroSection;