Alexey Pavlov
a16bf812e4
- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем - darkMode: 'class' в Tailwind config - ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage - Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent) - Авто-определение по prefers-color-scheme как fallback - not-found.js: красивая 404 страница вместо дефолтной Next - Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about
99 lines
3.5 KiB
JavaScript
99 lines
3.5 KiB
JavaScript
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 { Sparkles, ArrowRight } from 'lucide-react';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default async function HomePage() {
|
|
let articles = [];
|
|
let tags = [];
|
|
try {
|
|
[articles, tags] = await Promise.all([
|
|
listArticles({ limit: 13 }),
|
|
listTags(),
|
|
]);
|
|
} catch (err) {
|
|
console.error('Home load failed:', err.message);
|
|
}
|
|
|
|
const [featured, ...rest] = articles;
|
|
|
|
return (
|
|
<>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured */}
|
|
{featured && (
|
|
<section id="articles" className="container-wide pb-8">
|
|
<ArticleCard article={featured} featured />
|
|
</section>
|
|
)}
|
|
|
|
{/* 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>
|
|
)}
|
|
|
|
{articles.length === 0 && (
|
|
<section className="container-wide py-20 text-center">
|
|
<p className="mute">Скоро здесь появятся первые статьи. ИИ уже работает над ними.</p>
|
|
</section>
|
|
)}
|
|
|
|
{/* 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>
|
|
)}
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|