header

app/about/page.tsx

@@ -4,16 +4,18 @@ import { PageHeader } from "@/components/page-header";
 import { buildOgMeta } from "@/lib/og";
 import {
   BookOpen,
+  Users,
   BrainCircuit,
   Blocks,
   Circle,
   CheckCircle2,
+  CircleCheck,
 } from "lucide-react";
 
 const PHASES = [
   {
     title: "Phase I — The Vedabase",
-    status: "in-progress" as const,
+    status: "done" as const,
     icon: BookOpen,
     description:
       "Indexing the complete pre-1980s Vedabase into a structured, searchable database — books, letters, essays, magazines, journals, glossary, and disciple records — with a clean, accessible reading interface.",
@@ -26,7 +28,21 @@ const PHASES = [
     ],
   },
   {
-    title: "Phase II — AI Companion",
+    title: "Phase II — Devotee Features",
+    status: "in-progress" as const,
+    icon: Users,
+    description:
+      "Adding user-centric features so devotees can engage with the archive personally — sign in, save favourite quotes, build collections, share with attribution, and mention passages in their own writing.",
+    highlights: [
+      "Account sign-in and personal profiles",
+      "Save and organise quotes into collections",
+      "Share quotes with rich attribution and highlight links",
+      "Bookmark verses, letters, and lectures for later reading",
+      "Mention passages — reference any line in the archive from outside the site",
+    ],
+  },
+  {
+    title: "Phase III — AI Companion",
     status: "upcoming" as const,
     icon: BrainCircuit,
     description:
@@ -38,7 +54,7 @@ const PHASES = [
     ],
   },
   {
-    title: "Phase III — Decentralized Preservation",
+    title: "Phase IV — Decentralized Preservation",
     status: "upcoming" as const,
     icon: Blocks,
     description:
@@ -134,7 +150,7 @@ export default function AboutPage() {
           <div>
             <h2 className="text-2xl font-bold text-foreground">Roadmap</h2>
             <p className="mt-1 text-[15px] text-muted-foreground">
-              Our work is organized into three phases — each building on the
+              Our work is organized into four phases — each building on the
               last.
             </p>
           </div>
@@ -145,13 +161,16 @@ export default function AboutPage() {
 
             {PHASES.map((phase, i) => {
               const Icon = phase.icon;
+              const isDone = phase.status === "done";
               const isInProgress = phase.status === "in-progress";
 
               return (
                 <div key={i} className="relative flex gap-5 pb-10 last:pb-0">
                   {/* Timeline node */}
                   <div className="relative z-10 flex items-center justify-center size-10 shrink-0 rounded-full bg-background ring-1 ring-border">
-                    {isInProgress ? (
+                    {isDone ? (
+                      <Icon className="size-4 text-primary" />
+                    ) : isInProgress ? (
                       <div className="relative">
                         <Icon className="size-4 text-primary" />
                         <span className="absolute -top-1 -right-1 size-2.5 rounded-full bg-primary animate-pulse" />
@@ -167,7 +186,12 @@ export default function AboutPage() {
                       <h3 className="text-lg font-semibold text-foreground">
                         {phase.title}
                       </h3>
-                      {isInProgress ? (
+                      {isDone ? (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/15 px-2.5 py-0.5 text-xs font-medium text-primary">
+                          <CircleCheck className="size-3" />
+                          Complete
+                        </span>
+                      ) : isInProgress ? (
                         <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
                           <CheckCircle2 className="size-3" />
                           In Progress

components/page-header.tsx

@@ -48,10 +48,46 @@ export function PageHeader({
         className,
       )}
     >
-      <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
+      {/*
+        Layout strategy:
+          - Mobile: actions float to the right so the title text wraps around
+            them on the first line and uses the FULL container width on every
+            subsequent line (which is what `pr-*` cannot achieve since padding
+            applies to all lines).
+          - Desktop (md+): standard flex row so title and actions sit side-by-side.
+      */}
+      <div className="max-w-5xl mx-auto md:flex md:items-start md:justify-between md:gap-4">
+        {/* Actions — float on mobile (rendered first so float works correctly),
+            inline flex on desktop. Order doesn't matter visually on desktop
+            because the parent's `justify-between` places them at the end. */}
+        <div
+          className={cn(
+            "flex items-center gap-1.5",
+            // Mobile: float so the title text wraps around it
+            "max-md:float-right max-md:ml-2",
+            // Desktop: inline at the right of the flex row
+            "md:pt-1 md:order-1",
+            searchExpanded
+              ? "max-md:float-none max-md:flex max-md:w-full max-md:min-w-0"
+              : "md:shrink-0",
+          )}
+        >
+          <HeaderSearchButton
+            expanded={searchExpanded}
+            onExpandedChange={setSearchExpanded}
+          />
+          {/* Hide reading settings on mobile when search is active */}
+          <div className={cn(searchExpanded && "max-md:hidden")}>
+            <ReadingSettings />
+          </div>
+        </div>
+
         {/* Title / logo area — hidden on mobile when search is active */}
         <div
-          className={cn("flex-1 min-w-0", searchExpanded && "max-md:hidden")}
+          className={cn(
+            "md:flex-1 md:min-w-0",
+            searchExpanded && "max-md:hidden",
+          )}
         >
           {fromSearch ? (
             <>
@@ -72,23 +108,6 @@ export function PageHeader({
             children
           )}
         </div>
-
-        {/* Actions — expands to fill width on mobile when search is active */}
-        <div
-          className={cn(
-            "pt-1 flex items-center gap-1.5",
-            searchExpanded ? "max-md:flex-1 max-md:min-w-0" : "shrink-0",
-          )}
-        >
-          <HeaderSearchButton
-            expanded={searchExpanded}
-            onExpandedChange={setSearchExpanded}
-          />
-          {/* Hide reading settings on mobile when search is active */}
-          <div className={cn(searchExpanded && "max-md:hidden")}>
-            <ReadingSettings />
-          </div>
-        </div>
       </div>
     </header>
   );