From 9c48e7abea4aee2b996bc11cd00fb3c3c76bcffb Mon Sep 17 00:00:00 2001
From: WASRUSGEN <vasrusgen@gmail.com>
Date: Thu, 28 May 2026 11:59:53 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20hero=20typewriter=20=E2=80=94=20USP-?=
 =?UTF-8?q?=D1=80=D0=BE=D1=82=D0=B0=D1=86=D0=B8=D1=8F=20=D0=B4=D0=BB=D1=8F?=
 =?UTF-8?q?=20=D0=BD=D0=BE=D0=B2=D0=BE=D0=B3=D0=BE,=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D1=81=D0=BE=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BA=D1=81=D1=82=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D0=BD=D1=83=D0=B2=D1=88=D0=B5=D0=B3=D0=BE=D1=81=D1=8F=20?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mockup.html | 76 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 65 insertions(+), 11 deletions(-)

diff --git a/mockup.html b/mockup.html
index 6bceb5e..7dcfded 100644
--- a/mockup.html
+++ b/mockup.html
@@ -696,6 +696,14 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
 .ret-sub{font-size:16px;color:rgba(255,255,255,.7);margin-bottom:22px}
 .ret-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:16px 18px;margin-bottom:22px}
 .ret-card:empty{display:none}
+/* ── HERO TYPEWRITER ── */
+.hero-tw-wrap{margin:14px 0 4px;display:flex;align-items:center;gap:7px;min-height:28px}
+.hero-tw-cur{color:rgba(255,255,255,.5);font-size:18px;flex-shrink:0;line-height:1;animation:twBlink .65s step-start infinite}
+@keyframes twBlink{0%,100%{opacity:1}50%{opacity:0}}
+.hero-tw-text{font-size:14px;font-weight:600;color:rgba(255,255,255,.82);line-height:1.4}
+.ret-tw-wrap{margin:0 0 22px;display:flex;align-items:baseline;gap:7px;min-height:32px}
+.ret-tw-wrap .hero-tw-cur{font-size:20px;color:rgba(255,255,255,.45)}
+.ret-tw-wrap .hero-tw-text{font-size:18px;font-weight:700;color:rgba(255,255,255,.95)}
 .ret-ord-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
 .ret-ord-name{font-size:15px;font-weight:700;margin-bottom:3px}
 .ret-ord-price{font-size:22px;font-weight:800;color:#ffaaaa}
@@ -946,6 +954,7 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
           <span class="hero-svc">📑 Доверенность</span>
           <span class="hero-svc">✉️ Претензия</span>
         </div>
+        <div class="hero-tw-wrap" id="hw-new"><span class="hero-tw-cur">|</span><span id="hero-tw-new" class="hero-tw-text"></span></div>
         <div class="hero-elena-hint">
           <b>Как это работает:</b> нажмите кнопку → Елена спросит что вам нужно → вы загружаете документ или заполняете форму → результат за несколько секунд
         </div>
@@ -956,6 +965,7 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
       <!-- Вернувшийся клиент -->
       <div id="hero-returning" style="display:none">
         <div class="ret-greet">Добро пожаловать обратно —<br>вы в надёжных руках 🤝</div>
+        <div class="ret-tw-wrap" id="hw-ret"><span class="hero-tw-cur">|</span><span id="hero-tw-ret" class="hero-tw-text"></span></div>
         <div class="ret-card" id="ret-last-order"></div>
         <div class="cta">
           <button class="btn btn-p" style="min-width:160px" onclick="go('cabinet')">Мои дела →</button>
@@ -2540,22 +2550,66 @@ function ykFinish() {
   }, 1200);
 }
 
+function startTypewriter(el, phrases, speed) {
+  if (!el) return;
+  var pi = 0, ci = 0, deleting = false, pause = 0;
+  speed = speed || 62;
+  function tick() {
+    var ph = phrases[pi];
+    if (pause > 0) { pause--; setTimeout(tick, 80); return; }
+    if (!deleting) {
+      ci++;
+      el.textContent = ph.slice(0, ci);
+      if (ci >= ph.length) { deleting = true; pause = 32; }
+    } else {
+      ci--;
+      el.textContent = ph.slice(0, ci);
+      if (ci <= 0) { deleting = false; pause = 10; pi = (pi + 1) % phrases.length; }
+    }
+    setTimeout(tick, deleting ? Math.round(speed / 3) : speed);
+  }
+  tick();
+}
+
 function checkReturning() {
   const stats = JSON.parse(localStorage.getItem('zashita_intake_stats') || '[]');
   const lastOrder = JSON.parse(localStorage.getItem('zashita_last_order') || 'null');
-  if (!stats.length && !lastOrder) return; // новый клиент
-  // вернувшийся
+  const isReturning = stats.length > 0 || !!lastOrder;
+
   const n = document.getElementById('hero-new');
   const r = document.getElementById('hero-returning');
-  if (n) n.style.display = 'none';
-  if (r) r.style.display = '';
-  // карточка последнего заказа
-  if (lastOrder) {
-    const el = document.getElementById('ret-last-order');
-    if (el) el.innerHTML =
-      '<div class="ret-ord-lbl">Последний заказ</div>' +
-      '<div class="ret-ord-name">' + lastOrder.ttl + ' · ' + lastOrder.plan + '</div>' +
-      '<div class="ret-ord-price">' + lastOrder.price + '</div>';
+
+  if (!isReturning) {
+    // ── НОВЫЙ КЛИЕНТ: typewriter с USP-фразами
+    if (n) n.style.display = '';
+    if (r) r.style.display = 'none';
+    startTypewriter(document.getElementById('hero-tw-new'), [
+      'Первые 3 риска — бесплатно',
+      'Результат за несколько секунд',
+      'Работаю 24/7 — без очередей и звонков',
+      'Данные только на вашем устройстве 🔒',
+      'Уже помогла сотням предпринимателей',
+    ], 68);
+  } else {
+    // ── ВЕРНУВШИЙСЯ: personalized typewriter
+    if (n) n.style.display = 'none';
+    if (r) r.style.display = '';
+    // карточка последнего заказа
+    if (lastOrder && lastOrder.ttl) {
+      const el = document.getElementById('ret-last-order');
+      if (el) el.innerHTML =
+        '<div class="ret-ord-lbl">Последний заказ</div>' +
+        '<div class="ret-ord-name">' + lastOrder.ttl + ' · ' + lastOrder.plan + '</div>' +
+        '<div class="ret-ord-price">' + lastOrder.price + '</div>';
+    }
+    // персональные фразы
+    var retPhrases = ['готова продолжить — что нужно сегодня?'];
+    if (lastOrder && lastOrder.ttl) {
+      retPhrases.unshift('помню ваш договор: ' + lastOrder.ttl);
+    }
+    retPhrases.push('новый документ — за несколько секунд');
+    retPhrases.push('все ваши дела в кабинете 📂');
+    startTypewriter(document.getElementById('hero-tw-ret'), retPhrases, 55);
   }
 }
 window.addEventListener('DOMContentLoaded', checkReturning);