Tighten copy and polish UX across site (#12)

Copy: cut clutter from about section, tighten footer support card,
shorten author bio, reword default SEO description.
SEO: use · instead of | in all page titles.
404: redesign with prominent status code, dual CTAs, tighter copy.
UX: button press feedback (scale 0.97), hover lift on footer links,
support card hover border, smooth transition defaults.
ChapterLayout: rename 'Suggest Feedback' to 'Feedback', pre-fill
issue body with chapter name.

Co-authored-by: Ona <no-reply@ona.com>

Author: Siddhant-K-code

src/components/Footer.astro

@@ -5,7 +5,7 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 <footer class="border-t border-[var(--border-subtle)]">
   <div class="max-w-2xl mx-auto px-6 lg:px-10">
     <!-- Support card -->
-    <div class="my-8 rounded-xl border border-[var(--border)] bg-[var(--bg-secondary)] p-5">
+    <div class="my-8 rounded-xl border border-[var(--border)] bg-[var(--bg-secondary)] p-5 hover:border-[var(--text-tertiary)] transition-colors">
       <div class="flex items-start gap-3.5">
         <div class="w-9 h-9 rounded-lg bg-[var(--bg-tertiary)] flex items-center justify-center shrink-0 mt-0.5">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -14,29 +14,29 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
         </div>
         <div>
           <p class="text-[14px] font-medium text-[var(--text-primary)] mb-1">Support my work</p>
-          <p class="text-[13px] text-[var(--text-tertiary)] leading-relaxed mb-4">Most of this book was written on holidays, weekends, and past midnight after full workdays. If it saved you time or helped you make a better decision, consider supporting the work.</p>
+          <p class="text-[13px] text-[var(--text-tertiary)] leading-relaxed mb-4">This book was written on holidays, weekends, and past midnight. If it saved you time or helped you make a better decision, consider supporting it.</p>
           <div class="flex flex-wrap gap-2.5">
             <a
               href="https://github.com/sponsors/Siddhant-K-code"
               target="_blank"
               rel="noopener noreferrer"
-              class="inline-flex items-center h-8 px-3.5 text-[13px] font-medium border border-[var(--border)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-tertiary)] transition-colors"
+              class="inline-flex items-center h-8 px-3.5 text-[13px] font-medium border border-[var(--border)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-tertiary)] hover:-translate-y-px transition-all"
             >
               Sponsor on GitHub
             </a>
             <a
               href="https://buymeacoffee.com/siddhantkhare"
               target="_blank"
               rel="noopener noreferrer"
-              class="inline-flex items-center h-8 px-3.5 text-[13px] font-medium border border-[var(--border)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-tertiary)] transition-colors"
+              class="inline-flex items-center h-8 px-3.5 text-[13px] font-medium border border-[var(--border)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-tertiary)] hover:-translate-y-px transition-all"
             >
               Buy me a coffee
             </a>
             <a
               href="https://siddhantkhar5.gumroad.com/l/agentic-engineering-guide"
               target="_blank"
               rel="noopener noreferrer"
-              class="inline-flex items-center h-8 px-3.5 text-[13px] font-medium border border-[var(--border)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-tertiary)] transition-colors"
+              class="inline-flex items-center h-8 px-3.5 text-[13px] font-medium border border-[var(--border)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-tertiary)] hover:-translate-y-px transition-all"
             >
               Get the PDF & EPUB
             </a>

src/layouts/BaseLayout.astro

@@ -6,7 +6,7 @@ interface Props {
   description?: string;
 }
 
-const { title, description = "33 chapters on context engineering, agent security, cost control, and team practices for building AI agent infrastructure in production." } = Astro.props;
+const { title, description = "Context engineering, agent security, cost control, and team practices for AI agent infrastructure in production. 33 chapters." } = Astro.props;
 const gaId = import.meta.env.PUBLIC_GA_ID || "G-LYNMNG6M7W";
 const siteUrl = Astro.site?.toString().replace(/\/$/, "") || "";
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");

src/layouts/ChapterLayout.astro

@@ -21,11 +21,12 @@ interface Props {
 const { title, description, chapter, part, partTitle, headings, allChapters, currentSlug } = Astro.props;
 
 const pageTitle = chapter
-  ? `Ch. ${String(chapter).padStart(2, "0")}: ${title} | The Agentic Engineering Guide`
-  : `${title} | The Agentic Engineering Guide`;
+  ? `Ch. ${String(chapter).padStart(2, "0")}: ${title} · The Agentic Engineering Guide`
+  : `${title} · The Agentic Engineering Guide`;
 
 const editUrl = `https://github.com/Siddhant-K-code/agentic-engineering-guide/edit/main/src/content/chapters/${currentSlug}.mdx`;
-const feedbackUrl = `https://github.com/Siddhant-K-code/agentic-engineering-guide/issues/new?title=Feedback:+${encodeURIComponent(title)}&labels=feedback`;
+const feedbackBody = "Chapter: " + title + "\n\n---\n\nFeedback:\n";
+const feedbackUrl = `https://github.com/Siddhant-K-code/agentic-engineering-guide/issues/new?title=Feedback:+${encodeURIComponent(title)}&labels=feedback&body=${encodeURIComponent(feedbackBody)}`;
 ---
 
 <BaseLayout title={pageTitle} description={description}>
@@ -74,7 +75,7 @@ const feedbackUrl = `https://github.com/Siddhant-K-code/agentic-engineering-guid
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                 </svg>
-                Suggest Feedback
+                Feedback
               </a>
             </div>
           </header>

src/pages/404.astro

@@ -3,15 +3,20 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 ---
 
-<BaseLayout title="404 | The Agentic Engineering Guide">
+<BaseLayout title="404 · The Agentic Engineering Guide">
   <div class="min-h-screen flex items-center justify-center px-6">
-    <div class="text-center">
-      <span class="font-[var(--font-mono)] text-xs tracking-widest uppercase text-[var(--text-tertiary)] mb-4 block">404</span>
-      <h1 class="text-2xl font-semibold mb-3">Page not found</h1>
-      <p class="text-sm text-[var(--text-secondary)] mb-6">The page you're looking for doesn't exist.</p>
-      <a href={`${base}/`} class="text-sm underline underline-offset-3 hover:text-[var(--text-secondary)] transition-colors">
-        ← Back to home
-      </a>
+    <div class="text-center max-w-sm">
+      <span class="font-[var(--font-mono)] text-7xl font-semibold text-[var(--text-primary)] opacity-10 select-none block mb-6">404</span>
+      <h1 class="text-2xl font-semibold mb-3">Nothing here</h1>
+      <p class="text-sm text-[var(--text-secondary)] mb-8">This page moved or never existed. Try one of these:</p>
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
+        <a href={`${base}/`} class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-[var(--text-primary)] text-[var(--bg-primary)] rounded-md hover:opacity-90 transition-opacity">
+          ← Home
+        </a>
+        <a href={`${base}/preface/`} class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium border border-[var(--border)] rounded-md hover:border-[var(--text-tertiary)] transition-colors">
+          Start reading
+        </a>
+      </div>
     </div>
   </div>
 </BaseLayout>

src/pages/index.astro

@@ -20,7 +20,7 @@ const base = import.meta.env.BASE_URL.replace(/\/$/, "");
 const totalChapters = allChapters.filter((c) => c.chapter).length;
 ---
 
-<BaseLayout title="The Agentic Engineering Guide | AI Agent Infrastructure Book">
+<BaseLayout title="The Agentic Engineering Guide · AI Agent Infrastructure Book">
   <Header />
   <Sidebar chapters={allChapters} currentSlug="" />
 
@@ -84,10 +84,10 @@ const totalChapters = allChapters.filter((c) => c.chapter).length;
           /About
         </span>
         <p class="text-[var(--text-secondary)] leading-relaxed max-w-xl mb-4">
-          This book is for engineering leaders navigating the shift to AI-assisted development. It covers the decisions, trade-offs, and organizational patterns that determine whether AI agents become a force multiplier or a source of burnout. From context engineering to cost control, from authorization to adoption playbooks.
+          The decisions, trade-offs, and organizational patterns that determine whether AI agents become a force multiplier or a source of burnout. Context engineering to cost control, authorization to adoption playbooks.
         </p>
         <p class="text-sm text-[var(--text-tertiary)] leading-relaxed max-w-xl">
-          Written for engineering leaders and senior engineers adopting AI agents. Half the book covers decisions that don't require writing code: AI fatigue, the conductor model, adoption playbooks, governance, and measuring what matters. The technical chapters assume familiarity with how software systems work. Technical PMs and engineering managers will get full value. Non-technical readers will find roughly a third useful.
+          For engineering leaders and senior engineers adopting AI agents. Half the book covers decisions that don't require code: AI fatigue, the conductor model, adoption playbooks, governance, measuring what matters. Technical chapters assume familiarity with how software systems work. Technical PMs and engineering managers get full value. Non-technical readers will find roughly a third useful.
         </p>
       </div>
     </section>
@@ -158,7 +158,7 @@ const totalChapters = allChapters.filter((c) => c.chapter).length;
           />
           <div>
             <p class="text-[var(--text-secondary)] leading-relaxed max-w-xl mb-3">
-              <strong class="text-[var(--text-primary)]">Siddhant Khare</strong> is a software engineer at <a href="https://ona.com" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">Ona</a> and a maintainer of <a href="https://openfga.dev" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">OpenFGA</a> (CNCF Incubating). His essay <a href="https://siddhantkhare.com/writing/ai-fatigue-is-real" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">"AI fatigue is real and nobody talks about it"</a> reached #1 on Hacker News and was covered by Business Insider, Futurism, NDTV, and others.
+              <strong class="text-[var(--text-primary)]">Siddhant Khare</strong> is a software engineer at <a href="https://ona.com" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">Ona</a> and a maintainer of <a href="https://openfga.dev" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">OpenFGA</a> (CNCF Incubating). His essay <a href="https://siddhantkhare.com/writing/ai-fatigue-is-real" target="_blank" rel="noopener noreferrer" class="underline underline-offset-2 hover:text-[var(--text-primary)] transition-colors">"AI fatigue is real and nobody talks about it"</a> reached Hacker News #1 and was covered by Business Insider, Futurism, NDTV, and others.
             </p>
             <div class="flex gap-4 text-sm text-[var(--text-tertiary)]">
               <a href="https://twitter.com/Siddhant_K_code" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-primary)] transition-colors">Twitter</a>

src/styles/global.css

@@ -272,3 +272,22 @@ body {
 #search-input:focus-visible {
   outline: none;
 }
+
+/* ── Button press feedback ── */
+a[class*="bg-[var(--text-primary)]"]:active,
+a[class*="border border-[var(--border)]"]:active,
+.gumroad-btn:active {
+  transform: scale(0.97);
+}
+
+/* ── Chapter nav hover: subtle arrow nudge ── */
+[data-chapter-nav] a:hover span:first-child {
+  transition: transform 0.15s ease;
+}
+
+/* ── Smooth transitions for interactive elements ── */
+a, button {
+  transition-property: color, background-color, border-color, opacity, transform;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
+}