519 lines
16 KiB
Cheetah
519 lines
16 KiB
Cheetah
{{define "landing_fr"}}
|
|
<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">Ta santé, comprise.</div>
|
|
<div class="hero-answer">Toutes tes données de santé — organisées, privées, et prêtes pour ton 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">Suis l'évolution de tes analyses dans le temps — vois exactement ce que ton IA voit quand elle détecte un changement.</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">Inviter un ami</a>{{else}}<a href="/start" class="btn btn-primary">Se connecter</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">Tu as besoin d'une IA pour ta santé</h2>
|
|
|
|
<div class="story-prose warm">
|
|
<p>Tes données de santé sont dispersées dans une dizaines d'endroits différents — chez ton cardiologue, ton neurologue, ton laboratoire, ta montre, tes applications, ton 23andMe. Et toi seul connais le reste : ce que tu manges, ce que tu bois, les suppléments que tu prends. Ton programme d'exercice. Tes symptômes. Tes objectifs — que tu tries de tomber enceinte, de préparer un marathon, ou simplement d'essayer de te sentir moins épuisé.</p>
|
|
|
|
<p>Que tu sois en bonne santé et veuille le rester, que tu navigues un diagnostic difficile, ou que tu prennes soin d'un membre de famille qui ne peut pas s'exprimer pour lui-même — aucun médecin ne voit l'image complète. Aucun système ne connecte tout ça.</p>
|
|
|
|
<p>Mais <strong><em>toi</em></strong> tu as accès à tout ça. Tu n'as juste pas l'expertise pour donner sens à tout ça.</p>
|
|
|
|
<p class="emphasis">Ton IA, si. inou lui donne l'image complète.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">Le défi</h2>
|
|
<div class="story-pair">
|
|
<div class="data">Ton IRM a 4 000 coupes.</div>
|
|
<div class="reality">Elle a été analysée en 10 minutes.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Ton génome contient des millions de variants.</div>
|
|
<div class="reality">Tout ce que tu as appris, c'est la couleur de tes yeux et d'où viennent tes ancêtres.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Tes analyses de sang contiennent des dizaines de marqueurs.</div>
|
|
<div class="reality">Ton médecin a dit "tout va bien".</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Ta montre a suivi 10 000 heures de sommeil.</div>
|
|
<div class="reality">Ton coach ne sait même pas que ça existe.</div>
|
|
</div>
|
|
|
|
<div class="story-pair">
|
|
<div class="data">Tu as essayé des centaines de suppléments différents.</div>
|
|
<div class="reality">Personne n'a demandé lesquels.</div>
|
|
</div>
|
|
|
|
<div class="story-transition">
|
|
Les connexions existent.<br>
|
|
Elles sont juste trop complexes pour qu'une seule personne les saisisse.
|
|
</div>
|
|
|
|
<div class="story-gaps">
|
|
<span>Personne ne sait comment ton corps traite la Warfarine — pas même toi.</span>
|
|
<span class="indent">Mais la réponse est peut-être déjà cachée dans ton 23andMe.</span>
|
|
<span>Ce "sans particularité" sur ton IRM — quelqu'un a-t-il vraiment regardé les 4 000 coupes de près ?</span>
|
|
<span>Ta thyroïde est "dans les normes" — mais personne ne l'a connectée à ta fatigue, ton poids, le fait d'avoir toujours froid.</span>
|
|
</div>
|
|
|
|
<div class="story-connections">
|
|
<span>Personne ne connecte ta caféine de l'après-midi à tes scores de sommeil.</span>
|
|
<span>Ton taux de fer à ta fatigue à l'entraînement.</span>
|
|
<span>Ta génétique à ta brouillard mental.</span>
|
|
</div>
|
|
|
|
<div class="story-ai">
|
|
<span>Ton IA n'oublie pas.</span>
|
|
<span>Ne se dépêche pas.</span>
|
|
<span>Trouve ce qui a été manqué.</span>
|
|
<span class="last">Ne se spécialise pas — voit le toi complet.</span>
|
|
</div>
|
|
|
|
<div class="story-closing"><span class="inou">inou</span> permet à ton IA de tout prendre en compte — chaque coupe, chaque marqueur, chaque variant — tout connecter et enfin te donner des réponses que personne d'autre ne pourrait.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="landing-card">
|
|
<div class="story">
|
|
<h2 class="story-title">Pourquoi nous avons built this</h2>
|
|
|
|
<p class="story-prose">Tu as collecté des années de données de santé. Des scans de l'hôpital. Des analyses de sang du laboratoire. Les résultats du portail de ton médecin. Les données de ta montre. Peut-être même ton ADN.</p>
|
|
|
|
<p class="story-prose">Et puis il y a tout ce que toi seul sais — ton poids, ta tension artérielle, ton programme d'entraînement, les suppléments que tu prends, les symptômes que tu as mentionné.</p>
|
|
|
|
<p class="story-prose">Tout est là — mais dispersé à travers des systèmes qui ne communiquent pas entre eux, détenus par des spécialistes qui ne voient que leur partie, ou verrouillés dans ta propre tête.</p>
|
|
|
|
<p class="story-prose">Ton cardiologue ne sait pas ce que ton neurologue a trouvé. Ton coach n'a pas vu tes analyses de sang. Ton médecin n'a aucune idée des suppléments que tu prends. Et aucun d'eux n'a le temps de s'asseoir avec toi et de faire les liens.</p>
|
|
|
|
<p class="story-prose"><strong>L'IA enfin peut.</strong> Elle peut assembler ce qu'aucun expert seul ne voit — et te l'expliquer vraiment.</p>
|
|
|
|
<p class="story-prose">Mais ces données ne rentrent pas dans une fenêtre de chat. Et la dernière chose que tu veux, c'est ton historique médical sur les serveurs de quelqu'un d'autre, pour entraîner leurs modèles.</p>
|
|
|
|
<p class="story-prose"><span class="inou">inou</span> rassemble tout — laboratoires, imagerie, génétique, constantes vitales, médicaments, suppléments — chiffré, privé, et partagé avec absolument personne. Ton IA se connecte de manière sécurisée. Tes données restent tiennes.</p>
|
|
|
|
<div class="story-closing">Ta santé, comprise.</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 = [
|
|
'Suis l\'évolution de tes analyses dans le temps — vois exactement ce que ton IA voit quand elle détecte un changement.',
|
|
'Tes labos, tes scans et ton génome en un seul endroit — parcours tout ce à quoi ton IA a accès.',
|
|
'Vois ta propre IRM — zoome sur les mêmes coupes que ton IA a analysées.',
|
|
'Ton scan cérébral en 3D — navigue dans tous les plans, vérifie chaque finding que ton IA a fait.',
|
|
'Ton IA fait le lien entre les analyses et le génome — et t\'explique tout en langage clair.',
|
|
'Ta radio, pleine résolution — zoome sur les résultats que ton IA a signalés.'
|
|
];
|
|
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}} |