From 3ec410808d963e3a5c3dd235cb101d710b265255 Mon Sep 17 00:00:00 2001
From: Flook Peter <pflooky@hotmail.com>
Date: Fri, 24 May 2024 21:14:17 +0800
Subject: [PATCH] Remove the demo from home page

---
 docs/index.md             | 23 -----------------------
 docs/sample/demo/index.md | 24 ++++++++++++++++++++++++
 2 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 docs/sample/demo/index.md

diff --git a/docs/index.md b/docs/index.md
index 46f99ca5..225e4b8a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,7 +5,6 @@ files, databases, HTTP APIs and messaging systems. Synthetically generate produc
 and delete data after finishing."
 image: "https://data.catering/diagrams/logo/data_catering_logo.svg"
 ---
-<script src="demo-index.js"></script>
 
 <h1 align="center" style="padding-top: 25px;"><b>Automated test data management.</b></h1>
 <h3 align="center" style="padding-bottom: 25px">Create simple managed flows for data generation, validation and cleanup.</h3>
@@ -61,28 +60,6 @@ data source validations." class="front-page-gif">
 [Demo](sample/ui/index.html){ .md-button .md-button--primary .button-spaced }
 </span>
 
-## What does it look like
-
-Play around with the example below to see how Data Caterer can generate transaction data, validate it and then clean 
-it up.
-<p style="font-size: small">*This is for illustrative purposes</p>
-
-<span class="center-content">
-<a id="generate-button" class="md-button md-button--primary button-spaced">Generate</a>
-<a id="validate-button" class="md-button md-button--primary button-spaced">Validate</a>
-<a id="cleanup-button" class="md-button md-button--primary button-spaced">Cleanup</a>
-</span>
-
-<div class="center-content" style="flex-direction: column">
-    <div id="raw-transaction-container" class="raw-transaction-container"></div>
-    <img src="diagrams/index/basic_demo_data_consumer.svg"
-    alt="Data consumer reading from source and pushing to sink data source">
-    <div id="result-container">
-        <div id="transaction-card-container" class="all-card-container"></div>
-        <div id="validation-container"></div>
-    </div>
-</div>
-
 ## What is it
 
 <div class="grid cards" markdown>
diff --git a/docs/sample/demo/index.md b/docs/sample/demo/index.md
new file mode 100644
index 00000000..38a45ff2
--- /dev/null
+++ b/docs/sample/demo/index.md
@@ -0,0 +1,24 @@
+
+<script src="index.js"></script>
+
+## What does it look like
+
+Play around with the example below to see how Data Caterer can generate transaction data, validate it and then clean
+it up.
+<p style="font-size: small">*This is for illustrative purposes</p>
+
+<span class="center-content">
+<a id="generate-button" class="md-button md-button--primary button-spaced">Generate</a>
+<a id="validate-button" class="md-button md-button--primary button-spaced">Validate</a>
+<a id="cleanup-button" class="md-button md-button--primary button-spaced">Cleanup</a>
+</span>
+
+<div class="center-content" style="flex-direction: column">
+    <div id="raw-transaction-container" class="raw-transaction-container"></div>
+    <img src="diagrams/index/basic_demo_data_consumer.svg"
+    alt="Data consumer reading from source and pushing to sink data source">
+    <div id="result-container">
+        <div id="transaction-card-container" class="all-card-container"></div>
+        <div id="validation-container"></div>
+    </div>
+</div>
\ No newline at end of file