Updates to content and terminal animation

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>

src/layouts/partials/hero-terminal-animation.html

@@ -17,41 +17,23 @@
   </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: "$ 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", output: `installing ~/.tea...<br><table class="teal">
+    { input: "$ sh <(curl tea.xyz) --yes<br><span class='grid-gray'>############################################################</span>", output: ``},
-<thead>
+    { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19` },
-    <tr>
+    { 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>` },
-        <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>` },
   ];
 
   let commandIndex = 0;
@@ -63,13 +45,16 @@
       return;
     }
     if (command.input.length === 0) {
+      setTimeout(() => {
         commandOutput += '\n' + command.output + '\n';
         document.querySelector("#terminal-output").innerHTML = commandOutput;
         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;
@@ -77,7 +62,8 @@
   }
 
   typeCommand();
-    </script>
+</script>
+
 
     <script>