# Infographic Implementation — quiXzoom & Landvex

## Sammanfattning

Illustrerade infographics har integrerats på alla viktiga landningssidor för både quiXzoom och Landvex.

## Skapade komponenter

### 1. `se/_components/infographic-flow.html` — Combined Landvex + quiXzoom Flow
- **Används på:** Huvudsida (se/index.html)
- **Innehåll:** 5-stegs timeline som visar hela flödet från observation till beslut
- **Stil:** Teal (#0d7377), flat line-art ikoner, vertikal timeline
- **Features:**
  - Animerade steg (fade-in)
  - Metrics/dashboard i steg 4
  - Dual-path cards i steg 5 (beslutsfattare vs fältarbetare)
  - CTA med båda varumärkena

### 2. `se/_components/infographic-zoomer.html` — Zoomer Journey
- **Används på:** Huvudsida (se/index.html) — sekundär infographic
- **Innehåll:** 3-stegs horisontell timeline för zoomers
- **Stil:** quiXzoom-blå (#0066FF), mörk bakgrund för earnings
- **Features:**
  - Ladda ner → Välj uppdrag → Fotografera & få betalt
  - Earnings-highlight med 3 nivåer
  - CTA-knapp

### 3. `se/_components/infographic-business.html` — Business Decision Flow
- **Används på:** (Redo för framtida Landvex-sidor)
- **Innehåll:** 4-stegs pipeline + beslutsexempel + dashboard
- **Stil:** Mörk navy (#1a2a3a), färgkodade konfidensgrader
- **Features:**
  - Observera → Verifiera → Analysera → Besluta
  - 3 beslutsexempel med konfidensgrader
  - Live dashboard-mockup

### 4. `se/_components/infographic-industry-simple.html` — Branschsidor
- **Används på:** Alla 20 branschsidor
- **Innehåll:** 3-stegs process + 2 value props + CTA
- **Stil:** quiXzoom-blå, enkel och fokuserad
- **Features:**
  - Hitta uppdrag → Dokumentera → Få betalt
  - Flexibelt arbete + Snabb betalning
  - CTA till appen

## Uppdaterade filer

| Sida | Komponent | Status |
|------|-----------|--------|
| `se/index.html` | infographic-flow + infographic-zoomer | ✅ |
| `se/accessibility-audit/index.html` | infographic-industry-simple | ✅ |
| `se/asset-tracking/index.html` | infographic-industry-simple | ✅ |
| `se/bridge-inspection/index.html` | infographic-industry-simple | ✅ |
| `se/construction-progress/index.html` | infographic-industry-simple | ✅ |
| `se/environmental-survey/index.html` | infographic-industry-simple | ✅ |
| `se/event-documentation/index.html` | infographic-industry-simple | ✅ |
| `se/facade-inspection/index.html` | infographic-industry-simple | ✅ |
| `se/infrastructure-monitoring/index.html` | infographic-industry-simple | ✅ |
| `se/insurance-claim/index.html` | infographic-industry-simple | ✅ |
| `se/lease-audit/index.html` | infographic-industry-simple | ✅ |
| `se/ooh-audit/index.html` | infographic-industry-simple | ✅ |
| `se/parking-audit/index.html` | infographic-industry-simple | ✅ |
| `se/pre-purchase-inspection/index.html` | infographic-industry-simple | ✅ |
| `se/property-documentation/index.html` | infographic-industry-simple | ✅ |
| `se/rental-inspection/index.html` | infographic-industry-simple | ✅ |
| `se/retail-audit/index.html` | infographic-industry-simple | ✅ |
| `se/road-condition/index.html` | infographic-industry-simple | ✅ |
| `se/roof-inspection/index.html` | infographic-industry-simple | ✅ |
| `se/signage-audit/index.html` | infographic-industry-simple | ✅ |
| `se/storm-damage/index.html` | infographic-industry-simple | ✅ |

## Automations-skript

### `_scripts/integrate.py`
- Integrerar infographic-komponenter på sidor
- Användning: `python3 _scripts/integrate.py [--dry-run]`

### `_scripts/customize-industry.py`
- Skapar branschspecifika infographics (template-baserat)
- Användning: `python3 _scripts/customize-industry.py`

### `_scripts/apply-simple-infographic.py`
- Applicerar förenklad infographic på alla branschsidor
- Användning: `python3 _scripts/apply-simple-infographic.py [--dry-run]`

## Nästa steg för deploy

```bash
# 1. Testa lokalt (öppna filer i webbläsare)
open quixzoom-market-pages/se/index.html

# 2. Ladda upp till S3
aws s3 sync quixzoom-market-pages/se/ s3://quixzoom-landing-prod/markets/se/ \
  --delete \
  --cache-control "max-age=3600"

# 3. CloudFront invalidation
aws cloudfront create-invalidation \
  --distribution-id EE30B9WM5ZYM7 \
  --paths "/*"

# 4. Verifiera
open https://quixzoom.se
open https://quixzoom.se/facade-inspection/
open https://quixzoom.se/storm-damage/
```

## Design-principer

- **Mobile-first:** Alla infographics är responsiva
- **iPhone-first:** Benchmark är Apple Maps/Wallet/Weather
- **Ljust tema:** Ingen mörk bakgrund (per Design Constitution)
- **Flat line-art:** Samma stil som referensbilden
- **Animerade steg:** Fade-in vid laddning för engagemang
- **Tydlig CTA:** Varje infographic leder till konvertering

## Valutaregel

Alla belopp anges i SEK på svenska sidor (zoomer-ersättningar).
Landvex business-sidor ska använda USD/EUR (per MEMORY.md regel 0).