Implement a nice std comparison table

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>

Author: jviotti

assets/main.scss

@@ -4,6 +4,7 @@
 $blockquote-font-size: 16px;
 $border-radius: 0;
 $primary: #000;
+$warning: rgba(189, 142, 0, 1);
 
 // Configuration
 @import "../vendor/bootstrap/scss/variables";
@@ -19,7 +20,7 @@ $primary: #000;
 @import "../vendor/bootstrap/scss/images";
 @import "../vendor/bootstrap/scss/containers";
 @import "../vendor/bootstrap/scss/grid";
-// @import "../vendor/bootstrap/scss/tables";
+@import "../vendor/bootstrap/scss/tables";
 // @import "../vendor/bootstrap/scss/forms";
 @import "../vendor/bootstrap/scss/buttons";
 @import "../vendor/bootstrap/scss/transitions";

content/products/std/_index.html

@@ -411,6 +411,90 @@ <h1 class="display-3 fw-bold mb-1">€2,110</h1>
   </div>
 </section>
 
+<section class="py-5 bg-white">
+  <div class="container">
+    <div class="text-center mb-5">
+      <h2 class="display-5 fw-bold mb-3">What's the Alternative?</h2>
+      <p class="lead text-muted mx-auto" style="max-width: 1100px;">This is not about <a href="https://www.learnjsonschema.com/2020-12/core/ref"><code>$ref</code></a>. It's about having the in-house talent and correctly implementing <strong>dozens of specifications</strong>, reading paywalled standards, handling edge cases, keeping up with updates, and obsessively guaranteeing compliance.</p>
+    </div>
+
+    <div class="table-responsive">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th class="bg-light p-3" style="width: 20%;"></th>
+            <th class="text-center p-3" style="width: 20%;">
+              <span class="fw-bold">Do it yourself</span>
+            </th>
+            <th class="text-center p-3" style="width: 20%;">
+              <span class="fw-bold">With ChatGPT</span>
+            </th>
+            <th class="text-center p-3" style="width: 20%;">
+              <span class="fw-bold">Ignore the problem</span>
+            </th>
+            <th class="text-center bg-success bg-opacity-10 border-top border-start border-end border-dark border-2 p-3" style="width: 20%;">
+              <span class="fw-bold">With <img src="/logo.svg" alt="Sourcemeta" height="20" class="align-text-bottom mx-1"> Sourcemeta</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="bg-light fw-semibold p-3">Reading Specifications</td>
+            <td class="p-3">€30,000<br><small class="text-muted">(375 hours)</small></td>
+            <td class="p-3"><span class="text-muted">Hope ChatGPT was illegaly trained with the potentially copyrighted standards</span></td>
+            <td class="p-3"><span class="text-muted">Not needed</span></td>
+            <td class="bg-success bg-opacity-10 border-start border-end border-dark border-2 p-3"><i class="bi bi-check-circle-fill text-success"></i> <span class="fw-semibold">Done for you</span></td>
+          </tr>
+          <tr>
+            <td class="bg-light fw-semibold p-3">Implementation & Testing</td>
+            <td class="p-3">€60,000<br><small class="text-muted">(750 hours)</small></td>
+            <td class="p-3"><span class="text-muted">Ask ChatGPT</span></td>
+            <td class="p-3"><span class="text-muted">Basic type checks everywhere</span></td>
+            <td class="bg-success bg-opacity-10 border-start border-end border-dark border-2 p-3"><i class="bi bi-check-circle-fill text-success"></i> <span class="fw-semibold">Hundreds of schemas ready and more coming</span></td>
+          </tr>
+          <tr>
+            <td class="bg-light fw-semibold p-3">Annual Maintenance</td>
+            <td class="p-3">€20,000/year<br><small class="text-muted">(250 hours)</small></td>
+            <td class="p-3"><span class="text-muted">Ask ChatGPT again</span></td>
+            <td class="p-3"><span class="text-muted">None (as you are barely validating)</span></td>
+            <td class="bg-success bg-opacity-10 border-start border-end border-dark border-2 p-3"><i class="bi bi-check-circle-fill text-success"></i> <span class="fw-semibold">Free updates forever</span></td>
+          </tr>
+          <tr>
+            <td class="bg-light fw-semibold p-3">Standards Compliance</td>
+            <td class="p-3 text-warning"><i class="bi bi-exclamation-triangle-fill"></i> If done correctly</td>
+            <td class="p-3 text-danger"><i class="bi bi-x-circle-fill"></i> No guarantees</td>
+            <td class="p-3 text-danger"><i class="bi bi-x-circle-fill text-danger"></i> No compliance at all</td>
+            <td class="bg-success bg-opacity-10 border-start border-end border-dark border-2 p-3"><i class="bi bi-check-circle-fill text-success"></i> <span class="fw-semibold">Guaranteed</span></td>
+          </tr>
+          <tr>
+            <td class="bg-light fw-semibold p-3">Security Risks</td>
+            <td class="p-3 text-warning"><i class="bi bi-exclamation-triangle-fill"></i> Low (if done correctly)</td>
+            <td class="text-danger p-3">Data breach: <span class="fw-bold">€50K-500K+</span><br><small>GDPR: €20M or 4% revenue</small></td>
+            <td class="text-danger p-3">Security incident: <span class="fw-bold">€100K+</span></td>
+            <td class="bg-success bg-opacity-10 border-start border-end border-dark border-2 p-3"><i class="bi bi-check-circle-fill text-success"></i> <span class="fw-semibold">Battle-tested</span></td>
+          </tr>
+          <tr>
+            <td class="bg-light fw-semibold p-3">Support</td>
+            <td class="p-3">Your team's problem</td>
+            <td class="p-3">Your team's problem</td>
+            <td class="p-3">Your team's problem</td>
+            <td class="bg-success bg-opacity-10 border-start border-end border-dark border-2 p-3"><i class="bi bi-check-circle-fill text-success"></i> <span class="fw-bold">Premium support by a member of the JSON Schema Technical Steering Committee</span></td>
+          </tr>
+          <tr class="border-top border-dark border-2">
+            <td class="bg-light fw-bold p-3">Total First Year</td>
+            <td class="bg-danger bg-opacity-25 fw-bold p-3 text-danger">€110,000+<br><small class="text-dark fw-normal">Assuming you managed to hire a JSON Schema expert</small></td>
+            <td class="bg-danger bg-opacity-25 fw-bold p-3 text-danger">€0 → Catastrophic Risk<br><small class="text-dark fw-normal">Worth saving €2,110?</small></td>
+            <td class="bg-danger bg-opacity-25 fw-bold p-3 text-danger">€0 → High Risk<br><small class="text-dark fw-normal">Worth saving €2,110?</small></td>
+            <td class="bg-success text-white fw-bold fs-5 border-bottom border-start border-end border-dark border-2 p-3">€2,110<br><small class="text-white">ROI in the first week</small></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <p class="text-muted text-center mt-1"><small>Cost calculations assume a mid-level developer at €80/hour (conservative industry average)</small></p>
+  </div>
+</section>
+
 <section class="py-5 bg-gradient" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
   <div class="container">
     <div class="text-center mb-5">