inou/portal/templates/landing_ja.tmpl

122 lines
11 KiB
Cheetah
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{define "landing_ja"}}
<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>はあなたの健康記録を整理し、AIと安全かつプライベートに共有します。</div>
<div class="hero-tagline">あなたの健康を、理解する。</div>
<div class="hero-cta">{{if .Dossier}}<a href="/invite" class="btn btn-primary">友達を招待</a>{{else}}<a href="/start" class="btn btn-primary">ログイン</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">健康管理にAIが必要な理由</h2>
<div class="story-prose warm">
<p>あなたの健康データは何十もの場所に散らばっています — 循環器科、神経科、検査機関、スマートウォッチ、アプリ、23andMe。そして残りを知っているのはあなただけ何を食べ、何を飲み、どんなサプリを取っているか。運動習慣。症状。目標 — 妊娠を目指しているのか、マラソンのトレーニング中なのか、単に疲れを減らしたいだけなのか。</p>
<p>健康を維持したい人も、難しい診断と向き合っている人も、自分で主張できない家族の世話をしている人も — どの医師も全体像を見ていません。すべてをつなぐシステムはありません。</p>
<p>でも、あなたはすべてにアクセスできます。足りないのは、それを理解する専門知識だけです。</p>
<p class="emphasis">あなたのAIにはそれがあります。inouは全体像を与えます。</p>
</div>
</div>
</div>
<div class="landing-card">
<div class="story">
<h2 class="story-title">課題</h2>
<div class="story-pair"><div class="data">あなたのMRIには4,000枚のスライスがあります。</div><div class="reality">10分で読影されました。</div></div>
<div class="story-pair"><div class="data">あなたのゲノムには数百万の変異があります。</div><div class="reality">わかったのは目の色と祖先のルーツだけでした。</div></div>
<div class="story-pair"><div class="data">あなたの血液検査には数十のマーカーがあります。</div><div class="reality">医師は「問題ありません」と言いました。</div></div>
<div class="story-pair"><div class="data">あなたの時計は10,000時間の睡眠を記録しています。</div><div class="reality">トレーナーはその存在を知りません。</div></div>
<div class="story-pair"><div class="data">あなたは100種類のサプリメントを試しました。</div><div class="reality">誰も何を試したか聞きませんでした。</div></div>
<div class="story-transition">つながりはそこにあります。<br>ただ、一人の人間には複雑すぎるのです。</div>
<div class="story-gaps">
<span>あなたの体がワーファリンをどう代謝するか、誰も知りません — あなた自身も。</span>
<span class="indent">でも答えは23andMeに隠れているかもしれません。</span>
<span>MRIの「異常なし」— 誰かが4,000枚すべてを本当に注意深く見ましたか</span>
<span>甲状腺は「基準値内」— でも誰もそれをあなたの疲労、体重、いつも寒いことと結びつけていません。</span>
</div>
<div class="story-connections">
<span>誰も午後のコーヒーと睡眠の質を結びつけていません。</span>
<span>鉄分レベルとトレーニング時の疲労を。</span>
<span>遺伝子とブレインフォグを。</span>
</div>
<div class="story-ai">
<span>あなたのAIは忘れません。</span>
<span>急ぎません。</span>
<span>見落とされたものを見つけます。</span>
<span class="last">専門分野を持たず — あなたを全体として見ます。</span>
</div>
<div class="story-closing"><span class="inou">inou</span>はあなたのAIにすべてを考慮させます — すべてのスライス、すべてのマーカー、すべての変異 — すべてをつなぎ、他の誰も答えられなかった答えをついに提供します。</div>
</div>
</div>
<div class="landing-card">
<div class="story">
<h2 class="story-title">私たちがこれを作った理由</h2>
<p class="story-prose">あなたは何年もの健康データを蓄積してきました。病院の検査。検査機関の結果。患者ポータルの記録。時計のデータ。DNAかもしれません。</p>
<p class="story-prose">そして、あなただけが知っていることがあります — 体重、血圧、トレーニングプログラム、飲んでいるサプリ、いつも言い忘れる症状。</p>
<p class="story-prose">すべてそこにあります — でも、互いに通信しないシステム、自分の専門分野しか見ない専門医、またはあなた自身の頭の中に閉じ込められています。</p>
<p class="story-prose">循環器科医は神経科医が何を見つけたか知りません。トレーナーは血液検査を見ていません。かかりつけ医はどんなサプリを飲んでいるか知りません。そして誰も、あなたと一緒に座って点をつなぐ時間がありません。</p>
<p class="story-prose"><strong>AIならついにできます。</strong>どの専門家単独では見えないものをまとめ — さらにそれを説明してくれます。</p>
<p class="story-prose">でも、このデータはチャットウィンドウに収まりません。そして最も避けたいのは、あなたの医療履歴が他人のサーバーに置かれ、そのモデルを訓練することです。</p>
<p class="story-prose"><span class="inou">inou</span>はすべてをまとめます — 検査、画像、遺伝子、バイタル、薬、サプリ — 暗号化され、プライベートで、誰とも共有されません。あなたのAIは安全に接続します。データはあなたのものです。</p>
<div class="story-closing">あなたの健康を、理解する。</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">プライバシー</a></div>
<span class="landing-footer-right"><span class="inou">inou</span> <span class="health">health</span></span>
</footer>
</div>
{{end}}