feat: improve homepage marketing and add integrations section

- Update headline to "THE NPM FOR AI TOOLS" for clearer positioning
- Add new integrations section showing Claude, Cursor, Windsurf support
- Include config code example for easy onboarding
- Fix search placeholder to use real tool names
- Improve featured tools display (hide N/A scores, show "New" for 0 downloads)
- Update site metadata and structured data with new tagline
- Add comprehensive TPMJS features documentation

apps/web/src/app/layout.tsx

@@ -23,11 +23,11 @@ const spaceMono = Space_Mono({
 export const metadata: Metadata = {
   metadataBase: new URL('https://tpmjs.com'),
   title: {
-    default: 'TPMJS - Tool Package Manager for AI Agents',
+    default: 'TPMJS - The NPM for AI Tools',
     template: '%s | TPMJS',
   },
   description:
-    'Discover and use npm packages as AI agent tools. No config files, automatic discovery, works with any framework.',
+    'Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and any MCP-compatible client.',
   icons: {
     icon: [
       { url: '/favicon.svg', type: 'image/svg+xml' },
@@ -55,9 +55,9 @@ export const metadata: Metadata = {
     locale: 'en_US',
     url: 'https://tpmjs.com',
     siteName: 'TPMJS',
-    title: 'TPMJS - Tool Package Manager for AI Agents',
+    title: 'TPMJS - The NPM for AI Tools',
     description:
-      'Discover and use npm packages as AI agent tools. No config files, automatic discovery, works with any framework.',
+      'Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and any MCP-compatible client.',
     images: [
       {
         url: '/api/og/home',
@@ -71,9 +71,9 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     site: '@tpmjs_registry',
     creator: '@tpmjs_registry',
-    title: 'TPMJS - Tool Package Manager for AI Agents',
+    title: 'TPMJS - The NPM for AI Tools',
     description:
-      'Discover and use npm packages as AI agent tools. No config files, automatic discovery, works with any framework.',
+      'Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and any MCP-compatible client.',
     images: ['/api/og/home'],
   },
   robots: {
@@ -101,7 +101,7 @@ export default function RootLayout({
     url: 'https://tpmjs.com',
     logo: 'https://tpmjs.com/logo.png',
     description:
-      'Discover and use npm packages as AI agent tools. No config files, automatic discovery, works with any framework.',
+      'The NPM for AI tools. Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and any MCP-compatible client.',
     sameAs: ['https://github.com/tpmjs/tpmjs', 'https://x.com/tpmjs_registry'],
   };
 
@@ -111,7 +111,7 @@ export default function RootLayout({
     name: 'TPMJS',
     url: 'https://tpmjs.com',
     description:
-      'Discover and use npm packages as AI agent tools. No config files, automatic discovery, works with any framework.',
+      'The NPM for AI tools. Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and any MCP-compatible client.',
     potentialAction: {
       '@type': 'SearchAction',
       target: {

apps/web/src/app/page.tsx

@@ -91,7 +91,7 @@ export default async function HomePage(): Promise<React.ReactElement> {
                 Featured Tools
               </h2>
               <p className="text-lg text-foreground-secondary max-w-2xl mx-auto mb-8">
-                Top-rated tools from our registry. Sorted by quality score and community adoption.
+                Production-ready tools you can use today. Add to your AI agent in one line.
               </p>
             </div>
 
@@ -129,12 +129,18 @@ export default async function HomePage(): Promise<React.ReactElement> {
                       </div>
 
                       <div className="mt-4 pt-4 border-t border-border flex items-center justify-between text-xs text-foreground-tertiary">
+                        {tool.qualityScore && Number(tool.qualityScore) > 0 ? (
+                          <span className="flex items-center gap-1">
+                            <span className="text-brutalist-accent">★</span>
+                            {Number(tool.qualityScore).toFixed(2)}
+                          </span>
+                        ) : (
+                          <span />
+                        )}
                         <span>
-                          Quality:{' '}
-                          {tool.qualityScore ? Number(tool.qualityScore).toFixed(2) : 'N/A'}
-                        </span>
-                        <span>
-                          {tool.package.npmDownloadsLastMonth?.toLocaleString() || '0'} downloads/mo
+                          {(tool.package.npmDownloadsLastMonth ?? 0) > 0
+                            ? `${tool.package.npmDownloadsLastMonth?.toLocaleString()} downloads/mo`
+                            : 'New'}
                         </span>
                       </div>
                     </div>
@@ -164,6 +170,62 @@ export default async function HomePage(): Promise<React.ReactElement> {
           </Container>
         </section>
 
+        {/* Integration Section */}
+        <section className="py-16 bg-surface border-y border-border">
+          <Container size="xl" padding="lg">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
+                Works Everywhere
+              </h2>
+              <p className="text-lg text-foreground-secondary max-w-2xl mx-auto">
+                Use TPMJS tools with any MCP-compatible AI client. One URL, instant access.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+              <div className="p-6 border border-border rounded-lg bg-background text-center">
+                <div className="text-2xl mb-3 font-mono text-brutalist-accent">Claude</div>
+                <p className="text-sm text-foreground-secondary">Desktop, Projects, and API</p>
+              </div>
+              <div className="p-6 border border-border rounded-lg bg-background text-center">
+                <div className="text-2xl mb-3 font-mono text-brutalist-accent">Cursor</div>
+                <p className="text-sm text-foreground-secondary">AI-powered code editor</p>
+              </div>
+              <div className="p-6 border border-border rounded-lg bg-background text-center">
+                <div className="text-2xl mb-3 font-mono text-brutalist-accent">Windsurf</div>
+                <p className="text-sm text-foreground-secondary">Agentic IDE</p>
+              </div>
+              <div className="p-6 border border-border rounded-lg bg-background text-center">
+                <div className="text-2xl mb-3 font-mono text-brutalist-accent">Any MCP</div>
+                <p className="text-sm text-foreground-secondary">Open protocol support</p>
+              </div>
+            </div>
+
+            {/* Code Example */}
+            <div className="max-w-2xl mx-auto">
+              <div className="bg-background border border-border rounded-lg overflow-hidden">
+                <div className="px-4 py-2 border-b border-border bg-surface-secondary text-xs font-mono text-foreground-secondary">
+                  claude_desktop_config.json
+                </div>
+                <pre className="p-4 text-sm font-mono text-foreground overflow-x-auto">
+                  <code>{`{
+  "mcpServers": {
+    "tpmjs": {
+      "command": "npx",
+      "args": ["-y", "@anthropic/mcp-remote",
+        "https://tpmjs.com/api/mcp/ajax/ajax-collection/sse"]
+    }
+  }
+}`}</code>
+                </pre>
+              </div>
+              <p className="text-center mt-4 text-sm text-foreground-secondary">
+                Add this to your config and get instant access to 170+ tools.
+              </p>
+            </div>
+          </Container>
+        </section>
+
         {/* Publish Your Tool Section */}
         <section className="py-16 bg-surface">
           <Container size="xl" padding="lg">

apps/web/src/components/home/HeroSection.tsx

@@ -65,7 +65,7 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
             className="mb-8 font-bold leading-none tracking-tight text-foreground"
             style={{ fontSize: 'clamp(48px, 10vw, 96px)' }}
           >
-            TOOL REGISTRY FOR AI AGENTS
+            THE NPM FOR AI TOOLS
           </h1>
 
           {/* Live Metrics Strip */}
@@ -83,7 +83,8 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
 
           {/* Subheading */}
           <p className="mb-12 max-w-3xl text-xl md:text-2xl font-medium leading-relaxed text-foreground-secondary tracking-tight">
-            The open registry for AI tools. Browse, publish, and integrate tools into your agents.
+            Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and
+            any MCP-compatible client.
           </p>
 
           {/* Brutalist Search Interface */}
@@ -122,8 +123,8 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
             {/* Helper Text */}
             <div className="mt-4 flex items-center gap-4 font-mono text-xs text-foreground-tertiary uppercase tracking-wider">
               <span>
-                Try: &ldquo;web-scraper&rdquo;, &ldquo;github-manager&rdquo;,
-                &ldquo;sql-query&rdquo;
+                Try: &ldquo;web scraper&rdquo;, &ldquo;discord&rdquo;, &ldquo;code
+                interpreter&rdquo;
               </span>
             </div>
           </div>