leeworks-agents/api-company
5
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects Releases Wiki Activity

[Phase 5] docs-site: add /pricing cross-API comparison page and nav link
Validate Flux manifests / kustomize-build (pull_request) Failing after 23s
Details

Browse Source 
Closes leeworks-agents/api-company#101

- Create docs-site/src/pages/pricing.astro with accessible table markup
  showing all 4 tiers (Free/Basic/Pro/Ultra) for all 3 APIs
- Add <caption> and scope attributes for accessibility
- Responsive overflow-x wrapper for mobile
- CTA buttons linking to RapidAPI (placeholder # until listings live)
- Revenue disclaimer: subscriptions managed via RapidAPI marketplace
- Add /pricing link to nav in Base.astro layout
- npm run build passes with no errors
This commit is contained in:
agent-company
2026-05-29 20:03:29 +00:00
parent 7cfcd0f46b
commit 411ee92106
2 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-site/src/layouts/Base.astro
+1
View File
@@ -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
+84
View File
@@ -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>