Move How to Use section to prominent position after header

Created a new dedicated section for "How to Use This Library" that appears immediately after the header, making it visible above the fold.

Changes:
- Created new HowToUse component with 3-column responsive grid
- Positioned between Header and ClaimsLibrary sections
- Removed from bottom of claims library (was easy to miss)
- Added subtle background tint (bg-muted/30) to distinguish section
- Centered heading for visual balance
- Uses same wide container (max-w-[1920px]) for consistency

Visual hierarchy:
1. Header (Photo + Bio + Links)
2. How to Use This Library (3 cards: Researchers, LLM Training, Practitioners)
3. Claims Library (Search + Filters + Grid)
4. About This Library (at bottom)
5. Services

Benefits:
✓ Users understand library purpose before searching
✓ Clear progression: Who → How to Use → The Library
✓ Above the fold visibility
✓ Responsive 3-column → 1-column on mobile
✓ Maintains clean visual separation

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

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

src/app/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import Header from "@/components/Header";
+import HowToUse from "@/components/HowToUse";
 import Services from "@/components/Services";
 import ClaimsLibrary from "@/components/ClaimsLibrary";
 import Footer from "@/components/Footer";
@@ -49,6 +50,7 @@ export default function HomePage() {
           Skip to main content
         </a>
         <Header />
+        <HowToUse />
         <main id="main-content">
           <ClaimsLibrary />
           <Services />

src/components/ClaimsLibrary.tsx

@@ -214,7 +214,7 @@ License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)`;
         )}
 
         {/* About This Library Section */}
-        <div className="mb-12 p-8 bg-muted border border-border rounded-lg">
+        <div className="mb-0 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
@@ -232,34 +232,6 @@ License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)`;
             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>
   );

src/components/HowToUse.tsx

@@ -0,0 +1,34 @@
+const HowToUse = () => {
+  return (
+    <section className="py-10 md:py-12 border-b border-border bg-muted/30">
+      <div className="container max-w-[1920px] mx-auto px-6 md:px-8 lg:px-12">
+        <h2 className="text-3xl md:text-4xl font-bold mb-8 text-center">How to Use This Library</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="bg-card 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-card 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-card 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>
+    </section>
+  );
+};
+
+export default HowToUse;