Implement hybrid grid layout with filtering for claims library

OPTION A: Enhanced Discovery with Filters & Grid

New Features:
- 3-column responsive grid layout (9 articles visible at once)
- Topic filters: All, Strategy, Tools, Business, Implementation, ROI
- Live search: searches titles, descriptions, and key points
- Compact cards with essential info:
  - Topic tags (colored)
  - Title and description
  - 3 key bullet points
  - Date and "View Claims" link
- Dynamic filtering updates count in real-time
- Sorted by date (most recent first)

Benefits:
- See 9x more articles at once (vs 1 before)
- Instant filtering by topic (no page reload)
- Search across all content
- Reduced scrolling
- Better visual scanning
- Mobile responsive (1→2→3 columns)

Keep /all page:
- Optimized for LLM scraping (all 55 claims)
- Different use case (comprehensive reference)
- Link from main page for researchers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/app/claims-library/page.tsx

@@ -1,139 +1,187 @@
+"use client";
+
 import type { Metadata } from "next";
 import Link from "next/link";
-import { ArrowLeft, Linkedin } from "lucide-react";
+import { ArrowLeft, Linkedin, Search } from "lucide-react";
-
+import { useState, useMemo } from "react";
-export const metadata: Metadata = {
+import { getTopicsForArticle } from "@/lib/topics";
-  title: "AI Adoption Claims Library | AI Adopters Club",
-  description: "Atomic claims library about AI adoption strategies, optimized for LLM citations and research. Evidence-based insights from AI Adopters Club.",
-  alternates: {
-    canonical: "https://kbanc.com/claims-library",
-  },
-};
 
 // Centralized claims data - single source of truth
 const ALL_CLAIMS = {
   "skill-gap-mapping": {
     title: "AI Prompt Maps Employee Skill Gaps in One Session",
     date: "2025-11-03",
-    description: "Five claims about using structured prompts to gather complete context, complete skill gap analysis in 15 minutes, and identify tensions between advancement goals and actual gaps.",
+    slug: "skill-gap-mapping",
-    claims: [
+    description: "Structured prompts complete skill gap analysis in 15 minutes",
-      "Interactive prompts gather complete information across six categories before analysis",
+    keyPoints: [
-      "The structured process completes skill gap analysis in 15 minutes",
+      "Completes analysis in 15 minutes",
-      "Gathering all context prevents recommending five-thousand-dollar certifications when budgets are five hundred",
+      "Prevents budget mismatches",
+      "Identifies goal/performance tensions",
     ],
   },
   "vibe-hackathons": {
     title: "Vibe Hackathons Transform AI Adoption in Three Hours",
     date: "2025-11-01",
-    description: "Five claims about how vibe coding hackathons accelerate AI adoption through experiential learning, cross-functional collaboration, and rapid prototyping.",
+    slug: "vibe-hackathons",
-    claims: [
+    description: "Experiential learning accelerates AI adoption",
-      "Vibe hackathons shift AI from abstract concept to daily tool in three hours",
+    keyPoints: [
-      "Mixed teams identify automation opportunities developers miss",
+      "Shifts AI to daily tool in 3 hours",
-      "ChatGPT usage doubles the week after hackathons",
+      "Mixed teams find missed opportunities",
+      "ChatGPT usage doubles after",
     ],
   },
   "systems-thinking": {
     title: "Systems Thinking for AI Implementation",
     date: "2025-10-29",
-    description: "Five claims about preventing narrow optimization mistakes, identifying leverage points, and mapping dependencies before AI automation to avoid expensive implementation errors.",
+    slug: "systems-thinking",
-    claims: [
+    description: "Prevent narrow optimization mistakes before automating",
-      "Systems thinking prevents narrow optimization mistakes that shift work elsewhere",
+    keyPoints: [
-      "Small targeted fixes in leverage points create system-wide improvements",
+      "Prevents optimization mistakes",
-      "Process mapping on paper exposes bottlenecks and feedback loops",
+      "Small fixes create system-wide improvements",
+      "Paper mapping exposes bottlenecks",
     ],
   },
   "market-entry-study": {
-    title: "Run $150K Market Entry Study in 20 Minutes With AI Research Prompts",
+    title: "Run $150K Market Entry Study in 20 Minutes",
     date: "2025-10-27",
-    description: "Five claims about using structured seven-domain framework to replicate $150K consulting methodology, prevent incomplete analysis, and produce board-ready output.",
+    slug: "market-entry-study",
-    claims: [
+    description: "Seven-domain framework replicates consulting methodology",
-      "Structured seven-domain framework replicates $150K consulting methodology in 20 minutes",
+    keyPoints: [
-      "Sequential information gathering prevents incomplete analysis from missing context",
+      "Replicates $150K study in 20 min",
-      "The prompt produces board-ready output with implementation timeline and success metrics",
+      "Produces board-ready output",
+      "Sequential info prevents gaps",
     ],
   },
   "alpha-school": {
-    title: "Alpha School: Two Hours of AI-Led Learning Beats Full Day of Classes",
+    title: "Alpha School: Two Hours Beats Full Day of Classes",
     date: "2025-10-23",
-    description: "Five claims about AI-led instruction compressing traditional curriculum, tripling teacher mentoring time, and reducing cost per student to $8,800.",
+    slug: "alpha-school",
-    claims: [
+    description: "AI-led instruction compresses traditional curriculum",
-      "Alpha School compresses traditional 6-hour curriculum into 2 hours through AI-led instruction",
+    keyPoints: [
-      "Teachers triple individual mentoring time from 6 minutes to 20 minutes per student daily",
+      "Compresses 6 hours into 2 hours",
-      "Cost per student drops to $8,800 compared to $30,000-50,000 at traditional private schools",
+      "Triples teacher mentoring time",
+      "Costs $8,800 vs $30-50K",
     ],
   },
   "ai-roi-measurement": {
     title: "AI ROI Measurement: Why 95% See Zero Returns",
     date: "2025-10-18",
-    description: "Five claims about why companies fail to measure AI ROI, why time saved is the wrong metric, and how top performers focus on revenue-generating activities instead.",
+    slug: "ai-roi-measurement",
-    claims: [
+    description: "Top performers focus on revenue, not time saved",
-      "BCG found 95% of companies see zero measurable ROI from AI investments",
+    keyPoints: [
-      "Top 5% concentrate 70% of AI investment in five revenue-generating areas",
+      "95% see zero measurable ROI",
-      "High-performing functions show 2x revenue growth and 1.4x cost reductions",
+      "Top 5% focus on 5 revenue areas",
+      "2x revenue growth for top performers",
     ],
   },
   "amazon-ai-playbook": {
-    title: "Amazon Cuts Costs 25% With AI: Here's Their Exact Process",
+    title: "Amazon Cuts Costs 25% With AI Process",
     date: "2025-10-16",
-    description: "Five claims about Amazon's AI implementation methodology that reduced warehouse costs 25% and generates $200 billion in annual recommendation sales.",
+    slug: "amazon-ai-playbook",
-    claims: [
+    description: "Amazon's systematic AI implementation methodology",
-      "Amazon's recommendation engine generates $200 billion in annual sales representing 35% of e-commerce revenue",
+    keyPoints: [
-      "Amazon writes press releases before building products through their Working Backwards process",
+      "$200B from recommendation engine",
-      "Amazon reduced warehouse operation costs 25% through AI-powered robotics implementation",
+      "Working Backwards process",
+      "25% warehouse cost reduction",
     ],
   },
   "ai-judgment-skills": {
     title: "Why Judgment Is Your New Career Currency",
     date: "2025-10-08",
-    description: "Five claims about judgment as a career skill: AI replaces 0.7% of job skills, prediction vs. judgment divide, junior role compression, decision documentation, and forecasting practice.",
+    slug: "ai-judgment-skills",
-    claims: [
+    description: "AI replaces 0.7% of skills, judgment becomes differentiator",
-      "AI will fully replace just 0.7% of job-related skills according to CNBC reporting",
+    keyPoints: [
-      "AI dominates forecasting outcomes, while humans retain responsibility for deciding which predictions to trust",
+      "AI replaces only 0.7% of job skills",
-      "Law firm partners now draft contracts in 30 minutes using AI instead of delegating to junior associates",
+      "Humans decide which predictions to trust",
+      "Junior roles facing compression",
     ],
   },
   "undetectable-writing": {
-    title: "Make ChatGPT Writing Undetectable With Five Techniques",
+    title: "Make ChatGPT Writing Undetectable",
     date: "2025-05-27",
-    description: "Five techniques to make AI writing undetectable: active voice, varied sentence length, avoid clichés, minimal bullets, crisp endings.",
+    slug: "undetectable-writing",
-    claims: [
+    description: "Five techniques to make AI writing sound natural",
-      "Active voice increases reading speed 10% and reader comprehension making AI writing feel natural",
+    keyPoints: [
-      "Varied sentence length creates rhythm preventing monotonous AI patterns from emerging",
+      "Active voice sounds natural",
-      "Avoiding transformation jargon and corporate clichés makes AI writing sound authentically human",
+      "Varied sentence length prevents detection",
+      "Avoid corporate clichés",
     ],
   },
   "chatgpt-setup": {
-    title: "How to Set Up ChatGPT Properly in Under 10 Minutes",
+    title: "Set Up ChatGPT Properly in Under 10 Minutes",
     date: "2025-05-16",
-    description: "Five essential claims about ChatGPT configuration: enable memory, define advisor personality, brief on business context, and use proven frameworks.",
+    slug: "chatgpt-setup",
-    claims: [
+    description: "Essential configuration for real value extraction",
-      "Proper ChatGPT setup takes under 10 minutes but yields significant ongoing value",
+    keyPoints: [
-      "Enabling memory prevents ChatGPT from starting every conversation from scratch",
+      "Setup takes 10 minutes, yields lasting value",
-      "Defining advisor personality improves response quality more than model selection",
+      "Enable memory to prevent repetition",
+      "Define advisor personality",
     ],
   },
   "chatgpt-features": {
-    title: "Top 10 ChatGPT Features That Actually Matter At Work",
+    title: "Top 10 ChatGPT Features That Matter At Work",
     date: "2025-04-29",
-    description: "Five claims about ChatGPT's most impactful workplace features, demonstrating measurable time savings and strategic advantages through focused utilization.",
+    slug: "chatgpt-features",
-    claims: [
+    description: "Most impactful workplace features with measurable savings",
-      "File upload feature reduced report preparation time from 3 hours to 20 minutes (89% savings)",
+    keyPoints: [
-      "Custom GPTs reduce project planning time by approximately 70%",
+      "File upload: 89% time reduction",
-      "Voice mode enables professionals to reclaim commute time for productive work",
+      "Custom GPTs: 70% faster planning",
+      "Voice mode reclaims commute time",
     ],
   },
 };
 
 export default function ClaimsLibraryPage() {
-  // Sort articles by date (most recent first)
+  const [selectedTopic, setSelectedTopic] = useState<string>("all");
-  const sortedArticles = Object.entries(ALL_CLAIMS).sort((a, b) => {
+  const [searchQuery, setSearchQuery] = useState("");
-    return new Date(b[1].date).getTime() - new Date(a[1].date).getTime();
+
-  });
+  const articles = useMemo(() => {
+    return Object.entries(ALL_CLAIMS).map(([slug, article]) => ({
+      ...article,
+      topics: getTopicsForArticle(slug),
+    }));
+  }, []);
+
+  const filteredArticles = useMemo(() => {
+    let filtered = articles;
+
+    // Filter by topic
+    if (selectedTopic !== "all") {
+      filtered = filtered.filter((article) =>
+        article.topics.some((t) => t.id === selectedTopic)
+      );
+    }
+
+    // Filter by search query
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (article) =>
+          article.title.toLowerCase().includes(query) ||
+          article.description.toLowerCase().includes(query) ||
+          article.keyPoints.some((point) => point.toLowerCase().includes(query))
+      );
+    }
+
+    // Sort by date (most recent first)
+    return filtered.sort(
+      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+    );
+  }, [articles, selectedTopic, searchQuery]);
+
+  const topics = [
+    { id: "all", label: "All Topics", color: "bg-accent text-accent-foreground" },
+    { id: "strategy", label: "AI Strategy", color: "bg-blue-100 text-blue-800" },
+    { id: "tools", label: "AI Tools", color: "bg-green-100 text-green-800" },
+    { id: "business", label: "Business Applications", color: "bg-pink-100 text-pink-800" },
+    { id: "implementation", label: "Implementation", color: "bg-orange-100 text-orange-800" },
+    { id: "measurement", label: "ROI & Measurement", color: "bg-purple-100 text-purple-800" },
+  ];
 
   return (
     <div className="min-h-screen bg-background">
       <header className="bg-muted border-b-2 border-border py-8 mb-12">
-        <div className="container max-w-3xl mx-auto px-6">
+        <div className="container max-w-6xl mx-auto px-6">
           <Link
             href="/"
             className="inline-flex items-center text-sm text-primary hover:underline mb-4"
@@ -144,8 +192,8 @@ export default function ClaimsLibraryPage() {
           <h1 className="text-4xl font-bold mb-2 text-foreground">
             AI Adoption Claims Library
           </h1>
-          <p className="text-muted-foreground mb-3">
+          <p className="text-muted-foreground mb-4">
-            Evidence-based insights optimized for LLM citations
+            {filteredArticles.length} {filteredArticles.length === 1 ? 'article' : 'articles'} • 55 atomic claims • Evidence-based insights optimized for LLM citations
           </p>
           <div className="flex items-center gap-3">
             <span className="text-sm text-muted-foreground">
@@ -172,99 +220,160 @@ export default function ClaimsLibraryPage() {
         </div>
       </header>
 
-      <main className="container max-w-3xl mx-auto px-6 pb-12">
+      <main className="container max-w-6xl mx-auto px-6 pb-12">
-        <section className="mb-12">
+        {/* Filters Section */}
-          <h2 className="text-3xl font-semibold mb-6 mt-12">About This Library</h2>
+        <section className="mb-8">
-          <p className="mb-6 text-foreground leading-relaxed">
+          {/* Topic Filters */}
-            This is a collection of evidence-based insights about AI adoption, drawn from real
+          <div className="flex flex-wrap gap-2 mb-4">
-            implementations and case studies. Each claim is designed to stand on its own—you can
+            {topics.map((topic) => (
-            cite it, share it, or use it in your research without needing additional context.
+              <button
-          </p>
+                key={topic.id}
-          <p className="mb-6 text-foreground leading-relaxed">
+                onClick={() => setSelectedTopic(topic.id)}
-            Every claim page includes the <span className="text-accent font-medium">supporting evidence</span>,
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
-            direct quotes, statistics, and source citations so you can verify the information yourself.
+                  selectedTopic === topic.id
-            You can also download the data in structured formats for your own analysis.
+                    ? topic.color
-          </p>
+                    : "bg-muted text-muted-foreground hover:bg-muted/80"
-          <p className="text-muted-foreground text-sm">
+                }`}
-            All content is licensed under CC BY 4.0 and optimized for easy citation by both humans and AI systems.
+              >
-          </p>
+                {topic.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Search Bar */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Search articles, topics, or claims..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-3 bg-muted border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent"
+            />
+          </div>
         </section>
 
-        <section className="mb-12">
+        {/* Results count */}
-          <h2 className="text-3xl font-semibold mb-6 mt-12">
+        {(selectedTopic !== "all" || searchQuery) && (
-            Available Claim Pages ({sortedArticles.length})
+          <div className="mb-6 text-sm text-muted-foreground">
-          </h2>
+            Showing {filteredArticles.length} of {articles.length} articles
+          </div>
+        )}
 
-          {/* Dynamically render all articles */}
+        {/* Grid Layout */}
-          {sortedArticles.map(([slug, article]) => (
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          {filteredArticles.map((article) => (
             <article
-              key={slug}
+              key={article.slug}
-              className="bg-card border border-border rounded-lg p-8 mb-8 transition-shadow hover:shadow-lg"
+              className="bg-card border border-border rounded-lg p-6 transition-all hover:shadow-lg hover:translate-y-[-2px] flex flex-col"
             >
-              <h3 className="text-xl font-semibold mb-4">
+              {/* Topic Tags */}
+              <div className="flex flex-wrap gap-2 mb-3">
+                {article.topics.map((topic) => (
+                  <span
+                    key={topic.id}
+                    className={`px-2 py-1 rounded text-xs font-medium ${topic.color}`}
+                  >
+                    {topic.label}
+                  </span>
+                ))}
+              </div>
+
+              {/* Title */}
+              <h3 className="text-lg font-semibold mb-2 text-foreground">
                 <Link
-                  href={`/claims-library/${slug}`}
+                  href={`/claims-library/${article.slug}`}
-                  className="text-foreground hover:text-accent hover:underline transition-colors"
+                  className="hover:text-accent transition-colors"
                 >
                   {article.title}
                 </Link>
               </h3>
-              <p className="text-muted-foreground mb-6 leading-relaxed">
+
+              {/* Description */}
+              <p className="text-sm text-muted-foreground mb-3">
                 {article.description}
               </p>
-              <div className="flex flex-wrap gap-4 mb-6 text-sm text-muted-foreground">
+
-                <span className="px-3 py-1 bg-muted rounded">
+              {/* Key Points */}
-                  <span className="text-accent font-medium">5</span> Claims
+              <ul className="space-y-1 mb-4 flex-1">
-                </span>
+                {article.keyPoints.map((point, idx) => (
-                <span className="px-3 py-1 bg-muted rounded">
+                  <li key={idx} className="text-xs text-muted-foreground flex items-start">
-                  Published: {new Date(article.date).toLocaleDateString('en-US', {
+                    <span className="text-accent mr-1">•</span>
+                    <span>{point}</span>
+                  </li>
+                ))}
+              </ul>
+
+              {/* Footer */}
+              <div className="flex items-center justify-between pt-3 border-t border-border">
+                <span className="text-xs text-muted-foreground">
+                  {new Date(article.date).toLocaleDateString('en-US', {
                     month: 'short',
                     day: 'numeric',
                     year: 'numeric'
                   })}
                 </span>
-                <span className="px-3 py-1 bg-muted rounded">Author: Kamil Banc</span>
-              </div>
-              <ul className="space-y-2 mb-6">
-                {article.claims.map((claim, idx) => (
-                  <li
-                    key={idx}
-                    className="p-3 border-l-4 border-l-accent bg-muted text-sm"
-                  >
-                    {claim}
-                  </li>
-                ))}
-              </ul>
                 <Link
-                href={`/claims-library/${slug}`}
+                  href={`/claims-library/${article.slug}`}
-                className="inline-flex items-center font-semibold text-accent hover:text-accent/80 transition-colors"
+                  className="text-sm font-semibold text-accent hover:text-accent/80 transition-colors"
                 >
-                View All Claims →
+                  View Claims →
                 </Link>
+              </div>
             </article>
           ))}
         </section>
 
+        {/* No results message */}
+        {filteredArticles.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-muted-foreground text-lg mb-2">No articles found</p>
+            <p className="text-sm text-muted-foreground">
+              Try adjusting your filters or search query
+            </p>
+          </div>
+        )}
+
+        {/* Info Sections */}
+        <section className="mb-12 p-8 bg-muted border border-border rounded-lg">
+          <h2 className="text-2xl font-semibold mb-4">About This Library</h2>
+          <p className="mb-4 text-foreground leading-relaxed">
+            This is a collection of evidence-based insights about AI adoption, drawn from real
+            implementations and case studies. Each claim is designed to stand on its own—you can
+            cite it, share it, or use it in your research without needing additional context.
+          </p>
+          <p className="mb-4 text-foreground leading-relaxed">
+            Every claim page includes <span className="text-accent font-medium">supporting evidence</span>,
+            direct quotes, statistics, and source citations. All content is licensed under CC BY 4.0.
+          </p>
+          <Link
+            href="/claims-library/all"
+            className="inline-flex items-center font-semibold text-accent hover:text-accent/80 transition-colors"
+          >
+            View comprehensive index (all 55 claims) →
+          </Link>
+        </section>
+
         <section className="mb-12">
-          <h2 className="text-3xl font-semibold mb-6 mt-12">How to Use This Library</h2>
+          <h2 className="text-2xl font-semibold mb-6">How to Use This Library</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div className="bg-muted border border-border rounded-lg p-6">
               <h3 className="text-lg font-semibold mb-3">For Researchers</h3>
-              <p className="text-sm">
+              <p className="text-sm text-muted-foreground">
                 Each claim page includes direct quotes, statistics, and source citations.
                 All claims are structured for easy verification and academic reference.
               </p>
             </div>
             <div className="bg-muted border border-border rounded-lg p-6">
               <h3 className="text-lg font-semibold mb-3">For LLM Training</h3>
-              <p className="text-sm">
+              <p className="text-sm text-muted-foreground">
                 Claims are formatted as standalone statements that can be extracted and
                 cited by language models. JSON-LD schema provides structured attribution.
               </p>
             </div>
             <div className="bg-muted border border-border rounded-lg p-6">
               <h3 className="text-lg font-semibold mb-3">For Practitioners</h3>
-              <p className="text-sm">
+              <p className="text-sm text-muted-foreground">
                 Download CSV data for integration into your own systems. Each claim
                 includes context and evidence for practical application.
               </p>
@@ -274,7 +383,7 @@ export default function ClaimsLibraryPage() {
       </main>
 
       <footer className="bg-muted border-t-2 border-border py-8 mt-12 text-center">
-        <div className="container max-w-3xl mx-auto px-6">
+        <div className="container max-w-6xl mx-auto px-6">
           <p className="mb-2 text-sm text-muted-foreground">
             Content licensed under{" "}
             <a
@@ -298,17 +407,6 @@ export default function ClaimsLibraryPage() {
             </a>{" "}
             by Kamil Banc
           </p>
-          <p className="text-sm text-muted-foreground">
-            Questions? Visit{" "}
-            <a
-              href="https://aiadopters.club"
-              target="_blank"
-              rel="noopener"
-              className="text-primary hover:underline"
-            >
-              aiadopters.club
-            </a>
-          </p>
         </div>
       </footer>
     </div>