325 lines
16 KiB
Vue
325 lines
16 KiB
Vue
<template>
|
||
<div class="pb-16">
|
||
<section class="container mx-auto px-4 mt-10">
|
||
<div class="rounded-3xl bg-base-200/70 border border-base-300/70 p-8 md:p-12 relative overflow-hidden">
|
||
<div class="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-primary/20 blur-3xl" />
|
||
<div class="absolute -bottom-28 -left-20 h-72 w-72 rounded-full bg-secondary/20 blur-3xl" />
|
||
|
||
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6 relative">
|
||
<div>
|
||
<div class="text-xs uppercase tracking-[0.3em] text-base-content/50 mb-4">White paper</div>
|
||
<h1 class="text-3xl md:text-5xl font-bold text-base-content max-w-3xl">
|
||
{{ content.hero.title }}
|
||
</h1>
|
||
<p class="mt-5 text-lg text-base-content/70 max-w-2xl">
|
||
{{ content.hero.subtitle }}
|
||
</p>
|
||
<div class="mt-8 flex flex-wrap gap-3">
|
||
<button class="btn btn-primary">{{ content.hero.ctaPrimary }}</button>
|
||
<button class="btn btn-ghost border border-base-300">{{ content.hero.ctaSecondary }}</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
class="btn btn-xs"
|
||
:class="lang === 'ru' ? 'btn-primary' : 'btn-ghost'"
|
||
@click="lang = 'ru'"
|
||
>
|
||
RU
|
||
</button>
|
||
<button
|
||
class="btn btn-xs"
|
||
:class="lang === 'en' ? 'btn-primary' : 'btn-ghost'"
|
||
@click="lang = 'en'"
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body p-5">
|
||
<p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[0].label }}</p>
|
||
<p class="text-lg font-semibold text-base-content">{{ content.hero.cards[0].value }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body p-5">
|
||
<p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[1].label }}</p>
|
||
<p class="text-lg font-semibold text-base-content">{{ content.hero.cards[1].value }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body p-5">
|
||
<p class="text-xs uppercase tracking-[0.2em] text-base-content/40">{{ content.hero.cards[2].label }}</p>
|
||
<p class="text-lg font-semibold text-base-content">{{ content.hero.cards[2].value }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container mx-auto px-4 mt-16">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl">{{ content.vision.title }}</h2>
|
||
<p class="text-base-content/70">{{ content.vision.body }}</p>
|
||
<div class="mt-4 space-y-3">
|
||
<div class="flex items-start gap-3">
|
||
<Icon name="lucide:sparkles" class="text-primary" />
|
||
<div>
|
||
<p class="font-semibold">{{ content.vision.points[0].title }}</p>
|
||
<p class="text-sm text-base-content/60">{{ content.vision.points[0].text }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<Icon name="lucide:globe" class="text-primary" />
|
||
<div>
|
||
<p class="font-semibold">{{ content.vision.points[1].title }}</p>
|
||
<p class="text-sm text-base-content/60">{{ content.vision.points[1].text }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<Icon name="lucide:layers" class="text-primary" />
|
||
<div>
|
||
<p class="font-semibold">{{ content.vision.points[2].title }}</p>
|
||
<p class="text-sm text-base-content/60">{{ content.vision.points[2].text }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h2 class="card-title text-2xl">{{ content.mission.title }}</h2>
|
||
<p class="text-base-content/70">{{ content.mission.body }}</p>
|
||
<div class="mt-6 grid grid-cols-1 gap-3">
|
||
<div class="rounded-2xl bg-base-200/70 p-4">
|
||
<p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[0].label }}</p>
|
||
<p class="text-lg font-semibold">{{ content.mission.cards[0].value }}</p>
|
||
</div>
|
||
<div class="rounded-2xl bg-base-200/70 p-4">
|
||
<p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[1].label }}</p>
|
||
<p class="text-lg font-semibold">{{ content.mission.cards[1].value }}</p>
|
||
</div>
|
||
<div class="rounded-2xl bg-base-200/70 p-4">
|
||
<p class="text-sm uppercase tracking-[0.2em] text-base-content/40">{{ content.mission.cards[2].label }}</p>
|
||
<p class="text-lg font-semibold">{{ content.mission.cards[2].value }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container mx-auto px-4 mt-16">
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h3 class="text-xl font-semibold">{{ content.principles[0].title }}</h3>
|
||
<p class="text-base-content/70">{{ content.principles[0].text }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h3 class="text-xl font-semibold">{{ content.principles[1].title }}</h3>
|
||
<p class="text-base-content/70">{{ content.principles[1].text }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-gradient-to-br from-base-200 to-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h3 class="text-xl font-semibold">{{ content.principles[2].title }}</h3>
|
||
<p class="text-base-content/70">{{ content.principles[2].text }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container mx-auto px-4 mt-16">
|
||
<div class="rounded-3xl bg-base-100 border border-base-300/60 p-8 md:p-12">
|
||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
|
||
<div>
|
||
<h2 class="text-2xl md:text-3xl font-bold">{{ content.trust.title }}</h2>
|
||
<p class="mt-4 text-base-content/70 max-w-2xl">{{ content.trust.body }}</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 gap-3 w-full max-w-sm">
|
||
<div class="rounded-2xl bg-base-200/70 p-4">
|
||
<p class="text-sm text-base-content/60">{{ content.trust.items[0] }}</p>
|
||
</div>
|
||
<div class="rounded-2xl bg-base-200/70 p-4">
|
||
<p class="text-sm text-base-content/60">{{ content.trust.items[1] }}</p>
|
||
</div>
|
||
<div class="rounded-2xl bg-base-200/70 p-4">
|
||
<p class="text-sm text-base-content/60">{{ content.trust.items[2] }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container mx-auto px-4 mt-16">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h3 class="text-xl font-semibold">{{ content.team.title }}</h3>
|
||
<p class="text-base-content/60">{{ content.team.body }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-base-100 border border-base-300/60">
|
||
<div class="card-body">
|
||
<h3 class="text-xl font-semibold">{{ content.roadmap.title }}</h3>
|
||
<ul class="mt-3 space-y-2 text-base-content/70">
|
||
<li v-for="item in content.roadmap.items" :key="item">• {{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="container mx-auto px-4 mt-16">
|
||
<div class="rounded-3xl bg-gradient-to-r from-primary/80 via-secondary/70 to-accent/80 text-primary-content p-10 md:p-14">
|
||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
||
<div>
|
||
<h2 class="text-2xl md:text-3xl font-bold">{{ content.cta.title }}</h2>
|
||
<p class="mt-2 text-primary-content/80">{{ content.cta.body }}</p>
|
||
</div>
|
||
<button class="btn bg-base-100 text-base-content border-0">{{ content.cta.button }}</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const lang = ref<'ru' | 'en'>('ru')
|
||
|
||
const copy = {
|
||
ru: {
|
||
hero: {
|
||
title: 'Инфраструктура цифровых инструментов, которая стирает границы',
|
||
subtitle:
|
||
'Optovia строит единое пространство для участников рынка: чтобы процессы были прозрачными, доверенными и простыми, а команды могли работать быстрее и безопаснее.',
|
||
ctaPrimary: 'Запросить демо',
|
||
ctaSecondary: 'Связаться с командой',
|
||
cards: [
|
||
{ label: 'Идея', value: 'Стираем границы и упрощаем рынок' },
|
||
{ label: 'Подход', value: 'Инфраструктура вместо точечных продуктов' },
|
||
{ label: 'Форма', value: 'B2B / API-first / экосистема' },
|
||
],
|
||
},
|
||
vision: {
|
||
title: 'Видение',
|
||
body:
|
||
'Мы делаем инфраструктуру, которая позволяет компаниям быстрее доверять друг другу и прозрачнее работать с данными. Наша цель — убрать шум, убрать барьеры и дать рынку работающий цифровой фундамент.',
|
||
points: [
|
||
{ title: 'Стираем границы', text: 'Объединяем процессы и участников рынка в единый контур.' },
|
||
{ title: 'Делаем проще', text: 'Снижаем сложность и убираем ручные операции.' },
|
||
{ title: 'Строим фундамент', text: 'Даем основу, на которой бизнес может расти.' },
|
||
],
|
||
},
|
||
mission: {
|
||
title: 'Что мы строим',
|
||
body:
|
||
'Optovia — это инфраструктура для цифровых операций: от доверия и безопасности до мониторинга и прозрачности.',
|
||
cards: [
|
||
{ label: 'Единая экосистема', value: 'Команды, данные, процессы — в одной системе.' },
|
||
{ label: 'Прозрачность', value: 'Статусы и история действий в реальном времени.' },
|
||
{ label: 'Масштабируемость', value: 'Подходит для компаний любого размера.' },
|
||
],
|
||
},
|
||
principles: [
|
||
{ title: 'Прозрачность', text: 'Каждый процесс наблюдаем и измерим.' },
|
||
{ title: 'Надежность', text: 'Стабильная инфраструктура и контроль рисков.' },
|
||
{ title: 'Скорость', text: 'Ускоряем рутину и даем бизнесу скорость решений.' },
|
||
],
|
||
trust: {
|
||
title: 'Доверие и безопасность',
|
||
body:
|
||
'Мы строим технологию, которая поддерживает надежность на всех уровнях — от доступа до мониторинга данных. Безопасность не отдельный слой, а часть ДНК платформы.',
|
||
items: [
|
||
'Токены и изоляция сервисов',
|
||
'Аудит действий и история событий',
|
||
'Контроль доступа и права команд',
|
||
],
|
||
},
|
||
team: {
|
||
title: 'Команда',
|
||
body: 'Скоро добавим блок о команде и опыте. (заглушка)',
|
||
},
|
||
roadmap: {
|
||
title: 'Roadmap',
|
||
items: ['Private beta и пилоты', 'Усиление мониторинга и алертов', 'Масштабирование и новые вертикали'],
|
||
},
|
||
cta: {
|
||
title: 'Хотите узнать больше?',
|
||
body: 'Расскажем о платформе и покажем, как Optovia может помочь вашему бизнесу.',
|
||
button: 'Связаться',
|
||
},
|
||
},
|
||
en: {
|
||
hero: {
|
||
title: 'Infrastructure for digital tools that removes borders',
|
||
subtitle:
|
||
'Optovia builds a shared space for market participants: transparent, trusted, and simple processes that let teams move faster and safer.',
|
||
ctaPrimary: 'Request demo',
|
||
ctaSecondary: 'Contact team',
|
||
cards: [
|
||
{ label: 'Idea', value: 'Remove borders and simplify the market' },
|
||
{ label: 'Approach', value: 'Infrastructure, not isolated products' },
|
||
{ label: 'Form', value: 'B2B / API-first / ecosystem' },
|
||
],
|
||
},
|
||
vision: {
|
||
title: 'Vision',
|
||
body:
|
||
'We build infrastructure that helps companies trust each other faster and work with data more transparently. Our goal is to remove noise, remove barriers, and deliver a working digital foundation.',
|
||
points: [
|
||
{ title: 'Remove borders', text: 'Unite processes and participants into one flow.' },
|
||
{ title: 'Make it simple', text: 'Reduce complexity and manual actions.' },
|
||
{ title: 'Build the foundation', text: 'Give the market a reliable base to grow.' },
|
||
],
|
||
},
|
||
mission: {
|
||
title: 'What we build',
|
||
body:
|
||
'Optovia is infrastructure for digital operations: from trust and safety to monitoring and transparency.',
|
||
cards: [
|
||
{ label: 'Unified ecosystem', value: 'Teams, data, and processes in one system.' },
|
||
{ label: 'Transparency', value: 'Statuses and history in real time.' },
|
||
{ label: 'Scalability', value: 'Fits businesses of any size.' },
|
||
],
|
||
},
|
||
principles: [
|
||
{ title: 'Transparency', text: 'Every process is observable and measurable.' },
|
||
{ title: 'Reliability', text: 'Stable infrastructure and risk control.' },
|
||
{ title: 'Speed', text: 'Faster operations and decision making.' },
|
||
],
|
||
trust: {
|
||
title: 'Trust & security',
|
||
body:
|
||
'Security is embedded in the platform DNA: access, monitoring, and auditability built-in from day one.',
|
||
items: ['Tokens and service isolation', 'Audit trails and event history', 'Access control and team permissions'],
|
||
},
|
||
team: {
|
||
title: 'Team',
|
||
body: 'We will add the team and experience section soon. (placeholder)',
|
||
},
|
||
roadmap: {
|
||
title: 'Roadmap',
|
||
items: ['Private beta and pilots', 'Monitoring and alerts expansion', 'Scaling and new verticals'],
|
||
},
|
||
cta: {
|
||
title: 'Want to learn more?',
|
||
body: 'We will show how Optovia can help your business.',
|
||
button: 'Contact us',
|
||
},
|
||
},
|
||
} as const
|
||
|
||
const content = computed(() => copy[lang.value])
|
||
</script>
|