Files
api-company/docs-site/src/pages/pricing.astro
T
agent-company 5fc5013a51
Validate Flux manifests / kustomize-build (pull_request) Failing after 8s
feat: update pricing page to include VIN Decoder as 4th API (#141)
- Update meta description to include VIN Decoder
- Change hero text from 'all three APIs' to 'all four APIs'
- Add VIN Decoder column to the pricing table with same 4-tier rates
- Add link to /vin-decoder docs page in the CTA row

npm run build exits 0; /pricing route builds successfully.

Closes leeworks-agents/api-company#141
2026-05-31 05:06:26 +00:00

91 lines
4.2 KiB
Plaintext

---
import Base from '../layouts/Base.astro';
---
<Base title="API Pricing" description="API Pricing — leeworks.dev — compare plans for ZIP Enrichment, Holidays, Air Quality, and VIN Decoder 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 four 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>
<th scope="col">VIN Decoder</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>
<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>
<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>
<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>
<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>
<a href="/vin-decoder" class="cta-btn">VIN Decoder Docs</a>
</div>
<p class="disclaimer">Subscriptions managed via RapidAPI marketplace. Prices shown in USD. Rate limits apply per API key.</p>
</div>
</Base>