From 7743e6fa750dcbe6d64ce6e982d61252a3b39d93 Mon Sep 17 00:00:00 2001
From: pat <sinachpat@gmail.com>
Date: Mon, 31 Aug 2026 07:33:24 +0000
Subject: [PATCH] feat(reader): add reading-demo library page

---
 marketing-site/pages/read/index.jsx | 57 +++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 marketing-site/pages/read/index.jsx

diff --git a/marketing-site/pages/read/index.jsx b/marketing-site/pages/read/index.jsx
new file mode 100644
index 0000000..d500b00
--- /dev/null
+++ b/marketing-site/pages/read/index.jsx
@@ -0,0 +1,57 @@
+import Head from "next/head";
+import Link from "next/link";
+import ReaderNav from "../../components/reader/ReaderNav";
+import ReaderFooter from "../../components/reader/ReaderFooter";
+import { LIBRARY } from "../../data/sample-chapter";
+
+export default function ReadLibrary() {
+  return (
+    <>
+      <Head>
+        <title>Library — AIBook.fun reading demo</title>
+        <meta
+          name="description"
+          content="People read chapters, not a shelf of cards. Sample reading environment for AIBook.fun."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <ReaderNav />
+      <main>
+        <section className="section contents reader-library">
+          <div className="wrap">
+            <span className="spec demo-chip">Reading demo · not the live book</span>
+            <h1 className="library-title">Chapters, not a shelf of cards.</h1>
+            <p className="library-lede">
+              A chapter is a substantial essay for one vertical. Full workflows nest
+              in the argument, at the point they earn. One chapter is readable here.
+              The rest of the shelf is listed so you can see the library.
+            </p>
+            <div className="toc">
+              {LIBRARY.map((item) =>
+                item.status === "ready" ? (
+                  <Link href={item.href} key={item.num}>
+                    <span className="num">{item.num}</span>
+                    <span className="name">{item.name}</span>
+                    <span className="desc">{item.desc}</span>
+                    <span className="arrow" aria-hidden="true">
+                      →
+                    </span>
+                  </Link>
+                ) : (
+                  <div className="toc-soon" key={item.num} aria-disabled="true">
+                    <span className="num">{item.num}</span>
+                    <span className="name">{item.name}</span>
+                    <span className="desc">{item.desc}</span>
+                    <span className="soon">Coming</span>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </section>
+      </main>
+      <ReaderFooter />
+    </>
+  );
+}