docs: add container scan example and HTML output screenshot

Author: AbhishekHerbertSamuel

gcp/website/frontend3/img/container-scan-html.png

@@ -242,6 +242,25 @@ <h3 class="code-card-title">Guided Remediation (interactive)</h3>
             <md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button>
           </clipboard-copy>
         </div>
+        <div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
+          <h3 class="code-card-title">🐳 Scan Container Images</h3>
+          <p class="description">
+            You can use <a href="https://github.com/google/osv-scanner">OSV-Scanner</a> to scan container images (like Docker images) for known vulnerabilities in installed packages.
+          </p>
+          <pre class="code-card-content" id="example-container-image-scan">
+osv-scanner scan image alpine:3.12
+          </pre>
+          <p class="description">
+            To view a comprehensive, user-friendly HTML report, run:
+          </p>
+          <pre class="code-card-content" id="example-container-html-report">
+osv-scanner scan image --serve alpine:3.12
+          </pre>
+          <div class="image-container" style="margin-top: 12px;">
+            <img src="/img/container-scan-html.png" alt="Screenshot of container scan HTML output" loading="lazy" style="max-width: 100%; border-radius: 6px; border: 1px solid #ccc;">
+          </div>
+        </div>
+
       </div>
       <div class="mdc-layout-grid__cell--span-12">
         <div class="cta">

gcp/website/frontend3/src/templates/home.html

@@ -32,7 +32,7 @@ module.exports = {
   plugins: [
     new CopyPlugin({
       patterns: [
-        { from: './src/templates/*.html', to: '[name].html' },
+        { from: './src/templates', to: '.', globOptions: { ignore: ['**/base.html'] } },
         { from: './img/*', to: 'static/img/[name][ext]' },
       ],
     }),