Replace the home page with the demo (#38)

* Replace the home page with the demo

* Fix the index document

Author: Noah Lee

docs/index.md

@@ -3,7 +3,7 @@ sidebar_position: 1
 title: What is Gitploy?
 ---
 
-Gitploy is a tooling that helps your organization build the deployment system in minutes. It enables your organization **to deploy in the same manner** without worrying about  the implementation details of delivering different types of applications (e.g., web, native) and **to deploy differently** with a simple configuration file for each application, respectively. And as a result, your organization can get a robust system to deploy fast and safely. 🚀
+Gitploy is a tooling that helps your organization build the deployment system in minutes. It enables your organization **to deploy in the same manner** without worrying about  the implementation details of delivering different types of applications (e.g., web, native) and **to set up a deployment pipeline differently** with a simple configuration file for each application, respectively. And as a result, your organization can get a robust system to deploy fast and safely. 🚀
 
 ## Deploy in the same manner
 
@@ -15,11 +15,11 @@ Gitploy resolves the complexity perfectly. It always provides **the way to deplo
 
 Gitploy provides an intuitive UI similar to GitHub. Users can select one of the commits, branches, or tags to deploy and follow up on the deployment status.
 
-![Gitploy Demo](../static/img/docs/gitploy-v2.gif)
+![Gitploy Demo](../static/img/docs/gitploy-v3.gif)
 
-## Deploy differently
+## Set up a deployment pipeline differently
 
-Each application needs a customizable pipeline. If an organization has core applications to deploy carefully, it should enforce a gateway like a review or deploy freeze window. And also an organization should chooses continuous delivery or continuous deployment for application.
+Each application needs a customized pipeline. If an organization has core applications to deploy carefully, it should enforce a gateway like a review or deploy freeze window. And also an organization should chooses continuous delivery or continuous deployment for application.
 
 Gitploy provides a way **to configure a pipeline with a simple, easy‑to‑read file for each repository (and each environment).** It is placed at `deploy.yml` as default, but you can replace the file path in the settings tab of Gitploy. 
 

src/components/HomepageDemo.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageDemo.module.css';
+
+export default function HomepageDemo() {
+  return (
+    <section className="padding-vert--xl">
+      <div className="container">
+        <div className="text--center">
+          <h2>BUILD A POWERFUL DEPLOYMENT SYSTEM</h2>
+          <p>Gitploy provides a fast, safe and secure deployment pipeline to your organization. <br/> Let's build your deployment system in minutes.</p>
+          <img className={clsx(styles.image, 'shadow--md', )} src={require('../../static/img/docs/gitploy-v3.gif').default}/>
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/HomepageDemo.module.css

@@ -0,0 +1,3 @@
+.image {
+  border-radius: 8px;
+}

src/pages/index.js

@@ -5,6 +5,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
 import HomepageFeatures from '../components/HomepageFeatures';
+import HomepageDemo from '../components/HomepageDemo';
 import HomepageInstallation from '../components/HomepageInstallation';
 
 function HomepageHeader() {
@@ -16,8 +17,14 @@ function HomepageHeader() {
           <div className="col col--6 col--offset-3">
             <h1 className="hero__title">Builds your deployment system around GitHub.</h1>
           </div>
+          <div className="col col--8 col--offset-2">
+            <p className="hero__subtitle">
+              It enables your organization <strong>to deploy in the same manner</strong> regardless of the type of applications
+              and <strong>to set up a deployment pipeline differently</strong> with a simple configuration file for each application.
+            </p>
+          </div>
         </div>
-        <div className={clsx('margin-top--lg', styles.buttons)}>
+        <div className={clsx(styles.buttons)}>
           <Link
             className="button button--primary button--lg margin-right--md"
             to="/docs/">
@@ -42,7 +49,8 @@ export default function Home() {
       description={siteConfig.description}>
       <HomepageHeader />
       <main>
-        <HomepageFeatures />
+        {/* <HomepageFeatures /> */}
+        <HomepageDemo />
         <HomepageInstallation />
       </main>
     </Layout>