From 878452e9d30411c538b30763d3dff544423a1504 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 31 May 2022 20:04:37 +0100
Subject: [PATCH] chore: docs

---
 packages/docs/src/pages/index.scss |  6 ++++++
 packages/docs/src/pages/index.tsx  | 26 +++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/index.scss b/packages/docs/src/pages/index.scss
index b85b289b7..b438d0060 100644
--- a/packages/docs/src/pages/index.scss
+++ b/packages/docs/src/pages/index.scss
@@ -25,3 +25,9 @@
         flex-direction: row-reverse;
     }
 }
+
+.homepage {
+    .button {
+        margin: 0px 20px;
+    }
+}
diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx
index 3e1ff5408..9911bd008 100644
--- a/packages/docs/src/pages/index.tsx
+++ b/packages/docs/src/pages/index.tsx
@@ -34,7 +34,7 @@ function HomepageHeader2() {
     const { siteConfig } = useDocusaurusContext();
     return (
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
-            <div className="container">
+            <div className="container homepage">
                 <img src={useBaseUrl('/img/dockview_logo.svg')} />
                 <h1 className="hero__title">{siteConfig.title}</h1>
                 {/* <div className="badge-container">
@@ -51,6 +51,12 @@ function HomepageHeader2() {
                     >
                         Get Started
                     </Link>
+                    <Link
+                        className="button button--secondary button--lg"
+                        to={'#live-demo'}
+                    >
+                        Live Demo
+                    </Link>
                 </div>
             </div>
         </header>
@@ -67,6 +73,24 @@ export default function Home(): JSX.Element {
             <HomepageHeader2 />
             <main className="container">
                 <HomepageFeatures />
+                <div
+                    id="live-demo"
+                    style={{
+                        height: '30px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        fontSize: '1.5em',
+                        fontWeight: 'bold',
+                    }}
+                >
+                    <img
+                        src={useBaseUrl('/img/dockview_logo.svg')}
+                        height={30}
+                    />
+                    <span style={{ paddingLeft: '8px' }}>
+                        Dockview Live Demos
+                    </span>
+                </div>
                 <DockviewDemo />
                 <DockviewDemo2 />
             </main>