Files
boc/design/landvex-hero-v2.html
T
Bernt bae705aa97 ARCHITECTURE: NFC roadmap, edge AI, audit logging
- Add NFC ePassport roadmap (ICAO 9303, eIDAS)
- Add TensorFlow.js edge face detection (BlazeFace)
- Add structured audit logger (GDPR-compliant)
- Risk scoring support

Part of KYC Apple Native UX v1.1.0
2026-06-29 16:24:48 +00:00

738 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Landvex — Decision intelligence for the physical world." />
<title>Landvex — Decision Intelligence</title>
<link rel="canonical" href="https://www.landvex.com/">
<!-- IBM Plex Sans — precision typeface -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<style>
/* ═══════════════════════════════════════════════════════════════════════
LANDVEX DESIGN TOKENS — Light Theme, Perfect Symmetry
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Grayscale — pure progression */
--lv-white: #FFFFFF;
--lv-gray-50: #FAFAFA;
--lv-gray-100: #F0F0F0;
--lv-gray-200: #E0E0E0;
--lv-gray-300: #C8C8C8;
--lv-gray-400: #9A9A9A;
--lv-gray-500: #6E6E6E;
--lv-gray-600: #4A4A4A;
--lv-gray-700: #2D2D2D;
--lv-gray-800: #1A1A1A;
--lv-black: #0A0A0A;
/* Primary — deep, authoritative blue */
--lv-blue: #1B4FBF;
--lv-blue-dark: #0F2E6E;
--lv-blue-light: #E8EEFC;
--lv-blue-10: rgba(27, 79, 191, 0.10);
--lv-blue-20: rgba(27, 79, 191, 0.20);
/* Semantic */
--bg: var(--lv-white);
--bg-surface: var(--lv-gray-50);
--bg-elevated: var(--lv-white);
--text-primary: var(--lv-gray-800);
--text-secondary: var(--lv-gray-600);
--text-tertiary: var(--lv-gray-400);
--text-link: var(--lv-blue);
--border: var(--lv-gray-200);
--border-light: var(--lv-gray-100);
/* 8px grid */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;
--space-16: 128px;
/* Typography */
--font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--text-xs: 12px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 20px;
--text-xl: 32px;
--text-2xl: 48px;
--text-3xl: 64px;
/* Line heights */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
/* Easing */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* Shadows — minimal, structural */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.02);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04);
}
/* ═══════════════════════════════════════════════════════════════════════
RESET
═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
/* scroll-behavior disabled to prevent auto-scroll on page load */
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font);
font-size: var(--text-md);
line-height: var(--leading-normal);
color: var(--text-primary);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ═══════════════════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════
NAVIGATION — Light, clean, perfectly centered
═══════════════════════════════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-bottom: 1px solid var(--border-light);
height: 64px;
display: flex;
align-items: center;
}
.nav-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-4);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo — clean wordmark */
.logo {
display: flex;
align-items: center;
gap: var(--space-1);
text-decoration: none;
color: var(--lv-black);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.02em;
}
.logo-mark {
width: 28px;
height: 28px;
background: var(--lv-blue);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 13px;
font-weight: 700;
}
/* Nav links — perfectly centered */
.nav-links {
display: none;
list-style: none;
gap: 4px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav-links a {
display: block;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-radius: 6px;
transition: all 150ms var(--ease);
white-space: nowrap;
}
.nav-links a:hover {
color: var(--text-primary);
background: var(--bg-surface);
}
.nav-links a.active {
color: var(--lv-blue);
background: var(--lv-blue-10);
}
/* Nav actions */
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.nav-btn {
font-family: inherit;
font-size: var(--text-sm);
font-weight: 500;
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
transition: all 150ms var(--ease);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-btn-ghost {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
}
.nav-btn-ghost:hover {
color: var(--text-primary);
background: var(--bg-surface);
}
.nav-btn-primary {
background: var(--lv-blue);
border: 1px solid var(--lv-blue);
color: white;
}
.nav-btn-primary:hover {
background: var(--lv-blue-dark);
border-color: var(--lv-blue-dark);
box-shadow: var(--shadow-md);
}
/* ═══════════════════════════════════════════════════════════════════════
HERO — Perfect centering, perfect spacing
═══════════════════════════════════════════════════════════════════════ */
.hero {
padding-top: 64px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-16) var(--space-4) var(--space-12);
width: 100%;
}
/* Eyebrow — subtle, centered */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
animation: fadeUp 600ms var(--ease-out) 0.1s both;
}
.eyebrow-line {
width: 24px;
height: 1px;
background: var(--lv-blue);
}
.eyebrow-text {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lv-blue);
}
/* Headline — massive, perfectly centered */
.hero-headline {
font-size: clamp(36px, 6vw, var(--text-3xl));
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: -0.03em;
color: var(--lv-black);
max-width: 14ch;
margin: 0 auto var(--space-4);
animation: fadeUp 600ms var(--ease-out) 0.2s both;
}
/* Subheadline */
.hero-sub {
font-size: clamp(16px, 2vw, var(--text-lg));
font-weight: 400;
line-height: var(--leading-relaxed);
color: var(--text-secondary);
max-width: 55ch;
margin: 0 auto var(--space-6);
animation: fadeUp 600ms var(--ease-out) 0.3s both;
}
/* CTA Group — perfectly centered */
.cta-group {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-10);
animation: fadeUp 600ms var(--ease-out) 0.4s both;
}
.btn {
font-family: inherit;
font-size: var(--text-md);
font-weight: 500;
padding: 14px 28px;
border-radius: 8px;
cursor: pointer;
transition: all 200ms var(--ease);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 280px;
justify-content: center;
}
.btn-main {
background: var(--lv-blue);
border: 1.5px solid var(--lv-blue);
color: white;
}
.btn-main:hover {
background: var(--lv-blue-dark);
border-color: var(--lv-blue-dark);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
border: 1.5px solid var(--border);
color: var(--text-primary);
}
.btn-secondary:hover {
border-color: var(--lv-blue);
color: var(--lv-blue);
background: var(--lv-blue-10);
}
/* ═══════════════════════════════════════════════════════════════════════
FEATURE GRID — 4 layers, perfect symmetry
═══════════════════════════════════════════════════════════════════════ */
.layers-section {
width: 100%;
background: var(--bg-surface);
border-top: 1px solid var(--border-light);
padding: var(--space-12) var(--space-4);
}
.layers-inner {
max-width: 1200px;
margin: 0 auto;
}
.layers-header {
text-align: center;
margin-bottom: var(--space-8);
}
.layers-title {
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--lv-black);
margin-bottom: var(--space-2);
}
.layers-desc {
font-size: var(--text-md);
color: var(--text-secondary);
max-width: 50ch;
margin: 0 auto;
}
/* 4-column grid */
.layers-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
.layer-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: var(--space-5);
text-align: left;
transition: all 200ms var(--ease);
}
.layer-card:hover {
border-color: var(--lv-blue-20);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.layer-number {
font-size: var(--text-xs);
font-weight: 700;
color: var(--lv-blue);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.layer-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--lv-black);
margin-bottom: var(--space-1);
letter-spacing: -0.01em;
}
.layer-desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
/* ═══════════════════════════════════════════════════════════════════════
TRUST BAR — Clean, structured
═══════════════════════════════════════════════════════════════════════ */
.trust-section {
width: 100%;
background: var(--bg);
border-top: 1px solid var(--border-light);
padding: var(--space-8) var(--space-4);
}
.trust-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.trust-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
}
.trust-icon {
width: 40px;
height: 40px;
background: var(--lv-blue-10);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trust-icon svg {
width: 20px;
height: 20px;
color: var(--lv-blue);
}
.trust-content strong {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--lv-black);
margin-bottom: 4px;
}
.trust-content span {
font-size: var(--text-xs);
color: var(--text-tertiary);
line-height: var(--leading-normal);
}
/* ═══════════════════════════════════════════════════════════════════════
FOOTER — Minimal
═══════════════════════════════════════════════════════════════════════ */
.footer {
width: 100%;
background: var(--lv-black);
color: var(--lv-gray-400);
padding: var(--space-6) var(--space-4);
text-align: center;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-logo {
color: var(--lv-white);
font-weight: 600;
font-size: 16px;
margin-bottom: var(--space-2);
}
.footer-copy {
font-size: var(--text-xs);
color: var(--lv-gray-500);
}
/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
.nav-links {
display: flex;
}
.cta-group {
flex-direction: row;
justify-content: center;
}
.btn {
width: auto;
max-width: none;
}
.layers-grid {
grid-template-columns: repeat(2, 1fr);
}
.trust-inner {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.nav-inner,
.hero-inner,
.layers-inner,
.trust-inner,
.footer-inner {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.layers-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
</head>
<body>
<!-- NAVIGATION -->
<nav class="nav" aria-label="Main">
<div class="nav-inner">
<a href="/" class="logo">
<span class="logo-mark">L</span>
Landvex
</a>
<ul class="nav-links">
<li><a href="#how-it-works">How it works</a></li>
<li><a href="#verticals">Verticals</a></li>
<li><a href="#intelligence">Intelligence</a></li>
<li><a href="#cities">Cities</a></li>
<li><a href="#insights">Insights</a></li>
<li><a href="#enterprise">Enterprise</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-actions">
<a href="#signin" class="nav-btn nav-btn-ghost">Sign in</a>
<a href="#demo" class="nav-btn nav-btn-primary">Request Demo</a>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero" aria-labelledby="hero-title">
<div class="hero-inner">
<div class="eyebrow">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Decision Intelligence for the Physical World</span>
<span class="eyebrow-line"></span>
</div>
<h1 class="hero-headline" id="hero-title">
Landvex — Four Layers. One Answer.
</h1>
<p class="hero-sub">
Landvex turns field observations into the decision you need to make —
whether to invest, insure, maintain, or move. Not data for its own sake.
Intelligence that leads to action.
</p>
<div class="cta-group">
<a href="#insurance" class="btn btn-main">
Insurance intelligence →
</a>
<a href="#pilot" class="btn btn-secondary">
Request a pilot →
</a>
<a href="#how" class="btn btn-secondary">
See how we work →
</a>
</div>
</div>
</section>
<!-- FOUR LAYERS -->
<section class="layers-section" id="how-it-works" aria-labelledby="layers-title">
<div class="layers-inner">
<div class="layers-header">
<h2 class="layers-title" id="layers-title">The Four Layers</h2>
<p class="layers-desc">
From raw observation to actionable intelligence — every step validated, every contradiction flagged.
</p>
</div>
<div class="layers-grid">
<article class="layer-card">
<div class="layer-number">Layer 01</div>
<h3 class="layer-title">Reality Collection</h3>
<p class="layer-desc">
Verified field observations from trained Zoomers. Every data point geolocated, timestamped, and quality-scored.
</p>
</article>
<article class="layer-card">
<div class="layer-number">Layer 02</div>
<h3 class="layer-title">Contradiction Detection</h3>
<p class="layer-desc">
AI-powered analysis that flags discrepancies between reported and observed reality. Nothing slips through.
</p>
</article>
<article class="layer-card">
<div class="layer-number">Layer 03</div>
<h3 class="layer-title">Intelligence Synthesis</h3>
<p class="layer-desc">
Multi-source fusion combining field data, official records, and external signals into unified intelligence.
</p>
</article>
<article class="layer-card">
<div class="layer-number">Layer 04</div>
<h3 class="layer-title">Decision Ready</h3>
<p class="layer-desc">
Actionable recommendations with confidence intervals. Invest, insure, maintain, or move — with certainty.
</p>
</article>
</div>
</div>
</section>
<!-- TRUST -->
<section class="trust-section" aria-label="Trust indicators">
<div class="trust-inner">
<div class="trust-item">
<div class="trust-icon">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M10 2L3 6v5c0 4.418 3.134 8.55 7 9.5C16.866 19.55 20 15.418 20 11V6l-7-4H10z"/>
<path d="M7 10l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="trust-content">
<strong>SOC 2 Type II</strong>
<span>Annual independent security audit. Full report under NDA.</span>
</div>
</div>
<div class="trust-item">
<div class="trust-icon">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="3" width="16" height="14" rx="1"/>
<path d="M6 8h8M6 11h5" stroke-linecap="round"/>
</svg>
</div>
<div class="trust-content">
<strong>GDPR Compliant</strong>
<span>EU data residency. DPA available on request.</span>
</div>
</div>
<div class="trust-item">
<div class="trust-icon">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="10" cy="10" r="8"/>
<path d="M10 6v4l3 2" stroke-linecap="round"/>
</svg>
</div>
<div class="trust-content">
<strong>99.9% Uptime</strong>
<span>Contractual SLA with financial penalties.</span>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-logo">Landvex</div>
<p class="footer-copy">© 2026 Landvex AB. Decision intelligence for the physical world.</p>
</div>
</footer>
</body>
</html>