feat: add user centric features
This commit is contained in:
gosangam
@@ -0,0 +1,213 @@
|
||||
/**
|
||||
* KnowledgebaseIndex — the books / letters / lectures / essays / etc.
|
||||
* directory layout. Rendered as the search page's empty state so an
|
||||
* untyped search bar still gives users an editorial entry point into the
|
||||
* library.
|
||||
*
|
||||
* Two sections, top to bottom:
|
||||
* 1. Start here — three primary entry points (Books, Letters, Lectures)
|
||||
* rendered as full-width feature tiles with longer copy.
|
||||
* 2. Explore — a six-card asymmetric grid for the remaining sections.
|
||||
*
|
||||
* No hero block; the parent page (Search) carries its own hero so two
|
||||
* heroes don't stack on top of each other.
|
||||
*/
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
BookA,
|
||||
BookOpen,
|
||||
FileStack,
|
||||
Mail,
|
||||
Mic,
|
||||
Newspaper,
|
||||
NotebookPen,
|
||||
PenLine,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
|
||||
type Feature = {
|
||||
href: string;
|
||||
label: string;
|
||||
blurb: string;
|
||||
count?: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
};
|
||||
|
||||
const FEATURED: Feature[] = [
|
||||
{
|
||||
href: "/books",
|
||||
label: "Books",
|
||||
blurb:
|
||||
"Bhagavad-gītā, Śrīmad-Bhāgavatam, Caitanya-caritāmṛta and 34 more — each verse with Devanāgarī, transliteration, synonyms, translation and purport.",
|
||||
count: "37 books",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
href: "/letters",
|
||||
label: "Letters",
|
||||
blurb:
|
||||
"Three decades of personal correspondence to disciples, family, and officials. Browse by year, recipient, or location.",
|
||||
count: "6,866 letters",
|
||||
icon: Mail,
|
||||
},
|
||||
{
|
||||
href: "/transcriptions",
|
||||
label: "Lectures & Conversations",
|
||||
blurb:
|
||||
"Lectures, morning walks, room conversations, and dialogues — the living voice of the Founder-Ācārya preserved in text and audio.",
|
||||
count: "3,787 transcripts",
|
||||
icon: Mic,
|
||||
},
|
||||
];
|
||||
|
||||
const EXPLORE: Feature[] = [
|
||||
{
|
||||
href: "/essays",
|
||||
label: "Essays",
|
||||
blurb: "Foundational standalone essays.",
|
||||
count: "23 essays",
|
||||
icon: PenLine,
|
||||
},
|
||||
{
|
||||
href: "/magazines",
|
||||
label: "Back to Godhead",
|
||||
blurb: "The original 1944 – 1973 magazine archive.",
|
||||
count: "1,124 articles",
|
||||
icon: Newspaper,
|
||||
},
|
||||
{
|
||||
href: "/journals",
|
||||
label: "Journals",
|
||||
blurb: "The Jaladuta Diary and The Beginning.",
|
||||
count: "300 entries",
|
||||
icon: NotebookPen,
|
||||
},
|
||||
{
|
||||
href: "/glossary",
|
||||
label: "Glossary",
|
||||
blurb: "Sanskrit and Vedic terms with definitions.",
|
||||
count: "2,749 terms",
|
||||
icon: BookA,
|
||||
},
|
||||
{
|
||||
href: "/disciples",
|
||||
label: "Disciples",
|
||||
blurb: "Initiated disciples 1966 – 1977.",
|
||||
count: "4,747 names",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
href: "/other-documents",
|
||||
label: "Other Documents",
|
||||
blurb: "Miscellaneous analyses and writings.",
|
||||
count: "12 documents",
|
||||
icon: FileStack,
|
||||
},
|
||||
];
|
||||
|
||||
export function KnowledgebaseIndex() {
|
||||
return (
|
||||
<div>
|
||||
<section className="py-4">
|
||||
<SectionHeading eyebrow="Start here" title="Three doors in" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
|
||||
{FEATURED.map((f) => (
|
||||
<FeaturedTile key={f.href} feature={f} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-6 sm:py-8">
|
||||
<SectionHeading eyebrow="Explore" title="The wider library" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
|
||||
{EXPLORE.map((f) => (
|
||||
<ExploreTile key={f.href} feature={f} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeaturedTile({ feature }: { feature: Feature }) {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<Link
|
||||
href={feature.href}
|
||||
className="group relative flex flex-col h-full rounded-2xl bg-card ring-1 ring-foreground/10 hover:ring-foreground/25 hover:shadow-md transition-all p-6"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center justify-center size-11 rounded-xl bg-primary/12 text-primary">
|
||||
<Icon className="size-5" />
|
||||
</div>
|
||||
<ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
|
||||
</div>
|
||||
|
||||
<h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] leading-tight text-foreground">
|
||||
{feature.label}
|
||||
</h3>
|
||||
|
||||
<p className="mt-2 text-sm text-muted-foreground leading-relaxed flex-1">
|
||||
{feature.blurb}
|
||||
</p>
|
||||
|
||||
{feature.count ? (
|
||||
<p className="mt-5 text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground">
|
||||
{feature.count}
|
||||
</p>
|
||||
) : null}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function ExploreTile({ feature }: { feature: Feature }) {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<Link
|
||||
href={feature.href}
|
||||
className="group flex items-start gap-4 rounded-xl bg-card/70 ring-1 ring-foreground/8 hover:ring-foreground/20 hover:bg-card transition-all p-4 sm:p-5"
|
||||
>
|
||||
<div className="flex items-center justify-center size-9 rounded-lg bg-secondary text-secondary-foreground/80 shrink-0">
|
||||
<Icon className="size-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h4 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground leading-tight">
|
||||
{feature.label}
|
||||
</h4>
|
||||
<ArrowUpRight className="size-3.5 text-muted-foreground/50 group-hover:text-foreground transition-colors shrink-0" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1 leading-relaxed">
|
||||
{feature.blurb}
|
||||
</p>
|
||||
{feature.count ? (
|
||||
<p className="text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground/80 mt-2">
|
||||
{feature.count}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeading({
|
||||
eyebrow,
|
||||
title,
|
||||
}: {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="mb-6 flex items-baseline gap-4">
|
||||
<span className="text-xs uppercase tracking-[0.2em] font-semibold text-muted-foreground">
|
||||
{eyebrow}
|
||||
</span>
|
||||
<span className="flex-1 h-px bg-border" />
|
||||
<h2 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user