inou/templates/landing_sv.tmpl

122 lines
10 KiB
Cheetah

{{define "landing_sv"}}
<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 { padding: 24px; } .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 480px) { .trust-card { 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> organiserar och delar din hälsodossier med din AI — säkert och privat.</div>
<div class="hero-tagline">Din hälsa, förstådd.</div>
<div class="hero-cta">{{if .Dossier}}<a href="/invite" class="btn btn-primary">Bjud in en vän</a>{{else}}<a href="/start" class="btn btn-primary">Logga 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">Du behöver AI för din hälsa</h2>
<div class="story-prose warm">
<p>Dina hälsodata finns utspridda på dussintals ställen — hos din kardiolog, din neurolog, labbet, din smartklocka, dina appar, ditt 23andMe. Och bara du vet resten: vad du äter, vad du dricker, vilka kosttillskott du tar. Din träningsrutin. Dina symtom. Dina mål — oavsett om du försöker bli gravid, tränar för ett maraton, eller bara försöker känna dig mindre trött.</p>
<p>Oavsett om du är frisk och vill förbli det, navigerar en svår diagnos, eller tar hand om en familjemedlem som inte kan föra sin egen talan — ingen läkare ser hela bilden. Inget system kopplar ihop allt.</p>
<p>Men du har tillgång till allt. Du saknar bara expertisen att förstå allt.</p>
<p class="emphasis">Din AI har den. inou ger den hela bilden.</p>
</div>
</div>
</div>
<div class="landing-card">
<div class="story">
<h2 class="story-title">Utmaningen</h2>
<div class="story-pair"><div class="data">Din MR har 4 000 snitt.</div><div class="reality">Den lästes på 10 minuter.</div></div>
<div class="story-pair"><div class="data">Ditt genom har miljontals varianter.</div><div class="reality">Du fick bara veta din ögonfärg och var dina förfäder kom ifrån.</div></div>
<div class="story-pair"><div class="data">Ditt blodprov har dussintals markörer.</div><div class="reality">Din läkare sa "allt ser bra ut."</div></div>
<div class="story-pair"><div class="data">Din klocka har registrerat 10 000 timmars sömn.</div><div class="reality">Din tränare vet inte att den finns.</div></div>
<div class="story-pair"><div class="data">Du har provat hundra olika kosttillskott.</div><div class="reality">Ingen frågade vilka.</div></div>
<div class="story-transition">Kopplingarna finns där.<br>De är bara för komplexa för en enda person.</div>
<div class="story-gaps">
<span>Ingen vet hur din kropp metaboliserar Warfarin — inte ens du.</span>
<span class="indent">Men svaret kan redan vara gömt i ditt 23andMe.</span>
<span>Det där "utan anmärkning" på din MR — tittade någon verkligen noggrant på alla 4 000 snitt?</span>
<span>Din sköldkörtel är "inom normalvärden" — men ingen kopplade det till din trötthet, din vikt, att du alltid fryser.</span>
</div>
<div class="story-connections">
<span>Ingen kopplar ditt eftermiddagskaffe till din sömnkvalitet.</span>
<span>Dina järnnivåer till din trötthet vid träning.</span>
<span>Din genetik till din hjärndimma.</span>
</div>
<div class="story-ai">
<span>Din AI glömmer inte.</span>
<span>Stressar inte.</span>
<span>Hittar det som missades.</span>
<span class="last">Specialiserar sig inte — ser dig som helhet.</span>
</div>
<div class="story-closing"><span class="inou">inou</span> låter din AI ta hänsyn till allt — varje snitt, varje markör, varje variant — kopplar ihop allt och ger dig äntligen svar som ingen annan kunde ge.</div>
</div>
</div>
<div class="landing-card">
<div class="story">
<h2 class="story-title">Varför vi byggde detta</h2>
<p class="story-prose">Du har samlat år av hälsodata. Undersökningar från sjukhuset. Prover från labbet. Resultat från patientportalen. Data från din klocka. Kanske till och med ditt DNA.</p>
<p class="story-prose">Och sedan finns allt som bara du vet — din vikt, ditt blodtryck, din träningsrutin, kosttillskotten du tar, symtomen du alltid glömmer nämna.</p>
<p class="story-prose">Allt finns där — men utspritt i system som inte pratar med varandra, hos specialister som bara ser sin del, eller låst i ditt eget huvud.</p>
<p class="story-prose">Din kardiolog vet inte vad din neurolog hittade. Din tränare har inte sett dina blodprover. Din läkare har ingen aning om vilka kosttillskott du tar. Och ingen av dem har tid att sitta ner med dig och koppla ihop punkterna.</p>
<p class="story-prose"><strong>AI kan äntligen göra det.</strong> Den kan samla det som ingen enskild expert ser — och dessutom förklara det för dig.</p>
<p class="story-prose">Men dessa data får inte plats i ett chattfönster. Och det sista du vill är din sjukdomshistorik på någon annans servrar, för att träna deras modeller.</p>
<p class="story-prose"><span class="inou">inou</span> samlar allt — labb, bilddiagnostik, genetik, vitalparametrar, mediciner, kosttillskott — krypterat, privat, och inte delat med absolut någon. Din AI ansluter säkert. Dina data förblir dina.</p>
<div class="story-closing">Din hälsa, förstådd.</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>
<footer class="landing-footer">
<div class="landing-footer-left"><span>© 2025</span><a href="/privacy-policy">Integritet</a></div>
<span class="landing-footer-right"><span class="inou">inou</span> <span class="health">health</span></span>
</footer>
</div>
{{end}}