From 9c19d08cf52b63c3ed3b06e6e80cd76872c6675d Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 4 Feb 2026 14:54:30 +0700
Subject: [PATCH] Fix whitepaper language toggle and CTA

---
 app/pages/whitepaper.vue | 144 ++++++++++++++++++++++++---------------
 1 file changed, 89 insertions(+), 55 deletions(-)

diff --git a/app/pages/whitepaper.vue b/app/pages/whitepaper.vue
index eaa9966..fa89220 100644
--- a/app/pages/whitepaper.vue
+++ b/app/pages/whitepaper.vue
@@ -5,56 +5,58 @@
         <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 class="flex flex-col gap-6 relative">
+          <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
+            <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="self-start flex items-center gap-2 md:ml-auto">
+              <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="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 class="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>
-          <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 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>
-          <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 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>
@@ -167,6 +169,30 @@
           <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 class="mt-6 flex flex-wrap gap-4">
+              <div class="flex items-center gap-3">
+                <div class="avatar placeholder">
+                  <div class="bg-primary/20 text-primary w-12 rounded-full">
+                    <span>Р</span>
+                  </div>
+                </div>
+                <div>
+                  <p class="font-semibold">{{ content.team.members[0].name }}</p>
+                  <p class="text-xs text-base-content/50">{{ content.team.members[0].role }}</p>
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                <div class="avatar placeholder">
+                  <div class="bg-secondary/20 text-secondary w-12 rounded-full">
+                    <span>Д</span>
+                  </div>
+                </div>
+                <div>
+                  <p class="font-semibold">{{ content.team.members[1].name }}</p>
+                  <p class="text-xs text-base-content/50">{{ content.team.members[1].role }}</p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="card bg-base-100 border border-base-300/60">
@@ -204,7 +230,7 @@ const copy = {
       subtitle:
         'Optovia строит единое пространство для участников рынка: чтобы процессы были прозрачными, доверенными и простыми, а команды могли работать быстрее и безопаснее.',
       ctaPrimary: 'Запросить демо',
-      ctaSecondary: 'Связаться с командой',
+      ctaSecondary: 'Открыть кабинет',
       cards: [
         { label: 'Идея', value: 'Стираем границы и упрощаем рынок' },
         { label: 'Подход', value: 'Инфраструктура вместо точечных продуктов' },
@@ -248,16 +274,20 @@ const copy = {
     },
     team: {
       title: 'Команда',
-      body: 'Скоро добавим блок о команде и опыте. (заглушка)',
+      body: 'Партнеры проекта, которые выстраивают стратегию и развитие продукта.',
+      members: [
+        { name: 'Руслан', role: 'Партнер' },
+        { name: 'Денис', role: 'Партнер' },
+      ],
     },
     roadmap: {
       title: 'Roadmap',
       items: ['Private beta и пилоты', 'Усиление мониторинга и алертов', 'Масштабирование и новые вертикали'],
     },
     cta: {
-      title: 'Хотите узнать больше?',
-      body: 'Расскажем о платформе и покажем, как Optovia может помочь вашему бизнесу.',
-      button: 'Связаться',
+      title: 'Хотите посмотреть систему в действии?',
+      body: 'Зайдите в демо-кабинет клиента и оцените платформу вживую.',
+      button: 'Перейти в демо',
     },
   },
   en: {
@@ -266,7 +296,7 @@ const copy = {
       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',
+      ctaSecondary: 'Open demo',
       cards: [
         { label: 'Idea', value: 'Remove borders and simplify the market' },
         { label: 'Approach', value: 'Infrastructure, not isolated products' },
@@ -306,16 +336,20 @@ const copy = {
     },
     team: {
       title: 'Team',
-      body: 'We will add the team and experience section soon. (placeholder)',
+      body: 'Partners shaping strategy and product development.',
+      members: [
+        { name: 'Ruslan', role: 'Partner' },
+        { name: 'Denis', role: 'Partner' },
+      ],
     },
     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',
+      title: 'Want to see the system in action?',
+      body: 'Enter the demo client cabinet and explore the platform live.',
+      button: 'Go to demo',
     },
   },
 } as const