docs-site/src/layouts/Base.astro

@@ -31,6 +31,7 @@ const { title, description = "leeworks.dev API documentation" } = Astro.props;
     <a href="/zip-enrichment">ZIP Enrichment</a>
     <a href="/holidays">Holidays</a>
     <a href="/air-quality">Air Quality</a>
+    <a href="/pricing">Pricing</a>
     <a href="/blog">Blog</a>
     <a href="https://rapidapi.com/leeworks" target="_blank" rel="noopener">RapidAPI</a>
   </nav>

docs-site/src/pages/pricing.astro

@@ -0,0 +1,84 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="API Pricing" description="API Pricing — leeworks.dev — compare plans for ZIP Enrichment, Holidays, and Air Quality APIs">
+  <style>
+    .pricing-hero { padding: 4rem 2rem 2rem; text-align: center; }
+    .pricing-hero h1 { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #90cdf4, #667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
+    .pricing-hero p { font-size: 1.15rem; color: #a0aec0; max-width: 600px; margin: 0 auto 2rem; }
+    .pricing-wrap { padding: 1rem 2rem 3rem; max-width: 1100px; margin: 0 auto; overflow-x: auto; }
+    table { width: 100%; border-collapse: collapse; background: #1a1d27; border-radius: 12px; overflow: hidden; min-width: 640px; }
+    caption { caption-side: top; text-align: left; font-size: 0.875rem; color: #718096; padding: 0.75rem 1rem; font-style: italic; }
+    thead tr { background: #2d3748; }
+    th, td { padding: 0.9rem 1.25rem; text-align: left; border-bottom: 1px solid #2d3748; }
+    th { font-weight: 700; color: #90cdf4; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
+    td { color: #e2e8f0; font-size: 0.95rem; }
+    tbody tr:last-child td { border-bottom: none; }
+    tbody tr:hover { background: #232738; }
+    .tier-name { font-weight: 600; color: #fff; }
+    .tier-price { color: #9ae6b4; font-weight: 600; }
+    .free-price { color: #68d391; }
+    .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2.5rem 0 1rem; }
+    .cta-btn { display: inline-block; background: #667eea; color: #fff; padding: 0.65rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
+    .cta-btn:hover { background: #5a67d8; }
+    .disclaimer { text-align: center; color: #718096; font-size: 0.85rem; margin-top: 2rem; padding: 0 2rem; }
+  </style>
+
+  <div class="pricing-hero">
+    <h1>API Pricing</h1>
+    <p>Simple, transparent pricing for all three APIs. Start free — upgrade when you need more.</p>
+  </div>
+
+  <div class="pricing-wrap">
+    <table>
+      <caption>All plans are monthly. Requests reset at the start of each billing cycle.</caption>
+      <thead>
+        <tr>
+          <th scope="col">Tier</th>
+          <th scope="col">Price / mo</th>
+          <th scope="col">ZIP Enrichment</th>
+          <th scope="col">Holidays</th>
+          <th scope="col">Air Quality</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="tier-name">Free</td>
+          <td class="tier-price free-price">$0</td>
+          <td>100 req/mo &middot; 5 req/min</td>
+          <td>100 req/mo &middot; 5 req/min</td>
+          <td>100 req/mo &middot; 5 req/min</td>
+        </tr>
+        <tr>
+          <td class="tier-name">Basic</td>
+          <td class="tier-price">$9</td>
+          <td>5,000 req/mo &middot; 60 req/min</td>
+          <td>5,000 req/mo &middot; 60 req/min</td>
+          <td>5,000 req/mo &middot; 60 req/min</td>
+        </tr>
+        <tr>
+          <td class="tier-name">Pro</td>
+          <td class="tier-price">$19</td>
+          <td>25,000 req/mo &middot; 200 req/min</td>
+          <td>20,000 req/mo &middot; 200 req/min</td>
+          <td>20,000 req/mo &middot; 200 req/min</td>
+        </tr>
+        <tr>
+          <td class="tier-name">Ultra</td>
+          <td class="tier-price">$49</td>
+          <td>100,000 req/mo &middot; 500 req/min</td>
+          <td>100,000 req/mo &middot; 500 req/min</td>
+          <td>100,000 req/mo &middot; 500 req/min</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="cta-row">
+      <a href="#" class="cta-btn">ZIP Enrichment on RapidAPI</a>
+      <a href="#" class="cta-btn">Holidays on RapidAPI</a>
+      <a href="#" class="cta-btn">Air Quality on RapidAPI</a>
+    </div>
+
+    <p class="disclaimer">Subscriptions managed via RapidAPI marketplace. Prices shown in USD. Rate limits apply per API key.</p>
+  </div>
+</Base>