Make the homepage prettier (#880)

4 files changed, 22 insertions, 3 deletions

diff --git a/docs/src/components/HomepageFeatures/index.js b/docs/src/components/HomepageFeatures/index.js
index ec78def7..81528043 100644
--- a/docs/src/components/HomepageFeatures/index.js
+++ b/docs/src/components/HomepageFeatures/index.js
@@ -10,7 +10,8 @@ const FeatureList = [
         <ul>
           <li>Sync your shell history to all of your machines, wherever they are</li>
           <li>End-to-end encrypted - nobody can see your data but you</li>
-          <li>Securely backed up - never lose a command again</li>
+          <li>Securely backed up - never lose your history</li>
+          <li>Easily handles decades of history</li>
         </ul>
       </>
     ),
@@ -20,7 +21,7 @@ const FeatureList = [
     description: (
       <>
         <ul>
-          <li>Speedy terminal search UI</li>
+          <li>Full text or fuzzy search over your shell history</li>
           <li>Configurable search method - fuzzy, prefix, etc</li>
           <li>Easily search and filter by session, directory, or machine</li>
           <li>Powerful command line search for integration with other tools</li>
@@ -36,7 +37,7 @@ const FeatureList = [
         <ul>
           <li>History stored in a SQLite DB, making stats and analysis easy</li>
           <li>Log exit code, directory, hostname, session, command duration, etc</li>
-          <li>Import old history from a number of shells or history tools</li>
+          <li>Import existing history from a number of shells or history tools</li>
         </ul>
       </>
     ),
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 0727c7d0..f96879dd 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -31,6 +31,7 @@ function HomepageHeader() {
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
+
   return (
     <Layout
       title={`Magical Shell History`}>
@@ -39,6 +40,23 @@ export default function Home() {
         <section className={styles.whatis}>
           <div className="container">
             <center><h1>What is <b>Atuin</b>?</h1></center>
+            <div className="row">
+              <img src="/img/screenshot.png" className="col col--8" />
+              <div className="col col--4">
+                <p>Atuin is a command-line tool that enables you to make better use of your shell, by giving ctrl-r superpowers.</p>
+                <p>Every line you write is stored - ready to be queried and ran again at any point, from any machine you wish. Never forget again!</p>
+                <p>Sync your history between all of your machines, and search it from anywhere</p>
+              </div>
+            </div>
+
+            <div className="row" style={{ paddingTop: "18px", alignItems: "center" }}>
+              <div className="col col--4">
+                <p>Generate statistics from your shell history, such as this activity graph</p>
+              </div>
+              <div className="col col--8">
+                <img src="https://api.atuin.sh/img/ellie.png?token=0722830c382b42777bdb652da5b71efb61d8d387" />
+              </div>
+            </div>
 
             <HomepageFeatures />
           </div>
diff --git a/docs/static/img/screenshot.png b/docs/static/img/screenshot.png
new file mode 100644
index 00000000..a8d67514
--- /dev/null
+++ b/docs/static/img/screenshot.png
diff --git a/docs/static/img/stats.png b/docs/static/img/stats.png
new file mode 100644
index 00000000..803b5a03
--- /dev/null
+++ b/docs/static/img/stats.png