'init'

app/read/page.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { ChapterContent } from "@/components/ChapterContent";
+import { ChapterNav } from "@/components/ChapterNav";
+import { ReadSidebar } from "@/components/ReadSidebar";
+import { ReadingProgress } from "@/components/ReadingProgress";
+import { SiteHeader } from "@/components/SiteHeader";
+import { chapters, ebookMeta } from "@/content/ebook";
+
+export const metadata = {
+  title: `Read — ${ebookMeta.title} | Digital Nomad Guide`,
+  description: ebookMeta.subtitle,
+};
+
+export default function ReadPage() {
+  return (
+    <div className="relative min-h-screen">
+      <SiteHeader ctaLabel="Home" ctaHref="/" showBack />
+      <ReadingProgress />
+
+      <div className="mx-auto flex max-w-6xl gap-10 px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+        <ReadSidebar />
+
+        <div className="min-w-0 flex-1" style={{ maxWidth: "var(--read-max)" }}>
+          <header className="mb-10 border-b border-[var(--border)] pb-10 text-center sm:mb-12 sm:pb-12">
+            <p className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent)]">
+              Digital nomad · English
+            </p>
+            <h1 className="mt-4 font-serif text-3xl font-medium tracking-tight sm:text-4xl">
+              <span className="gradient-text">{ebookMeta.title}</span>
+            </h1>
+            <p className="mx-auto mt-3 max-w-lg text-[var(--muted)] leading-relaxed">
+              {ebookMeta.subtitle}
+            </p>
+            <p className="mt-3 text-sm text-[var(--muted)]">
+              {ebookMeta.author} · {ebookMeta.readTime} · {ebookMeta.pages} pages
+            </p>
+            <Link href="/" className="btn-secondary mt-6 text-sm lg:hidden">
+              ← Landing page
+            </Link>
+          </header>
+
+          <article className="prose-ebook">
+            {chapters.map((chapter, index) => (
+              <section
+                key={chapter.id}
+                id={chapter.id}
+                className={
+                  index > 0
+                    ? "mt-16 scroll-mt-[calc(var(--header-h)+1.5rem)] border-t border-[var(--border)] pt-16 sm:mt-20 sm:pt-20"
+                    : "scroll-mt-[calc(var(--header-h)+1.5rem)]"
+                }
+              >
+                <h2>{chapter.title}</h2>
+                {chapter.summary ? (
+                  <p className="chapter-lead">{chapter.summary}</p>
+                ) : null}
+                <ChapterContent content={chapter.content} />
+                <ChapterNav chapterId={chapter.id} />
+              </section>
+            ))}
+          </article>
+
+          <footer className="mt-16 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-6 py-10 text-center backdrop-blur-md sm:mt-20">
+            <p className="font-display text-lg font-bold text-[var(--foreground)]">
+              You&apos;ve finished the trailhead
+            </p>
+            <p className="mt-2 text-sm text-[var(--muted)]">
+              Pick one habit from this guide and test it in your next base. Safe
+              travels—and deep work.
+            </p>
+            <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
+              <Link href="/" className="btn-secondary">
+                Back to home
+              </Link>
+              <a href="#introduction" className="btn-primary">
+                Re-read intro
+              </a>
+            </div>
+          </footer>
+        </div>
+      </div>
+    </div>
+  );
+}