Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
121 lines
4.8 KiB
Markdown
121 lines
4.8 KiB
Markdown
# 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).
|