From c9251d3ed589ea836d7dfa9bf970e0e3316ab98c Mon Sep 17 00:00:00 2001
From: bot-backend <bot-backend@gendsgn.local>
Date: Mon, 31 Aug 2026 11:35:02 +0500
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B2=D1=8B=D0=B9=20=D1=8D?=
 =?UTF-8?q?=D0=BA=D1=80=D0=B0=D0=BD:=20=D0=BE=D0=B3=D0=BE=D0=B2=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BA=D0=B8=20=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D0=B8=D0=B7=20=D0=B1=D0=BB=D0=BE=D0=BA=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B8=D0=BC=D1=83=D1=89=D0=B5=D1=81=D1=82=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Владелец попросил сделать лендинг привлекательнее. Один скриншот мобильной
страницы показал причину, по которой первый экран читается стеной текста:
шесть однотипных пунктов подряд, из которых ДВА про обратное.

«Пример по рынку Екатеринбурга, а не расчёт по вашему адресу» и «По всем
расчётам МЕРЫ, а не только по Екатеринбургу» лежали ВНУТРИ .heroPerks — в том
же контейнере, тем же кеглем, с маркером в том же ряду, что «Бесплатно» и
«За 150 ₽». То есть дисклеймер выглядел как ещё один пункт оффера.

Вынесены в собственный блок за разделителем: тише, мельче, отдельно.

Слова НЕ ТРОНУТЫ. Порядок чтения не тронут: оговорки по-прежнему выше формы,
человек прочитает их до ввода адреса — ровно то требование, ради которого их
туда и ставили. Ширина колонки та же, контраст держит AA. Убирать или прятать
оговорку нельзя: замаскированная оговорка хуже показанной, и вся эта страница
построена на обратном принципе.

Тесты, проверяющие СОДЕРЖИМОЕ обеих строк (что экспозиция и аналоги подписаны
разными границами и не слиты в одну), держатся за parentElement строки, а не
за контейнер — переезд их не задел. 147 passed.
---
 .../app/mera-public/_components/v3/HeroV3.tsx | 31 ++++++++++++------
 .../src/app/mera-public/landing-v3.module.css | 32 +++++++++++++++++++
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/HeroV3.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/HeroV3.tsx
index 670efdc2..a6a479c4 100644
--- a/tradein-mvp/frontend/src/app/mera-public/_components/v3/HeroV3.tsx
+++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/HeroV3.tsx
@@ -166,18 +166,29 @@ export function HeroV3({ stats }: { stats: LandingStats }) {
                 построен расчёт
               </span>
             </div>
-            {marketLines.map((line) => (
-              <div key={line.key} className={styles.heroListItem}>
-                <span className={styles.heroListIcon} aria-hidden="true">
-                  ≈
-                </span>
-                <span className={styles.heroListText}>
-                  <strong>{line.label}</strong> {line.text}
-                </span>
-              </div>
-            ))}
           </div>
 
+          {/* ОГОВОРКИ ОТДЕЛЬНО ОТ ПРЕДЛОЖЕНИЯ.
+              Эти две строки лежали ВНУТРИ `.heroPerks`, в одном контейнере и
+              одном стиле с «Бесплатно» и «За 150 ₽» — то есть дисклеймер
+              «пример по рынку, а не расчёт по вашему адресу» выглядел как ещё
+              один пункт оффера. Владелец читал первый экран как стену текста,
+              и неудивительно: шесть однотипных пунктов подряд, из которых два
+              на самом деле про обратное.
+              Слова и порядок чтения не тронуты — оговорки по-прежнему ВЫШЕ
+              формы, человек прочитает их до ввода адреса. Изменена только
+              подача: тише, мельче, за разделителем. Убирать их нельзя и не
+              нужно — маскировка оговорки хуже её вида. */}
+          {marketLines.length > 0 && (
+            <div className={styles.heroMarketNote}>
+              {marketLines.map((line) => (
+                <p key={line.key} className={styles.heroMarketNoteLine}>
+                  <strong>{line.label}</strong> {line.text}
+                </p>
+              ))}
+            </div>
+          )}
+
           {/* Покрытие подано неравномерно намеренно — см. COVERED_CITIES в
               content.ts: список городов в реестре ≠ карта покрытия. */}
           <div className={styles.heroRegion}>
diff --git a/tradein-mvp/frontend/src/app/mera-public/landing-v3.module.css b/tradein-mvp/frontend/src/app/mera-public/landing-v3.module.css
index 77568bc0..cac3fd5e 100644
--- a/tradein-mvp/frontend/src/app/mera-public/landing-v3.module.css
+++ b/tradein-mvp/frontend/src/app/mera-public/landing-v3.module.css
@@ -499,6 +499,38 @@
   max-width: 520px;
 }
 
+/* Оговорки первого экрана — «пример по рынку, а не расчёт по вашему адресу»
+   и «по всем расчётам, а не только по Екатеринбургу».
+
+   Стоят ПОСЛЕ блока преимуществ и намеренно ТИШЕ его: раньше они лежали внутри
+   `.heroPerks` тем же кеглем и с тем же маркером, что «Бесплатно» и «За 150 ₽»,
+   и оговорка читалась как ещё один пункт предложения. Шесть однотипных строк
+   подряд — из них две про обратное — и давали ощущение стены текста.
+
+   Тише — не значит спрятаны: та же ширина колонки, тот же порядок чтения (до
+   формы), контраст держит норму AA. Маскировать оговорку хуже, чем показать. */
+.heroMarketNote {
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px solid var(--b2c-line);
+  max-width: 520px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.heroMarketNoteLine {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--b2c-muted);
+}
+
+.heroMarketNoteLine strong {
+  font-weight: 600;
+  color: var(--b2c-ink);
+}
+
 .heroListItem {
   display: flex;
   gap: 12px;
-- 
2.45.3