Files
boc/quixzoom-landing-fixed/developers/index.html
T

557 lines
29 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiXzoom Developer API — Programmatic Photo Ordering</title>
<meta name="description" content="REST API for ordering real-world geotagged photography. Fresh photos, AI-verified, delivered in hours. Perfect for websites, apps, and digital signage.">
<link rel="canonical" href="https://www.quixzoom.com/developers/">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<style>
:root{
--bg-dark:#1a1a1a;--bg-white:#FFFFFF;--bg-off:#F7F7F5;
--blue:#0066FF;--blue-dark:#0052CC;--blue-pale:rgba(0,102,255,.07);
--green:#00C853;--text-dark:#1a1a1a;--text-body:#3a3a3a;--text-muted:#6B6B6B;
--radius-card:16px;--shadow-hover:0 16px 48px rgba(0,0,0,.14);
--transition:.22s cubic-bezier(.25,.46,.45,.94);
--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;
--radius-sm:8px;--radius-md:14px;--radius-lg:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',sans-serif;font-size:1rem;line-height:1.65;color:var(--text-body);background:var(--bg-white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-.05em;line-height:1}
h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.1}
h3{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.section-pad{padding:80px 0}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{color:var(--text-dark);margin-bottom:16px}
.section-header p{font-size:var(--text-lg);color:var(--text-muted);max-width:680px;margin:0 auto}
/* NAV */
nav{position:sticky;top:0;z-index:300;background:var(--bg-white);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:32px}
.nav-logo{font-size:1.375rem;font-weight:900;color:var(--text-dark);letter-spacing:-.04em}
.nav-logo .x{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{color:var(--text-muted);font-size:var(--text-base);font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--text-dark)}
.btn-nav{background:var(--blue);color:var(--text-dark);border:none;border-radius:var(--radius-lg);padding:10px 24px;font-size:var(--text-base);font-weight:700;transition:background .15s;white-space:nowrap}
.btn-nav:hover{background:var(--blue-dark)}
.mobile-menu{display:none}
@media(max-width:768px){
.nav-links{display:none}
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-dark);border-radius:var(--radius-sm)}
.mobile-menu{display:none;position:fixed;inset:0;top:68px;background:var(--bg-white);z-index:299;padding:24px;flex-direction:column;gap:0;border-top:1px solid rgba(0,0,0,.08)}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--text-body);font-size:1.1rem;font-weight:500;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.08);display:block}
.mobile-menu .btn-mobile{display:block;margin-top:24px;background:var(--blue);color:var(--text-dark);text-align:center;border-radius:var(--radius-lg);padding:16px 24px;font-size:1rem;font-weight:700}
}
/* HERO */
.hero-dev{background:var(--bg-off);padding:80px 0 64px}
.hero-dev-inner{max-width:720px}
.hero-dev h1{color:var(--text-dark);margin-bottom:24px}
.hero-dev p{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--text-body);line-height:1.6;margin-bottom:32px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--blue-pale);border:1px solid rgba(0,102,255,.15);border-radius:100px;padding:8px 18px;font-size:var(--text-sm);font-weight:600;color:var(--blue);margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--blue);color:var(--text-dark);border:none;border-radius:var(--radius-lg);padding:14px 32px;font-size:1rem;font-weight:700;transition:background .15s;text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{background:transparent;border:2px solid rgba(0,0,0,.15);color:var(--text-dark);border-radius:var(--radius-lg);padding:14px 32px;font-size:1rem;font-weight:700;transition:border-color .15s,background .15s;text-decoration:none;display:inline-block}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-pale)}
/* CODE BLOCKS */
.code-block{background:#1a1a1a;border-radius:var(--radius-md);padding:24px;overflow-x:auto;margin:20px 0}
.code-block pre{color:#e4e4e4;font-family:'SF Mono',Monaco,monospace;font-size:.875rem;line-height:1.6;margin:0}
.code-block .comment{color:#6B6B6B}
.code-block .keyword{color:#ff7b72}
.code-block .string{color:#a5d6ff}
.code-block .number{color:#79c0ff}
.code-block .function{color:#d2a8ff}
/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.feature-card{background:var(--bg-white);border:1.5px solid #E8E8E8;border-radius:var(--radius-card);padding:32px 28px}
.feature-card h3{font-size:1.125rem;font-weight:800;color:var(--text-dark);margin-bottom:10px}
.feature-card p{font-size:var(--text-sm);color:var(--text-body);line-height:1.6}
.feature-icon{font-size:2rem;margin-bottom:12px}
@media(max-width:900px){.features-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}}
/* USE CASES */
.usecase-card{background:var(--bg-off);border-radius:var(--radius-card);padding:32px;margin-bottom:24px}
.usecase-card h3{color:var(--text-dark);margin-bottom:12px;font-size:1.25rem}
.usecase-card p{color:var(--text-body);margin-bottom:16px}
.usecase-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.usecase-tag{background:var(--blue-pale);color:var(--blue);padding:4px 12px;border-radius:100px;font-size:.8rem;font-weight:600}
/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.pricing-card{background:var(--bg-off);border:2px solid #E8E8E8;border-radius:var(--radius-card);padding:36px 28px;text-align:center}
.pricing-card.featured{border-color:var(--blue);transform:scale(1.02)}
.pricing-card h3{font-size:1.5rem;font-weight:900;margin-bottom:4px;color:var(--text-dark)}
.pricing-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:20px}
.price{font-size:2.5rem;font-weight:900;color:var(--text-dark);letter-spacing:-.04em;margin-bottom:8px}
.price span{font-size:1rem;font-weight:500;color:var(--text-muted)}
.pricing-card ul{text-align:left;margin:24px 0}
.pricing-card ul li{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-base);padding:8px 0}
.pricing-card ul li::before{content:'';display:block;width:18px;height:18px;min-width:18px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;border-radius:50%;margin-top:2px}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}}
/* SDK */
.sdk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sdk-card{background:var(--bg-white);border:1.5px solid #E8E8E8;border-radius:var(--radius-sm);padding:20px;text-align:center}
.sdk-card h4{font-size:1rem;font-weight:700;color:var(--text-dark);margin-bottom:4px}
.sdk-card p{font-size:.8rem;color:var(--text-muted)}
@media(max-width:768px){.sdk-grid{grid-template-columns:repeat(2,1fr)}}
/* FOOTER */
footer{background:var(--bg-white);border-top:1px solid rgba(0,0,0,.08);padding:48px 0 32px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-copy{color:rgba(10,10,10,.6);font-size:var(--text-sm)}
.footer-links{display:flex;gap:20px}
.footer-links a{color:rgba(10,10,10,.6);font-size:var(--text-sm);transition:color .15s}
.footer-links a:hover{color:var(--text-dark)}
.footer-tagline{font-size:.8rem;color:rgba(10,10,10,.55);margin-top:8px;font-style:italic}
@media(max-width:768px){.footer-inner{flex-direction:column;align-items:flex-start}}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="nav-inner">
<a href="/" class="nav-logo">qui<span class="x">X</span>zoom</a>
<div class="nav-links">
<a href="/order/">Order</a>
<a href="/pricing/">Pricing</a>
<a href="/earn/">Earn as Zoomer</a>
<a href="/for-organisations/">For Organisations</a>
<a href="/about">About</a>
</div>
<a href="#get-started" class="btn-nav">Get API Key →</a>
<button class="hamburger" id="hamburger" aria-label="Menu" onclick="document.getElementById('mobile-menu').classList.toggle('open')">
<span></span><span></span><span></span>
</button>
</div>
</div>
</nav>
<div class="mobile-menu" id="mobile-menu">
<a href="/order/" onclick="document.getElementById('mobile-menu').classList.remove('open')">Order Field Photography</a>
<a href="/pricing/" onclick="document.getElementById('mobile-menu').classList.remove('open')">Pricing</a>
<a href="/earn/" onclick="document.getElementById('mobile-menu').classList.remove('open')">Earn as a Zoomer</a>
<a href="/for-organisations/" onclick="document.getElementById('mobile-menu').classList.remove('open')">For Organisations</a>
<a href="/about" onclick="document.getElementById('mobile-menu').classList.remove('open')">About</a>
<a class="btn-mobile" href="#get-started" onclick="document.getElementById('mobile-menu').classList.remove('open')">Get API Key →</a>
</div>
<main>
<!-- HERO -->
<section class="hero-dev">
<div class="container">
<div class="hero-dev-inner">
<div class="hero-badge">REST API v1.0</div>
<h1>Photos via API.<br>Real places. Real time.</h1>
<p>Order fresh geotagged photography programmatically. AI-verified, structured metadata, delivered in hours. Build websites, apps, and dashboards with current visual data — not stale stock archives.</p>
<div class="hero-cta">
<a href="#get-started" class="btn-primary">Get API Key →</a>
<a href="#examples" class="btn-ghost">View Examples</a>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="section-pad">
<div class="container">
<div class="section-header">
<h2>Built for developers</h2>
<p>Everything you need to integrate real-world photography into your applications.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon"></div>
<h3>Fast Delivery</h3>
<p>Most missions complete within 4-48 hours. Real-time status updates via webhooks. No scheduling, no travel coordination.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>AI Verification</h3>
<p>Every photo is checked by AI for location accuracy, angle match, quality, and obstructions. Failed photos are automatically retaken.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<h3>Recurring Missions</h3>
<p>Set up monthly, weekly, or daily photo updates. Seasonal adjustments. Automatic pause for holidays or extreme weather.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Structured Data</h3>
<p>Every photo includes GPS coordinates, timestamp, weather conditions, device info, and optional Landvex AI analysis.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔔</div>
<h3>Webhooks</h3>
<p>Get notified when missions are assigned, completed, verified, or delivered. Build reactive workflows without polling.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌍</div>
<h3>Global Coverage</h3>
<p>Zoomer network in 40+ countries. Urban centers have same-day coverage. Remote areas available with flexible timelines.</p>
</div>
</div>
</div>
</section>
<!-- QUICK START -->
<section class="section-pad" style="background:var(--bg-off)" id="get-started">
<div class="container">
<div class="section-header">
<h2>Quick start</h2>
<p>Order your first photos in 3 API calls.</p>
</div>
<h3 style="margin-bottom:16px">1. Create an order</h3>
<div class="code-block">
<pre><span class="keyword">POST</span> <span class="string">https://api.quixzoom.com/v1/orders</span>
<span class="comment">Authorization: Bearer qz_live_abc123...</span>
{
<span class="string">"client_reference"</span>: <span class="string">"malmo-museums-2026"</span>,
<span class="string">"category"</span>: <span class="string">"cultural_exterior"</span>,
<span class="string">"description"</span>: <span class="string">"Exterior photos of all museums in Malmö"</span>,
<span class="string">"locations"</span>: [
{
<span class="string">"location_id"</span>: <span class="string">"loc_001"</span>,
<span class="string">"name"</span>: <span class="string">"Malmö Konstmuseum"</span>,
<span class="string">"coordinates"</span>: {<span class="string">"lat"</span>: <span class="number">55.6050</span>, <span class="string">"lng"</span>: <span class="number">13.0038</span>},
<span class="string">"requirements"</span>: {
<span class="string">"angles"</span>: [<span class="string">"front"</span>, <span class="string">"entrance"</span>],
<span class="string">"time_of_day"</span>: <span class="string">"daylight"</span>
}
}
],
<span class="string">"recurring"</span>: {
<span class="string">"enabled"</span>: <span class="keyword">true</span>,
<span class="string">"frequency"</span>: <span class="string">"monthly"</span>
}
}</pre>
</div>
<h3 style="margin:32px 0 16px">2. Confirm and pay</h3>
<div class="code-block">
<pre><span class="keyword">POST</span> <span class="string">https://api.quixzoom.com/v1/orders/ord_7f8a9b2c/confirm</span>
<span class="comment">Authorization: Bearer qz_live_abc123...</span>
{
<span class="string">"payment_method"</span>: <span class="string">"card"</span>
}
<span class="comment">// Response: Missions dispatched to Zoomers</span></pre>
</div>
<h3 style="margin:32px 0 16px">3. Receive photos via webhook</h3>
<div class="code-block">
<pre><span class="comment">// Webhook POST to your endpoint:</span>
{
<span class="string">"event"</span>: <span class="string">"photos.delivered"</span>,
<span class="string">"order_id"</span>: <span class="string">"ord_7f8a9b2c"</span>,
<span class="string">"mission_id"</span>: <span class="string">"mis_a3b4c5d6"</span>,
<span class="string">"photos"</span>: [
{
<span class="string">"photo_id"</span>: <span class="string">"img_x7y8z9"</span>,
<span class="string">"url"</span>: <span class="string">"https://cdn.quixzoom.com/v1/photos/img_x7y8z9.jpg"</span>,
<span class="string">"thumbnail"</span>: <span class="string">"https://cdn.quixzoom.com/v1/photos/img_x7y8z9_thumb.jpg"</span>,
<span class="string">"angle"</span>: <span class="string">"front"</span>,
<span class="string">"metadata"</span>: {
<span class="string">"captured_at"</span>: <span class="string">"2026-07-15T11:42:18Z"</span>,
<span class="string">"gps"</span>: {<span class="string">"lat"</span>: <span class="number">55.6051</span>, <span class="string">"lng"</span>: <span class="number">13.0039</span>},
<span class="string">"weather"</span>: {<span class="string">"condition"</span>: <span class="string">"partly_cloudy"</span>, <span class="string">"temp_c"</span>: <span class="number">22</span>}
},
<span class="string">"verification"</span>: {
<span class="string">"status"</span>: <span class="string">"approved"</span>,
<span class="string">"ai_checks"</span>: {
<span class="string">"location_match"</span>: {<span class="string">"score"</span>: <span class="number">0.98</span>, <span class="string">"passed"</span>: <span class="keyword">true</span>},
<span class="string">"angle_match"</span>: {<span class="string">"score"</span>: <span class="number">0.94</span>, <span class="string">"passed"</span>: <span class="keyword">true</span>}
}
}
}
]
}</pre>
</div>
</div>
</section>
<!-- USE CASES -->
<section class="section-pad" id="examples">
<div class="container">
<div class="section-header">
<h2>Use cases</h2>
<p>How developers and agencies use quiXzoom API.</p>
</div>
<div class="usecase-card">
<h3>🏛️ Municipal Websites</h3>
<p>A marketing agency rebuilds Malmö Stad's tourism site. Instead of using 2019 archive photos, they order fresh exterior shots of all 15 museums, 40 parks, and 8 beaches — updated monthly automatically. The website always shows current conditions, seasonal changes, and real crowd levels.</p>
<div class="code-block">
<pre><span class="comment">// Monthly auto-update for all public facilities</span>
<span class="keyword">POST</span> <span class="string">/v1/orders</span>
{
<span class="string">"category"</span>: <span class="string">"cultural_exterior"</span>,
<span class="string">"locations"</span>: museums,
<span class="string">"recurring"</span>: {<span class="string">"enabled"</span>: <span class="keyword">true</span>, <span class="string">"frequency"</span>: <span class="string">"monthly"</span>},
<span class="string">"delivery"</span>: {<span class="string">"webhook_url"</span>: <span class="string">"https://api.malmocity.se/photos/update"</span>}
}</pre>
</div>
<div class="usecase-meta">
<span class="usecase-tag">15 locations</span>
<span class="usecase-tag">$120/month</span>
<span class="usecase-tag">4h delivery</span>
</div>
</div>
<div class="usecase-card">
<h3>🍽️ Restaurant Discovery Apps</h3>
<p>A food app wants real ambiance photos, not staged marketing shots. They order weekly evening photos of trending restaurants — capturing actual crowd levels, lighting, and atmosphere. Users see "busy but welcoming" or "quiet romantic spot" based on real data.</p>
<div class="code-block">
<pre><span class="comment">// Weekly vibe capture for restaurant listings</span>
<span class="keyword">POST</span> <span class="string">/v1/orders</span>
{
<span class="string">"category"</span>: <span class="string">"restaurant_ambiance"</span>,
<span class="string">"requirements"</span>: {
<span class="string">"angles"</span>: [<span class="string">"interior"</span>, <span class="string">"outdoor_seating"</span>],
<span class="string">"time_of_day"</span>: <span class="string">"evening"</span>,
<span class="string">"minimum_crowd"</span>: <span class="string">"moderate"</span>
},
<span class="string">"recurring"</span>: {<span class="string">"enabled"</span>: <span class="keyword">true</span>, <span class="string">"frequency"</span>: <span class="string">"weekly"</span>, <span class="string">"day_of_week"</span>: <span class="number">5</span>}
}</pre>
</div>
<div class="usecase-meta">
<span class="usecase-tag">25 restaurants</span>
<span class="usecase-tag">$200/week</span>
<span class="usecase-tag">AI sentiment analysis</span>
</div>
</div>
<div class="usecase-card">
<h3>🏖️ Beach & Facility Status</h3>
<p>A city app shows real-time beach conditions. Daily photos during summer capture water quality flags, lifeguard presence, crowd density, and facility status. Parents check if the beach is too crowded before leaving home.</p>
<div class="code-block">
<pre><span class="comment">// Daily summer monitoring</span>
<span class="keyword">POST</span> <span class="string">/v1/orders</span>
{
<span class="string">"category"</span>: <span class="string">"beach_facility_status"</span>,
<span class="string">"requirements"</span>: {
<span class="string">"angles"</span>: [<span class="string">"overview"</span>, <span class="string">"water_quality_flag"</span>, <span class="string">"facilities"</span>],
<span class="string">"time_of_day"</span>: <span class="string">"midday"</span>
},
<span class="string">"recurring"</span>: {
<span class="string">"enabled"</span>: <span class="keyword">true</span>,
<span class="string">"frequency"</span>: <span class="string">"daily"</span>,
<span class="string">"season"</span>: <span class="string">"summer_only"</span>,
<span class="string">"pause_conditions"</span>: {<span class="string">"weather_extreme"</span>: <span class="keyword">true</span>}
}
}</pre>
</div>
<div class="usecase-meta">
<span class="usecase-tag">8 beaches</span>
<span class="usecase-tag">$80/day</span>
<span class="usecase-tag">JuneAugust</span>
</div>
</div>
<div class="usecase-card">
<h3>🏪 Retail Compliance</h3>
<p>A franchise chain verifies that all 200 stores display current promotions correctly. Monthly photos check storefront signage, opening hours displays, and promotional materials. AI flags non-compliant locations automatically.</p>
<div class="code-block">
<pre><span class="comment">// Monthly compliance audit</span>
<span class="keyword">POST</span> <span class="string">/v1/orders</span>
{
<span class="string">"category"</span>: <span class="string">"retail_compliance"</span>,
<span class="string">"requirements"</span>: {
<span class="string">"angles"</span>: [<span class="string">"storefront"</span>, <span class="string">"promotional_display"</span>],
<span class="string">"brand_match"</span>: <span class="string">"ICA"</span>
},
<span class="string">"recurring"</span>: {<span class="string">"enabled"</span>: <span class="keyword">true</span>, <span class="string">"frequency"</span>: <span class="string">"monthly"</span>, <span class="string">"deliver_before"</span>: <span class="string">"5th"</span>}
}</pre>
</div>
<div class="usecase-meta">
<span class="usecase-tag">200 stores</span>
<span class="usecase-tag">$600/month</span>
<span class="usecase-tag">AI brand verification</span>
</div>
</div>
<div class="usecase-card">
<h3>🎵 Event Venue Monitoring</h3>
<p>An event app shows real-time crowd levels at concerts and festivals. Photos every 30 minutes during events capture queue lengths, parking availability, and crowd density. Attendees decide when to arrive.</p>
<div class="code-block">
<pre><span class="comment">// Event night monitoring</span>
<span class="keyword">POST</span> <span class="string">/v1/orders</span>
{
<span class="string">"category"</span>: <span class="string">"event_venue_status"</span>,
<span class="string">"requirements"</span>: {
<span class="string">"angles"</span>: [<span class="string">"entrance_queue"</span>, <span class="string">"parking_lot"</span>],
<span class="string">"time_of_day"</span>: <span class="string">"evening"</span>
},
<span class="string">"recurring"</span>: {
<span class="string">"enabled"</span>: <span class="keyword">true</span>,
<span class="string">"frequency"</span>: <span class="string">"daily"</span>,
<span class="string">"time_window"</span>: <span class="string">"19:00-23:00"</span>,
<span class="string">"event_nights_only"</span>: <span class="keyword">true</span>
}
}</pre>
</div>
<div class="usecase-meta">
<span class="usecase-tag">5 venues</span>
<span class="usecase-tag">$50/event</span>
<span class="usecase-tag">Real-time crowd data</span>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section-pad" style="background:var(--bg-off)">
<div class="container">
<div class="section-header">
<h2>Developer pricing</h2>
<p>Start free. Scale as you grow. No hidden fees.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Developer</h3>
<p class="pricing-sub">For side projects & startups</p>
<div class="price">$3<span>/photo</span></div>
<ul>
<li>Up to 1,000 photos/month</li>
<li>48-hour delivery</li>
<li>Basic AI verification</li>
<li>60 requests/minute</li>
<li>Email support</li>
</ul>
<a href="#" class="btn-ghost" style="width:100%;text-align:center;display:block">Start Free Trial</a>
</div>
<div class="pricing-card featured">
<h3>Business</h3>
<p class="pricing-sub">For production applications</p>
<div class="price">$2<span>/photo</span></div>
<ul>
<li>Up to 10,000 photos/month</li>
<li>Priority 24-hour delivery</li>
<li>Advanced AI analysis</li>
<li>Webhooks & callbacks</li>
<li>300 requests/minute</li>
<li>Slack support</li>
</ul>
<a href="#" class="btn-primary" style="width:100%;text-align:center;display:block">Get Started</a>
</div>
<div class="pricing-card">
<h3>Enterprise</h3>
<p class="pricing-sub">For large-scale platforms</p>
<div class="price">Custom</div>
<ul>
<li>Unlimited photos</li>
<li>SLA guarantees</li>
<li>Custom AI models</li>
<li>Dedicated account manager</li>
<li>Unlimited API rate</li>
<li>24/7 phone support</li>
</ul>
<a href="#" class="btn-ghost" style="width:100%;text-align:center;display:block">Contact Sales</a>
</div>
</div>
<p style="text-align:center;margin-top:32px;color:var(--text-muted)">Recurring missions: 10% discount (monthly), 15% discount (weekly)</p>
</div>
</section>
<!-- SDKs -->
<section class="section-pad">
<div class="container">
<div class="section-header">
<h2>SDKs & Libraries</h2>
<p>Official client libraries for popular languages.</p>
</div>
<div class="sdk-grid">
<div class="sdk-card">
<h4>JavaScript</h4>
<p>npm install @quixzoom/sdk</p>
</div>
<div class="sdk-card">
<h4>Python</h4>
<p>pip install quixzoom-python</p>
</div>
<div class="sdk-card">
<h4>Go</h4>
<p>go get github.com/quixzoom/go-sdk</p>
</div>
<div class="sdk-card">
<h4>Ruby</h4>
<p>Coming Q3 2026</p>
</div>
</div>
<div class="code-block" style="margin-top:32px">
<pre><span class="comment">// JavaScript SDK example</span>
<span class="keyword">import</span> { QuixzoomClient } <span class="keyword">from</span> <span class="string">'@quixzoom/sdk'</span>;
<span class="keyword">const</span> quixzoom = <span class="keyword">new</span> QuixzoomClient({
apiKey: process.env.QUIXZOOM_API_KEY,
environment: <span class="string">'production'</span>
});
<span class="comment">// Create a recurring order</span>
<span class="keyword">const</span> order = <span class="keyword">await</span> quixzoom.orders.create({
category: <span class="string">'cultural_exterior'</span>,
locations: [{ name: <span class="string">'Malmö Konstmuseum'</span>, coordinates: { lat: <span class="number">55.605</span>, lng: <span class="number">13.004</span> } }],
recurring: { enabled: <span class="keyword">true</span>, frequency: <span class="string">'monthly'</span> }
});
<span class="comment">// Listen for delivery via webhook or poll</span>
quixzoom.webhooks.on(<span class="string">'photos.delivered'</span>, (event) => {
console.log(<span class="string">'New photos:'</span>, event.photos);
});</pre>
</div>
</div>
</section>
<!-- DOCS LINK -->
<section class="section-pad" style="background:var(--bg-off)">
<div class="container" style="text-align:center">
<h2 style="margin-bottom:16px">Full API Reference</h2>
<p style="color:var(--text-muted);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto">Complete OpenAPI specification, authentication guides, webhook setup, and error handling.</p>
<a href="/developers/docs/" class="btn-primary">View API Documentation →</a>
<p style="margin-top:24px;font-size:var(--text-sm);color:var(--text-muted)">
<a href="/developers/openapi.yaml" style="color:var(--blue);font-weight:600" download>Download OpenAPI Spec (YAML)</a>
</p>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-inner">
<div>
<p class="footer-copy">© 2026 quiXzoom · Operated by Landvex AB</p>
<p class="footer-tagline">Raw data by quiXzoom. Intelligence by Landvex.</p>
</div>
<div class="footer-links">
<a href="/">Home</a>
<a href="/pricing/">Pricing</a>
<a href="/earn/">Earn</a>
<a href="/privacy/">Privacy</a>
<a href="/terms/">Terms</a>
</div>
</div>
</div>
</footer>
</body>
</html>