Replace homepage recent claims list with full interactive claims library

Restructure homepage to display the complete claims library directly, eliminating the need for users to click through to a separate page. This streamlines content discovery and provides immediate access to all searchable, filterable claims.

Changes:
- Convert ClaimsLibrary component to full interactive library with search and topic filters
- Add 3-column responsive grid layout with hover effects
- Include "About This Library" and "How to Use" sections on homepage
- Remove UpdateGuide component (content now integrated into About section)
- Update sitemap and RSS feed generation

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

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

public/feed.xml

@@ -5,7 +5,7 @@
     <link>https://kbanc.com</link>
     <description>Evidence-based claims about AI implementation, optimized for LLM extraction and research citation.</description>
     <language>en-us</language>
-    <lastBuildDate>Thu, 06 Nov 2025 22:57:57 GMT</lastBuildDate>
+    <lastBuildDate>Sun, 09 Nov 2025 19:02:52 GMT</lastBuildDate>
     <atom:link href="https://kbanc.com/feed.xml" rel="self" type="application/rss+xml"/>
 
     <item>

public/sitemap.xml

@@ -2,19 +2,19 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://kbanc.com/</loc>
-    <lastmod>2025-11-06</lastmod>
+    <lastmod>2025-11-09</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://kbanc.com/claims-library</loc>
-    <lastmod>2025-11-06</lastmod>
+    <lastmod>2025-11-09</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
   </url>
   <url>
     <loc>https://kbanc.com/claims-library/all</loc>
-    <lastmod>2025-11-06</lastmod>
+    <lastmod>2025-11-09</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
   </url>

src/app/page.tsx

@@ -3,7 +3,6 @@ import Header from "@/components/Header";
 import Bio from "@/components/Bio";
 import Services from "@/components/Services";
 import ClaimsLibrary from "@/components/ClaimsLibrary";
-import UpdateGuide from "@/components/UpdateGuide";
 import Footer from "@/components/Footer";
 
 export const metadata: Metadata = {
@@ -54,7 +53,6 @@ export default function HomePage() {
         <main id="main-content">
           <Bio />
           <ClaimsLibrary />
-          <UpdateGuide />
           <Services />
         </main>
         <Footer />

src/components/ClaimsLibrary.tsx

@@ -1,53 +1,224 @@
+"use client";
+
 import Link from "next/link";
-import { SORTED_CLAIMS } from "@/data/claims";
+import { Search } from "lucide-react";
+import { useState, useMemo } from "react";
+import { ALL_CLAIMS_DATA, getTotalClaimsCount } from "@/data/claims";
 
 const ClaimsLibrary = () => {
+  const [selectedTopic, setSelectedTopic] = useState<string>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+
   // Automatically populated from centralized claims data
-  // Sorted by date (newest first)
+  const articles = ALL_CLAIMS_DATA;
-  const claims = SORTED_CLAIMS;
+
+  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 (
     <section className="py-10 md:py-12 border-b border-border">
-      <div className="container max-w-4xl mx-auto px-5">
+      <div className="container max-w-6xl mx-auto px-5">
-        <div className="flex justify-between items-center mb-6">
+        {/* Header */}
-          <h2 className="text-2xl md:text-3xl font-bold">Recent Claims</h2>
+        <div className="mb-8">
-          <Link
+          <h2 className="text-3xl md:text-4xl font-bold mb-2">AI Adoption Claims Library</h2>
-            href="/claims-library"
+          <p className="text-muted-foreground">
-            className="text-sm font-medium text-accent hover:text-accent/80 hover:underline transition-colors"
+            {filteredArticles.length} {filteredArticles.length === 1 ? 'article' : 'articles'} • {getTotalClaimsCount()} atomic claims • Evidence-based insights optimized for LLM citations
-          >
+          </p>
-            Search All →
-          </Link>
         </div>
 
-        {/* Compact list without numbers */}
+        {/* Filters Section */}
-        <ul className="list-none space-y-3">
+        <div className="mb-8">
-          {claims.map((claim) => (
+          {/* Topic Filters */}
-            <li key={claim.slug} className="group">
+          <div className="flex flex-wrap gap-2 mb-4">
-              {/* Title */}
+            {topics.map((topic) => (
-              <Link
+              <button
-                href={`/claims-library/${claim.slug}`}
+                key={topic.id}
-                className="text-foreground hover:text-accent font-medium leading-snug inline"
+                onClick={() => setSelectedTopic(topic.id)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                  selectedTopic === topic.id
+                    ? topic.color
+                    : "bg-muted text-muted-foreground hover:bg-muted/80"
+                }`}
               >
-                {claim.title}
+                {topic.label}
-              </Link>
+              </button>
+            ))}
+          </div>
 
-              {/* Metadata line */}
+          {/* Search Bar */}
-              <div className="text-xs mt-1 leading-relaxed">
+          <div className="relative">
-                <span className="text-accent">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  {new Date(claim.date).toLocaleDateString('en-US', {
+            <input
-                    year: 'numeric',
+              type="text"
-                    month: 'short',
+              placeholder="Search articles, topics, or claims..."
-                    day: 'numeric'
+              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>
+        </div>
+
+        {/* Results count */}
+        {(selectedTopic !== "all" || searchQuery) && (
+          <div className="mb-6 text-sm text-muted-foreground">
+            Showing {filteredArticles.length} of {articles.length} articles
+          </div>
+        )}
+
+        {/* Grid Layout */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+          {filteredArticles.map((article) => (
+            <article
+              key={article.slug}
+              className="bg-card border border-border rounded-lg p-6 transition-all hover:shadow-lg hover:translate-y-[-2px] flex flex-col"
+            >
+              {/* 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>
-                <span className="text-muted-foreground mx-1.5">•</span>
+                ))}
-                <span className="text-muted-foreground">{claim.claims.length} claims</span>
-                <span className="text-muted-foreground mx-1.5">•</span>
-                <span className="italic text-muted-foreground">{claim.featuredClaim}</span>
               </div>
+
+              {/* Title */}
+              <h3 className="text-lg font-semibold mb-2 text-foreground">
+                <Link
+                  href={`/claims-library/${article.slug}`}
+                  className="hover:text-accent transition-colors"
+                >
+                  {article.title}
+                </Link>
+              </h3>
+
+              {/* Description */}
+              <p className="text-sm text-muted-foreground mb-3">
+                {article.description}
+              </p>
+
+              {/* Key Points */}
+              <ul className="space-y-1 mb-4 flex-1">
+                {article.keyPoints.map((point, idx) => (
+                  <li key={idx} className="text-xs text-muted-foreground flex items-start">
+                    <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>
+                <Link
+                  href={`/claims-library/${article.slug}`}
+                  className="text-sm font-semibold text-accent hover:text-accent/80 transition-colors"
+                >
+                  View Claims →
+                </Link>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        {/* 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>
+        )}
+
+        {/* About This Library Section */}
+        <div 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 {getTotalClaimsCount()} claims) →
+          </Link>
+        </div>
+
+        {/* How to Use Section */}
+        <div className="mb-0">
+          <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">
+            <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 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 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 text-muted-foreground">
+                Download CSV data for integration into your own systems. Each claim
+                includes context and evidence for practical application.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
   );