krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
gosangam
2026-05-11 01:36:49 +05:30
parent 730efb1bb3
commit db8deb232b
2 changed files with 68 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about/page.tsx
+30 -6
View File
@@ -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
+38 -19
View File
@@ -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>
);