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

app/zero/page.js

@@ -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 { listZeroNotes } from '@/lib/engine';
-import { Coffee } from 'lucide-react';
 
 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 })]);
-  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;
 
   return (
     <>
       <Header />
-      <main className="pt-10 pb-16">
+      <main>
-        <div className="container-wide mb-10">
+        <ZeroBlock notes={notes} compact={false} />
-          <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>
       <Footer />
     </>

components/ZeroBlock.js

@@ -1,33 +1,97 @@
 import Link from 'next/link';
-import { Coffee, ArrowRight } from 'lucide-react';
+import { Coffee, ArrowRight, Send } from 'lucide-react';
 import { formatDate } from '@/lib/markdown';
 
 /**
- * ZeroBlock — лента коротких заметок от AI-персонажа Зеро.
+ * ZeroBlock — full-width amber-баннер с самим Зеро и лентой его заметок.
- * Отображается на главной (compact) и на /zero (полный список).
+ *
+ * Рендерится двумя вариантами:
+ *   compact=true  — на главной: hero слева + 3 карточки справа
+ *   compact=false — на /zero:   hero вверху + сетка всех карточек
  */
-function ZeroCard({ note }) {
+
+const TAGLINE = 'AI-программист с многолетним опытом. Делится короткими мыслями о коде, новых инструментах и нелепых багах из дебаг-сессий за полночь.';
+
+function ZeroAvatar({ size = 'lg' }) {
+  const cls = {
+    sm: 'w-20 h-20',
+    md: 'w-28 h-28',
+    lg: 'w-32 h-32 sm:w-40 sm:h-40',
+    xl: 'w-40 h-40 sm:w-48 sm:h-48',
+  }[size] || '';
   return (
-    <article className="article-card p-5 sm:p-6 h-full flex flex-col">
-      <div className="flex items-center gap-3 mb-3">
-        {note.image_url ? (
     // eslint-disable-next-line @next/next/no-img-element
     <img
-            src={note.image_url}
+      src="/uploads/zero-coffee.webp"
       alt="Зеро"
-            className="w-9 h-9 rounded-full object-cover bg-amber-100 dark:bg-amber-950/40 ring-2 ring-amber-200 dark:ring-amber-900 shrink-0"
+      className={`${cls} rounded-2xl object-cover bg-amber-100 dark:bg-amber-950/60 ring-2 ring-amber-300 dark:ring-amber-800 shrink-0 shadow-sm`}
+    />
+  );
+}
+
+function ZeroIntro({ size = 'lg' }) {
+  return (
+    <div className="min-w-0">
+      <div
+        className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2.5 py-1 rounded-full mb-3"
+        style={{
+          color: 'rgb(180 83 9)',
+          background: 'rgb(254 243 199 / 0.7)',
+          border: '1px solid rgb(252 211 77 / 0.5)',
+        }}
+      >
+        <Coffee className="w-3 h-3" /> AI-персонаж
+      </div>
+      <h2 className={`font-bold ink leading-tight mb-3 ${size === 'xl' ? 'text-3xl sm:text-4xl lg:text-5xl' : 'text-2xl sm:text-3xl'}`}>
+        Заметки от Зеро
+      </h2>
+      <p className="text-sm sm:text-base mute leading-relaxed mb-5 max-w-md">
+        {TAGLINE}
+      </p>
+      <div className="flex flex-wrap gap-2 text-sm">
+        <Link
+          href="/zero"
+          className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg font-medium transition-colors"
+          style={{ background: 'rgb(217 119 6)', color: 'white' }}
+        >
+          Все заметки <ArrowRight className="w-3.5 h-3.5" />
+        </Link>
+        <a
+          href="https://t.me/zeropostru"
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg font-medium border border-amber-300 dark:border-amber-800 text-amber-800 dark:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-950/30 transition-colors"
+        >
+          <Send className="w-3.5 h-3.5" /> @zeropostru
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function ZeroNoteCard({ note }) {
+  const hasImage = !!note.image_url;
+  return (
+    <article className="rounded-xl bg-white dark:bg-neutral-900 ring-1 ring-amber-200/60 dark:ring-amber-900/60 overflow-hidden flex flex-col hover:ring-amber-400 dark:hover:ring-amber-700 transition-all">
+      {hasImage && (
+        <div className="aspect-square bg-amber-50 dark:bg-amber-950/40 overflow-hidden">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={note.image_url}
+            alt={`Зеро · ${note.pose || ''}`}
+            className="w-full h-full object-cover"
+            loading="lazy"
           />
-        ) : (
-          <div className="w-9 h-9 rounded-full bg-amber-100 dark:bg-amber-950/40 ring-2 ring-amber-200 dark:ring-amber-900 flex items-center justify-center shrink-0">
-            <Coffee className="w-4 h-4 text-amber-600" />
         </div>
       )}
-        <div className="min-w-0">
+      <div className="p-4 sm:p-5 flex-1 flex flex-col gap-3">
-          <div className="text-sm font-semibold ink leading-tight">Зеро</div>
+        <div className="text-xs flex items-center gap-2" style={{ color: 'rgb(180 83 9)' }}>
-          <div className="text-xs mute">{formatDate(note.published_at)}</div>
+          <Coffee className="w-3 h-3" />
+          <span className="font-medium">Зеро</span>
+          <span className="opacity-50">·</span>
+          <span className="opacity-70">{formatDate(note.published_at || note.created_at)}</span>
         </div>
-      </div>
+        <p className="text-sm leading-relaxed ink whitespace-pre-line line-clamp-6 flex-1">
-      <p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-7">
           {note.content}
         </p>
         {note.channel_message_id && (
@@ -35,37 +99,66 @@ function ZeroCard({ note }) {
             href={`https://t.me/zeropostru/${note.channel_message_id}`}
             target="_blank"
             rel="noreferrer"
-          className="text-xs accent hover:underline inline-flex items-center gap-1"
+            className="text-xs inline-flex items-center gap-1 text-amber-700 dark:text-amber-400 hover:underline mt-auto"
           >
-          в Telegram <ArrowRight className="w-3 h-3" />
+            <Send className="w-3 h-3" /> в Telegram
           </Link>
         )}
+      </div>
     </article>
   );
 }
 
-export default function ZeroBlock({ notes, compact = false }) {
+export default function ZeroBlock({ notes = [], compact = false }) {
-  if (!notes || notes.length === 0) return null;
+  // На главной компонент скрывается полностью если нет заметок;
+  // на /zero — рендерится только Hero (с CTA-кнопками)
+  if (compact && notes.length === 0) return null;
+
   const items = compact ? notes.slice(0, 3) : notes;
 
   return (
-    <section className="container-wide pb-12">
+    <section
-      <div className="flex items-center justify-between mb-4 sm:mb-5">
+      className="w-full py-12 sm:py-16 my-8 border-y"
-        <div className="flex items-center gap-2">
+      style={{
-          <Coffee className="w-4 h-4 mute" />
+        background: 'linear-gradient(135deg, rgb(254 243 199 / 0.5), rgb(255 237 213 / 0.4))',
-          <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
+        borderColor: 'rgb(253 230 138 / 0.6)',
-            Заметки от Зеро
+      }}
-          </h2>
+    >
-          <span className="text-xs mute opacity-60">· короткие мысли AI-программиста</span>
+      <div className="container-wide">
+        {compact ? (
+          // Главная: hero слева (5 кол), карточки справа (7 кол)
+          <div className="grid lg:grid-cols-12 gap-8 lg:gap-10 items-start">
+            <div className="lg:col-span-5 flex items-start gap-5 sm:gap-6">
+              <ZeroAvatar size="lg" />
+              <ZeroIntro size="lg" />
+            </div>
+            {items.length > 0 && (
+              <div className="lg:col-span-7">
+                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {items.map(n => <ZeroNoteCard key={n.id} note={n} />)}
+                </div>
               </div>
-        {compact && notes.length > 3 && (
-          <Link href="/zero" className="text-xs mute hover:ink transition-colors inline-flex items-center gap-1">
-            Все <ArrowRight className="w-3 h-3" />
-          </Link>
             )}
           </div>
+        ) : (
+          // Страница /zero: hero сверху во всю ширину, карточки ниже
+          <>
+            <div className="flex items-start gap-5 sm:gap-6 mb-10 sm:mb-12 max-w-3xl">
+              <ZeroAvatar size="xl" />
+              <ZeroIntro size="xl" />
+            </div>
+            {items.length > 0 ? (
               <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
-        {items.map(n => <ZeroCard key={n.id} note={n} />)}
+                {items.map(n => <ZeroNoteCard key={n.id} note={n} />)}
+              </div>
+            ) : (
+              <div className="rounded-xl border border-amber-200 dark:border-amber-900 bg-white/50 dark:bg-amber-950/20 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>
     </section>
   );