boc/quixzoom-market-pages/INFOGRAPHIC_IMPLEMENTATION.md

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

# 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).