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.3 KiB
HTML
268 lines
6.3 KiB
HTML
<!-- quiXzoom — Branschspecifik Infographic: Byggframsteg -->
|
|
|
|
<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 <span class="qi-industry-name">byggframsteg</span></h3>
|
|
<p>quiXzoom gör byggframsteg 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">Beställ dokumentation</h4>
|
|
<p class="qi-step-desc">Ange byggprojekt och önskat intervall. Veckovis, månadsvis eller vid milstolpar.</p>
|
|
</div>
|
|
<div class="qi-process-step">
|
|
<div class="qi-step-num">2</div>
|
|
<h4 class="qi-step-title">Regelbunden fotografering</h4>
|
|
<p class="qi-step-desc">Pilot dokumenterar byggplatsen från samma vinklar vid varje tillfälle.</p>
|
|
</div>
|
|
<div class="qi-process-step">
|
|
<div class="qi-step-num">3</div>
|
|
<h4 class="qi-step-title">Visuell tidslinje</h4>
|
|
<p class="qi-step-desc">Följ projektets utveckling över tid med jämförbara bilder och detaljerade rapporter.</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>Dokumentera milstolpar</h4>
|
|
<p>Få visuell bevisning vid varje projektfas. Perfekt för rapportering till investerare och beställare.</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>Upptäck avvikelser tidigt</h4>
|
|
<p>Jämför bilder över tid för att identifiera förseningar eller kvalitetsproblem innan de blir kostsamma.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qi-cta">
|
|
<p class="qi-cta-text">Redo att komma igång?</p>
|
|
<p class="qi-cta-sub">Beställ byggdokumentation eller registrera dig som pilot idag.</p>
|
|
<a href="https://app.quixzoom.com/join" class="qi-cta-btn">Kom igång med byggframsteg →</a>
|
|
</div>
|
|
</div>
|