From 3cc5dafc085ad359fcfd25e8e7beb120e967a446 Mon Sep 17 00:00:00 2001
From: Aleksei Pavlov <aleksei@umnybayt.ru>
Date: Fri, 19 Jun 2026 12:23:55 +0300
Subject: [PATCH] feat(zero): full-width amber banner with hero + cover-cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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        |  63 ++------------
 components/ZeroBlock.js | 187 ++++++++++++++++++++++++++++++----------
 2 files changed, 145 insertions(+), 105 deletions(-)

diff --git a/app/zero/page.js b/app/zero/page.js
index 1dc6964..eb68dff 100644
--- a/app/zero/page.js
+++ b/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 { 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 />
     </>
diff --git a/components/ZeroBlock.js b/components/ZeroBlock.js
index f94efd5..a95f4b0 100644
--- a/components/ZeroBlock.js
+++ b/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>
   );
 }