```
```javascript
document.querySelectorAll('[data-market]').forEach(btn => {
btn.addEventListener('click', () => {
const market = btn.dataset.market;
document.cookie = `qx_market=${market};path=/;max-age=31536000`;
updateAllLocaleContent(market); // triggers locale bundle swap
updateMap(localeData[market].mapCenter);
updateDemoCard(localeData[market].missionExamples[0]);
updateFAQTax(localeData[market]);
});
});
```
---
## DEL 3 — VISUELLT STORYTELLING
### Princip
> **Användaren ska förstå vad sidan gör inom 3 sekunder, innan de läser ett enda stycke.**
### Nuläge vs mål
| Yta | Nuläge | Mål |
|---|---|---|
| Hero | Text + telefon-mockup | Animated workflow: Mission → Zoomer → Verified data → Payout |
| How it works | 4 textblock | 4 illustrerade steg med process-ikoner + connectors |
| Tier pricing | 3 textkort | 3 illustrerade nivåkort med visuell differentiering |
| Landvex homepage | Textblock + dark hero | Contradictions-diagram + data-flow-illustration |
| Landvex methodology | Texttunga steg | Visuell pipeline: Observation → AI → Score → Report |
| Onboarding | Formulär | Illustrated steps med progress indicator |
| Empty states | Ingen data/text | Custom illustration per kontext |
### Illustration-system — specifikation
#### Stil
```
Stil: Flat / geometric, linjär
Färgpalett: --color-accent #0066FF + white + #0a0a0a + accent-green #00C853
Stroke: 2px consistent
Ikonstil: 24×24px grid, rounded corners 2px
Animationer: CSS-only, prefers-reduced-motion respected
Format: SVG (inline för animering, externa för statiska)
```
#### Prioriterade illustrationer att producera (ordning)
**quiXzoom — 8 illustrationer**
```
QX-ILL-01: Mission Flow (hero)
Visar: Briefcase icon → Map pin → Camera → Checkmark → Coins
Animation: left-to-right flow, 3s loop
Plats: Hero, ovanför/bredvid telefon-mockup
QX-ILL-02: How it Works — 4 steg
Steg 1: Browse Map → pin-ikon på karta
Steg 2: Claim Mission → handskaknings-ikon
Steg 3: Photograph → kamera-ikon
Steg 4: Get Paid → plånbok + check-ikon
Format: Horisontell rad desktop, vertikal stack mobil
QX-ILL-03: Tier Differentiation
Supplementary: singel person, 2-3 per vecka
Active: person + ryggsäck, 8-12 per vecka
Professional: person + utrustning + badge
QX-ILL-04: Identity Verification (onboarding)
Shield + ID-kort + checkmark
QX-ILL-05: Zoomer Profile Empty State
Person med kamera, "Your first mission awaits"
QX-ILL-06: Mission Approved
Checkmark-animation + mynt-ikon + "Credits added"
QX-ILL-07: Earnings Calculator
Slider → graf → utbetalningsikon
QX-ILL-08: Global Presence
Världskarta med markerade launch-länder, pulsande pins
```
**Landvex — 6 illustrationer**
```
LV-ILL-01: Contradiction Detection (hero)
Visar: Officiell rapport (dokument-ikon) ← → Faktisk observation (kamera-ikon)
Mittenpil med "≠" (contradiction marker)
Animation: dokumentet och kameran "pulsar" mot mitten
LV-ILL-02: Intelligence Pipeline (methodology)
Observation → Collection → AI Analysis → Scoring → Report → Decision
6 noder, connectors, ikoner per steg
LV-ILL-03: Control Intelligence Output
Dashboard-mockup med score (0-100 gauge) + trend + alert
LV-ILL-04: Data Coverage Map
Polygon-overlay på karta + coverage percentage
"94% commercial facade coverage, Södermalm, updated <30 days"
LV-ILL-05: Enterprise Client Flow
Request → Deploy → Collect → Analyse → Deliver
LV-ILL-06: Zoomer Network (quiXzoom → Landvex bridge)
Många prickar (Zoomers) → Aggregation-nod → Intelligence-output
Visuellt förklarar relationen mellan QX och LV
```
### Content Ratio Target
```
Per sida (desktop, above-the-fold):
Hero: 60% visual / 40% text
Feature section: 50% visual / 50% text
Proof/social: 30% visual / 70% text (social proof är text-tungt by nature)
CTA section: 70% visual / 30% text
Globalt per sida:
illustrations + UI: 40%
data + charts: 20%
text: 40%
```
### Workflow Diagram — quiXzoom How it Works
SVG-spec för QX-ILL-02 (inline, production-ready):
```svg