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