Files
boc/landvex-site/infrastructure-monitoring/index.html
T
Bernt 1a12fb870b dev-api: add developer portal, OpenAPI spec, and Flatenbadet case study
- New /developers/ page with API docs, SDKs, pricing, use cases
- OpenAPI 3.0 spec for Orders, Missions, Photos, Analytics
- Case study: Glasskiosken i Flatenbadet — complete ROI analysis
- Updated /order/ with recurring missions and frequency dropdown
2026-07-14 15:27:33 +00:00

652 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIMS - Visual Infrastructure Monitoring System | Landvex</title>
<meta name="description" content="AI-driven visual monitoring for critical infrastructure. Detect anomalies, prevent fraud, ensure safety.">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Header */
header {
background: #000;
color: #fff;
padding: 16px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px;
}
.logo span {
color: #00d4aa;
}
nav a {
color: #fff;
text-decoration: none;
margin-left: 32px;
font-size: 14px;
opacity: 0.8;
transition: opacity 0.2s;
}
nav a:hover {
opacity: 1;
}
/* Hero */
.hero {
background: linear-gradient(135deg, #000 0%, #1a1a2e 100%);
color: #fff;
padding: 160px 0 100px;
margin-top: 56px;
}
.hero h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -1px;
}
.hero h1 span {
color: #00d4aa;
}
.hero p {
font-size: 20px;
opacity: 0.8;
max-width: 600px;
margin-bottom: 40px;
}
.cta-button {
display: inline-block;
background: #00d4aa;
color: #000;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: transform 0.2s, box-shadow 0.2s;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 212, 170, 0.3);
}
/* Features */
.features {
padding: 100px 0;
background: #f8f9fa;
}
.features h2 {
font-size: 40px;
font-weight: 700;
text-align: center;
margin-bottom: 64px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.feature-card {
background: #fff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.feature-icon {
width: 48px;
height: 48px;
background: #00d4aa;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
font-size: 24px;
}
.feature-card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.feature-card p {
color: #666;
font-size: 15px;
line-height: 1.6;
}
/* How it works */
.how-it-works {
padding: 100px 0;
}
.how-it-works h2 {
font-size: 40px;
font-weight: 700;
text-align: center;
margin-bottom: 64px;
}
.steps {
display: flex;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.step {
flex: 1;
min-width: 200px;
text-align: center;
}
.step-number {
width: 64px;
height: 64px;
background: #000;
color: #00d4aa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
margin: 0 auto 24px;
}
.step h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.step p {
color: #666;
font-size: 15px;
}
/* Risk Levels */
.risk-levels {
padding: 100px 0;
background: #f8f9fa;
}
.risk-levels h2 {
font-size: 40px;
font-weight: 700;
text-align: center;
margin-bottom: 64px;
}
.risk-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.risk-card {
padding: 32px;
border-radius: 16px;
text-align: center;
}
.risk-card.green {
background: #dcfce7;
border: 2px solid #22c55e;
}
.risk-card.yellow {
background: #fef9c3;
border: 2px solid #eab308;
}
.risk-card.orange {
background: #ffedd5;
border: 2px solid #f97316;
}
.risk-card.red {
background: #fee2e2;
border: 2px solid #ef4444;
}
.risk-indicator {
width: 24px;
height: 24px;
border-radius: 50%;
margin: 0 auto 16px;
}
.risk-card.green .risk-indicator {
background: #22c55e;
}
.risk-card.yellow .risk-indicator {
background: #eab308;
}
.risk-card.orange .risk-indicator {
background: #f97316;
}
.risk-card.red .risk-indicator {
background: #ef4444;
}
.risk-card h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.risk-card p {
font-size: 14px;
color: #666;
}
/* Use Cases */
.use-cases {
padding: 100px 0;
}
.use-cases h2 {
font-size: 40px;
font-weight: 700;
text-align: center;
margin-bottom: 64px;
}
.use-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px;
}
.use-case-card {
padding: 32px;
border: 1px solid #e5e7eb;
border-radius: 16px;
transition: border-color 0.2s;
}
.use-case-card:hover {
border-color: #00d4aa;
}
.use-case-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.use-case-card p {
color: #666;
font-size: 14px;
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: #000;
color: #fff;
text-align: center;
}
.cta-section h2 {
font-size: 40px;
font-weight: 700;
margin-bottom: 24px;
}
.cta-section p {
font-size: 18px;
opacity: 0.8;
max-width: 600px;
margin: 0 auto 40px;
}
/* Footer */
footer {
background: #111;
color: #fff;
padding: 48px 0;
text-align: center;
}
footer p {
opacity: 0.6;
font-size: 14px;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 36px;
}
.risk-grid {
grid-template-columns: 1fr;
}
.steps {
flex-direction: column;
}
nav {
display: none;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">Land<span>vex</span></div>
<nav>
<a href="/">Hem</a>
<a href="/infrastructure-monitoring">VIMS</a>
<a href="/contact">Kontakt</a>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<h1>Visuell övervakning av <span>kritisk infrastruktur</span></h1>
<p>AI-driven avvikelsedetektion för bankomater, laddstationer, parkeringsautomater och mer. Upptäck manipulation innan den blir ett brott.</p>
<a href="#contact" class="cta-button">Boka demo</a>
</div>
</section>
<section class="features">
<div class="container">
<h2>Hur VIMS fungerar</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">📸</div>
<h3>Kontinuerlig insamling</h3>
<p>quiXzoom Zoomers fotograferar objekten regelbundet från samma vinklar. Varje insamling kvalitetskontrolleras av AI.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3>Objektdetektion</h3>
<p>AI identifierar komponenter som kortläsare, PIN-pad, display och NFC-läsare med hög precision.</p>
</div>
<div class="feature-card">
<div class="feature-icon"></div>
<h3>Förändringsanalys</h3>
<p>Systemet jämför med tidigare verifierade bilder och upptäcker avvikelser — extra enheter, modifierade komponenter, blockeringar.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚨</div>
<h3>Riskklassificering</h3>
<p>Grön, gul, orange eller röd klassificering baserat på avvikelsens art. Omedelbara larm vid hög risk.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Realtidsdashboard</h3>
<p>Översikt över alla objekt, aktiva larm, inspektionsfrekvens och efterlevnad. Klicka dig ner till enskilda observationer.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Avskräckning</h3>
<p>Kontinuerlig övervakning gör objekten mindre attraktiva för angripare. Risk-belöningskalkylen förskjuts.</p>
</div>
</div>
</div>
</section>
<section class="how-it-works">
<div class="container">
<h2>Processen</h2>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h3>Identifiera</h3>
<p>Varje objekt får unikt ID, GPS-position och referensbilder från godkända vinklar.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Insamla</h3>
<p>Zoomers fotograferar regelbundet. AI kontrollerar bildkvalitet och vinkel.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Analysera</h3>
<p>AI detekterar komponenter och jämför med baseline. Avvikelser flaggas.</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h3>Åtgärda</h3>
<p>Larm skickas vid hög risk. Före- och efterbilder bifogas. Ärende skapas.</p>
</div>
</div>
</div>
</section>
<section class="risk-levels">
<div class="container">
<h2>Riskklassificering</h2>
<div class="risk-grid">
<div class="risk-card green">
<div class="risk-indicator"></div>
<h3>Grön</h3>
<p>Inga förändringar. Fortsätt övervakning.</p>
</div>
<div class="risk-card yellow">
<div class="risk-indicator"></div>
<h3>Gul</h3>
<p>Mindre förändring. Kräver ny bild.</p>
</div>
<div class="risk-card orange">
<div class="risk-indicator"></div>
<h3>Orange</h3>
<p>Misstänkt avvikelse. Mänsklig granskning.</p>
</div>
<div class="risk-card red">
<div class="risk-indicator"></div>
<h3>Röd</h3>
<p>Hög risk. Omedelbart larm.</p>
</div>
</div>
</div>
</section>
<section class="use-cases">
<div class="container">
<h2>Användningsområden</h2>
<div class="use-case-grid">
<div class="use-case-card">
<h3>🏧 Bankomater</h3>
<p>Upptäck skimmers, overlays och manipulerade komponenter innan kunder drabbas.</p>
</div>
<div class="use-case-card">
<h3>⚡ Laddstationer</h3>
<p>Övervaka kabelskador, connector-tillstånd och betalterminaler.</p>
</div>
<div class="use-case-card">
<h3>🅿️ Parkeringsautomater</h3>
<p>Detektera blockeringar, manipulation och skador.</p>
</div>
<div class="use-case-card">
<h3>❤️ Hjärtstartare</h3>
<p>Säkerställ tillgänglighet och funktion. Upptäck skador eller stöld.</p>
</div>
<div class="use-case-card">
<h3>🚦 Trafiksignaler</h3>
<p>Övervaka skador, graffiti och funktionsfel.</p>
</div>
<div class="use-case-card">
<h3>🔌 Elskåp</h3>
<p>Upptäck obehörig åtkomst, skador och läckage.</p>
</div>
</div>
</div>
</section>
<section class="cta-section" id="contact">
<div class="container">
<h2>Skydda din infrastruktur</h2>
<p>Kontinuerlig visuell övervakning med AI. Från 50 USD per objekt och månad.</p>
<a href="mailto:vims@landvex.com" class="cta-button">Kontakta oss</a>
</div>
</section>
<footer>
<div class="footer-container" style="max-width:1200px;margin:0 auto;padding:48px 24px 32px;">
<!-- Main Footer Grid -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:48px;">
<!-- Column 1: Products -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Produkter</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/infrastructure-monitoring/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">VIMS</a></li>
<li><a href="/intelligence/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Intelligence</a></li>
<li><a href="/reality-alerts/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Reality Alerts</a></li>
<li><a href="/enterprise/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Enterprise</a></li>
<li><a href="/pilot/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Pilotprogram</a></li>
</ul>
</div>
<!-- Column 2: Solutions -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Lösningar</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/verticals/bridge-inspection/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Broinspektion</a></li>
<li><a href="/verticals/road-monitoring/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Vägövervakning</a></li>
<li><a href="/verticals/infrastructure/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Infrastruktur</a></li>
<li><a href="/verticals/utilities/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Utilities</a></li>
<li><a href="/use-cases/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Användningsfall</a></li>
</ul>
</div>
<!-- Column 3: Resources -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Resurser</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/blog/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Intelligence Insights</a></li>
<li><a href="/guides/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Guider</a></li>
<li><a href="/developers/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Developer API</a></li>
<li><a href="/status/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Systemstatus</a></li>
<li><a href="/reports/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Rapporter</a></li>
</ul>
</div>
<!-- Column 4: Company -->
<div>
<h4 style="font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;">Företag</h4>
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
<li><a href="/about/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Om oss</a></li>
<li><a href="/careers/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Karriär</a></li>
<li><a href="/press/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Press</a></li>
<li><a href="/contact/" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">Kontakt</a></li>
<li><a href="https://www.quixzoom.com" target="_blank" rel="noopener" style="font-size:13px;color:#6E6E73;text-decoration:none;transition:color 0.2s;">quiXzoom →</a></li>
</ul>
</div>
</div>
<!-- Divider -->
<div style="border-top:1px solid #E5E5E5;padding-top:32px;">
<!-- Legal & Compliance Row -->
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;margin-bottom:24px;">
<div style="display:flex;flex-wrap:wrap;gap:16px 24px;">
<a href="/privacy/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Privacy</a>
<a href="/terms/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Terms</a>
<a href="/cookie-policy/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Cookies</a>
<a href="/compliance/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Compliance</a>
<a href="/trust/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Trust Centre</a>
<a href="/dpa/" style="font-size:12px;color:#6E6E73;text-decoration:none;">DPA</a>
<a href="/sla/" style="font-size:12px;color:#6E6E73;text-decoration:none;">SLA</a>
<a href="/security/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Security</a>
<a href="/accessibility/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Accessibility</a>
<a href="/responsible-disclosure/" style="font-size:12px;color:#6E6E73;text-decoration:none;">Responsible Disclosure</a>
</div>
<div style="display:flex;gap:16px;">
<a href="https://www.linkedin.com/company/landvex" target="_blank" rel="noopener" style="color:#6E6E73;" title="LinkedIn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
</a>
<a href="https://x.com/landvex" target="_blank" rel="noopener" style="color:#6E6E73;" title="X">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.912-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
</div>
</div>
<!-- Company Info Row -->
<div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;">
<div>
<div style="font-size:12px;color:#86868B;line-height:1.6;">
<strong style="color:#0A0A0A;">Landvex Inc.</strong> · Houston, Texas · USA<br>
<strong style="color:#0A0A0A;">Landvex AB</strong> · Org.nr 559141-7042 · Stockholm, Sweden · EU<br>
<a href="mailto:contact@landvex.com" style="color:#86868B;text-decoration:none;">contact@landvex.com</a> ·
<a href="mailto:security@landvex.com" style="color:#86868B;text-decoration:none;">security@landvex.com</a>
</div>
<div style="font-size:11px;color:#86868B;margin-top:8px;line-height:1.5;">
Field data powered by <a href="https://www.quixzoom.com" style="color:#86868B;text-decoration:underline;">quiXzoom</a> ·
<a href="/data-lineage/" style="color:#86868B;text-decoration:underline;">Data Lineage</a> ·
<a href="/subprocessors/" style="color:#86868B;text-decoration:underline;">Sub-processors</a> ·
<a href="/methodology/" style="color:#86868B;text-decoration:underline;">Methodology</a>
</div>
</div>
<div style="font-size:12px;color:#86868B;">
© 2026 Landvex Inc / Landvex AB. All rights reserved.
</div>
</div>
</div>
</div>
</footer>
</body>
</html>