Files
boc/quixzoom-landing-fixed/order/index.html
T
Bernt 58ca4e68db feat(boc): Complete Business Operations Center v1.0
- Go backend API with full CRUD for all modules (CRM, Sales, Finance, HR, Legal, Marketing, Support, Purchase, Inventory, Projects, Automation, Analytics)
- Rust analytics service with parallel report generation
- C runtime with POSIX shared memory IPC
- PostgreSQL schema with 30+ tables, full migrations
- Redis cache, sessions, pub/sub
- Kafka event streaming with Zookeeper
- WebSocket hub for real-time updates
- Automation engine with cron jobs, workflows, event triggers
- JWT authentication, multi-tenant from start
- Docker Compose with all services
- Nginx reverse proxy with rate limiting
- Integration tests passing
- Feature gap analysis against Fortnox/Odoo/Visma

Refs: BOC-001
2026-07-12 12:41:35 +00:00

376 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Field Photography — quiXzoom</title>
<meta name="description" content="Order raw geotagged field photography from verified contributors. Per mission, per photo, or per project. No analysis — just verified visual data.">
<link rel="canonical" href="https://www.quixzoom.com/order/">
<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:580px;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-order{background:var(--bg-off);padding:80px 0 64px}
.hero-order-inner{max-width:720px}
.hero-order h1{color:var(--text-dark);margin-bottom:24px}
.hero-order 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)}
/* EXAMPLES */
.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.example-card{background:var(--bg-white);border:1.5px solid #E8E8E8;border-radius:var(--radius-card);padding:28px 24px}
.example-card h3{font-size:1.125rem;font-weight:800;color:var(--text-dark);margin-bottom:8px}
.example-card p{font-size:var(--text-sm);color:var(--text-body);line-height:1.6}
.example-count{font-size:2rem;font-weight:900;color:var(--blue);letter-spacing:-.04em;margin-bottom:4px}
@media(max-width:900px){.examples-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.examples-grid{grid-template-columns:1fr}}
/* HOW IT WORKS */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.step-card{background:var(--bg-off);border-radius:var(--radius-card);padding:32px 28px;text-align:center}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--blue);color:var(--text-dark);border-radius:50%;font-size:var(--text-xl);font-weight:900;margin-bottom:20px}
.step-card h3{color:var(--text-dark);margin-bottom:10px;font-size:1.125rem}
.step-card p{color:var(--text-muted);font-size:var(--text-sm);line-height:1.6}
@media(max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps-grid{grid-template-columns:1fr}}
/* PRICING MODELS */
.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}}
/* FORM */
.order-form{background:var(--bg-white);border:1.5px solid #E8E8E8;border-radius:var(--radius-card);padding:40px;max-width:640px;margin:0 auto}
.form-row{margin-bottom:20px}
.form-row label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-dark);margin-bottom:6px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:14px 18px;border:2px solid #E8E8E8;border-radius:var(--radius-md);font-size:var(--text-base);font-family:inherit;outline:none;transition:border-color .15s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--blue)}
.form-row textarea{min-height:120px;resize:vertical}
.form-submit{background:var(--blue);color:var(--text-dark);border:none;border-radius:var(--radius-lg);padding:16px 32px;font-size:1rem;font-weight:800;cursor:pointer;transition:background .15s;width:100%}
.form-submit:hover{background:var(--blue-dark)}
/* LANDVEX BANNER */
.landvex-banner{background:var(--bg-off);border-radius:var(--radius-card);padding:28px 32px;text-align:center;margin-top:48px}
.landvex-banner p{font-size:var(--text-lg);color:var(--text-body);margin-bottom:12px}
.landvex-banner a{color:var(--blue);font-weight:700;text-decoration:none}
/* 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="/order/#order-form" class="btn-nav">Start Order →</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="/order/#order-form" onclick="document.getElementById('mobile-menu').classList.remove('open')">Start Order →</a>
</div>
<main>
<!-- HERO -->
<section class="hero-order">
<div class="container">
<div class="hero-order-inner">
<div class="hero-badge">For Businesses & Organisations</div>
<h1>Order Field Photography</h1>
<p>Get raw geotagged photos from verified field contributors. No analysis — just verified visual data delivered in hours. Per mission, per photo, or per project.</p>
<div class="hero-cta">
<a href="#order-form" class="btn-primary">Start Order →</a>
<a href="/pricing/" class="btn-ghost">View Pricing</a>
</div>
</div>
</div>
</section>
<!-- EXAMPLES -->
<section class="section-pad">
<div class="container">
<div class="section-header">
<h2>What can you order?</h2>
<p>Any visual documentation task that can be completed with a smartphone camera on location.</p>
</div>
<div class="examples-grid">
<div class="example-card">
<div class="example-count">50</div>
<h3>Storefronts</h3>
<p>Need photos of 50 retail locations for compliance or market research? Define the shot list, set the budget, and verified Zoomers deliver within 48 hours.</p>
</div>
<div class="example-card">
<div class="example-count">200</div>
<h3>Road Signs</h3>
<p>Document 200 traffic signs across a municipality. GPS-tagged, timestamped, and delivered as a structured dataset ready for your systems.</p>
</div>
<div class="example-card">
<div class="example-count">10</div>
<h3>Bridge Conditions</h3>
<p>Visual inspection of 10 bridges. Multiple angles per structure, with close-ups of any damage or wear. Raw data — your engineers assess.</p>
</div>
<div class="example-card">
<div class="example-count">1,000</div>
<h3>Property Facades</h3>
<p>Insurance portfolio review? Order facade documentation for 1,000 properties. Consistent framing, geotagged, delivered in batches.</p>
</div>
<div class="example-card">
<div class="example-count"></div>
<h3>Custom Missions</h3>
<p>Have a unique need? Define your own mission parameters. Our network adapts to your requirements, not the other way around.</p>
</div>
<div class="example-card">
<div class="example-count">24h</div>
<h3>Rapid Turnaround</h3>
<p>Time-sensitive documentation? Surge missions activate multiple Zoomers simultaneously. Results in hours, not weeks.</p>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="section-pad" style="background:var(--bg-off)">
<div class="container">
<div class="section-header">
<h2>How ordering works</h2>
<p>Four steps from request to raw data delivery.</p>
</div>
<div class="steps-grid">
<div class="step-card">
<div class="step-num">1</div>
<h3>Define</h3>
<p>Tell us what you need photographed, where, and how many locations. Set your budget and timeline.</p>
</div>
<div class="step-card">
<div class="step-num">2</div>
<h3>Deploy</h3>
<p>We distribute the mission to verified Zoomers in the target area. No staffing, no travel coordination.</p>
</div>
<div class="step-card">
<div class="step-num">3</div>
<h3>Collect</h3>
<p>Zoomers capture geotagged photos on location. Every submission is verified for completeness and quality.</p>
</div>
<div class="step-card">
<div class="step-num">4</div>
<h3>Deliver</h3>
<p>Receive raw photo data in your preferred format. No analysis, no interpretation — just verified visual evidence.</p>
</div>
</div>
</div>
</section>
<!-- PRICING MODELS -->
<section class="section-pad">
<div class="container">
<div class="section-header">
<h2>Pricing models</h2>
<p>Flexible pricing that matches how you work. No hidden fees.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Per Mission</h3>
<p class="pricing-sub">Best for targeted tasks</p>
<div class="price">€880<span>/mission</span></div>
<ul>
<li>Single location, defined shot list</li>
<li>You set the budget</li>
<li>Zoomers claim and deliver</li>
<li>Pay only on approval</li>
</ul>
<a href="#order-form" class="btn-ghost" style="width:100%;text-align:center">Choose Per Mission</a>
</div>
<div class="pricing-card featured">
<h3>Per Photo</h3>
<p class="pricing-sub">Best for volume documentation</p>
<div class="price">€25<span>/photo</span></div>
<ul>
<li>Large-scale photo collection</li>
<li>Consistent framing requirements</li>
<li>Bulk pricing available</li>
<li>Structured data delivery</li>
</ul>
<a href="#order-form" class="btn-primary" style="width:100%;text-align:center;display:block">Choose Per Photo</a>
</div>
<div class="pricing-card">
<h3>Per Project</h3>
<p class="pricing-sub">Best for ongoing programs</p>
<div class="price">Custom</div>
<ul>
<li>Multi-location, multi-phase</li>
<li>Dedicated account support</li>
<li>SLA and volume guarantees</li>
<li>API integration available</li>
</ul>
<a href="#order-form" class="btn-ghost" style="width:100%;text-align:center">Request Quote</a>
</div>
</div>
</div>
</section>
<!-- ORDER FORM -->
<section class="section-pad" style="background:var(--bg-off)" id="order-form">
<div class="container">
<div class="section-header">
<h2>Start your order</h2>
<p>Tell us what you need. We'll respond within 24 hours with a quote and timeline.</p>
</div>
<form class="order-form" action="mailto:hello@quixzoom.com" method="post" enctype="text/plain">
<div class="form-row">
<label for="company">Company / Organisation</label>
<input type="text" id="company" name="company" placeholder="Acme Corp" required>
</div>
<div class="form-row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@company.com" required>
</div>
<div class="form-row">
<label for="model">Pricing Model</label>
<select id="model" name="model" required>
<option value="">Select...</option>
<option value="per-mission">Per Mission</option>
<option value="per-photo">Per Photo</option>
<option value="per-project">Per Project</option>
<option value="not-sure">Not sure — advise me</option>
</select>
</div>
<div class="form-row">
<label for="locations">Number of Locations / Photos</label>
<input type="text" id="locations" name="locations" placeholder="e.g. 50 storefronts, 200 road signs, 10 bridges">
</div>
<div class="form-row">
<label for="description">What do you need photographed?</label>
<textarea id="description" name="description" placeholder="Describe the mission: what subjects, angles, locations, and any specific requirements..."></textarea>
</div>
<div class="form-row">
<label for="timeline">Desired Timeline</label>
<select id="timeline" name="timeline">
<option value="">Select...</option>
<option value="48h">Within 48 hours</option>
<option value="1week">Within 1 week</option>
<option value="2weeks">Within 2 weeks</option>
<option value="flexible">Flexible</option>
</select>
</div>
<button type="submit" class="form-submit">Request Quote →</button>
<p style="text-align:center;margin-top:16px;font-size:var(--text-sm);color:var(--text-muted)">Or email us directly at <a href="mailto:hello@quixzoom.com" style="color:var(--blue);font-weight:600">hello@quixzoom.com</a></p>
</form>
</div>
</section>
<!-- LANDVEX BANNER -->
<section class="section-pad" style="padding-top:0">
<div class="container">
<div class="landvex-banner">
<p><strong>Need analysis, not just photos?</strong></p>
<p>quiXzoom delivers raw field data. <a href="https://www.landvex.com">Landvex</a> delivers decision intelligence.</p>
<p style="font-size:var(--text-sm);color:var(--text-muted);margin-top:8px">Go to <a href="https://www.landvex.com">landvex.com</a> for AI-powered analysis, reporting, and decision support.</p>
</div>
</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>