Updated docs

docs/src/components/TypewriterTextarea/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+const TypewriterTextarea = ({ textContent, typingSpeed = 50, pauseBetweenSentences = 1000, height = '200px', width = '100%' }) => {
+  const [text, setText] = useState('');
+  const [sentenceIndex, setSentenceIndex] = useState(0);
+  const [charIndex, setCharIndex] = useState(0);
+  const sentences = textContent ? textContent.split('\n') : [];
+  const isTyping = useRef(false);
+
+  useEffect(() => {
+    if (!textContent) return;
+
+    if (!isTyping.current) {
+      isTyping.current = true;
+    }
+
+    if (sentenceIndex >= sentences.length) {
+      // Reset to start from the beginning
+      setSentenceIndex(0);
+      setCharIndex(0);
+      setText('');
+      return;
+    }
+
+    const currentSentence = sentences[sentenceIndex];
+
+    if (charIndex < currentSentence.length) {
+      const timeout = setTimeout(() => {
+        setText((prevText) => prevText + currentSentence[charIndex]);
+        setCharIndex((prevCharIndex) => prevCharIndex + 1);
+      }, typingSpeed);
+
+      return () => clearTimeout(timeout);
+    } else {
+      // Wait a bit, then go to the next sentence
+      const timeout = setTimeout(() => {
+        setSentenceIndex((prev) => prev + 1);
+        setCharIndex(0);
+      }, pauseBetweenSentences);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [charIndex, sentenceIndex, sentences, typingSpeed, pauseBetweenSentences, textContent]);
+
+  return (
+    <textarea
+      value={text}
+      readOnly
+      rows={10}
+      cols={5}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: height,
+        padding: '1rem',
+        fontFamily: 'monospace',
+        fontSize: '1rem',
+        backgroundColor: '#f4f4f4',
+        border: '1px solid #ccc',
+        resize: 'none',
+        whiteSpace: 'pre-wrap',
+      }}
+    />
+  );
+};
+
+export default TypewriterTextarea;

docs/src/pages/index.js

@@ -8,7 +8,7 @@ import Heading from '@theme/Heading';
 import styles from './index.module.css';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import LatestRelease from '@site/src/components/LatestRelease';
-
+import TypewriterTextarea from '@site/src/components/TypewriterTextarea';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
@@ -25,9 +25,18 @@ function HomepageHeader() {
           style={{ maxWidth: '20vh' }}
         />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/intro">
-            Getting Started
+        <div style={{ marginTop: '2rem' }}>
+          <TypewriterTextarea
+            textContent='Hello there! I’m a handy little Java library that helps you talk to an Ollama server — nice and easy.'
+            typingSpeed={30}
+            pauseBetweenSentences={1200}
+            height='70px'
+            width='50%'
+          />
+        </div>
+        <div className={styles.buttons} >
+          <Link className="button button--secondary button--lg" to="/intro" style={{ marginTop:'2rem' }}>
+            Get Started
           </Link>
         </div>
         <div style={{ marginTop: '3rem' }}>