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, чтобы картинки работали с относительными путями
- На странице статьи — обложка над контентом

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>
   );