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/blog/[slug]/page.js

@@ -65,6 +65,17 @@ export default async function ArticlePage({ params }) {
           )}
         </div>
 
+        {article.cover_url && (
+          <div className="mb-10 -mx-4 sm:mx-0">
+            <img
+              src={article.cover_url}
+              alt={article.title}
+              className="w-full rounded-xl"
+              style={{ aspectRatio: '16/9', objectFit: 'cover' }}
+            />
+          </div>
+        )}
+
         <div
           className="prose prose-lg max-w-none font-serif prose-headings:font-sans"
           dangerouslySetInnerHTML={{ __html: html }}

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 />

components/ArticleCard.js

@@ -2,28 +2,108 @@ import Link from 'next/link';
 import { formatDate } from '@/lib/markdown';
 import { Clock } from 'lucide-react';
 
+function imageUrl(article) {
+  if (!article.cover_url) return null;
+  return article.cover_url; // /uploads/... проксируется через next.config rewrites
+}
+
+// Детерминированный градиент-фоллбек, чтобы у каждой статьи был свой узнаваемый цвет
+function gradientFor(article) {
+  const seed = (article.id || 0) * 31 + (article.title?.length || 0);
+  const variants = [
+    'linear-gradient(135deg, #10b981 0%, #0ea5e9 100%)',
+    'linear-gradient(135deg, #34d399 0%, #14b8a6 100%)',
+    'linear-gradient(135deg, #059669 0%, #6366f1 100%)',
+    'linear-gradient(135deg, #10b981 0%, #fbbf24 100%)',
+    'linear-gradient(135deg, #14b8a6 0%, #a78bfa 100%)',
+    'linear-gradient(135deg, #047857 0%, #0891b2 100%)',
+  ];
+  return variants[seed % variants.length];
+}
+
+function CoverPlaceholder({ article, featured = false }) {
+  const gradient = gradientFor(article);
+  return (
+    <div
+      className={`relative overflow-hidden ${featured ? 'aspect-[16/8]' : 'aspect-[16/9]'} rounded-xl`}
+      style={{ background: gradient }}
+    >
+      {/* геометрические декорации */}
+      <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-30" style={{ background: 'rgba(255,255,255,0.3)' }} />
+      <div className="absolute -bottom-12 -left-8 w-32 h-32 rounded-full opacity-20" style={{ background: 'rgba(0,0,0,0.2)' }} />
+      <div className="absolute inset-0 flex items-end p-4">
+        <div className="text-white/90 text-xs font-mono tracking-wider uppercase">
+          #{(article.tags?.[0] || 'zeropost')}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ArticleCard({ article, featured = false }) {
+  const img = imageUrl(article);
+
   if (featured) {
     return (
-      <Link
-        href={`/blog/${article.slug}`}
-        className="article-card block group p-8 sm:p-10"
-        style={{ borderColor: 'rgb(var(--accent) / 0.3)' }}
-      >
-        <div className="flex flex-wrap items-center gap-2 mb-4">
-          {(article.tags || []).slice(0, 3).map(t => (
+      <Link href={`/blog/${article.slug}`} className="article-card block group overflow-hidden p-0">
+        <div className="grid sm:grid-cols-2 gap-0">
+          <div className="p-4 sm:p-5">
+            {img ? (
+              <img src={img} alt={article.title} className="w-full aspect-[16/9] object-cover rounded-xl" loading="eager" />
+            ) : (
+              <CoverPlaceholder article={article} featured />
+            )}
+          </div>
+          <div className="p-6 sm:p-8 flex flex-col justify-center">
+            <div className="flex flex-wrap items-center gap-2 mb-3">
+              {(article.tags || []).slice(0, 3).map(t => (
+                <span key={t} className="tag">#{t}</span>
+              ))}
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold mb-3 leading-tight ink group-hover:accent transition-colors">
+              {article.title}
+            </h2>
+            {article.excerpt && (
+              <p className="mute leading-relaxed line-clamp-3 mb-4">
+                {article.excerpt}
+              </p>
+            )}
+            <div className="flex items-center gap-3 text-xs mute">
+              <span>{formatDate(article.published_at)}</span>
+              {article.reading_time && (
+                <span className="inline-flex items-center gap-1">
+                  <Clock className="w-3 h-3" /> {article.reading_time} мин
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </Link>
+    );
+  }
+
+  return (
+    <Link href={`/blog/${article.slug}`} className="article-card block group overflow-hidden p-0">
+      <div className="p-3">
+        {img ? (
+          <img src={img} alt={article.title} className="w-full aspect-[16/9] object-cover rounded-lg" loading="lazy" />
+        ) : (
+          <CoverPlaceholder article={article} />
+        )}
+      </div>
+      <div className="p-5 pt-2">
+        <div className="flex flex-wrap items-center gap-2 mb-2">
+          {(article.tags || []).slice(0, 2).map(t => (
             <span key={t} className="tag">#{t}</span>
           ))}
         </div>
-        <h2 className="text-2xl sm:text-3xl font-bold mb-3 leading-tight ink group-hover:accent transition-colors">
+        <h3 className="text-lg font-semibold mb-2 ink group-hover:accent transition-colors leading-snug line-clamp-2">
           {article.title}
-        </h2>
+        </h3>
         {article.excerpt && (
-          <p className="mute text-base sm:text-lg leading-relaxed line-clamp-3 mb-4">
-            {article.excerpt}
-          </p>
+          <p className="mute text-sm line-clamp-2 mb-4">{article.excerpt}</p>
         )}
-        <div className="flex items-center gap-4 text-xs mute">
+        <div className="flex items-center gap-3 text-xs mute">
           <span>{formatDate(article.published_at)}</span>
           {article.reading_time && (
             <span className="inline-flex items-center gap-1">
@@ -31,30 +111,6 @@ export default function ArticleCard({ article, featured = false }) {
             </span>
           )}
         </div>
-      </Link>
-    );
-  }
-
-  return (
-    <Link href={`/blog/${article.slug}`} className="article-card block group">
-      <div className="flex flex-wrap items-center gap-2 mb-3">
-        {(article.tags || []).slice(0, 2).map(t => (
-          <span key={t} className="tag">#{t}</span>
-        ))}
-      </div>
-      <h3 className="text-lg font-semibold mb-2 ink group-hover:accent transition-colors leading-snug">
-        {article.title}
-      </h3>
-      {article.excerpt && (
-        <p className="mute text-sm line-clamp-3 mb-4">{article.excerpt}</p>
-      )}
-      <div className="flex items-center gap-3 text-xs mute">
-        <span>{formatDate(article.published_at)}</span>
-        {article.reading_time && (
-          <span className="inline-flex items-center gap-1">
-            <Clock className="w-3 h-3" /> {article.reading_time} мин
-          </span>
-        )}
       </div>
     </Link>
   );

components/HeroBackground.js

@@ -0,0 +1,70 @@
+'use client';
+
+export default function HeroBackground() {
+  return (
+    <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
+      {/* Mesh gradient — несколько размытых blob'ов с медленной анимацией */}
+      <div className="hero-blob hero-blob-1" />
+      <div className="hero-blob hero-blob-2" />
+      <div className="hero-blob hero-blob-3" />
+
+      {/* Сетка точек поверх — тонкий фоновый паттерн */}
+      <div className="hero-grid" />
+
+      {/* Виньетка к низу — плавный переход к контенту */}
+      <div className="hero-fade" />
+
+      <style jsx>{`
+        .hero-blob {
+          position: absolute;
+          border-radius: 50%;
+          filter: blur(80px);
+          opacity: 0.5;
+        }
+        .hero-blob-1 {
+          width: 520px; height: 520px;
+          background: radial-gradient(circle, rgba(16,185,129,0.6) 0%, transparent 70%);
+          top: -120px; right: -80px;
+          animation: blob1 22s ease-in-out infinite alternate;
+        }
+        .hero-blob-2 {
+          width: 420px; height: 420px;
+          background: radial-gradient(circle, rgba(20,184,166,0.5) 0%, transparent 70%);
+          top: 50px; left: -60px;
+          animation: blob2 28s ease-in-out infinite alternate;
+        }
+        .hero-blob-3 {
+          width: 360px; height: 360px;
+          background: radial-gradient(circle, rgba(132,204,22,0.35) 0%, transparent 70%);
+          top: 200px; left: 40%;
+          animation: blob3 25s ease-in-out infinite alternate;
+        }
+        @keyframes blob1 {
+          0% { transform: translate(0, 0) scale(1); }
+          100% { transform: translate(-60px, 80px) scale(1.1); }
+        }
+        @keyframes blob2 {
+          0% { transform: translate(0, 0) scale(1); }
+          100% { transform: translate(80px, -40px) scale(0.95); }
+        }
+        @keyframes blob3 {
+          0% { transform: translate(0, 0) scale(1); }
+          100% { transform: translate(-40px, -60px) scale(1.08); }
+        }
+        .hero-grid {
+          position: absolute;
+          inset: 0;
+          background-image: radial-gradient(circle, rgb(var(--ink) / 0.06) 1px, transparent 1px);
+          background-size: 24px 24px;
+          mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+        }
+        .hero-fade {
+          position: absolute;
+          left: 0; right: 0; bottom: 0;
+          height: 180px;
+          background: linear-gradient(to bottom, transparent, rgb(var(--bg)));
+        }
+      `}</style>
+    </div>
+  );
+}

components/Reveal.js

@@ -0,0 +1,50 @@
+'use client';
+import { useEffect, useRef } from 'react';
+
+/**
+ * Lightweight reveal-on-scroll. Без зависимостей, нативный IntersectionObserver.
+ * Дочерние элементы с классом `.reveal` плавно появятся.
+ */
+export default function Reveal({ children, className = '' }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const io = new IntersectionObserver(
+      entries => {
+        entries.forEach(e => {
+          if (e.isIntersecting) {
+            e.target.classList.add('is-visible');
+            io.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
+    );
+    ref.current.querySelectorAll('.reveal').forEach(el => io.observe(el));
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} className={className}>
+      <style jsx global>{`
+        .reveal {
+          opacity: 0;
+          transform: translateY(20px);
+          transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+        }
+        .reveal.is-visible {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        .reveal-1 { transition-delay: 0.05s; }
+        .reveal-2 { transition-delay: 0.15s; }
+        .reveal-3 { transition-delay: 0.25s; }
+        @media (prefers-reduced-motion: reduce) {
+          .reveal { opacity: 1; transform: none; transition: none; }
+        }
+      `}</style>
+      {children}
+    </div>
+  );
+}

components/Stats.js

@@ -0,0 +1,42 @@
+import { BookOpen, Clock, Brain, Eye } from 'lucide-react';
+
+function StatCard({ icon: Icon, value, label }) {
+  return (
+    <div className="article-card flex items-center gap-4 p-5">
+      <div
+        className="w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0"
+        style={{ background: 'rgb(var(--accent) / 0.1)' }}
+      >
+        <Icon className="w-5 h-5 accent" />
+      </div>
+      <div className="min-w-0">
+        <div className="text-2xl font-bold ink leading-none mb-1 tabular-nums">{value}</div>
+        <div className="text-xs mute uppercase tracking-wider">{label}</div>
+      </div>
+    </div>
+  );
+}
+
+function fmt(n) {
+  if (!n) return '0';
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
+  return n.toLocaleString('ru-RU');
+}
+
+export default function Stats({ data }) {
+  if (!data) return null;
+  return (
+    <section className="container-wide pb-12">
+      <h2 className="text-sm font-medium uppercase tracking-widest mute mb-5">
+        Что уже написал ИИ
+      </h2>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard icon={BookOpen} value={fmt(data.articles_count)} label="статей" />
+        <StatCard icon={Clock} value={fmt(data.total_reading_min)} label="минут чтения" />
+        <StatCard icon={Brain} value={fmt(data.tokens_out)} label="токенов сгенерировано" />
+        <StatCard icon={Eye} value={fmt(data.total_views)} label="просмотров" />
+      </div>
+    </section>
+  );
+}

lib/engine.js

@@ -37,6 +37,14 @@ export async function listTags() {
   return call('/api/articles/tags', { next: { revalidate: 300 } });
 }
 
+export async function getStats() {
+  try {
+    return await call('/api/stats', { cache: 'no-store' });
+  } catch {
+    return null;
+  }
+}
+
 export async function generateArticle(data) {
   return call('/api/articles/generate', {
     method: 'POST',

next.config.js

@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  async rewrites() {
+    return [
+      {
+        source: '/uploads/:path*',
+        destination: `${process.env.ENGINE_URL || 'http://127.0.0.1:3040'}/uploads/:path*`,
+      },
+    ];
+  },
 };