docs: replace GIF with optimized WebP demo in README and landing page

Author: Bharath-code

README.md

@@ -7,7 +7,7 @@
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
 <p align="center">
-  <img src="demo.gif" alt="git-scope demo" width="600">
+  <img src="docs/git-scope-demo.webp" alt="git-scope demo" width="600">
 </p>
 
 **[🌐 Visit the Landing Page](https://bharath-code.github.io/git-scope/)**

docs/git-scope-demo.webp

@@ -560,8 +560,11 @@ <h2 style="font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 2rem; font-weight
                     <div class="dot yellow"></div>
                     <div class="dot green"></div>
                 </div>
-                <img src="https://raw.githubusercontent.com/Bharath-code/git-scope/main/demo.gif"
-                    onerror="this.onerror=null; this.src='demo-static.png'" alt="Git Scope Demo GIF">
+                <picture>
+                    <source srcset="git-scope-demo.webp" type="image/webp">
+                    <img src="demo-static.png" alt="Git Scope Demo" loading="lazy" width="1200" height="800"
+                        style="width: 100%; height: auto; display: block;">
+                </picture>
             </div>
         </section>