520 lines
16 KiB
Cheetah
520 lines
16 KiB
Cheetah
{{define "landing_nl"}}
|
|
<style>
|
|
|
|
.landing-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 48px;
|
|
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Carousel */
|
|
.carousel {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.carousel-track {
|
|
display: flex;
|
|
height: 100%;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
.carousel-slide {
|
|
min-width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.carousel-dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.carousel-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--border);
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.carousel-dot.active {
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* Hero - Block 1 */
|
|
.hero-sources {
|
|
|
|
font-size: 1.1rem;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
line-height: 1.9;
|
|
margin-bottom: 32px;
|
|
}
|
|
.hero-sources span { display: block; }
|
|
.hero-sources .different {
|
|
|
|
|
|
}
|
|
|
|
.hero-pivot {
|
|
font-size: 1.15rem;
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
line-height: 1.8;
|
|
margin-bottom: 32px;
|
|
|
|
}
|
|
.hero-pivot span { display: block; }
|
|
.hero-pivot .emphasis {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.hero-answer {
|
|
text-align: center;
|
|
font-size: 1.7rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.hero-answer .inou {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.hero-tagline {
|
|
text-align: center;
|
|
font-size: 2.8rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.carousel-caption {
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
min-height: 3em;
|
|
padding: 0 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero-cta { margin-bottom: 0; text-align: center; }
|
|
.hero-cta .btn {
|
|
padding: 18px 56px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Story - Block 2 */
|
|
.story-prose.warm {
|
|
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
color: var(--text);
|
|
}
|
|
.story-prose.warm p {
|
|
margin-bottom: 20px;
|
|
}
|
|
.story-prose.warm .emphasis {
|
|
font-weight: 600;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.story-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.story-pair {
|
|
margin-bottom: 32px;
|
|
}
|
|
.story-pair .data {
|
|
font-size: 1.1rem;
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
.story-pair .reality {
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.story-transition {
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
line-height: 1.8;
|
|
margin: 32px 0;
|
|
padding: 24px 0;
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.story-gaps {
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
line-height: 1.8;
|
|
margin-bottom: 32px;
|
|
}
|
|
.story-gaps span { display: block; }
|
|
.story-gaps .indent { font-style: italic; }
|
|
|
|
.story-connections {
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
line-height: 1.8;
|
|
margin-bottom: 32px;
|
|
}
|
|
.story-connections span { display: block; }
|
|
|
|
.story-ai {
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
line-height: 1.8;
|
|
margin-bottom: 32px;
|
|
}
|
|
.story-ai span { display: block; }
|
|
.story-ai .last {
|
|
font-style: italic;
|
|
}
|
|
|
|
.story-prose {
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
line-height: 1.8;
|
|
margin-bottom: 20px;
|
|
}
|
|
.story-prose:last-of-type { margin-bottom: 32px; }
|
|
.story-prose strong { font-weight: 600; color: var(--text); }
|
|
.story-prose .inou { font-weight: 700; color: var(--accent); }
|
|
|
|
.story-closing {
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
color: var(--text);
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.story-closing .inou {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Trust section */
|
|
.trust-card {
|
|
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 32px 48px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.trust-card .section-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 24px;
|
|
}
|
|
.trust-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
}
|
|
.trust-item {
|
|
font-size: 0.9rem;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
.trust-item strong {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Footer */
|
|
.landing-footer {
|
|
padding: 16px 0;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.landing-footer-left {
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
.landing-footer-left a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
}
|
|
.landing-footer-left a:hover { color: var(--accent); }
|
|
.landing-footer-right { font-size: 1rem; }
|
|
.landing-footer-right .inou {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
.landing-footer-right .health {
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 768px) {
|
|
.trust-card {
|
|
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto; padding: 24px; }
|
|
.hero-sources {
|
|
font-size: 1rem; line-height: 1.8; margin-bottom: 32px; }
|
|
.hero-pivot { font-size: 1.1rem; margin-bottom: 32px;
|
|
}
|
|
.hero-pivot .emphasis { font-size: 1.3rem; }
|
|
.hero-answer {
|
|
text-align: center; font-size: 1.2rem; margin-top: 16px;
|
|
margin-bottom: 8px; }
|
|
.hero-tagline { font-size: 2rem; margin-bottom: 8px; }
|
|
.carousel-caption { font-size: 0.85rem; }
|
|
.hero-cta .btn { padding: 14px 40px; }
|
|
.story-pair .data { font-size: 1rem; }
|
|
.story-pair .reality { font-size: 0.95rem; }
|
|
.trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.trust-card {
|
|
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto; padding: 20px 16px; }
|
|
.hero-sources {
|
|
font-size: 0.95rem; line-height: 1.9; }
|
|
.hero-pivot { font-size: 1rem; }
|
|
.hero-pivot .emphasis { font-size: 1.2rem; }
|
|
.story-pair { margin-bottom: 24px; }
|
|
.trust-grid { grid-template-columns: 1fr; gap: 20px; }
|
|
.landing-footer { flex-direction: column; gap: 12px; text-align: center; }
|
|
.landing-footer-left { flex-direction: column; gap: 8px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="sg-container">
|
|
|
|
<div class="landing-card">
|
|
<div class="hero">
|
|
<div class="hero-tagline">Je gezondheid, doorgrond.</div>
|
|
<div class="hero-answer">Al je gezondheidsdata — georganiseerd, privé, en klaar voor je AI.</div>
|
|
<div class="carousel">
|
|
<div class="carousel-track">
|
|
<div class="carousel-slide" style="background-image: url('/static/carousel-1.webp')"></div>
|
|
<div class="carousel-slide" style="background-image: url('/static/carousel-2.webp')"></div>
|
|
<div class="carousel-slide" style="background-image: url('/static/carousel-3.webp')"></div>
|
|
<div class="carousel-slide" style="background-image: url('/static/carousel-4.webp')"></div>
|
|
<div class="carousel-slide" style="background-image: url('/static/carousel-5.webp')"></div>
|
|
<div class="carousel-slide" style="background-image: url('/static/carousel-6.webp')"></div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-caption" id="carousel-caption">Volg je labtrends over tijd — zie precies wat je AI ziet wanneer het een verandering signaleert.</div>
|
|
<div class="carousel-dots">
|
|
<button class="carousel-dot active" data-index="0"></button>
|
|
<button class="carousel-dot" data-index="1"></button>
|
|
<button class="carousel-dot" data-index="2"></button>
|
|
<button class="carousel-dot" data-index="3"></button>
|
|
<button class="carousel-dot" data-index="4"></button>
|
|
<button class="carousel-dot" data-index="5"></button>
|
|
</div>
|
|
<div class="hero-cta">
|
|
{{if .Dossier}}<a href="/invite" class="btn btn-primary">Nodig een vriend uit</a>{{else}}<a href="/start" class="btn btn-primary">Inloggen</a>{{end}}
|
|
{{if .Error}}<div class="error" style="margin-top: 24px;">{{.Error}}</div>{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">Je hebt AI nodig voor je gezondheid</h2>
|
|
|
|
<div class="story-prose warm">
|
|
<p>Je gezondheidsdata ligt verspreid over tientallen plekken — bij je cardioloog, je neuroloog, je lab, je horloge, je apps, je 23andMe. En alleen jij weet de rest: wat je eet, wat je drinkt, welke supplementen je slikt. Je trainingsschema. Je klachten. Je doelen — of je nu zwanger probeert te worden, traint voor een marathon, of gewoon minder moe wilt zijn.</p>
|
|
|
|
<p>Of je nu gezond bent en dat wilt blijven, midden in een lastig diagnosetraject zit, of zorgt voor een familielid dat niet voor zichzelf kan opkomen — geen enkele arts ziet het volledige plaatje. Geen enkel systeem verbindt het.</p>
|
|
|
|
<p>Maar <strong><em>jij</em></strong> hebt toegang tot alles. Je hebt alleen niet de expertise om er iets van te maken.</p>
|
|
|
|
<p class="emphasis">Je AI wel. inou geeft het het volledige plaatje.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">De uitdaging</h2>
|
|
<div class="story-pair">
|
|
<div class="data">Je MRI heeft 4.000 slices.</div>
|
|
<div class="reality">Hij werd in 10 minuten beoordeeld.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Je genoom bevat miljoenen varianten.</div>
|
|
<div class="reality">Je hoorde alleen je oogkleur en waar je voorouders vandaan kwamen.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Je bloedonderzoek bevat tientallen markers.</div>
|
|
<div class="reality">Je arts zei "alles ziet er goed uit."</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Je horloge heeft 10.000 uur slaap bijgehouden.</div>
|
|
<div class="reality">Je trainer weet niet dat het bestaat.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Je hebt honderden supplementen geprobeerd.</div>
|
|
<div class="reality">Niemand vroeg welke.</div>
|
|
</div>
|
|
|
|
<div class="story-transition">
|
|
De verbanden zijn er.<br>
|
|
Ze zijn alleen te complex voor één persoon om te overzien.
|
|
</div>
|
|
|
|
<div class="story-gaps">
|
|
<span>Niemand weet hoe jouw lichaam Warfarine verwerkt — jijzelf ook niet.</span>
|
|
<span class="indent">Maar het antwoord zit misschien al in je 23andMe.</span>
|
|
<span>Die 'niet-afwijkend' op je MRI — heeft iemand echt alle 4.000 slices bekeken?</span>
|
|
<span>Je schildklier is 'binnen de norm' — maar niemand legde het verband met je vermoeidheid, je gewicht, dat je het altijd koud hebt.</span>
|
|
</div>
|
|
|
|
<div class="story-connections">
|
|
<span>Niemand verbindt je middagcafeïne met je slaapscores.</span>
|
|
<span>Je ijzerwaarden met je trainingsvermoeidheid.</span>
|
|
<span>Je genetica met je brain fog.</span>
|
|
</div>
|
|
|
|
<div class="story-ai">
|
|
<span>Je AI vergeet niets.</span>
|
|
<span>Heeft geen haast.</span>
|
|
<span>Vindt wat gemist is.</span>
|
|
<span class="last">Specialiseert niet — ziet het complete plaatje.</span>
|
|
</div>
|
|
|
|
<div class="story-closing"><span class="inou">inou</span> laat je AI alles meewegen — elke slice, elke marker, elke variant — verbindt het allemaal en geeft je eindelijk antwoorden die niemand anders kon geven.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">Waarom we dit gebouwd hebben</h2>
|
|
|
|
<p class="story-prose">Je hebt jarenlang gezondheidsdata verzameld. Scans van het ziekenhuis. Bloedonderzoek van het lab. Uitslagen via het patiëntenportaal. Data van je horloge. Misschien zelfs je DNA.</p>
|
|
|
|
<p class="story-prose">En dan is er alles wat alleen jij weet — je gewicht, je bloeddruk, je trainingsschema, de supplementen die je slikt, de klachten die je steeds vergeet te noemen.</p>
|
|
|
|
<p class="story-prose">Het is er allemaal — maar verspreid over systemen die niet met elkaar praten, vastgehouden door specialisten die alleen hun eigen stukje zien, of opgesloten in je eigen hoofd.</p>
|
|
|
|
<p class="story-prose">Je cardioloog weet niet wat je neuroloog gevonden heeft. Je trainer heeft je bloedonderzoek niet gezien. Je huisarts heeft geen idee welke supplementen je slikt. En geen van hen heeft de tijd om met je te zitten en de puzzelstukjes te verbinden.</p>
|
|
|
|
<p class="story-prose"><strong>AI kan dat eindelijk wel.</strong> Het kan samenbrengen wat geen enkele specialist overziet — en het je ook nog eens uitleggen.</p>
|
|
|
|
<p class="story-prose">Maar deze data past niet in een chatvenster. En het laatste wat je wilt is je medische geschiedenis op andermans servers, gebruikt om hun modellen te trainen.</p>
|
|
|
|
<p class="story-prose"><span class="inou">inou</span> brengt alles samen — labresultaten, beeldvorming, genetica, vitale functies, medicatie, supplementen — versleuteld, privé, en met absoluut niemand gedeeld. Je AI maakt een beveiligde verbinding. Je data blijft van jou.</p>
|
|
|
|
<div class="story-closing">Je gezondheid, doorgrond.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trust-card">
|
|
<div class="section-label">{{.T.data_yours}}</div>
|
|
<div class="trust-grid">
|
|
<div class="trust-item">
|
|
<strong>{{.T.never_training}}</strong>
|
|
{{.T.never_training_desc}}
|
|
</div>
|
|
<div class="trust-item">
|
|
<strong>{{.T.never_shared}}</strong>
|
|
{{.T.never_shared_desc}}
|
|
</div>
|
|
<div class="trust-item">
|
|
<strong>{{.T.encrypted}}</strong>
|
|
{{.T.encrypted_desc}}
|
|
</div>
|
|
<div class="trust-item">
|
|
<strong>{{.T.delete}}</strong>
|
|
{{.T.delete_desc}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "footer"}}
|
|
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var track = document.querySelector('.carousel-track');
|
|
var dots = document.querySelectorAll('.carousel-dot');
|
|
var caption = document.getElementById('carousel-caption');
|
|
var captions = [
|
|
'Volg je labtrends over tijd \u2014 zie precies wat je AI ziet wanneer het een verandering signaleert.',
|
|
'Je labs, scans en genoom op \u00e9\u00e9n plek \u2014 bekijk alles waar je AI toegang toe heeft.',
|
|
'Bekijk je eigen MRI \u2014 zoom in op dezelfde slices die je AI geanalyseerd heeft.',
|
|
'Je hersenscan in 3D \u2014 navigeer door elk vlak, controleer elke bevinding van je AI.',
|
|
'Je AI legt verbanden tussen labs en genoom \u2014 en legt het uit in begrijpelijke taal.',
|
|
'Je r\u00f6ntgenfoto, volledige resolutie \u2014 zoom in op de bevindingen die je AI heeft gesignaleerd.'
|
|
];
|
|
var count = dots.length;
|
|
var current = 0;
|
|
function go(i) {
|
|
current = i;
|
|
track.style.transform = 'translateX(-' + (i * 100) + '%)';
|
|
dots.forEach(function(d, j) { d.classList.toggle('active', j === i); });
|
|
caption.textContent = captions[i];
|
|
}
|
|
dots.forEach(function(d) {
|
|
d.addEventListener('click', function() { go(+d.dataset.index); });
|
|
});
|
|
setInterval(function() { go((current + 1) % count); }, 8000);
|
|
})();
|
|
</script>
|
|
{{end}}
|