From 872b5447e45d7f4b2cee5a7684d633ea7d08098b Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 9 Feb 2023 16:44:19 -0500
Subject: [PATCH] Updates to content and terminal animation

---
 src/layouts/index.html                        | 30 ++++--
 .../partials/hero-terminal-animation.html     | 98 ++++++++-----------
 2 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index ef4444a..4fe3dc9 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -3,6 +3,26 @@
 <!-- Hero Section -->
 
 <style>
+
+  .comment{
+    background-color: #ff4100;
+    border-radius: 5px;
+  }
+
+  .comment-success{
+    background-color: #00ffd0;
+    border-radius: 5px;
+  }
+
+  .comment-process{
+    background-color: #ffff00;
+    border-radius: 5px;
+  }
+
+  .comment-success code{
+    color: #1a1a1a;
+  }
+
   .hero{
     background-image: url("/Images/hero-background-mountains.png") !important;
     background-attachment: scroll;
@@ -112,7 +132,7 @@
       <div class="hero-col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
         <h1 class="display-1 hero-text" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
           <p class="lead hero-lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
-          <p class="lead mobile-lead mb-5">tea/cli... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
+          <p class="lead mobile-lead mb-5">tea... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
           <p class="mb-5 hero-description">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>
 
           <div class="mobile-ctas">
@@ -152,11 +172,6 @@
       margin-right: 5px;
     }
 
-    #hero-terminal-content{
-      min-height: 0px !important;
-      max-height: none !important;
-    }
-
     .terminal{
       height: auto;
       min-height: 40%;
@@ -198,13 +213,16 @@
     #terminal-output {
       white-space: pre;
       display: inline-block;
+      width: 100%;
     }
     #terminal-input {
       position: relative;
       display: inline-block;
+      witdth: 100%;
     }
     .terminal-content{
       overflow: hidden;
+      width: 100%;
     }
 
 </style>
diff --git a/src/layouts/partials/hero-terminal-animation.html b/src/layouts/partials/hero-terminal-animation.html
index 4c140a7..3bbff9a 100644
--- a/src/layouts/partials/hero-terminal-animation.html
+++ b/src/layouts/partials/hero-terminal-animation.html
@@ -17,67 +17,53 @@
   </div>
 </div>
 
+<style>
+
+  .icon-exclamation-circle,
+  .icon-check-circle{
+    position: relative;
+    top:2px;
+    margin-right:5px;
+  }
+
+</style>
+
 <script>
-      const commands = [
-        { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
-        { input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table class="teal">
-<thead>
-    <tr>
-        <th>% Total</th>
-        <th>% Received</th>
-        <th>% Xferd</th>
-        <th>Average Speed</th>
-        <th>Time</th>
-        <th>Time</th>
-        <th>Time</th>
-        <th>Current</th>
-    </tr>
-</thead>
-<tbody>
-    <tr>
-        <td>100</td>
-        <td>13306</td>
-        <td>100</td>
-        <td>54983</td>
-        <td>0</td>
-        <td>--:--:--</td>
-        <td>--:--:--</td>
-        <td>--:--:--</td>
-    </tr>
-    <tr>
-        <td colspan="8">k, we installed  <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
-    </tr>
-</tbody>
-</table>
-` },
-        { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
-        { input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
-      ];
+  const commands = [
+    { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `<span class="mb-5">command not found: node</span><br><div class="comment p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-exclamation-circle"></i>Node is not installed, thus command is not found</code></div>`},
+    { input: "$ sh <(curl tea.xyz) --yes<br><span class='grid-gray'>############################################################</span>", output: ``},
+    { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19` },
+    { input: "", output: `Hello World! &#128526;<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea magically installs needed dependencies</code></div>` },
+  ];
 
-      let commandIndex = 0;
-      let command = commands[commandIndex];
-      let commandOutput = "";
+  let commandIndex = 0;
+  let command = commands[commandIndex];
+  let commandOutput = "";
 
-      function typeCommand() {
-        if (commandIndex === commands.length) {
-          return;
-        }
-        if (command.input.length === 0) {
-          commandOutput += '\n' + command.output + '\n';
-          document.querySelector("#terminal-output").innerHTML = commandOutput;
-          commandIndex++;
-          command = commands[commandIndex];
-          setTimeout(typeCommand, 1000);
-          return;
-        }
-        commandOutput += command.input[0];
-        command.input = command.input.slice(1);
+  function typeCommand() {
+    if (commandIndex === commands.length) {
+      return;
+    }
+    if (command.input.length === 0) {
+      setTimeout(() => {
+        commandOutput += '\n' + command.output + '\n';
         document.querySelector("#terminal-output").innerHTML = commandOutput;
-        setTimeout(typeCommand, 100);
-      }
+        commandIndex++;
+        command = commands[commandIndex];
+        setTimeout(typeCommand, 1000);
+      }, 1000);
+      return;
+    }
+
+    commandOutput += command.input[0];
+    command.input = command.input.slice(1);
+    document.querySelector("#terminal-output").innerHTML = commandOutput;
+    setTimeout(typeCommand, 100);
+  }
+
+  typeCommand();
+</script>
 
-      typeCommand();
-    </script>
 
     <script>