From 2a8ef4b7dcbcad393eae8940e7329c34bf7f13c7 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 4 Feb 2026 13:54:24 +0700
Subject: [PATCH] Add whitepaper page

---
 app/pages/whitepaper.vue | 716 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 716 insertions(+)
 create mode 100644 app/pages/whitepaper.vue

diff --git a/app/pages/whitepaper.vue b/app/pages/whitepaper.vue
new file mode 100644
index 0000000..95b25c7
--- /dev/null
+++ b/app/pages/whitepaper.vue
@@ -0,0 +1,716 @@
+<template>
+  <div class="whitepaper">
+    <div class="grain" aria-hidden="true"></div>
+    <header class="hero">
+      <nav class="nav">
+        <div class="logo">Optovia</div>
+        <div class="nav-actions">
+          <button
+            class="lang-toggle"
+            :class="{ active: lang === 'ru' }"
+            @click="lang = 'ru'"
+          >
+            RU
+          </button>
+          <button
+            class="lang-toggle"
+            :class="{ active: lang === 'en' }"
+            @click="lang = 'en'"
+          >
+            EN
+          </button>
+          <button class="cta">Запросить демо</button>
+        </div>
+      </nav>
+
+      <div class="hero-grid">
+        <div class="hero-text">
+          <div class="eyebrow">White Paper</div>
+          <h1>Инфраструктура цифровых инструментов, которая стирает границы</h1>
+          <p class="lead">
+            Optovia — платформа, которая помогает участникам рынка получать
+            первоклассные цифровые инструменты и выстраивать процессы KYC и
+            мониторинга как единую, прозрачную систему.
+          </p>
+          <div class="hero-actions">
+            <button class="cta">Скачать PDF</button>
+            <button class="ghost">Связаться с командой</button>
+          </div>
+          <div class="hero-meta">
+            <div class="meta-card">
+              <span class="meta-title">Фокус</span>
+              <span class="meta-value">KYC / Monitoring</span>
+            </div>
+            <div class="meta-card">
+              <span class="meta-title">Формат</span>
+              <span class="meta-value">B2B / API-first</span>
+            </div>
+            <div class="meta-card">
+              <span class="meta-title">Стадия</span>
+              <span class="meta-value">Private beta</span>
+            </div>
+          </div>
+        </div>
+        <div class="hero-visual">
+          <div class="card flow-card">
+            <div class="card-header">
+              <span>Flow View</span>
+              <span class="pill">Live</span>
+            </div>
+            <div class="flow">
+              <div class="flow-node success">User</div>
+              <div class="flow-node success">Team</div>
+              <div class="flow-node success">KYC App</div>
+              <div class="flow-node warn">Temporo</div>
+              <div class="flow-node success">Business</div>
+              <div class="flow-node success">KSC Monitoring</div>
+              <div class="flow-node success">Daxter</div>
+            </div>
+            <div class="flow-footer">
+              <div>
+                <span class="badge ok"></span>В синке: 996
+              </div>
+              <div>
+                <span class="badge bad"></span>Не в синке: 4
+              </div>
+            </div>
+          </div>
+          <div class="card stats-card">
+            <div class="stat">
+              <span class="label">Всего профилей</span>
+              <span class="value">1 000</span>
+            </div>
+            <div class="stat">
+              <span class="label">Ошибки</span>
+              <span class="value error">4</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <section v-if="lang === 'ru'" class="section" id="ru">
+        <div class="section-header">
+          <h2>О платформе</h2>
+          <p>
+            Мы строим инфраструктуру, которая делает цифровые процессы понятными,
+            управляемыми и доверенными. Optovia связывает команды, данные и
+            комплаенс в единый контур.
+          </p>
+        </div>
+        <div class="grid two">
+          <div class="card">
+            <h3>Проблема рынка</h3>
+            <ul>
+              <li>Сложные KYC-процессы разорваны по системам</li>
+              <li>Низкая наблюдаемость и нет единого статуса</li>
+              <li>Высокая доля ручных действий и человеческий фактор</li>
+            </ul>
+          </div>
+          <div class="card">
+            <h3>Наше решение</h3>
+            <ul>
+              <li>Единый пайплайн KYC и мониторинга</li>
+              <li>Прозрачный статус актуальности данных</li>
+              <li>API-first подход и гибкие интеграции</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'ru'" class="section">
+        <div class="section-header">
+          <h2>Как это работает</h2>
+          <p>
+            Прозрачный процесс с контролем статусов и истории на каждом шаге.
+          </p>
+        </div>
+        <div class="timeline">
+          <div class="step">
+            <div class="dot"></div>
+            <div>
+              <h4>Создание команды</h4>
+              <p>Пользователь создает команду и инициирует KYC application.</p>
+            </div>
+          </div>
+          <div class="step">
+            <div class="dot"></div>
+            <div>
+              <h4>Процессинг</h4>
+              <p>Temporo запускает процедуру и передает управление бизнес-этапам.</p>
+            </div>
+          </div>
+          <div class="step">
+            <div class="dot"></div>
+            <div>
+              <h4>Мониторинг</h4>
+              <p>KSC Monitoring фиксирует состояние, Daxter следит за актуальностью.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'ru'" class="section">
+        <div class="section-header">
+          <h2>Технологии</h2>
+          <p>Сильная инженерия, измеримость и надежность.</p>
+        </div>
+        <div class="grid three">
+          <div class="card">
+            <h3>Архитектура</h3>
+            <p>Микросервисы, событийная оркестрация, масштабирование по нагрузке.</p>
+          </div>
+          <div class="card">
+            <h3>Наблюдаемость</h3>
+            <p>Метрики, трассировка, алерты. Понимаем, где узкие места.</p>
+          </div>
+          <div class="card">
+            <h3>Данные</h3>
+            <p>PostgreSQL и MongoDB как основа для надежного хранения и поиска.</p>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'ru'" class="section">
+        <div class="section-header">
+          <h2>Безопасность</h2>
+          <p>Доступ, токены и аудит — встроены в архитектуру.</p>
+        </div>
+        <div class="grid two">
+          <div class="card">
+            <h3>Контроль доступа</h3>
+            <ul>
+              <li>m2m-токены</li>
+              <li>Изоляция сервисов</li>
+              <li>Аудит действий</li>
+            </ul>
+          </div>
+          <div class="card">
+            <h3>Надежность</h3>
+            <ul>
+              <li>Failover и очереди</li>
+              <li>Восстановление процессов</li>
+              <li>История событий</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'ru'" class="section">
+        <div class="section-header">
+          <h2>Roadmap</h2>
+          <p>Черновик, дополним вместе.</p>
+        </div>
+        <div class="grid three">
+          <div class="card">
+            <h3>Q1</h3>
+            <p>Private beta + пилоты с партнерами.</p>
+          </div>
+          <div class="card">
+            <h3>Q2</h3>
+            <p>Автоматизация мониторинга, алерты, отчеты.</p>
+          </div>
+          <div class="card">
+            <h3>Q3</h3>
+            <p>Масштабирование и выход в новые вертикали.</p>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'en'" class="section" id="en">
+        <div class="section-header">
+          <h2>About the platform</h2>
+          <p>
+            We build infrastructure that makes digital processes transparent and
+            trusted. Optovia connects teams, data, and compliance into a single
+            system.
+          </p>
+        </div>
+        <div class="grid two">
+          <div class="card">
+            <h3>Market problem</h3>
+            <ul>
+              <li>KYC processes are fragmented</li>
+              <li>Low observability and no single status view</li>
+              <li>Heavy manual work and human error</li>
+            </ul>
+          </div>
+          <div class="card">
+            <h3>Our solution</h3>
+            <ul>
+              <li>Unified KYC & monitoring pipeline</li>
+              <li>Clear profile freshness status</li>
+              <li>API-first integrations</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'en'" class="section" id="en-more">
+        <div class="section-header">
+          <h2>How it works</h2>
+          <p>Transparent flow with status control at each step.</p>
+        </div>
+        <div class="timeline">
+          <div class="step">
+            <div class="dot"></div>
+            <div>
+              <h4>Team creation</h4>
+              <p>User creates a team and submits a KYC application.</p>
+            </div>
+          </div>
+          <div class="step">
+            <div class="dot"></div>
+            <div>
+              <h4>Processing</h4>
+              <p>Temporo orchestrates the procedure and business steps.</p>
+            </div>
+          </div>
+          <div class="step">
+            <div class="dot"></div>
+            <div>
+              <h4>Monitoring</h4>
+              <p>KSC Monitoring stores state, Daxter tracks freshness.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'en'" class="section" id="en-tech">
+        <div class="section-header">
+          <h2>Technology</h2>
+          <p>Strong engineering, measurable outcomes, reliability.</p>
+        </div>
+        <div class="grid three">
+          <div class="card">
+            <h3>Architecture</h3>
+            <p>Microservices, event-driven orchestration, scalable design.</p>
+          </div>
+          <div class="card">
+            <h3>Observability</h3>
+            <p>Metrics, tracing, alerts. We see bottlenecks early.</p>
+          </div>
+          <div class="card">
+            <h3>Data</h3>
+            <p>PostgreSQL and MongoDB as the reliable data backbone.</p>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'en'" class="section" id="en-security">
+        <div class="section-header">
+          <h2>Security</h2>
+          <p>Access control, tokens, and audit built in.</p>
+        </div>
+        <div class="grid two">
+          <div class="card">
+            <h3>Access control</h3>
+            <ul>
+              <li>m2m tokens</li>
+              <li>Service isolation</li>
+              <li>Audit trail</li>
+            </ul>
+          </div>
+          <div class="card">
+            <h3>Reliability</h3>
+            <ul>
+              <li>Failover and queues</li>
+              <li>Process recovery</li>
+              <li>Event history</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="lang === 'en'" class="section" id="en-roadmap">
+        <div class="section-header">
+          <h2>Roadmap</h2>
+          <p>Draft, we will refine together.</p>
+        </div>
+        <div class="grid three">
+          <div class="card">
+            <h3>Q1</h3>
+            <p>Private beta + partner pilots.</p>
+          </div>
+          <div class="card">
+            <h3>Q2</h3>
+            <p>Monitoring automation, alerts, reporting.</p>
+          </div>
+          <div class="card">
+            <h3>Q3</h3>
+            <p>Scale and expand into new verticals.</p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-content">
+        <div>
+          <div class="logo">Optovia</div>
+          <p>White Paper v0.1</p>
+        </div>
+        <div>
+          <p>Контакты: <span class="muted">to be added</span></p>
+          <p>Команда: <span class="muted">to be added</span></p>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+const lang = ref<'ru' | 'en'>('ru');
+
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
+
+:global(body) {
+  margin: 0;
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: #13100f;
+  background: radial-gradient(circle at top left, #fef9f0 0%, #f5f1ea 55%, #efe7dd 100%);
+}
+
+.whitepaper {
+  position: relative;
+}
+
+.grain {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.35;
+  mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.06'/></svg>");
+}
+
+.hero {
+  padding: 48px 72px 80px;
+  background: linear-gradient(135deg, rgba(31, 91, 158, 0.08), rgba(232, 123, 42, 0.05));
+  border-bottom: 1px solid rgba(19, 16, 15, 0.12);
+}
+
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 48px;
+}
+
+.logo {
+  font-family: 'Fraunces', serif;
+  font-size: 28px;
+  letter-spacing: 0.02em;
+}
+
+.nav-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.lang-toggle {
+  border: 1px solid rgba(19, 16, 15, 0.12);
+  background: transparent;
+  padding: 6px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.lang-toggle.active {
+  background: #13100f;
+  color: white;
+}
+
+.cta {
+  background: #1f5b9e;
+  color: white;
+  border: none;
+  padding: 10px 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.ghost {
+  background: transparent;
+  border: 1px solid #13100f;
+  padding: 10px 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 48px;
+  align-items: center;
+}
+
+.hero-text h1 {
+  font-family: 'Fraunces', serif;
+  font-size: 48px;
+  line-height: 1.1;
+  margin: 8px 0 20px;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 12px;
+  color: #6c6661;
+}
+
+.lead {
+  font-size: 18px;
+  color: #6c6661;
+  max-width: 520px;
+}
+
+.hero-actions {
+  margin-top: 24px;
+  display: flex;
+  gap: 16px;
+}
+
+.hero-meta {
+  margin-top: 32px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.meta-card {
+  background: #ffffff;
+  border: 1px solid rgba(19, 16, 15, 0.12);
+  padding: 12px 14px;
+  border-radius: 12px;
+}
+
+.meta-title {
+  display: block;
+  font-size: 11px;
+  color: #6c6661;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.meta-value {
+  font-weight: 600;
+}
+
+.hero-visual {
+  display: grid;
+  gap: 16px;
+}
+
+.card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 20px;
+  border: 1px solid rgba(19, 16, 15, 0.12);
+  box-shadow: 0 20px 60px rgba(15, 17, 19, 0.15);
+}
+
+.flow-card {
+  padding: 20px 24px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  color: #6c6661;
+}
+
+.pill {
+  background: #e7f3ff;
+  color: #1f5b9e;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 999px;
+}
+
+.flow {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin: 18px 0;
+}
+
+.flow-node {
+  text-align: center;
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid rgba(19, 16, 15, 0.12);
+  background: #f9f7f3;
+}
+
+.flow-node.success {
+  border-color: rgba(31, 91, 158, 0.4);
+}
+
+.flow-node.warn {
+  border-color: rgba(232, 123, 42, 0.6);
+  background: rgba(232, 123, 42, 0.08);
+}
+
+.flow-footer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #6c6661;
+}
+
+.badge {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.badge.ok {
+  background: #1f5b9e;
+}
+
+.badge.bad {
+  background: #e23b2a;
+}
+
+.stats-card {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.stat {
+  background: #f9f7f3;
+  border-radius: 14px;
+  padding: 14px;
+}
+
+.label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #6c6661;
+}
+
+.value {
+  display: block;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.value.error {
+  color: #e23b2a;
+}
+
+.section {
+  padding: 72px;
+}
+
+.section-header {
+  max-width: 640px;
+  margin-bottom: 32px;
+}
+
+.section-header h2 {
+  font-family: 'Fraunces', serif;
+  font-size: 34px;
+  margin-bottom: 12px;
+}
+
+.grid {
+  display: grid;
+  gap: 20px;
+}
+
+.grid.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid.three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.timeline {
+  display: grid;
+  gap: 18px;
+}
+
+.step {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1f5b9e;
+  margin-top: 6px;
+}
+
+.footer {
+  padding: 40px 72px 60px;
+  border-top: 1px solid rgba(19, 16, 15, 0.12);
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #6c6661;
+}
+
+.muted {
+  color: #6c6661;
+  font-style: italic;
+}
+
+@media (max-width: 980px) {
+  .hero {
+    padding: 36px 24px 60px;
+  }
+
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-text h1 {
+    font-size: 36px;
+  }
+
+  .section {
+    padding: 52px 24px;
+  }
+
+  .grid.two,
+  .grid.three {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
+</style>