Animate terminal commands

Author: albertodebortoli

css/style.css

@@ -326,9 +326,32 @@ code {
 }
 
 .terminal-img {
-    width: 100%;
-    display: block;
-    opacity: 0.9;
+    display: none;
+    /* Hide if still present */
+}
+
+.terminal-content {
+    height: 320px;
+    padding: 20px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #e5e7eb;
+    overflow-y: hidden;
+    position: relative;
+    background: #09090b;
+}
+
+.terminal-line {
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.prompt {
+    color: var(--primary-accent);
+    margin-right: 8px;
+    font-weight: 700;
 }
 
 .demo-caption {

index.html

@@ -95,8 +95,7 @@ <h1>Luca</h1>
                         <div class="terminal-title">Terminal — luca install</div>
                     </div>
                     <div class="terminal-body">
-                        <img src="images/terminal-run.png"
-                            alt="Luca terminal demo showing simple installation and usage" class="terminal-img">
+                        <div class="terminal-content" id="terminal-content"></div>
                     </div>
                 </div>
                 <p class="demo-caption">See Luca in action - simple installation and immediate tool availability</p>
@@ -144,10 +143,10 @@ <h2>Quick Start</h2>
                     <p class="example-description">Project-specific tool versions work automatically:</p>
                     <pre><code># In project-1 directory
 $ tuist version
-4.78.0</code></pre>
+4.80.0</code></pre>
                     <pre><code># In project-2 directory
 $ tuist version
-4.67.0</code></pre>
+4.78.0</code></pre>
                 </div>
             </div>
 
@@ -161,11 +160,11 @@ <h2>Lucafile</h2>
                     <p class="example-description">Create a <code>Lucafile</code> in your project directory:</p>
                     <pre><code>tools:
 - name: SwiftLint
-  version: 0.53.0
-  url: https://github.com/realm/SwiftLint/releases/download/0.53.0/portable_swiftlint.zip
+  version: 0.62.0
+  url: https://github.com/realm/SwiftLint/releases/download/0.62.0/portable_swiftlint.zip
 - name: Tuist
-  version: 4.78.0
-  url: https://github.com/tuist/tuist/releases/download/4.78.0/tuist.zip</code></pre>
+  version: 4.80.0
+  url: https://github.com/tuist/tuist/releases/download/4.80.0/tuist.zip</code></pre>
                 </div>
 
                 <div class="example card">
@@ -362,6 +361,7 @@ <h2>System Requirements</h2>
     </footer>
 
     <script src="js/main.js"></script>
+    <script src="js/terminal-animation.js"></script>
     <script>
         function copyInstallCommand() {
             const command = document.querySelector('.install-command code').textContent;