Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
268 lines
6.1 KiB
HTML
268 lines
6.1 KiB
HTML
<!-- quiXzoom — Branschspecifik Infographic -->
|
||
<!-- Anpassas per bransch via {{PLACEHOLDERS}} -->
|
||
|
||
<style>
|
||
/* === INDUSTRY INFOGRAPHIC === */
|
||
.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;
|
||
}
|
||
|
||
/* Process steps */
|
||
.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;
|
||
}
|
||
|
||
/* Value props */
|
||
.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;
|
||
}
|
||
|
||
/* CTA */
|
||
.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);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 640px) {
|
||
.qi-process {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.qi-values {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Animation */
|
||
@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 </h3>
|
||
<p>quiXzoom gör 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">Få notis vid storm</h4>
|
||
<p class="qi-step-desc">quiXzoom skickar push-notiser när stormskadeuppdrag aktiveras i ditt område.</p>
|
||
</div>
|
||
<div class="qi-process-step">
|
||
<div class="qi-step-num">2</div>
|
||
<h4 class="qi-step-title">Dokumentera skador</h4>
|
||
<p class="qi-step-desc">Fotografera tak, fasader, träd och vägar. Prioritera säkerheten.</p>
|
||
</div>
|
||
<div class="qi-process-step">
|
||
<div class="qi-step-num">3</div>
|
||
<h4 class="qi-step-title">Snabbast betalt</h4>
|
||
<p class="qi-step-desc">Stormskadeuppdrag har högst prioritet. Godkännande och betalning inom 48h.</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>Högst ersättning</h4>
|
||
<p>300–500 kr per uppdrag. Bonus för snabb insamling.</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>Hjälp samhället</h4>
|
||
<p>Dina bilder påskyndar skadebedömning och återställning.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qi-cta">
|
||
<p class="qi-cta-text">Redo att komma igång?</p>
|
||
<p class="qi-cta-sub">Bli först på plats efter stormen.</p>
|
||
<a href="https://app.quixzoom.com/join" class="qi-cta-btn">Registrera dig →</a>
|
||
</div>
|
||
</div> |