feat: add landing page content
- brief description of the app - a list of features
This commit is contained in:
parent
7c85b1fc57
commit
543ba88e26
|
@ -131,6 +131,27 @@ nav svg {
|
||||||
color: #d1d5db;
|
color: #d1d5db;
|
||||||
font-size: 16px;
|
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 {
|
.chatLogWrapper {
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -212,10 +233,11 @@ nav svg {
|
||||||
|
|
||||||
.inputPromptWrapper {
|
.inputPromptWrapper {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
.inputPrompttTextarea {
|
.inputPrompttTextarea {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
@ -233,7 +255,13 @@ nav svg {
|
||||||
overflow-y: hidden;
|
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 {
|
.App {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -269,4 +297,14 @@ nav svg {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
#introsection {
|
||||||
|
padding: 20px 20px 40px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#introsection h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
#introsection h2 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import Loading from "./components/Loading";
|
||||||
import Error from "./components/Error";
|
import Error from "./components/Error";
|
||||||
import NavLinks from "./components/NavLink";
|
import NavLinks from "./components/NavLink";
|
||||||
import BotResponse from "./components/BotResponse";
|
import BotResponse from "./components/BotResponse";
|
||||||
|
import IntroSection from "./components/IntroSection";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [showMenu, setShowMenu] = useState(false);
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
|
@ -195,64 +196,68 @@ function App() {
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<section className="chatBox">
|
<section className="chatBox">
|
||||||
<div className="chatLogWrapper">
|
{chatLog.length > 0 ? (
|
||||||
{chatLog.length > 0 &&
|
<div className="chatLogWrapper">
|
||||||
chatLog.map((chat, idx) => (
|
{chatLog.length > 0 &&
|
||||||
<div className="chatLog" key={idx}>
|
chatLog.map((chat, idx) => (
|
||||||
<div className="chatPromptMainContainer">
|
<div className="chatLog" key={idx}>
|
||||||
<div className="chatPromptWrapper">
|
<div className="chatPromptMainContainer">
|
||||||
<Avatar bg="#5437DB" className="userSVG">
|
<div className="chatPromptWrapper">
|
||||||
<svg
|
<Avatar bg="#5437DB" className="userSVG">
|
||||||
stroke="currentColor"
|
<svg
|
||||||
fill="none"
|
stroke="currentColor"
|
||||||
strokeWidth={1.9}
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
strokeWidth={1.9}
|
||||||
// strokeLinecap="round"
|
viewBox="0 0 24 24"
|
||||||
// strokeLinejoin="round"
|
// strokeLinecap="round"
|
||||||
className="h-6 w-6"
|
// strokeLinejoin="round"
|
||||||
height={40}
|
className="h-6 w-6"
|
||||||
width={40}
|
height={40}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
width={40}
|
||||||
>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
>
|
||||||
<circle cx={12} cy={7} r={4} />
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||||
</svg>
|
<circle cx={12} cy={7} r={4} />
|
||||||
</Avatar>
|
</svg>
|
||||||
<div id="chatPrompt">{chat.chatPrompt}</div>
|
</Avatar>
|
||||||
|
<div id="chatPrompt">{chat.chatPrompt}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="botMessageMainContainer">
|
<div className="botMessageMainContainer">
|
||||||
<div className="botMessageWrapper">
|
<div className="botMessageWrapper">
|
||||||
<Avatar bg="#11a27f" className="openaiSVG">
|
<Avatar bg="#11a27f" className="openaiSVG">
|
||||||
<svg
|
<svg
|
||||||
width={41}
|
width={41}
|
||||||
height={41}
|
height={41}
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
strokeWidth={1.5}
|
strokeWidth={1.5}
|
||||||
className="h-6 w-6"
|
className="h-6 w-6"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813ZM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496ZM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744ZM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237Zm27.658 6.437-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132Zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763Zm-21.063 6.929-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225Zm1.829-3.943 4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18Z"
|
d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813ZM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496ZM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744ZM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237Zm27.658 6.437-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132Zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763Zm-21.063 6.929-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225Zm1.829-3.943 4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18Z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
{chat.botMessage ? (
|
{chat.botMessage ? (
|
||||||
<div id="botMessage">
|
<div id="botMessage">
|
||||||
<BotResponse response={chat.botMessage} />
|
<BotResponse response={chat.botMessage} />
|
||||||
</div>
|
</div>
|
||||||
) : err ? (
|
) : err ? (
|
||||||
<Error err={err} />
|
<Error err={err} />
|
||||||
) : (
|
) : (
|
||||||
<Loading />
|
<Loading />
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
<IntroSection />
|
||||||
|
)}
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="inputPromptWrapper">
|
<div className="inputPromptWrapper">
|
||||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue