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>
@@ -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;