519 lines
16 KiB
Cheetah
519 lines
16 KiB
Cheetah
{{define "landing_es"}}
|
|
<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">Tu salud, entendida.</div>
|
|
<div class="hero-answer">Todos tus datos de salud — organizados, privados y listos para tu IA.</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">Haz seguimiento de tus tendencias de laboratorio con el tiempo — ve exactamente lo que tu IA ve cuando marca un cambio.</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">Invita a un amigo</a>{{else}}<a href="/start" class="btn btn-primary">Iniciar sesión</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">Necesitas IA para tu salud</h2>
|
|
|
|
<div class="story-prose warm">
|
|
<p>Tus datos de salud viven en una docena de lugares diferentes — con tu cardiólogo, tu neurólogo, tu laboratorio, tu reloj, tus aplicaciones, tu 23andMe. Y solo tú conoces el resto: lo que comes, lo que bebes, los suplementos que tomas. Tu rutina de ejercicio. Tus síntomas. Tus objetivos — ya sea que estés intentando quedar embarazada, entrenando para un maratón, o simplemente tratando de sentirte menos agotado.</p>
|
|
|
|
<p>Ya sea que estés sano y quieras mantenerte así, navegando un diagnóstico difícil, o cuidando a un familiar que no puede defenderse — ningún médico ve la imagen completa. Ningún sistema lo conecta.</p>
|
|
|
|
<p>Pero <strong><em>tú</em></strong> tienes acceso a todo ello. Simplemente no tienes la experiencia para darle sentido.</p>
|
|
|
|
<p class="emphasis">Tu IA sí la tiene. inou le da la imagen completa.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">El desafío</h2>
|
|
<div class="story-pair">
|
|
<div class="data">Tu resonancia magnética tiene 4,000 cortes.</div>
|
|
<div class="reality">Fue leída en 10 minutos.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Tu genoma tiene millones de variantes.</div>
|
|
<div class="reality">Lo único que aprendiste fue el color de tus ojos y de dónde vienen tus antepasados.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Tu análisis de sangre tiene docenas de marcadores.</div>
|
|
<div class="reality">Tu médico dijo "todo está bien".</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Tu reloj rastreó 10,000 horas de sueño.</div>
|
|
<div class="reality">Tu entrenador no sabe que existe.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Has intentado cientos de suplementos diferentes.</div>
|
|
<div class="reality">Nadie preguntó cuáles.</div>
|
|
</div>
|
|
|
|
<div class="story-transition">
|
|
Las conexiones están ahí.<br>
|
|
Simplemente son demasiado complejas para que una sola persona las comprenda.
|
|
</div>
|
|
|
|
<div class="story-gaps">
|
|
<span>Nadie sabe cómo tu cuerpo procesa la Warfarina — ni siquiera tú.</span>
|
|
<span class="indent">Pero la respuesta ya podría estar oculta en tu 23andMe.</span>
|
|
<span>Ese 'sin hallazgos significativos' en tu resonancia magnética — ¿alguien miró de cerca los 4,000 cortes?</span>
|
|
<span>Tu tiroides está 'dentro del rango' — pero nadie la conectó con tu fatiga, tu peso, siempre tener frío.</span>
|
|
</div>
|
|
|
|
<div class="story-connections">
|
|
<span>Nadie está conectando tu cafeína de la tarde con tus puntuaciones de sueño.</span>
|
|
<span>Tus niveles de hierro con tu fatiga durante el ejercicio.</span>
|
|
<span>Tu genética con tu niebla mental.</span>
|
|
</div>
|
|
|
|
<div class="story-ai">
|
|
<span>Tu IA no olvida.</span>
|
|
<span>No tiene prisa.</span>
|
|
<span>Encuentra lo que se perdió.</span>
|
|
<span class="last">No se especializa — te ve completo.</span>
|
|
</div>
|
|
|
|
<div class="story-closing"><span class="inou">inou</span> permite que tu IA lo tenga todo en cuenta — cada corte, cada marcador, cada variante — conecta todo y finalmente te da respuestas que nadie más podría darte.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">Por qué construimos esto</h2>
|
|
|
|
<p class="story-prose">Has recopilado años de datos de salud. Exploraciones del hospital. Análisis de sangre del laboratorio. Resultados del portal de tu médico. Datos de tu reloj. Quizás incluso tu ADN.</p>
|
|
|
|
<p class="story-prose">Y luego está todo lo que solo tú conoces — tu peso, tu presión arterial, tu calendario de entrenamiento, los suplementos que tomas, los síntomas que has estado pensando mencionar.</p>
|
|
|
|
<p class="story-prose">Todo está ahí — pero disperso en sistemas que no se hablan, en manos de especialistas que solo ven su parte, o bloqueado en tu propia cabeza.</p>
|
|
|
|
<p class="story-prose">Tu cardiólogo no sabe lo que encontró tu neurólogo. Tu entrenador no ha visto tus análisis de sangre. Tu médico no tiene idea de qué suplementos estás tomando. Y ninguno de ellos tiene tiempo para sentarse contigo y conectar los puntos.</p>
|
|
|
|
<p class="story-prose"><strong>La IA finalmente puede.</strong> Puede sintetizar lo que ningún experto individual ve — y realmente explicártelo.</p>
|
|
|
|
<p class="story-prose">Pero estos datos no caben en una ventana de chat. Y lo último que quieres es tu historial médico en los servidores de otra persona, entrenando sus modelos.</p>
|
|
|
|
<p class="story-prose"><span class="inou">inou</span> une todo — laboratorios, imágenes, genética, signos vitales, medicamentos, suplementos — encriptado, privado y compartido con absolutamente nadie. Tu IA se conecta de forma segura. Tus datos siguen siendo tuyos.</p>
|
|
|
|
<div class="story-closing">Tu salud, entendida.</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 = [
|
|
'Haz seguimiento de tus tendencias de laboratorio con el tiempo — ve exactamente lo que tu IA ve cuando marca un cambio.',
|
|
'Tus laboratorios, exploraciones y genoma en un solo lugar — explora todo a lo que tu IA tiene acceso.',
|
|
'Ve tu propia resonancia magnética — amplía los mismos cortes que analizó tu IA.',
|
|
'Tu exploración cerebral en 3D — navega cada plano, verifica cada hallazgo que hizo tu IA.',
|
|
'Tu IA conecta los puntos entre laboratorios y genoma — y lo explica en lenguaje sencillo.',
|
|
'Tu radiografía, resolución completa — amplía los hallazgos que marcó tu IA.'
|
|
];
|
|
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}} |