From 3154b475783516fcd4b6a0668c53d4944be1294b Mon Sep 17 00:00:00 2001
From: Alexey Pavlov <admin@zeroday.su>
Date: Sun, 31 May 2026 10:00:25 +0300
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20hero=20=E2=80=94=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=80=D1=82=D0=B8=D0=BD=D0=BA=D0=B0=20=D0=BA=D0=B0=D0=BA=20?=
 =?UTF-8?q?=D1=84=D0=BE=D0=BD=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8=D0=B8,=20?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BA=D1=81=D1=82=20=D0=BF=D0=BE=D0=B2=D0=B5=D1=80?=
 =?UTF-8?q?=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- HeroImage: на мобилке картинка позиционируется фоном за текстом, opacity 0.45
- Сильный mask-gradient к левому-нижнему углу, чтобы заголовок читался
- Софт-вуаль поверх фона (background var(--bg) с убывающей прозрачностью)
- Секция hero: min-h-[88vh] на мобиле, текст по центру по вертикали
- В тёмной теме мобильная opacity ещё ниже (0.32)
- Десктоп без изменений
---
 app/page.js             |  4 +--
 components/HeroImage.js | 70 ++++++++++++++++++++++++++---------------
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/app/page.js b/app/page.js
index e2b1d8c..e2a5590 100644
--- a/app/page.js
+++ b/app/page.js
@@ -31,9 +31,9 @@ export default async function HomePage() {
       <Header />
 
       {/* Hero */}
-      <section className="relative overflow-hidden">
+      <section className="relative overflow-hidden min-h-[88vh] sm:min-h-0 flex items-center sm:block">
         <HeroImage />
-        <div className="container-wide pt-8 pb-12 sm:pt-20 sm:pb-24 lg:pt-28 lg:pb-32 relative">
+        <div className="container-wide pt-6 pb-10 sm:pt-20 sm:pb-24 lg:pt-28 lg:pb-32 relative z-10 w-full">
           <Reveal>
             <div className="max-w-xl lg:max-w-2xl reveal">
               <div
diff --git a/components/HeroImage.js b/components/HeroImage.js
index 552b14c..24149ba 100644
--- a/components/HeroImage.js
+++ b/components/HeroImage.js
@@ -2,8 +2,9 @@
 import { useEffect, useRef } from 'react';
 
 /**
- * Hero иллюстрация с лёгким parallax при скролле + плавный fade с левого края,
- * чтобы картинка органично «вытаивала» в фон под текстом.
+ * Hero иллюстрация — фон секции. Поверх неё рендерится текст.
+ * Desktop: справа, fade к центру, parallax при скролле.
+ * Mobile: фон ВО ВСЮ секцию, текст поверх с дополнительным фейдом.
  */
 export default function HeroImage() {
   const ref = useRef(null);
@@ -15,7 +16,6 @@ export default function HeroImage() {
       cancelAnimationFrame(raf);
       raf = requestAnimationFrame(() => {
         const y = window.scrollY;
-        // едет вверх медленнее, чем страница
         const offset = Math.min(60, y * 0.15);
         if (ref.current) ref.current.style.transform = `translateY(-${offset}px)`;
       });
@@ -29,7 +29,7 @@ export default function HeroImage() {
       <picture>
         <source
           srcSet="/uploads/hero-1920.webp 1920w, /uploads/hero-1280.webp 1280w, /uploads/hero-800.webp 800w"
-          sizes="(min-width: 1024px) 65vw, 100vw"
+          sizes="(min-width: 768px) 70vw, 100vw"
           type="image/webp"
         />
         <img
@@ -46,11 +46,10 @@ export default function HeroImage() {
       <style jsx>{`
         .hero-image-wrap {
           position: absolute;
-          top: 0; right: 0; bottom: 0;
-          width: 100%;
+          inset: 0;
           pointer-events: none;
           overflow: hidden;
-          z-index: -1;
+          z-index: 0;
         }
         .hero-image {
           position: absolute;
@@ -63,8 +62,6 @@ export default function HeroImage() {
           object-position: right top;
           opacity: 0.85;
           will-change: transform;
-          transition: opacity 0.4s ease;
-          /* плавный фейд от центра к левому краю — картинка тает */
           -webkit-mask-image: linear-gradient(
             to right,
             transparent 0%,
@@ -93,27 +90,48 @@ export default function HeroImage() {
           background: linear-gradient(to bottom, transparent, rgb(var(--bg)));
           pointer-events: none;
         }
-        /* На мобилке картинка сверху, под ней — текст */
+
+        /* === MOBILE: картинка фоном, текст поверх === */
         @media (max-width: 767px) {
-          .hero-image-wrap {
-            position: relative;
-            width: 100vw;
-            margin-left: -1rem;
-            margin-right: -1rem;
-            height: 240px;
-            margin-bottom: 1rem;
-          }
           .hero-image {
-            top: 0;
-            right: 0;
+            top: -20px;
+            right: -30%;     /* выезжает за правый край — видна только часть */
             height: 100%;
-            width: 100%;
-            object-position: right center;
-            opacity: 0.95;
-            -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-            mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+            width: auto;
+            max-width: 160%;
+            opacity: 0.45;   /* приглушаем, чтобы текст читался */
+            -webkit-mask-image: linear-gradient(
+              to bottom right,
+              transparent 0%,
+              rgba(0,0,0,0.15) 30%,
+              rgba(0,0,0,0.6) 60%,
+              black 100%
+            );
+            mask-image: linear-gradient(
+              to bottom right,
+              transparent 0%,
+              rgba(0,0,0,0.15) 30%,
+              rgba(0,0,0,0.6) 60%,
+              black 100%
+            );
+          }
+          :global(.dark) .hero-image {
+            opacity: 0.32;
+          }
+          /* софт-вуаль для контраста заголовка */
+          .hero-image-wrap::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(
+              to bottom,
+              rgb(var(--bg) / 0.4) 0%,
+              rgb(var(--bg) / 0.2) 40%,
+              rgb(var(--bg)) 100%
+            );
+            z-index: 1;
+            pointer-events: none;
           }
-          .hero-image-wrap::after { display: none; }
         }
       `}</style>
     </div>