Add Vibe+Hard=Enterprise section, P2P framing, +2 finance project cards

index.html

@@ -343,6 +343,100 @@ nav {
   margin-top: auto;
 }
 
+/* ── ENTERPRISE EQUATION (vibe + hard = enterprise) ── */
+.eq-flow {
+  margin-top: 40px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr;
+  align-items: stretch;
+}
+@media (min-width: 768px) {
+  .eq-flow {
+    grid-template-columns: 1fr auto 1fr auto 1fr;
+    align-items: stretch;
+  }
+}
+
+.eq-box {
+  background: var(--card-neutral);
+  border-radius: 12px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.eq-box.you {
+  background: rgba(0,102,204,0.08);
+  border: 1px solid rgba(0,102,204,0.2);
+}
+.eq-box.result {
+  background: #fff;
+  border: 1px solid var(--border);
+}
+.eq-box-label {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-45);
+}
+.eq-box.you .eq-box-label { color: var(--blue); }
+.eq-box-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text);
+  line-height: 1.3;
+}
+.eq-box-desc {
+  font-size: 0.8125rem;
+  color: var(--text-55);
+  line-height: 1.5;
+}
+
+.eq-op {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--text-45);
+  padding: 8px 0;
+}
+@media (min-width: 768px) { .eq-op { padding: 0 4px; } }
+
+.eq-note {
+  margin-top: 32px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--blue);
+  border-radius: 8px;
+  padding: 20px 24px;
+  display: grid;
+  gap: 16px;
+}
+@media (min-width: 640px) { .eq-note { grid-template-columns: 1fr 1fr; } }
+.eq-note-item {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.eq-note-icon {
+  width: 28px; height: 28px;
+  flex-shrink: 0;
+  color: var(--blue);
+  background: rgba(0,102,204,0.08);
+  border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+}
+.eq-note-icon svg { width: 16px; height: 16px; }
+.eq-note-text {
+  font-size: 0.8125rem;
+  color: var(--text-65);
+  line-height: 1.5;
+}
+.eq-note-text strong { color: var(--text); font-weight: 500; }
+
 /* ── TELEGRAM ── */
 .tg-block {
   margin-top: 40px;
@@ -1069,9 +1163,9 @@ footer {
           <span class="logo-text">Vibe Workshop</span>
         </a>
         <div class="nav-links">
-          <a href="#tools" class="nav-link">Инструменты</a>
           <a href="#plan" class="nav-link">Action Plan</a>
           <a href="#create" class="nav-link">Что создать</a>
+          <a href="#enterprise" class="nav-link">Зачем</a>
           <a href="#glossary" class="nav-link">Словарь</a>
           <a href="#telegram" class="nav-link">Сообщество</a>
         </div>
@@ -1102,7 +1196,7 @@ footer {
       <!-- HERO -->
       <section class="hero">
         <div class="container hero-inner">
-          <span class="badge">Казахтелеком · Финансовый департамент · Для начинающих</span>
+          <span class="badge">Казахтелеком · Движение инноваторов · Финансы</span>
           <h1 class="hero-title">
             <span class="underline-blue">Vibe Coding</span><br>
             для финансистов
@@ -1429,11 +1523,73 @@ footer {
         </div>
       </section>
 
+      <!-- SECTION 6: VIBE + HARD = ENTERPRISE -->
+      <section class="section" id="enterprise">
+        <div class="container">
+          <div class="section-label">06 — Это не игрушка</div>
+          <h2 class="section-title">Vibe coding + Hard coding =<br><em>Enterprise solution</em></h2>
+          <p class="section-body">
+            Ты пишешь словами свою идею. Дев-команда КТ потом упаковывает её в прод. На выходе — реальная система внутри Казахтелеком, которой пользуются сотни человек.
+          </p>
+
+          <div class="eq-flow">
+            <div class="eq-box you">
+              <div class="eq-box-label">Vibe coding · ты</div>
+              <div class="eq-box-title">Описываешь боль и решение</div>
+              <div class="eq-box-desc">
+                Простыми словами в PRD. Знаешь домен — финансы. Не лезешь в технологии.
+              </div>
+            </div>
+            <div class="eq-op">+</div>
+            <div class="eq-box">
+              <div class="eq-box-label">Hard coding · разработчики</div>
+              <div class="eq-box-title">Полируют до прода</div>
+              <div class="eq-box-desc">
+                Безопасность, нагрузка, интеграции, поддержка. Их часть после твоей.
+              </div>
+            </div>
+            <div class="eq-op">=</div>
+            <div class="eq-box result">
+              <div class="eq-box-label">Enterprise solution</div>
+              <div class="eq-box-title">Часть инфраструктуры КТ</div>
+              <div class="eq-box-desc">
+                Твой MVP становится сервисом, которым пользуются коллеги. Реально, не «на потом».
+              </div>
+            </div>
+          </div>
+
+          <div class="eq-note">
+            <div class="eq-note-item">
+              <div class="eq-note-icon">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="2" y="3" width="12" height="10" rx="1"/>
+                  <path d="M2 7h12M5 3v10"/>
+                </svg>
+              </div>
+              <div class="eq-note-text">
+                <strong>Sandbox — официальная среда КТ.</strong> Mock-копия реальной инфраструктуры — Zorro, базы, очереди. Можно ломать и переделывать, ничего ценного не сломаешь.
+              </div>
+            </div>
+            <div class="eq-note-item">
+              <div class="eq-note-icon">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M8 1l2 2h4v10H2V3h4l2-2z"/>
+                  <path d="M6 8l2 2 4-4"/>
+                </svg>
+              </div>
+              <div class="eq-note-text">
+                <strong>Документация и помощь рядом.</strong> ZORRO.md уже в твоей папке. Telegram-чат — для вопросов. Админы платформы — у тебя за плечом.
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- SECTION 4: SCHEDULE -->
       <section class="section" id="schedule">
         <div class="container two-col">
           <div class="section-header">
-            <div class="section-label">06 — Программа первого занятия</div>
+            <div class="section-label">07 — Программа первого занятия</div>
             <h2 class="section-title">Что будет<br><em>сегодня</em></h2>
             <p class="section-body">
               Полный день поделён на блоки с чёткими результатами. К 17:00 — твой MVP задеплоен.
@@ -1447,7 +1603,7 @@ footer {
       <section class="section" id="glossary">
         <div class="container two-col">
           <div class="section-header">
-            <div class="section-label">07 — Словарь</div>
+            <div class="section-label">08 — Словарь</div>
             <h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
             <p class="section-body">
               Семь слов, которые встретятся сегодня. Нажми на любое — увидишь объяснение
@@ -1472,7 +1628,7 @@ footer {
       <!-- SECTION 6: PROJECTS -->
       <section class="section" id="projects">
         <div class="container">
-          <div class="section-label">08 — Твой проект</div>
+          <div class="section-label">09 — Твой проект</div>
           <h2 class="section-title">Ты знаешь<br><em>боль изнутри</em></h2>
           <p class="section-body">
             Лучший проект — тот, где ты сам тратишь время впустую. Вот примеры из финансовых департаментов —
@@ -1485,10 +1641,10 @@ footer {
       <!-- SECTION: TELEGRAM COMMUNITY -->
       <section class="section" id="telegram">
         <div class="container">
-          <div class="section-label">09 — Сообщество</div>
+          <div class="section-label">10 — Сообщество</div>
-          <h2 class="section-title">Застрял?<br><em>Спрашивай в чате.</em></h2>
+          <h2 class="section-title">P2P-формат.<br><em>Не лекция — движение.</em></h2>
           <p class="section-body">
-            Telegram-группа инноваторов КТ. Здесь делятся проектами, спрашивают и помогают друг другу. Заходи.
+            Это не курс «сверху вниз». Это сообщество сотрудников КТ, которые учатся <strong>друг у друга</strong>: показывают свои проекты, спрашивают, помогают, делятся находками. Заходи — там уже несколько групп инноваторов.
           </p>
 
           <div class="tg-block">
@@ -1647,6 +1803,18 @@ const PROJECTS = [
     title: 'Архив финансовых документов',
     pain: 'Договоры, акты, счета — всё в разных папках. Когда нужно найти документ по контрагенту — ищешь полчаса. Нужен поиск с фильтрами.',
     tags: ['Поиск', 'Архив', 'Документы']
+  },
+  {
+    num: '07',
+    title: 'Бот-напоминалка о платежах',
+    pain: 'У меня в голове 20 регулярных платежей в разные дни месяца. Постоянно боюсь что-то забыть. Хочу TG-бот, который пинает за день до дедлайна.',
+    tags: ['Telegram-бот', 'Напоминания', 'Календарь']
+  },
+  {
+    num: '08',
+    title: 'Конвертер валютных операций',
+    pain: 'Для отчёта по валютным операциям нужно пересчитать суммы по курсу НБРК на дату транзакции. Делаю в Excel, тратится час. Хочу одну кнопку.',
+    tags: ['Валюта', 'НБРК', 'Курс']
   }
 ];