inou/portal/templates/landing_nl.tmpl

344 lines
11 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;
}
.hero-answer {
text-align: center;
font-size: 1.25rem;
font-weight: 400;
color: var(--text);
line-height: 1.8;
margin-top: 16px;
margin-bottom: 32px;
}
.hero-answer .inou { font-weight: 700; color: var(--accent); }
.hero-tagline {
text-align: center;
font-size: 1.3rem;
font-weight: 600;
color: var(--text);
margin-bottom: 32px;
}
.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-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-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;
}
.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); }
@media (max-width: 768px) {
.trust-card {
width: 100%;
margin-left: auto;
margin-right: auto; padding: 24px; }
.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; }
.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-answer"><span class="inou">inou</span> organiseert en deelt je gezondheidsdossier met je AI — veilig en privé.</div>
<div class="hero-tagline">Je gezondheid, begrepen.</div>
<div class="hero-cta">
{{if .Dossier}}<a href="/invite" class="btn btn-primary">Vriend uitnodigen</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 gezondheidsgegevens liggen verspreid over tientallen plekken — bij je cardioloog, je neuroloog, het lab, je smartwatch, je apps, je 23andMe. En dan is er nog alles wat alleen jij weet: wat je eet, wat je drinkt, welke supplementen je slikt. Je trainingsschema. Je klachten. Je doelen — of je nu zwanger wilt worden, traint voor een marathon, of gewoon minder moe wilt zijn.</p>
<p>Of je nu gezond bent en dat wilt blijven, worstelt met een lastige diagnose, of zorgt voor een familielid dat niet voor zichzelf kan opkomen — geen enkele arts ziet het complete plaatje. Geen enkel systeem verbindt het.</p>
<p>Maar jij hebt toegang tot alles. Je mist alleen de expertise om er iets van te maken.</p>
<p class="emphasis">Je AI wel. inou geeft het het complete 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 beelden.</div>
<div class="reality">Die werd in 10 minuten beoordeeld.</div>
</div>
<div class="story-pair">
<div class="data">Je genoom heeft miljoenen varianten.</div>
<div class="reality">Je leerde alleen je oogkleur en waar je voorouders vandaan kwamen.</div>
</div>
<div class="story-pair">
<div class="data">Je bloedonderzoek heeft 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 honderd verschillende 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 'geen bijzonderheden' op je MRI — heeft iemand echt alle 4.000 beelden 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 middagkoffie aan je slaapkwaliteit.</span>
<span>Je ijzergehalte aan je sportvermoeidheid.</span>
<span>Je genetica aan je brain fog.</span>
</div>
<div class="story-ai">
<span>Je AI vergeet niet.</span>
<span>Haast niet.</span>
<span>Vindt wat gemist werd.</span>
<span class="last">Specialiseert niet — ziet de complete jij.</span>
</div>
<div class="story-closing"><span class="inou">inou</span> laat je AI alles meewegen — elk beeld, elke marker, elke variant — verbindt alles 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 bouwden</h2>
<p class="story-prose">Je hebt jarenlang gezondheidsgegevens verzameld. Scans van het ziekenhuis. Bloedonderzoek van het lab. Uitslagen uit het patiëntenportaal. Data van je horloge. Misschien zelfs je DNA.</p>
<p class="story-prose">En dan is er nog 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, bij 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 vond. Je trainer heeft je bloedonderzoek niet gezien. Je huisarts heeft geen idee welke supplementen je slikt. En geen van hen heeft tijd om met je te zitten en de puzzel te leggen.</p>
<p class="story-prose"><strong>AI kan dat eindelijk.</strong> Het kan samenbrengen wat geen enkele expert ziet — en het je ook nog 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 — labs, beeldvorming, genetica, vitals, medicatie, supplementen — versleuteld, privé, en met niemand gedeeld. Je AI verbindt veilig. Je data blijft van jou.</p>
<div class="story-closing">Je gezondheid, begrepen.</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>
{{end}}