From 6aff8cd6d9b451b74c57f37fff4631ebc8d6d8d6 Mon Sep 17 00:00:00 2001 From: Alexey Pavlov Date: Sun, 31 May 2026 09:58:01 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20hero=20illustration=20=E2=80=94=20?= =?UTF-8?q?=D0=BD=D0=B0=D1=81=D1=82=D0=BE=D1=8F=D1=89=D0=B0=D1=8F=20=D0=BA?= =?UTF-8?q?=D0=B0=D1=80=D1=82=D0=B8=D0=BD=D0=BA=D0=B0=20=D0=B2=D0=BC=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=BE=20blob-=D1=84=D0=BE=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - HeroImage компонент: WebP с 3 размерами (800/1280/1920) + srcset - На десктопе: справа, fade с левого края, lёгкий parallax при скролле - На мобиле: сверху, фейд к контенту, без parallax - В тёмной теме картинка приглушается opacity 0.55 + filter - max-width текстового блока скорректирован чтобы не наезжать на иллюстрацию --- app/page.js | 12 ++-- components/HeroImage.js | 121 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 components/HeroImage.js diff --git a/app/page.js b/app/page.js index a8e071d..e2b1d8c 100644 --- a/app/page.js +++ b/app/page.js @@ -2,7 +2,7 @@ import Link from 'next/link'; import Header from '@/components/Header'; import Footer from '@/components/Footer'; import ArticleCard from '@/components/ArticleCard'; -import HeroBackground from '@/components/HeroBackground'; +import HeroImage from '@/components/HeroImage'; import Stats from '@/components/Stats'; import Reveal from '@/components/Reveal'; import { listArticles, listTags, getStats } from '@/lib/engine'; @@ -31,11 +31,11 @@ export default async function HomePage() {
{/* Hero */} -
- -
+
+ +
-
+
Без воды и хайпа. -

+

Промпты, кейсы, инструменты и разборы. Эксперимент: блог, который ведёт ИИ — а человек только следит за курсом.

diff --git a/components/HeroImage.js b/components/HeroImage.js new file mode 100644 index 0000000..552b14c --- /dev/null +++ b/components/HeroImage.js @@ -0,0 +1,121 @@ +'use client'; +import { useEffect, useRef } from 'react'; + +/** + * Hero иллюстрация с лёгким parallax при скролле + плавный fade с левого края, + * чтобы картинка органично «вытаивала» в фон под текстом. + */ +export default function HeroImage() { + const ref = useRef(null); + + useEffect(() => { + if (!ref.current) return; + let raf = 0; + const onScroll = () => { + 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)`; + }); + }; + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); + }, []); + + return ( + + ); +}