feat(intro content): add typewriter effect to intro text
- use botresponse component inside introsection component to show typewriter effect
This commit is contained in:
parent
543ba88e26
commit
b2a1583105
|
@ -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;
|
||||
|
|
|
@ -61,7 +61,7 @@ function App() {
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<h1>ChatGPT</h1>
|
||||
<h1>TalkBot</h1>
|
||||
</header>
|
||||
{showMenu && (
|
||||
<nav>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue