feat: add 3 SEO use case pages with clean URLs, sitemap, and index section

public/index.html

@@ -546,6 +546,31 @@ screenshot = snap.<span class="fn">capture</span>(
   </div>
 </section>
 
+<section class="section" id="use-cases">
+  <div class="container text-center">
+    <div class="section-label">Use Cases</div>
+    <h2 class="section-title">Built for real-world workflows</h2>
+    <p class="section-subtitle">See how developers use SnapAPI to automate screenshots across their stack.</p>
+    <div class="features-grid" style="grid-template-columns:repeat(3,1fr);margin-top:48px">
+      <a href="/use-cases/social-media-previews" class="feature-card" style="text-decoration:none;color:inherit">
+        <div class="feature-icon blue">🖼️</div>
+        <h3>OG Images & Social Previews</h3>
+        <p>Generate dynamic Open Graph images and Twitter cards from HTML templates on-the-fly.</p>
+      </a>
+      <a href="/use-cases/website-monitoring" class="feature-card" style="text-decoration:none;color:inherit">
+        <div class="feature-icon green">👁️</div>
+        <h3>Visual Website Monitoring</h3>
+        <p>Schedule screenshots to detect layout regressions, broken pages, and visual bugs automatically.</p>
+      </a>
+      <a href="/use-cases/pdf-reports" class="feature-card" style="text-decoration:none;color:inherit">
+        <div class="feature-icon purple">📄</div>
+        <h3>Reports & Thumbnails</h3>
+        <p>Create website thumbnails for link previews, directories, dashboards, and email digests.</p>
+      </a>
+    </div>
+  </div>
+</section>
+
 <section class="section" id="pricing">
   <div class="container text-center">
     <div class="section-label">Pricing</div>