Update index.html

index.html

@@ -31,6 +31,7 @@
                     <li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
                     <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
                     <li class="nav-item"><a class="nav-link" href="#files">Last Files</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#screenshots">Screenshots</a></li>
                 </ul>
             </div>
         </div>
@@ -355,14 +356,49 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
         </div>
     </section>
 
+    <!-- Screenshots Section -->
+    <section id="screenshots" class="py-5 bg-dark text-white">
+        <div class="container">
+            <h2 class="text-center mb-5 animate__animated animate__fadeIn">📸 Screenshots</h2>
+            <p class="lead text-center mb-4">Check out GhostPack’s spectral magic in action!</p>
+            <div class="row row-cols-1 row-cols-md-3 g-4">
+                <div class="col">
+                    <div class="card bg-ghost-card h-100">
+                        <div class="card-body text-center">
+                            <img src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/screenshot1.png" alt="Screenshot 1" class="img-fluid rounded" style="max-height: 300px;">
+                            <p class="mt-2">Placeholder: Screenshot 1</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card bg-ghost-card h-100">
+                        <div class="card-body text-center">
+                            <img src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/screenshot2.png" alt="Screenshot 2" class="img-fluid rounded" style="max-height: 300px;">
+                            <p class="mt-2">Placeholder: Screenshot 2</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card bg-ghost-card h-100">
+                        <div class="card-body text-center">
+                            <img src="https://huggingface.co/spaces/ghostai1/GhostPack/resolve/main/screenshot3.png" alt="Screenshot 3" class="img-fluid rounded" style="max-height: 300px;">
+                            <p class="mt-2">Placeholder: Screenshot 3</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="text-center mt-4 text-white">Upload your screenshots to Hugging Face to replace placeholders!</p>
+        </div>
+    </section>
+
     <!-- Last Files Section -->
-    <section id="files" class="py-5 bg-dark text-white">
+    <section id="files" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">📂 Latest Conjurations</h2>
             <p class="lead text-center mb-4">Explore the latest files and logs from the GhostPack repo.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body text-center">
                             <h3 class="card-title">📜 Latest File</h3>
                             <p class="card-text">Check out <code>ghostgradio.py</code>, the heart of GhostPack’s GUI.</p>
@@ -371,7 +407,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body text-center">
                             <h3 class="card-title">📋 Logs</h3>
                             <p class="card-text">Dive into render logs for debugging and insights.</p>