add screenshots to website

Author: nikolan123

docs/index.html

@@ -37,6 +37,15 @@ <h2>Tested Devices</h2>
                 </div>
             </section>
 
+            <section class="content-card">
+                <h2>Screenshots</h2>
+                <div class="screenshots">
+                    <img src="scr1.webp" alt="S Voice Screenshot 1" class="screenshot">
+                    <img src="scr2.webp" alt="S Voice Screenshot 2" class="screenshot">
+                    <img src="scr3.webp" alt="S Voice Screenshot 3" class="screenshot">
+                </div>
+            </section>
+
             <div class="cta-section">
                 <a href="https://github.com/nikolan123/svoice" class="svoice-btn btn-large" target="_blank">View on GitHub</a>
             </div>

docs/scr1.webp

@@ -131,6 +131,24 @@ main {
     margin-top: 4px;
 }
 
+/* Screenshots */
+.screenshots {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-bottom: 24px;
+}
+
+.screenshot {
+    width: 200px;
+    height: auto;
+    border-radius: 8px;
+    border: 1px solid #1a1a1a;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    display: block;
+}
+
 /* CTA Section */
 .cta-section {
     display: flex;