openclawd/SnapAPI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add /pricing and /changelog SEO pages
All checks were successful
Build & Deploy to Staging / Build & Deploy to Staging (push) Successful in 10m43s
Details

Browse source 
- Pricing page with full comparison table, feature matrix, FAQ, JSON-LD Product schema
- Changelog page with all versions v0.1.0-v0.6.0, JSON-LD Blog schema
- 301 redirects for clean URLs
- Added to sitemap.xml
- Pricing in main nav, changelog in footer
- 14 new tests (171 total)
This commit is contained in:
OpenClaw 2026-03-02 15:06:41 +01:00
parent 9d1170fb9a
commit 9609501d7b
6 changed files with 652 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

237
public/changelog.html Normal file
View file

@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>API Changelog — SnapAPI Updates &amp; Release History</title>
<meta name="description" content="SnapAPI changelog: track every update, new feature, and improvement to the screenshot API. See what's new in each release.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📸</text></svg>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="canonical" href="https://snapapi.eu/changelog">
<meta property="og:title" content="API Changelog — SnapAPI Updates & Release History">
<meta property="og:description" content="Track every update and new feature added to SnapAPI's screenshot API.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://snapapi.eu/changelog">
<meta property="og:image" content="https://snapapi.eu/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="API Changelog — SnapAPI Updates & Release History">
<meta name="twitter:description" content="Track every update and new feature added to SnapAPI's screenshot API.">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Blog","name":"SnapAPI Changelog","description":"Release history and updates for SnapAPI screenshot API.","url":"https://snapapi.eu/changelog","publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"}}
</script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0e17;--bg2:#0f1420;--card:#141a28;--card-hover:#1a2235;
--border:#1e2a3f;--border-light:#2a3752;
--text:#f0f2f7;--text-secondary:#94a3c0;--muted:#6b7a96;
--primary:#4f8fff;--primary-light:#6da3ff;--primary-dark:#3a6fd8;--primary-glow:rgba(79,143,255,0.15);
--accent:#10b981;--accent-glow:rgba(16,185,129,0.15);
--purple:#a78bfa;--orange:#f59e0b;--pink:#ec4899;
--gradient:linear-gradient(135deg,#4f8fff 0%,#a78bfa 50%,#ec4899 100%);
--radius:12px;--radius-lg:16px;--radius-xl:24px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary-light);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
::selection{background:var(--primary);color:#fff}
.container{max-width:800px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:10px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 20px rgba(79,143,255,0.3)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 28px rgba(79,143,255,0.4);color:#fff}
.btn-sm{padding:8px 18px;font-size:.85rem;border-radius:8px}
nav{position:sticky;top:0;z-index:100;background:rgba(10,14,23,0.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(30,42,63,0.5);padding:0 24px}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--text)}
.nav-logo span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--muted);font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:8px}
.nav-mobile{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
.hero-section{padding:80px 0 40px;text-align:center}
.hero-section h1{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:16px}
.hero-section p{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}
.timeline{margin:48px 0;position:relative}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--border)}
.release{position:relative;padding-left:56px;margin-bottom:48px}
.release::before{content:'';position:absolute;left:13px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--primary);border:3px solid var(--bg)}
.release.latest::before{background:var(--accent);box-shadow:0 0 12px rgba(16,185,129,0.4)}
.release-header{display:flex;align-items:baseline;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.release-version{font-size:1.4rem;font-weight:800;color:var(--text)}
.release-date{font-size:.85rem;color:var(--muted);font-weight:500}
.release-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:20px;background:var(--accent-glow);color:var(--accent)}
.release-body{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.release-body ul{list-style:none;margin:0;padding:0}
.release-body li{padding:8px 0;font-size:.92rem;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.release-body li:last-child{border-bottom:none}
.release-body li::before{content:"• ";color:var(--primary);font-weight:700}
.cta-box{background:linear-gradient(135deg,rgba(79,143,255,0.1) 0%,rgba(167,139,250,0.1) 100%);border:1px solid rgba(79,143,255,0.2);border-radius:var(--radius-xl);padding:48px;text-align:center;margin:48px 0}
.cta-box h2{font-size:1.8rem;font-weight:800;margin-bottom:12px}
.cta-box p{color:var(--text-secondary);margin-bottom:24px}
footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(--bg2)}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand h4{font-size:1.1rem;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-brand p{color:var(--muted);font-size:.85rem;line-height:1.6;max-width:280px}
.footer-col h5{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px}
.footer-col a{display:block;color:var(--text-secondary);font-size:.88rem;padding:4px 0;transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.8rem}
@media(max-width:768px){
.hero-section h1{font-size:1.8rem}
.footer-grid{grid-template-columns:1fr}
.nav-links{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:rgba(10,14,23,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 24px;gap:16px;z-index:99}
.nav-links.show{display:flex}
.nav-mobile{display:block}
}
</style>
</head>
<body>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
<div class="nav-links">
<a href="/#features">Features</a>
<a href="/#playground">Try It Free</a>
<a href="/pricing">Pricing</a>
<a href="/docs">API Docs</a>
<a href="/compare">Compare</a>
<a href="/guides/quick-start">Quick Start</a>
</div>
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
<section class="hero-section">
<div class="container">
<h1>Changelog</h1>
<p>Every update, feature, and improvement to SnapAPI. Follow our progress as we build the best EU-hosted screenshot API.</p>
</div>
</section>
<div class="container">
<div class="timeline">
<div class="release latest">
<div class="release-header">
<span class="release-version">v0.6.0</span>
<span class="release-date">March 2026</span>
<span class="release-tag">Latest</span>
</div>
<div class="release-body">
<ul>
<li>GET endpoint for direct image embedding in <code>&lt;img&gt;</code> tags</li>
<li>Response caching with X-Cache headers and 5-minute TTL</li>
<li>Usage dashboard for tracking API consumption</li>
<li>Customer portal for managing subscriptions</li>
<li>API key recovery flow</li>
<li>SEO pages: comparison page, quick-start guide</li>
<li>157 tests covering all functionality</li>
</ul>
</div>
</div>
<div class="release">
<div class="release-header">
<span class="release-version">v0.5.0</span>
<span class="release-date">February 2026</span>
</div>
<div class="release-body">
<ul>
<li>Stripe billing integration</li>
<li>3 paid plans: Starter (€9/mo), Pro (€29/mo), Business (€79/mo)</li>
<li>Checkout flow with automatic API key provisioning</li>
<li>Stripe webhook handling for subscription lifecycle</li>
</ul>
</div>
</div>
<div class="release">
<div class="release-header">
<span class="release-version">v0.4.0</span>
<span class="release-date">February 2026</span>
</div>
<div class="release-body">
<ul>
<li>Playground endpoint — try the API without authentication</li>
<li>Watermarked output for playground screenshots</li>
<li>IP-based rate limiting (5 requests/hour)</li>
<li>Official Node.js SDK</li>
<li>Official Python SDK</li>
</ul>
</div>
</div>
<div class="release">
<div class="release-header">
<span class="release-version">v0.3.0</span>
<span class="release-date">February 2026</span>
</div>
<div class="release-body">
<ul>
<li>Redesigned landing page with dark theme</li>
<li>Removed free tier — playground replaces it</li>
<li>Interactive Swagger documentation at <a href="/docs">/docs</a></li>
</ul>
</div>
</div>
<div class="release">
<div class="release-header">
<span class="release-version">v0.2.0</span>
<span class="release-date">February 2026</span>
</div>
<div class="release-body">
<ul>
<li>SSRF protection — blocks private/internal IP ranges</li>
<li>Browser pool with automatic recycling</li>
<li>PostgreSQL integration for persistent data</li>
</ul>
</div>
</div>
<div class="release">
<div class="release-header">
<span class="release-version">v0.1.0</span>
<span class="release-date">February 2026</span>
</div>
<div class="release-body">
<ul>
<li>Initial release</li>
<li>POST /v1/screenshot endpoint</li>
<li>Health check endpoint</li>
<li>Basic API key authentication</li>
</ul>
</div>
</div>
</div>
<div class="cta-box">
<h2>Start building with SnapAPI</h2>
<p>Get your API key in 60 seconds and start capturing screenshots.</p>
<a href="/pricing" class="btn btn-primary btn-lg">View Pricing →</a>
</div>
</div>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>
<div class="footer-col"><h5>Product</h5><a href="/#features">Features</a><a href="/pricing">Pricing</a><a href="/#playground">Playground</a><a href="/docs">API Docs</a></div>
<div class="footer-col"><h5>Developers</h5><a href="/docs">Swagger / OpenAPI</a><a href="/health">Status</a><a href="/guides/quick-start">Quick-Start Guide</a><a href="/changelog">Changelog</a></div>
<div class="footer-col"><h5>Legal</h5><a href="/impressum.html">Impressum</a><a href="/privacy.html">Privacy Policy</a><a href="/terms.html">Terms of Service</a></div>
</div>
<div class="footer-bottom">
<span>© 2026 Cloonar Technologies GmbH · FN 631089y · ATU81280034</span>
<span>Linzer Straße 192/1/2, 1140 Wien, Austria 🇦🇹</span>
<span>EU-hosted 🇪🇺 · All data stays in Europe</span>
</div>
</footer>
</body>
</html>

3
public/index.html
View file

@ -240,7 +240,7 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<div class="nav-links">
<a href="#features">Features</a>
<a href="#playground">Try It Free</a>
<a href="#pricing">Pricing</a>
<a href="/pricing">Pricing</a>
<a href="#docs">API Docs</a>
<a href="/docs" target="_blank">Swagger</a>
<a href="/usage">Usage</a>
@ -738,6 +738,7 @@ screenshot = snap.<span class="fn">capture</span>(
<a href="#docs">Quick Start</a>
<a href="/health">Status</a>
<a href="/usage">Usage Dashboard</a>
<a href="/changelog">Changelog</a>
</div>
<div class="footer-col">
<h5>Legal</h5>

277
public/pricing.html Normal file
View file

@ -0,0 +1,277 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Screenshot API Pricing — Affordable Plans from €9/mo | SnapAPI</title>
<meta name="description" content="SnapAPI pricing plans for website screenshot API. Starter €9/mo for 1,000 screenshots, Pro €29/mo for 5,000, Business €79/mo for 25,000. EU-hosted, no hidden fees.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📸</text></svg>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="canonical" href="https://snapapi.eu/pricing">
<meta property="og:title" content="Screenshot API Pricing — Affordable Plans from €9/mo">
<meta property="og:description" content="SnapAPI pricing: Starter €9/mo, Pro €29/mo, Business €79/mo. EU-hosted screenshot API with no hidden fees.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://snapapi.eu/pricing">
<meta property="og:image" content="https://snapapi.eu/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Screenshot API Pricing — Affordable Plans from €9/mo">
<meta name="twitter:description" content="SnapAPI pricing: Starter €9/mo, Pro €29/mo, Business €79/mo. EU-hosted screenshot API.">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Product","name":"SnapAPI Screenshot API","description":"EU-hosted website screenshot API with simple pricing plans.","url":"https://snapapi.eu/pricing","brand":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"},"offers":[{"@type":"Offer","name":"Starter","price":"9.00","priceCurrency":"EUR","description":"1,000 screenshots/month","url":"https://snapapi.eu/pricing"},{"@type":"Offer","name":"Pro","price":"29.00","priceCurrency":"EUR","description":"5,000 screenshots/month","url":"https://snapapi.eu/pricing"},{"@type":"Offer","name":"Business","price":"79.00","priceCurrency":"EUR","description":"25,000 screenshots/month","url":"https://snapapi.eu/pricing"}]}
</script>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0a0e17;--bg2:#0f1420;--card:#141a28;--card-hover:#1a2235;
--border:#1e2a3f;--border-light:#2a3752;
--text:#f0f2f7;--text-secondary:#94a3c0;--muted:#6b7a96;
--primary:#4f8fff;--primary-light:#6da3ff;--primary-dark:#3a6fd8;--primary-glow:rgba(79,143,255,0.15);
--accent:#10b981;--accent-glow:rgba(16,185,129,0.15);
--purple:#a78bfa;--orange:#f59e0b;--pink:#ec4899;
--gradient:linear-gradient(135deg,#4f8fff 0%,#a78bfa 50%,#ec4899 100%);
--radius:12px;--radius-lg:16px;--radius-xl:24px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary-light);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
::selection{background:var(--primary);color:#fff}
.container{max-width:900px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:10px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 20px rgba(79,143,255,0.3)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 28px rgba(79,143,255,0.4);color:#fff}
.btn-lg{padding:16px 36px;font-size:1.05rem;border-radius:12px}
nav{position:sticky;top:0;z-index:100;background:rgba(10,14,23,0.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(30,42,63,0.5);padding:0 24px}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--text)}
.nav-logo span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--muted);font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:8px}
.nav-mobile{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
.btn-sm{padding:8px 18px;font-size:.85rem;border-radius:8px}
.hero-section{padding:80px 0 40px;text-align:center}
.hero-section h1{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:16px}
.hero-section p{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;transition:border-color .2s}
.price-card:hover{border-color:var(--border-light)}
.price-card.featured{border-color:var(--primary);background:linear-gradient(135deg,rgba(79,143,255,0.08),rgba(167,139,250,0.05));position:relative}
.price-card.featured::before{content:"Most Popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:.75rem;font-weight:700;padding:4px 16px;border-radius:20px}
.price-tier{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:12px}
.price-amount{font-size:3rem;font-weight:800;margin-bottom:4px}
.price-amount .currency{font-size:1.5rem;vertical-align:super;margin-right:2px}
.price-amount .period{font-size:1rem;font-weight:500;color:var(--muted)}
.price-limit{color:var(--text-secondary);font-size:.95rem;margin-bottom:24px}
.price-features{list-style:none;text-align:left;margin-bottom:28px}
.price-features li{padding:8px 0;font-size:.9rem;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.price-features li::before{content:"✓ ";color:var(--accent);font-weight:700}
.price-features li:last-child{border-bottom:none}
.price-card .btn{width:100%}
.feature-matrix{margin:64px 0}
.feature-matrix h2{font-size:1.8rem;font-weight:800;text-align:center;margin-bottom:32px}
.matrix-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
.matrix-table th,.matrix-table td{padding:14px 20px;text-align:center;border-bottom:1px solid var(--border);font-size:.9rem}
.matrix-table th{background:var(--bg2);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.75rem}
.matrix-table th:first-child,.matrix-table td:first-child{text-align:left;font-weight:500;color:var(--text)}
.matrix-table td{color:var(--text-secondary)}
.check{color:var(--accent);font-weight:700}
.cross{color:var(--muted)}
.faq-section{margin:64px 0}
.faq-section h2{font-size:1.8rem;font-weight:800;text-align:center;margin-bottom:32px}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:12px}
.faq-item h3{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--text)}
.faq-item p{color:var(--text-secondary);font-size:.9rem;margin:0;line-height:1.7}
.cta-box{background:linear-gradient(135deg,rgba(79,143,255,0.1) 0%,rgba(167,139,250,0.1) 100%);border:1px solid rgba(79,143,255,0.2);border-radius:var(--radius-xl);padding:48px;text-align:center;margin:48px 0}
.cta-box h2{font-size:1.8rem;font-weight:800;margin-bottom:12px}
.cta-box p{color:var(--text-secondary);margin-bottom:24px}
footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(--bg2)}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand h4{font-size:1.1rem;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-brand p{color:var(--muted);font-size:.85rem;line-height:1.6;max-width:280px}
.footer-col h5{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px}
.footer-col a{display:block;color:var(--text-secondary);font-size:.88rem;padding:4px 0;transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.8rem}
@media(max-width:768px){
.pricing-grid{grid-template-columns:1fr}
.hero-section h1{font-size:1.8rem}
.matrix-table{font-size:.8rem}
.matrix-table th,.matrix-table td{padding:10px 12px}
.footer-grid{grid-template-columns:1fr}
.nav-links{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:rgba(10,14,23,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 24px;gap:16px;z-index:99}
.nav-links.show{display:flex}
.nav-mobile{display:block}
}
</style>
</head>
<body>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
<div class="nav-links">
<a href="/#features">Features</a>
<a href="/#playground">Try It Free</a>
<a href="/pricing">Pricing</a>
<a href="/docs">API Docs</a>
<a href="/compare">Compare</a>
<a href="/guides/quick-start">Quick Start</a>
</div>
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
<section class="hero-section">
<div class="container">
<h1>Simple, transparent pricing</h1>
<p>No hidden fees. No per-pixel charges. Just straightforward monthly plans with generous screenshot allowances. EU-hosted.</p>
</div>
</section>
<div class="container">
<div class="pricing-grid">
<div class="price-card">
<div class="price-tier">Starter</div>
<div class="price-amount"><span class="currency">€</span>9<span class="period">/mo</span></div>
<div class="price-limit">1,000 screenshots/month</div>
<ul class="price-features">
<li>All output formats (PNG, JPEG, WebP)</li>
<li>Custom viewports &amp; device scale</li>
<li>Full-page capture</li>
<li>No watermark</li>
<li>GET &amp; POST endpoints</li>
<li>Response caching</li>
<li>Email support</li>
</ul>
<button class="btn btn-primary" onclick="checkout('starter')">Get Started</button>
</div>
<div class="price-card featured">
<div class="price-tier">Pro</div>
<div class="price-amount"><span class="currency">€</span>29<span class="period">/mo</span></div>
<div class="price-limit">5,000 screenshots/month</div>
<ul class="price-features">
<li>Everything in Starter</li>
<li>Priority rendering</li>
<li>Webhook callbacks</li>
<li>Batch API</li>
<li>Custom viewport presets</li>
<li>Response caching (extended)</li>
<li>Priority support</li>
</ul>
<button class="btn btn-primary" onclick="checkout('pro')">Get Started</button>
</div>
<div class="price-card">
<div class="price-tier">Business</div>
<div class="price-amount"><span class="currency">€</span>79<span class="period">/mo</span></div>
<div class="price-limit">25,000 screenshots/month</div>
<ul class="price-features">
<li>Everything in Pro</li>
<li>SLA guarantee</li>
<li>Dedicated support</li>
<li>Custom integrations</li>
<li>DPA included</li>
<li>Custom user-agent</li>
<li>Volume discounts available</li>
</ul>
<button class="btn btn-primary" onclick="checkout('business')">Get Started</button>
</div>
</div>
<div class="feature-matrix">
<h2>Feature comparison</h2>
<table class="matrix-table">
<thead>
<tr><th>Feature</th><th>Starter</th><th>Pro</th><th>Business</th></tr>
</thead>
<tbody>
<tr><td>Screenshots/month</td><td>1,000</td><td>5,000</td><td>25,000</td></tr>
<tr><td>PNG format</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>JPEG format</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>WebP format</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Full-page capture</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Custom viewport</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>GET endpoint (img embed)</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Response caching</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Priority rendering</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Webhook callbacks</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Batch API</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>SLA guarantee</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
<tr><td>DPA included</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
<tr><td>Priority support</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
<tr><td>Dedicated support</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
</tbody>
</table>
</div>
<div class="faq-section">
<h2>Pricing FAQ</h2>
<div class="faq-item">
<h3>What's the billing cycle?</h3>
<p>All plans are billed monthly. Your billing cycle starts on the day you subscribe and renews automatically each month.</p>
</div>
<div class="faq-item">
<h3>Can I upgrade or downgrade my plan?</h3>
<p>Yes, you can change your plan at any time from the customer portal. Upgrades take effect immediately with prorated billing. Downgrades take effect at the next billing cycle.</p>
</div>
<div class="faq-item">
<h3>What happens if I exceed my monthly limit?</h3>
<p>API calls beyond your monthly quota will return a 429 status code. You won't be charged extra — simply upgrade your plan if you need more screenshots.</p>
</div>
<div class="faq-item">
<h3>What's your refund policy?</h3>
<p>We offer a full refund within the first 7 days of your initial subscription. After that, you can cancel anytime and your plan remains active until the end of the current billing period.</p>
</div>
<div class="faq-item">
<h3>Do you offer annual pricing?</h3>
<p>Not yet, but annual plans with a discount are coming soon. Subscribe to monthly for now and you'll be notified when annual plans are available.</p>
</div>
<div class="faq-item">
<h3>Is there a free tier?</h3>
<p>We don't offer a free tier, but you can test the API anytime using the <a href="/#playground">free playground</a> — no signup required. Playground screenshots are watermarked.</p>
</div>
</div>
<div class="cta-box">
<h2>Ready to get started?</h2>
<p>Try the free playground first, or pick a plan and start capturing screenshots in minutes.</p>
<a href="/#playground" class="btn btn-primary btn-lg">Try Playground Free →</a>
</div>
</div>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>
<div class="footer-col"><h5>Product</h5><a href="/#features">Features</a><a href="/pricing">Pricing</a><a href="/#playground">Playground</a><a href="/docs">API Docs</a></div>
<div class="footer-col"><h5>Developers</h5><a href="/docs">Swagger / OpenAPI</a><a href="/health">Status</a><a href="/guides/quick-start">Quick-Start Guide</a><a href="/changelog">Changelog</a></div>
<div class="footer-col"><h5>Legal</h5><a href="/impressum.html">Impressum</a><a href="/privacy.html">Privacy Policy</a><a href="/terms.html">Terms of Service</a></div>
</div>
<div class="footer-bottom">
<span>© 2026 Cloonar Technologies GmbH · FN 631089y · ATU81280034</span>
<span>Linzer Straße 192/1/2, 1140 Wien, Austria 🇦🇹</span>
<span>EU-hosted 🇪🇺 · All data stays in Europe</span>
</div>
</footer>
<script>
async function checkout(plan) {
try {
const res = await fetch("/v1/billing/checkout", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ plan })
});
const data = await res.json();
if (data.url) window.location.href = data.url;
else alert(data.error || "Failed to start checkout");
} catch (e) { alert("Network error"); }
}
</script>
</body>
</html>

2
public/sitemap.xml
View file

@ -7,6 +7,8 @@
<url><loc>https://snapapi.eu/use-cases/pdf-reports</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://snapapi.eu/compare</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://snapapi.eu/guides/quick-start</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://snapapi.eu/pricing</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://snapapi.eu/changelog</loc><changefreq>monthly</changefreq><priority>0.6</priority></url>
<url><loc>https://snapapi.eu/status</loc><changefreq>always</changefreq><priority>0.3</priority></url>
<url><loc>https://snapapi.eu/impressum.html</loc><changefreq>yearly</changefreq><priority>0.2</priority></url>
<url><loc>https://snapapi.eu/privacy.html</loc><changefreq>yearly</changefreq><priority>0.2</priority></url>