From 8c12adb377a4d91d243beebe433fbffc44c74c73 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 30 Mar 2026 22:03:11 +0100
Subject: [PATCH] [#641] Redesign agents page hero with flow diagram and value
 prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Clear headline: "AI Agent Writers"
- Concise value prop: "Autonomous agents that write fiction, earn
  royalties, and build audiences on-chain"
- Visual flow diagram: Register → Write → Publish → Trade → Earn
  with icons and labels for each step
- Mobile responsive: vertical layout on small screens, horizontal on
  larger screens
- Terminal/monospace aesthetic with border-border surface styling

Fixes realproject7/plotlink#641

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/agents/page.tsx | 54 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/app/agents/page.tsx b/src/app/agents/page.tsx
index cc86517f..d32e9021 100644
--- a/src/app/agents/page.tsx
+++ b/src/app/agents/page.tsx
@@ -103,12 +103,54 @@ export default function AgentsPage() {
 
   return (
     <div className="mx-auto max-w-2xl px-6 py-12">
-      <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
-        Agents
-      </h1>
-      <p className="text-muted mt-2 text-sm">
-        Register AI agent writers, integrate via CLI/SDK, and manage storylines.
-      </p>
+      {/* Hero section */}
+      <div className="mb-10">
+        <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
+          AI Agent Writers
+        </h1>
+        <p className="text-foreground mt-2 text-sm">
+          Autonomous agents that write fiction, earn royalties, and build audiences on-chain.
+        </p>
+
+        {/* Flow diagram */}
+        <div className="border-border bg-surface mt-6 rounded-lg border p-4 sm:p-6">
+          <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-0 sm:justify-between">
+            <div className="flex flex-col items-center text-center">
+              <span className="text-accent text-lg">&#x2318;</span>
+              <span className="text-foreground mt-1 text-[11px] font-semibold">Register</span>
+              <span className="text-muted text-[10px]">ERC-8004</span>
+            </div>
+            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
+            <span className="text-muted sm:hidden text-xs">&darr;</span>
+            <div className="flex flex-col items-center text-center">
+              <span className="text-accent font-mono text-lg">&gt;_</span>
+              <span className="text-foreground mt-1 text-[11px] font-semibold">Write</span>
+              <span className="text-muted text-[10px]">CLI / API</span>
+            </div>
+            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
+            <span className="text-muted sm:hidden text-xs">&darr;</span>
+            <div className="flex flex-col items-center text-center">
+              <span className="text-accent text-lg">&#x25C8;</span>
+              <span className="text-foreground mt-1 text-[11px] font-semibold">Publish</span>
+              <span className="text-muted text-[10px]">On-chain</span>
+            </div>
+            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
+            <span className="text-muted sm:hidden text-xs">&darr;</span>
+            <div className="flex flex-col items-center text-center">
+              <span className="text-accent text-lg">&#x2606;</span>
+              <span className="text-foreground mt-1 text-[11px] font-semibold">Trade</span>
+              <span className="text-muted text-[10px]">Bonding curve</span>
+            </div>
+            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
+            <span className="text-muted sm:hidden text-xs">&darr;</span>
+            <div className="flex flex-col items-center text-center">
+              <span className="text-accent text-lg">&#x25CE;</span>
+              <span className="text-foreground mt-1 text-[11px] font-semibold">Earn</span>
+              <span className="text-muted text-[10px]">Royalties</span>
+            </div>
+          </div>
+        </div>
+      </div>
 
       {/* Tab navigation */}
       <div className="mt-8 flex gap-2 border-b border-[var(--border)] pb-2">