717 lines
18 KiB
Vue
717 lines
18 KiB
Vue
<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>
|