Files
boc/quixzoom-market-pages/se/construction-progress/index.html
T
Bernt 6989a98d75 feat: Passwordless cross-device authentication
- Arkitektur: docs/auth/passwordless-architecture.md
- Backend: iom/quixzoom-auth-service/ (FastAPI + Redis)
- Webb: quixzoom-market-pages/se/login/ (QR-kod + polling)
- App: iom/quixzoom-app/src/features/auth/ (push + deep links)

Flöde: QR-kod → app-godkännande → webb-inloggad
2026-07-07 07:11:50 +00:00

696 lines
18 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="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Byggframsteg — quiXzoom | Sverige</title>
<meta name="description" content="Byggframsteg med quiXzoom i Sverige. Tjäna 150500 kr per uppdrag. Betalt varje vecka.">
<meta name="geo.region" content="SE">
<meta name="geo.country" content="Sweden">
<meta name="language" content="Sverige">
<link rel="canonical" href="https://quixzoom.se/construction-progress/">
<style>
:root{--qx-black:#0a0a0a;--qx-white:#fff;--qx-blue:#06f;--qx-gray:#f5f5f7;--qx-dark-gray:#1a1a1a}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;color:var(--qx-black);line-height:1.5}
.hero{background:var(--qx-black);color:var(--qx-white);padding:80px 20px;text-align:center}
.hero h1{font-size:2.5rem;margin-bottom:1rem}
.hero p{font-size:1.25rem;color:#ccc;margin-bottom:2rem}
.badge{display:inline-block;background:var(--qx-blue);color:#fff;padding:8px 16px;border-radius:20px;font-size:.875rem;margin-bottom:1rem}
.container{max-width:1200px;margin:0 auto;padding:40px 20px}
.section{padding:60px 20px}
.section-gray{background:var(--qx-gray)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.card h3{margin-bottom:.5rem}
.cta{display:inline-block;background:var(--qx-blue);color:#fff;padding:16px 32px;border-radius:8px;text-decoration:none;font-weight:600;margin-top:1rem}
.footer{background:var(--qx-dark-gray);color:#fff;padding:40px 20px;text-align:center}
</style>
</head>
<body>
<div class="hero">
<div class="badge"><span class="flag-se">SE</span> Lanseras i Sverige · 1 augusti 2026</div>
<h1>Byggframsteg</h1>
<p>quiXzoom — Crowdsourcad datainsamling i Sverige. Tjäna 150500 kr per uppdrag.</p>
<a href="https://app.quixzoom.com/join" class="cta">Bli Zoomer nu</a>
</div>
<div class="container">
<div class="section">
<h2>Hur det fungerar</h2>
<div class="grid">
<div class="card">
<h3>1. Hitta uppdrag</h3>
<p>Se tillgängliga Byggframsteg-uppdrag nära dig i appen.</p>
</div>
<div class="card">
<h3>2. Dokumentera</h3>
<p>Följ instruktionerna och ta bilder med din smartphone.</p>
</div>
<div class="card">
<h3>3. Få betalt</h3>
<p>Betalt varje vecka. 150500 kr per godkänt uppdrag.</p>
</div>
</div>
</div>
</div>
<div class="section section-gray">
<div class="container">
<h2>Varför quiXzoom?</h2>
<div class="grid">
<div class="card">
<h3>Flexibelt</h3>
<p>Jobba när du vill. Inga scheman, inga minimikrav.</p>
</div>
<div class="card">
<h3>Betalt snabbt</h3>
<p>Varje vecka direkt till ditt konto via Stripe.</p>
</div>
<div class="card">
<h3>Tillförlitligt</h3>
<p>Global plattform med verifierade uppdrag och tydlig feedback.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>© 2026 quiXzoom AB — En del av <a href="https://aamos.systems" style="color:#fff">AAMOS</a></p>
<p>quixzoom.se</p>
</div>
<!-- === INFOGRAPHIC INJECTED === -->
<div class="section section-gray">
<div class="container">
<!-- quiXzoom — Zoomer Journey Infographic -->
<!-- För zoomer-fokuserade sidor (quixzoom.se, app landing, etc.) -->
<style>
/* === ZOOMER INFOGRAPHIC === */
.qz-infographic {
--qz-blue: #0066FF;
--qz-blue-light: #E8F0FF;
--qz-black: #0a0a0a;
--qz-white: #ffffff;
--qz-gray: #F5F5F7;
--qz-text: #1d1d1f;
--qz-text-secondary: #86868b;
--qz-border: #D2D2D7;
--qz-green: #00C853;
--qz-radius: 16px;
--qz-shadow: 0 2px 20px rgba(0,0,0,0.08);
--qz-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 60px 24px;
background: var(--qz-white);
}
.qz-infographic * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.qz-header {
text-align: center;
margin-bottom: 48px;
}
.qz-header h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
color: var(--qz-black);
margin-bottom: 12px;
letter-spacing: -0.03em;
line-height: 1.1;
}
.qz-header h2 em {
color: var(--qz-blue);
font-style: normal;
}
.qz-header p {
font-size: 1.0625rem;
color: var(--qz-text-secondary);
max-width: 520px;
margin: 0 auto;
line-height: 1.6;
}
/* Timeline horizontal on desktop, vertical on mobile */
.qz-timeline {
display: flex;
gap: 20px;
position: relative;
}
.qz-timeline::before {
content: '';
position: absolute;
top: 28px;
left: 60px;
right: 60px;
height: 3px;
background: var(--qz-blue);
z-index: 0;
}
.qz-step {
flex: 1;
position: relative;
z-index: 1;
}
.qz-step-marker {
width: 56px;
height: 56px;
background: var(--qz-white);
border: 3px solid var(--qz-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 800;
color: var(--qz-blue);
margin: 0 auto 20px;
box-shadow: 0 2px 12px rgba(0,102,255,0.15);
}
.qz-step-content {
background: var(--qz-gray);
border-radius: var(--qz-radius);
padding: 24px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.qz-step-content:hover {
transform: translateY(-4px);
box-shadow: var(--qz-shadow-lg);
}
.qz-step-icon {
width: 40px;
height: 40px;
margin: 0 auto 12px;
color: var(--qz-blue);
}
.qz-step-icon svg {
width: 100%;
height: 100%;
}
.qz-step-title {
font-size: 1rem;
font-weight: 800;
color: var(--qz-black);
margin-bottom: 8px;
}
.qz-step-body {
color: var(--qz-text-secondary);
font-size: 0.875rem;
line-height: 1.6;
}
.qz-step-time {
display: inline-block;
background: var(--qz-blue-light);
color: var(--qz-blue);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
margin-top: 12px;
}
/* Earnings highlight */
.qz-earnings {
margin-top: 40px;
background: var(--qz-black);
border-radius: var(--qz-radius);
padding: 36px;
color: var(--qz-white);
text-align: center;
}
.qz-earnings h3 {
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 8px;
}
.qz-earnings p {
color: rgba(255,255,255,0.6);
font-size: 0.9375rem;
margin-bottom: 24px;
}
.qz-earnings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.qz-earning-item {
background: rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px;
}
.qz-earning-amount {
font-size: 1.75rem;
font-weight: 900;
color: var(--qz-green);
display: block;
}
.qz-earning-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
margin-top: 4px;
display: block;
}
/* CTA */
.qz-cta {
margin-top: 32px;
text-align: center;
}
.qz-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--qz-blue);
color: var(--qz-white);
padding: 16px 40px;
border-radius: 100px;
font-size: 1.0625rem;
font-weight: 700;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 4px 24px rgba(0,102,255,0.35);
}
.qz-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,102,255,0.45);
}
/* Responsive */
@media (max-width: 768px) {
.qz-timeline {
flex-direction: column;
gap: 24px;
}
.qz-timeline::before {
display: none;
}
.qz-step {
display: flex;
gap: 16px;
text-align: left;
}
.qz-step-marker {
margin: 0;
flex-shrink: 0;
width: 48px;
height: 48px;
font-size: 1.125rem;
}
.qz-step-content {
flex: 1;
text-align: left;
}
.qz-step-icon {
margin: 0 0 8px 0;
}
.qz-earnings-grid {
grid-template-columns: 1fr;
}
}
/* Animation */
@keyframes qzFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.qz-step {
animation: qzFadeIn 0.5s ease forwards;
opacity: 0;
}
.qz-step:nth-child(1) { animation-delay: 0.1s; }
.qz-step:nth-child(2) { animation-delay: 0.2s; }
.qz-step:nth-child(3) { animation-delay: 0.3s; }
</style>
<div class="qz-infographic">
<div class="qz-header">
<h2>Ladda ner. Fotografera. <em>Tjäna.</em></h2>
<p>Tre enkla steg från första uppdraget till första utbetalningen.</p>
</div>
<div class="qz-timeline">
<div class="qz-step">
<div class="qz-step-marker">1</div>
<div class="qz-step-content">
<div class="qz-step-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="12" y="4" width="24" height="40" rx="4"/>
<line x1="12" y1="10" x2="36" y2="10"/>
<line x1="12" y1="38" x2="36" y2="38"/>
<circle cx="24" cy="7" r="1.5"/>
</svg>
</div>
<h3 class="qz-step-title">Ladda ner appen</h3>
<p class="qz-step-body">Registrera dig på 5 minuter. ID-verifiering med pass eller körkort + selfie.</p>
<span class="qz-step-time">5 minuter</span>
</div>
</div>
<div class="qz-step">
<div class="qz-step-marker">2</div>
<div class="qz-step-content">
<div class="qz-step-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 40l8-16 8 10 8-20 8 14"/>
<circle cx="8" cy="40" r="3"/>
<circle cx="16" cy="24" r="3"/>
<circle cx="24" cy="34" r="3"/>
<circle cx="32" cy="14" r="3"/>
<circle cx="40" cy="28" r="3"/>
</svg>
</div>
<h3 class="qz-step-title">Välj uppdrag</h3>
<p class="qz-step-body">Se tillgängliga uppdrag på kartan. Välj typ, tid och plats som passar dig.</p>
<span class="qz-step-time">2 minuter</span>
</div>
</div>
<div class="qz-step">
<div class="qz-step-marker">3</div>
<div class="qz-step-content">
<div class="qz-step-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="24" cy="24" r="20"/>
<path d="M16 24h12l-4-4"/>
<path d="M28 24l-4 4"/>
<path d="M24 14v6"/>
<path d="M24 28v6"/>
</svg>
</div>
<h3 class="qz-step-title">Fotografera & få betalt</h3>
<p class="qz-step-body">Navigera till platsen, fotografera enligt spec, ladda upp. Betalt varje måndag.</p>
<span class="qz-step-time">30 min/uppdrag</span>
</div>
</div>
</div>
<div class="qz-earnings">
<h3>Vad kan du tjäna?</h3>
<p>Beräknat på genomsnittlig aktivitet. Du väljer helt själv hur mycket du vill jobba.</p>
<div class="qz-earnings-grid">
<div class="qz-earning-item">
<span class="qz-earning-amount">1 2003 000 kr</span>
<span class="qz-earning-label">Deltid · 24 uppdrag/vecka</span>
</div>
<div class="qz-earning-item">
<span class="qz-earning-amount">3 5007 500 kr</span>
<span class="qz-earning-label">Aktiv · 812 uppdrag/vecka</span>
</div>
<div class="qz-earning-item">
<span class="qz-earning-amount">8 00015 000 kr</span>
<span class="qz-earning-label">Proffs · 15+ uppdrag/vecka</span>
</div>
</div>
</div>
<div class="qz-cta">
<a href="https://app.quixzoom.com/join" class="qz-cta-btn">Bli Zoomer gratis →</a>
</div>
</div>
</div>
</div>
<!-- === END INFOGRAPHIC === -->
<!-- === INFOGRAPHIC === -->
<div class="section section-gray">
<div class="container">
<!-- quiXzoom — Branschspecifik Infographic (Förenklad) -->
<style>
.qi-infographic {
--qi-blue: #0066FF;
--qi-blue-light: #E8F0FF;
--qi-black: #0a0a0a;
--qi-white: #ffffff;
--qi-gray: #F5F5F7;
--qi-text: #1d1d1f;
--qi-text-secondary: #86868b;
--qi-border: #D2D2D7;
--qi-green: #00C853;
--qi-radius: 16px;
--qi-shadow: 0 2px 20px rgba(0,0,0,0.08);
--qi-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 40px 24px;
}
.qi-infographic * { margin: 0; padding: 0; box-sizing: border-box; }
.qi-header { text-align: center; margin-bottom: 36px; }
.qi-header h3 {
font-size: clamp(1.375rem, 3vw, 1.875rem);
font-weight: 900;
color: var(--qi-black);
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.qi-header p {
font-size: 1rem;
color: var(--qi-text-secondary);
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
.qi-process {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 32px;
}
.qi-process-step {
background: var(--qi-white);
border: 2px solid var(--qi-border);
border-radius: var(--qi-radius);
padding: 28px 20px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.qi-process-step:hover {
transform: translateY(-4px);
box-shadow: var(--qi-shadow-lg);
border-color: var(--qi-blue);
}
.qi-step-num {
width: 40px;
height: 40px;
background: var(--qi-blue);
color: var(--qi-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
font-weight: 800;
margin: 0 auto 14px;
}
.qi-step-title {
font-size: 1rem;
font-weight: 800;
color: var(--qi-black);
margin-bottom: 8px;
}
.qi-step-desc {
font-size: 0.875rem;
color: var(--qi-text-secondary);
line-height: 1.5;
}
.qi-values {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.qi-value-card {
background: var(--qi-gray);
border-radius: 12px;
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.qi-value-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
color: var(--qi-blue);
}
.qi-value-icon svg { width: 100%; height: 100%; }
.qi-value-text h4 {
font-size: 0.9375rem;
font-weight: 800;
color: var(--qi-black);
margin-bottom: 4px;
}
.qi-value-text p {
font-size: 0.8125rem;
color: var(--qi-text-secondary);
line-height: 1.5;
}
.qi-cta {
text-align: center;
padding: 28px;
background: var(--qi-blue-light);
border-radius: var(--qi-radius);
}
.qi-cta-text {
font-size: 1.0625rem;
font-weight: 800;
color: var(--qi-black);
margin-bottom: 6px;
}
.qi-cta-sub {
font-size: 0.9375rem;
color: var(--qi-text-secondary);
margin-bottom: 20px;
}
.qi-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--qi-blue);
color: var(--qi-white);
padding: 14px 32px;
border-radius: 100px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 4px 20px rgba(0,102,255,0.3);
}
.qi-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,102,255,0.4);
}
@media (max-width: 640px) {
.qi-process { grid-template-columns: 1fr; }
.qi-values { grid-template-columns: 1fr; }
}
@keyframes qiFadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.qi-process-step, .qi-value-card {
animation: qiFadeIn 0.5s ease forwards;
opacity: 0;
}
.qi-process-step:nth-child(1) { animation-delay: 0.1s; }
.qi-process-step:nth-child(2) { animation-delay: 0.2s; }
.qi-process-step:nth-child(3) { animation-delay: 0.3s; }
</style>
<div class="qi-infographic">
<div class="qi-header">
<h3>Så fungerar det</h3>
<p>quiXzoom gör fältdatainsamling enkelt, snabbt och tillförlitligt — oavsett om du vill tjäna pengar eller beställa inspektion.</p>
</div>
<div class="qi-process">
<div class="qi-process-step">
<div class="qi-step-num">1</div>
<h4 class="qi-step-title">Hitta uppdrag</h4>
<p class="qi-step-desc">Se tillgängliga uppdrag nära dig i quiXzoom-appen. Välj typ, tid och plats.</p>
</div>
<div class="qi-process-step">
<div class="qi-step-num">2</div>
<h4 class="qi-step-title">Dokumentera</h4>
<p class="qi-step-desc">Följ instruktionerna och ta bilder med din smartphone. GPS-validering sker automatiskt.</p>
</div>
<div class="qi-process-step">
<div class="qi-step-num">3</div>
<h4 class="qi-step-title">Få betalt</h4>
<p class="qi-step-desc">Betalt varje vecka för godkända uppdrag. Direkt till ditt konto via Stripe.</p>
</div>
</div>
<div class="qi-values">
<div class="qi-value-card">
<div class="qi-value-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="24" cy="24" r="20"/>
<path d="M24 14v10l7 7"/>
</svg>
</div>
<div class="qi-value-text">
<h4>Flexibelt arbete</h4>
<p>Jobba när du vill, där du vill. Inga scheman, inga minimikrav.</p>
</div>
</div>
<div class="qi-value-card">
<div class="qi-value-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M24 4L4 14v10c0 12 8.5 22 20 24 11.5-2 20-12 20-24V14L24 4z"/>
</svg>
</div>
<div class="qi-value-text">
<h4>Snabb betalning</h4>
<p>Få betalt varje måndag via Stripe. Transparent och pålitligt.</p>
</div>
</div>
</div>
<div class="qi-cta">
<p class="qi-cta-text">Redo att komma igång?</p>
<p class="qi-cta-sub">Börja tjäna pengar på fältdatainsamling idag.</p>
<a href="https://app.quixzoom.com/join" class="qi-cta-btn">Bli Zoomer →</a>
</div>
</div>
</div>
</div>
<!-- === END INFOGRAPHIC === -->
</body>
</html>