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

components/ZeroBlock.js

@@ -1,72 +1,165 @@
 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-персонажа Зеро.
- * Отображается на главной (compact) и на /zero (полный список).
+ * ZeroBlock — full-width amber-баннер с самим Зеро и лентой его заметок.
+ *
+ * Рендерится двумя вариантами:
+ *   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}
-            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"
-          />
-        ) : (
-          <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="text-sm font-semibold ink leading-tight">Зеро</div>
-          <div className="text-xs mute">{formatDate(note.published_at)}</div>
-        </div>
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src="/uploads/zero-coffee.webp"
+      alt="Зеро"
+      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>
-      <p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-7">
-        {note.content}
+      <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>
-      {note.channel_message_id && (
+      <div className="flex flex-wrap gap-2 text-sm">
         <Link
-          href={`https://t.me/zeropostru/${note.channel_message_id}`}
+          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="text-xs accent hover:underline inline-flex items-center gap-1"
+          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"
         >
-          в Telegram <ArrowRight className="w-3 h-3" />
-        </Link>
+          <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>
       )}
+      <div className="p-4 sm:p-5 flex-1 flex flex-col gap-3">
+        <div className="text-xs flex items-center gap-2" style={{ color: 'rgb(180 83 9)' }}>
+          <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>
+        <p className="text-sm leading-relaxed ink whitespace-pre-line line-clamp-6 flex-1">
+          {note.content}
+        </p>
+        {note.channel_message_id && (
+          <Link
+            href={`https://t.me/zeropostru/${note.channel_message_id}`}
+            target="_blank"
+            rel="noreferrer"
+            className="text-xs inline-flex items-center gap-1 text-amber-700 dark:text-amber-400 hover:underline mt-auto"
+          >
+            <Send className="w-3 h-3" /> в Telegram
+          </Link>
+        )}
+      </div>
     </article>
   );
 }
 
-export default function ZeroBlock({ notes, compact = false }) {
-  if (!notes || notes.length === 0) return null;
+export default function ZeroBlock({ notes = [], compact = false }) {
+  // На главной компонент скрывается полностью если нет заметок;
+  // на /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">
-      <div className="flex items-center justify-between mb-4 sm:mb-5">
-        <div className="flex items-center gap-2">
-          <Coffee className="w-4 h-4 mute" />
-          <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
-            Заметки от Зеро
-          </h2>
-          <span className="text-xs mute opacity-60">· короткие мысли AI-программиста</span>
-        </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>
+    <section
+      className="w-full py-12 sm:py-16 my-8 border-y"
+      style={{
+        background: 'linear-gradient(135deg, rgb(254 243 199 / 0.5), rgb(255 237 213 / 0.4))',
+        borderColor: 'rgb(253 230 138 / 0.6)',
+      }}
+    >
+      <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>
+            )}
+          </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 => <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>
-      <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} />)}
-      </div>
     </section>
   );
 }