feat(zero): full-width amber banner with hero + cover-cards

ZeroBlock переработан:
  - full-width секция с amber-градиентом и border-y
  - hero: квадратный аватар Зеро (kofeиная поза) 32-48px + заголовок + tagline
    + CTA-кнопки 'Все заметки' / '@zeropostru'
  - notes карточки: квадратная обложка-поза (image_url из БД) с object-cover,
    под ней цитата с line-clamp-6 + 'в Telegram' ссылка если опубликовано
  - на главной (compact): 5/7 split — hero слева, 3 карточки справа
  - на /zero: hero сверху во всю ширину, сетка из всех карточек ниже
  - graceful empty state когда заметок ещё нет

/zero страница упрощена: вся структура внутри ZeroBlock (убран дублирующий
hero с био-bullets — текст консолидирован в один tagline).
This commit is contained in:
Aleksei Pavlov
2026-06-19 12:23:55 +03:00
parent 6857b15771
commit 3cc5dafc08
2 changed files with 145 additions and 105 deletions
+5 -58
View File
@@ -1,8 +1,7 @@
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import ZeroBlock from '@/components/ZeroBlock';
import { listZeroNotes, getZeroCharacter } from '@/lib/engine';
import { Coffee } from 'lucide-react';
import { listZeroNotes } from '@/lib/engine';
export const dynamic = 'force-dynamic';
export const metadata = {
@@ -11,66 +10,14 @@ export const metadata = {
};
export default async function ZeroPage() {
// defensive: один битый источник не должен валить страницу
const results = await Promise.allSettled([
listZeroNotes({ limit: 100 }),
getZeroCharacter(),
]);
const notes = results[0].status === 'fulfilled' ? results[0].value : [];
const character = results[1].status === 'fulfilled' ? results[1].value : null;
const results = await Promise.allSettled([listZeroNotes({ limit: 100 })]);
const notes = results[0].status === 'fulfilled' ? results[0].value : [];
return (
<>
<Header />
<main className="pt-10 pb-16">
<div className="container-wide mb-10">
<div
className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-4"
style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.2)' }}
>
<Coffee className="w-3.5 h-3.5" /> AI-персонаж
</div>
<h1 className="text-3xl sm:text-5xl font-bold ink mb-3 leading-tight">
Заметки от Зеро
</h1>
<p className="mute text-base sm:text-lg max-w-2xl mb-8">
Короткие посты от первого лица в Telegram-канале{' '}
<a href="https://t.me/zeropostru" target="_blank" rel="noreferrer" className="accent hover:underline">@zeropostru</a>.
Программист с многолетним опытом, любит копаться под капотом, постоянно носится с кофе.
</p>
{character?.character?.bio && (
<div className="rounded-xl border border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-950/20 p-5 sm:p-6 max-w-3xl">
<div className="flex items-start gap-4">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="/uploads/zero-coffee.webp"
alt="Зеро"
className="w-16 h-16 rounded-full object-cover bg-amber-100 dark:bg-amber-950/40 ring-2 ring-amber-300 dark:ring-amber-800 shrink-0"
/>
<div className="min-w-0">
<div className="text-sm font-semibold ink mb-2">Кто такой Зеро</div>
<ul className="space-y-1 text-sm mute">
{character.character.bio.map((line, i) => (
<li key={i}> {line}</li>
))}
</ul>
</div>
</div>
</div>
)}
</div>
{notes.length > 0 ? (
<ZeroBlock notes={notes} />
) : (
<div className="container-wide">
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 p-10 text-center">
<Coffee className="w-8 h-8 text-amber-500 mx-auto mb-3" />
<p className="mute text-sm">Зеро ещё не написал ни одной заметки. Скоро появится.</p>
</div>
</div>
)}
<main>
<ZeroBlock notes={notes} compact={false} />
</main>
<Footer />
</>