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, чтобы картинки работали с относительными путями - На странице статьи — обложка над контентом
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user