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 ( + + ); +}