feat: оживление сайта — обложки, hero-фон, статистика, анимации

- ArticleCard: реальные обложки с fallback на детерминированный градиент по id статьи
- HeroBackground: 3 анимированных blob'а + dot-grid + плавный fade к контенту
- Stats компонент: 4 карточки — статьи / минуты чтения / токены / просмотры
- Reveal компонент: IntersectionObserver-based fade-in при скролле, respect prefers-reduced-motion
- next.config: rewrites /uploads/* → engine, чтобы картинки работали с относительными путями
- На странице статьи — обложка над контентом

app/page.js

@@ -2,7 +2,10 @@ import Link from 'next/link';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import ArticleCard from '@/components/ArticleCard';
-import { listArticles, listTags } from '@/lib/engine';
+import HeroBackground from '@/components/HeroBackground';
+import Stats from '@/components/Stats';
+import Reveal from '@/components/Reveal';
+import { listArticles, listTags, getStats } from '@/lib/engine';
 import { Sparkles, ArrowRight } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
@@ -10,10 +13,12 @@ export const dynamic = 'force-dynamic';
 export default async function HomePage() {
   let articles = [];
   let tags = [];
+  let stats = null;
   try {
-    [articles, tags] = await Promise.all([
+    [articles, tags, stats] = await Promise.all([
       listArticles({ limit: 13 }),
       listTags(),
+      getStats(),
     ]);
   } catch (err) {
     console.error('Home load failed:', err.message);
@@ -26,50 +31,66 @@ export default async function HomePage() {
       <Header />
 
       {/* Hero */}
-      <section className="container-wide pt-12 pb-10 sm:pt-20 sm:pb-16">
-        <div className="max-w-3xl">
-          <div
-            className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-6"
-            style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.2)' }}
-          >
-            <Sparkles className="w-3.5 h-3.5" />
-            Блог, который ведёт ИИ
-          </div>
-          <h1 className="text-4xl sm:text-6xl font-bold tracking-tight leading-tight mb-5 ink">
-            Практический ИИ.<br />
-            <span className="mute">Без воды и хайпа.</span>
-          </h1>
-          <p className="text-lg mute mb-8 max-w-2xl">
-            Промпты, кейсы, инструменты и разборы. Всё пишет ИИ — кроме редакторских заметок. Если хочешь так же вести свой Telegram-канал — попробуй наш сервис.
-          </p>
-          <div className="flex flex-wrap gap-3">
-            <Link href="#articles" className="btn btn-primary">
-              Читать статьи <ArrowRight className="w-4 h-4" />
-            </Link>
-            <a href="https://app.zeropost.ru" className="btn btn-ghost">
-              Получить ассистента
-            </a>
-          </div>
+      <section className="relative">
+        <HeroBackground />
+        <div className="container-wide pt-16 pb-12 sm:pt-24 sm:pb-20 relative">
+          <Reveal>
+            <div className="max-w-3xl reveal">
+              <div
+                className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-6"
+                style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.25)' }}
+              >
+                <Sparkles className="w-3.5 h-3.5" />
+                Блог, который ведёт ИИ
+              </div>
+              <h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.05] mb-5 ink">
+                Практический ИИ.<br />
+                <span className="mute">Без воды и хайпа.</span>
+              </h1>
+              <p className="text-lg sm:text-xl mute mb-8 max-w-2xl leading-relaxed">
+                Промпты, кейсы, инструменты и разборы. Всё пишет ИИ — кроме редакторских заметок. Если хочешь так же вести свой Telegram-канал — попробуй наш сервис.
+              </p>
+              <div className="flex flex-wrap gap-3">
+                <Link href="#articles" className="btn btn-primary">
+                  Читать статьи <ArrowRight className="w-4 h-4" />
+                </Link>
+                <a href="https://app.zeropost.ru" className="btn btn-ghost">
+                  Получить ассистента
+                </a>
+              </div>
+            </div>
+          </Reveal>
         </div>
       </section>
 
+      {/* Stats */}
+      <Reveal>
+        <div className="reveal">
+          <Stats data={stats} />
+        </div>
+      </Reveal>
+
       {/* Featured */}
       {featured && (
-        <section id="articles" className="container-wide pb-8">
-          <ArticleCard article={featured} featured />
-        </section>
+        <Reveal>
+          <section id="articles" className="container-wide pb-8 reveal">
+            <ArticleCard article={featured} featured />
+          </section>
+        </Reveal>
       )}
 
       {/* Rest */}
       {rest.length > 0 && (
-        <section className="container-wide pb-12">
-          <h2 className="text-sm font-medium uppercase tracking-widest mute mb-5">
-            Последние материалы
-          </h2>
-          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            {rest.map(a => <ArticleCard key={a.id} article={a} />)}
-          </div>
-        </section>
+        <Reveal>
+          <section className="container-wide pb-12 reveal">
+            <h2 className="text-sm font-medium uppercase tracking-widest mute mb-5">
+              Последние материалы
+            </h2>
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+              {rest.map(a => <ArticleCard key={a.id} article={a} />)}
+            </div>
+          </section>
+        </Reveal>
       )}
 
       {articles.length === 0 && (
@@ -80,16 +101,18 @@ export default async function HomePage() {
 
       {/* Tags */}
       {tags.length > 0 && (
-        <section className="container-wide pb-12">
-          <h2 className="text-sm font-medium uppercase tracking-widest mute mb-4">Темы</h2>
-          <div className="flex flex-wrap gap-2">
-            {tags.map(t => (
-              <Link key={t.tag} href={`/tag/${encodeURIComponent(t.tag)}`} className="tag">
-                #{t.tag} <span style={{ opacity: 0.6 }}>({t.cnt})</span>
-              </Link>
-            ))}
-          </div>
-        </section>
+        <Reveal>
+          <section className="container-wide pb-12 reveal">
+            <h2 className="text-sm font-medium uppercase tracking-widest mute mb-4">Темы</h2>
+            <div className="flex flex-wrap gap-2">
+              {tags.map(t => (
+                <Link key={t.tag} href={`/tag/${encodeURIComponent(t.tag)}`} className="tag">
+                  #{t.tag} <span style={{ opacity: 0.55 }}>({t.cnt})</span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        </Reveal>
       )}
 
       <Footer />