From 90058a82d3d51860dfe54374f0b0b401eb631920 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 10 Feb 2026 17:06:47 +0700
Subject: [PATCH] Refine roadmap gantt layout and copy

---
 app/app.vue | 93 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 52 insertions(+), 41 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 3bdb14d..7455a23 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -166,9 +166,9 @@
                       :nodes="flowNodes"
                       :edges="flowEdges"
                       :fit-view-on-init="true"
-                      :nodes-draggable="false"
+                      :nodes-draggable="true"
                       :nodes-connectable="false"
-                      :elements-selectable="false"
+                      :elements-selectable="true"
                       :zoom-on-scroll="false"
                       :zoom-on-pinch="false"
                       :pan-on-drag="false"
@@ -334,53 +334,45 @@
             <section id="roadmap" class="slide">
               <div class="slide-top"><span class="slide-num">10</span><span class="slide-label">Roadmap</span></div>
               <div class="slide-head">
-                <h2 class="slide-title">Пилот за 2 месяца, затем смета и приемка</h2>
+                <h2 class="slide-title">6 месяцев, 3 этапа</h2>
                 <p class="slide-preamble">
-                  Первые два месяца уходит на запуск пилота: этапы работ, декомпозиция объема и подбор исполнителей.
-                  Затем доводим ресурсную ведомость и смету, а в конце выстраиваем приемку с инспекторами.
+                  М1–М2 — готовим и запускаем пилот: фиксируем этапы работ, разбираем объем на сроки и выбираем исполнителей.
+                  М3–М4 — отрабатываем ресурсную ведомость и смету на данных пилота, уточняем объемы и цены.
+                  М5–М6 — выстраиваем приемку с инспекторами, закрепляем регламенты и готовим масштабирование.
                 </p>
               </div>
               <div class="slide-main">
                 <div class="glass-panel rounded-3xl border border-base-300 p-6">
                   <div class="grid gap-4 text-sm">
-                    <div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] gap-2 text-xs text-neutral/50">
+                    <div class="grid grid-cols-[260px_repeat(6,minmax(0,1fr))] gap-2 text-xs text-neutral/50">
                       <div>Этап</div>
-                      <div>М1</div>
-                      <div>М2</div>
-                      <div>М3</div>
-                      <div>М4</div>
-                      <div>М5</div>
-                      <div>М6</div>
+                      <div>1</div>
+                      <div>2</div>
+                      <div>3</div>
+                      <div>4</div>
+                      <div>5</div>
+                      <div>6</div>
                     </div>
 
-                    <div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] items-center gap-2">
-                      <div class="text-neutral/70">Пилот: этапы, объем, исполнители</div>
-                      <div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М1</div>
-                      <div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М2</div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
+                    <div class="grid grid-cols-[260px_1fr] items-center gap-4">
+                      <div class="text-neutral/70">Подготовка и запуск пилота</div>
+                      <div class="gantt-track">
+                        <div class="gantt-bar" style="left: 0%; width: 33.333%;"></div>
+                      </div>
                     </div>
 
-                    <div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] items-center gap-2">
+                    <div class="grid grid-cols-[260px_1fr] items-center gap-4">
                       <div class="text-neutral/70">Ресурсная ведомость и смета</div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М3</div>
-                      <div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М4</div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
+                      <div class="gantt-track">
+                        <div class="gantt-bar" style="left: 33.333%; width: 33.333%;"></div>
+                      </div>
                     </div>
 
-                    <div class="grid grid-cols-[160px_repeat(6,minmax(0,1fr))] items-center gap-2">
+                    <div class="grid grid-cols-[260px_1fr] items-center gap-4">
                       <div class="text-neutral/70">Приемка и инспекторы</div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-base-300/70 py-2"></div>
-                      <div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М5</div>
-                      <div class="rounded-full bg-primary py-2 text-center text-xs text-primary-content">М6</div>
+                      <div class="gantt-track">
+                        <div class="gantt-bar" style="left: 66.666%; width: 33.333%;"></div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -469,7 +461,7 @@ const flowNodes = ref([
   {
     id: '5',
     type: 'step',
-    position: { x: 720, y: 220 },
+    position: { x: 960, y: 40 },
     data: {
       step: '05',
       title: 'Эскроу и запуск',
@@ -479,7 +471,7 @@ const flowNodes = ref([
   {
     id: '6',
     type: 'step',
-    position: { x: 480, y: 220 },
+    position: { x: 1200, y: 40 },
     data: {
       step: '06',
       title: 'Фиксация прогресса',
@@ -489,7 +481,7 @@ const flowNodes = ref([
   {
     id: '7',
     type: 'step',
-    position: { x: 240, y: 220 },
+    position: { x: 1440, y: 40 },
     data: {
       step: '07',
       title: 'Приемка и расчет',
@@ -502,9 +494,9 @@ const flowEdges = ref([
   { id: 'e1-2', source: '1', target: '2', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
   { id: 'e2-3', source: '2', target: '3', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
   { id: 'e3-4', source: '3', target: '4', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
-  { id: 'e4-5', source: '4', target: '5', sourceHandle: 'source-b', targetHandle: 'target-t', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
-  { id: 'e5-6', source: '5', target: '6', sourceHandle: 'source-l', targetHandle: 'target-r', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
-  { id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-l', targetHandle: 'target-r', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed }
+  { id: 'e4-5', source: '4', target: '5', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
+  { id: 'e5-6', source: '5', target: '6', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed },
+  { id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'smoothstep', markerEnd: MarkerType.ArrowClosed }
 ])
 
 onMounted(() => {
@@ -562,7 +554,7 @@ html {
 
 .flow-wrapper {
   width: 100%;
-  height: 420px;
+  height: 280px;
   overflow: hidden;
 }
 
@@ -695,6 +687,25 @@ html {
   -webkit-backdrop-filter: blur(24px) saturate(1.15);
 }
 
+.gantt-track {
+  position: relative;
+  height: 18px;
+  border-radius: 999px;
+  background:
+    linear-gradient(to right, rgba(20, 20, 20, 0.1) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
+    rgba(20, 20, 20, 0.06);
+  overflow: hidden;
+}
+
+.gantt-bar {
+  position: absolute;
+  top: 2px;
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(67, 56, 118, 0.9), rgba(102, 126, 234, 0.85));
+  box-shadow: 0 6px 14px rgba(67, 56, 118, 0.25);
+}
+
 .glass-card {
   background: rgba(255, 255, 255, 0.42);
   border: 1px solid rgba(255, 255, 255, 0.45);