424 lines
12 KiB
Cheetah
424 lines
12 KiB
Cheetah
{{define "landing"}}
|
|
<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 - 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.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 - 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.05rem; margin-top: 16px;
|
|
margin-bottom: 32px; }
|
|
.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-answer"><span class="inou">inou</span> organizes and shares your health dossier with your AI — securely and privately.</div>
|
|
<div class="hero-tagline">Your health, understood.</div>
|
|
<div class="hero-cta">
|
|
{{if .Dossier}}<a href="/invite" class="btn btn-primary">Invite a friend</a>{{else}}<a href="/start" class="btn btn-primary">Sign in</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">You need AI for your health</h2>
|
|
|
|
<div class="story-prose warm">
|
|
<p>Your health data lives in a dozen different places — with your cardiologist, your neurologist, your lab, your watch, your apps, your 23andMe. And only you know the rest: what you eat, what you drink, what supplements you take. Your exercise routine. Your symptoms. Your goals — whether you're trying to get pregnant, training for a marathon, or just trying to feel less exhausted.</p>
|
|
|
|
<p>Whether you're healthy and want to stay that way, navigating a difficult diagnosis, or caring for a family member who can't advocate for themselves — no single doctor sees the full picture. No system connects it.</p>
|
|
|
|
<p>But <strong><em>you</em></strong> have access to all of it. You just don't have the expertise to make sense of it all.</p>
|
|
|
|
<p class="emphasis">Your AI does. inou gives it the full picture.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">The challenge</h2>
|
|
<div class="story-pair">
|
|
<div class="data">Your MRI has 4,000 slices.</div>
|
|
<div class="reality">It was read in 10 minutes.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Your genome has millions of variants.</div>
|
|
<div class="reality">All you learned was your eye color and where your ancestors came from.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Your blood work has dozens of markers.</div>
|
|
<div class="reality">Your doctor said "everything looks fine."</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Your watch tracked 10,000 hours of sleep.</div>
|
|
<div class="reality">Your trainer doesn't know it exists.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">You've tried a hundred different supplements.</div>
|
|
<div class="reality">Nobody asked which ones.</div>
|
|
</div>
|
|
|
|
<div class="story-transition">
|
|
The connections are there.<br>
|
|
They are just too complex for any one person to grasp.
|
|
</div>
|
|
|
|
<div class="story-gaps">
|
|
<span>Nobody knows how your body processes Warfarin — not even you.</span>
|
|
<span class="indent">But the answer might already be hiding in your 23andMe.</span>
|
|
<span>That 'unremarkable' on your MRI — did anyone look closely at all 4,000 slices?</span>
|
|
<span>Your thyroid is 'in range' — but nobody connected it to your fatigue, your weight, always being cold.</span>
|
|
</div>
|
|
|
|
<div class="story-connections">
|
|
<span>Nobody is connecting your afternoon caffeine to your sleep scores.</span>
|
|
<span>Your iron levels to your workout fatigue.</span>
|
|
<span>Your genetics to your brain fog.</span>
|
|
</div>
|
|
|
|
<div class="story-ai">
|
|
<span>Your AI doesn't forget.</span>
|
|
<span>Doesn't rush.</span>
|
|
<span>Finds what was missed.</span>
|
|
<span class="last">Doesn't specialize — sees the complete you.</span>
|
|
</div>
|
|
|
|
<div class="story-closing"><span class="inou">inou</span> lets your AI take it all into account — every slice, every marker, every variant — connect it all and finally give you answers no one else could.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">Why we built this</h2>
|
|
|
|
<p class="story-prose">You've collected years of health data. Scans from the hospital. Blood work from the lab. Results from your doctor's portal. Data from your watch. Maybe even your DNA.</p>
|
|
|
|
<p class="story-prose">And then there's everything only you know — your weight, your blood pressure, your training schedule, the supplements you take, the symptoms you've been meaning to mention.</p>
|
|
|
|
<p class="story-prose">It's all there — but scattered across systems that don't talk to each other, held by specialists who only see their piece, or locked in your own head.</p>
|
|
|
|
<p class="story-prose">Your cardiologist doesn't know what your neurologist found. Your trainer hasn't seen your blood work. Your doctor has no idea what supplements you are taking. And none of them have time to sit with you and connect the dots.</p>
|
|
|
|
<p class="story-prose"><strong>AI finally can.</strong> It can pull together what no single expert sees — and actually explain it to you.</p>
|
|
|
|
<p class="story-prose">But this data doesn't fit in a chat window. And the last thing you want is your medical history on someone else's servers, training their models.</p>
|
|
|
|
<p class="story-prose"><span class="inou">inou</span> brings it all together — labs, imaging, genetics, vitals, medications, supplements — encrypted, private, and shared with absolutely no one. Your AI connects securely. Your data stays yours.</p>
|
|
|
|
<div class="story-closing">Your health, understood.</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}}
|
|
<!-- -->
|
|
<!-- test -->
|