website: align with README — tagline, demo GIF, NL example, zero-setup section

- New hero tagline and "No CKAN knowledge required"
- Demo GIF section after hero
- "See it in action" section with air quality example
- Zero-setup block (hosted endpoint) at top of Quick Start
- ChatGPT + Claude Desktop step-by-step cards side by side
- "Hundreds of Portals" replaces "500+ Portals"
- More clients note with link to README
- "Perfect For" intro aligned with README
- CTA links to README instead of generic GitHub
- icon-claude.svg and mcp_server_demo.gif served locally

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

Author: aborruso

website/public/icon-claude.svg

@@ -168,11 +168,11 @@ const baseUrl = '/ckan-mcp-server';
           </h1>
 
           <p class="text-xl sm:text-2xl text-center text-gray-700 mb-6 max-w-3xl mx-auto fade-in-up" style="animation-delay: 0.2s">
-            MCP server for AI-powered interaction with CKAN open data portals
+            Turn any CKAN open data portal into a conversation.
           </p>
 
           <p class="text-lg text-center text-gray-600 mb-12 max-w-2xl mx-auto fade-in-up" style="animation-delay: 0.3s">
-            Search datasets, query tabular data, and analyze metadata across 500+ portals worldwide using natural language with Claude, ChatGPT, and other MCP-compatible AI tools.
+            Give your AI assistant direct access to any CKAN open data portal — search datasets, explore organizations, query tabular data, and read metadata, all through natural language. No CKAN knowledge required.
           </p>
 
           <!-- CTA -->
@@ -197,6 +197,17 @@ const baseUrl = '/ckan-mcp-server';
       </div>
     </section>
 
+    <!-- Demo GIF Section -->
+    <section class="py-12 px-4 sm:px-6 lg:px-8 bg-white">
+      <div class="max-w-4xl mx-auto">
+        <img
+          src={`${baseUrl}/mcp_server_demo.gif`}
+          alt="CKAN MCP Server demo — searching datasets through natural language"
+          class="w-full border border-gray-200 shadow-lg"
+        />
+      </div>
+    </section>
+
     <!-- Features Section -->
     <section class="py-24 px-4 sm:px-6 lg:px-8 bg-white">
       <div class="max-w-6xl mx-auto">
@@ -228,7 +239,7 @@ const baseUrl = '/ckan-mcp-server';
 
           <div class="feature-card p-8 bg-gray-50 border-l-4 border-coral">
             <div class="mono text-sm font-medium text-coral mb-4 tracking-wider">03</div>
-            <h3 class="display-font text-2xl font-semibold text-navy mb-3">500+ Portals</h3>
+            <h3 class="display-font text-2xl font-semibold text-navy mb-3">Hundreds of Portals</h3>
             <p class="text-gray-600 leading-relaxed">
               Connect to any CKAN portal worldwide: dati.gov.it, data.gov, data.europa.eu, and hundreds more.
             </p>
@@ -274,7 +285,54 @@ const baseUrl = '/ckan-mcp-server';
         </div>
 
         <div class="space-y-12">
-          <!-- Claude Desktop -->
+          <!-- Zero Setup Option -->
+          <div class="relative bg-data-blue overflow-hidden">
+            <div class="p-8">
+              <div class="mono text-xs font-medium tracking-widest uppercase mb-2 text-blue-200">Fastest way to start</div>
+              <h3 class="display-font text-2xl font-semibold text-white mb-2">No Install — Use the Hosted Endpoint</h3>
+              <p class="text-blue-100 mb-5">Just point your MCP client at this URL — nothing to install:</p>
+              <div class="bg-navy p-4 overflow-x-auto border-l-4 border-white border-opacity-30">
+                <pre class="mono text-sm text-gray-100 leading-relaxed">https://ckan-mcp-server.andy-pr.workers.dev/mcp</pre>
+              </div>
+              <p class="mono text-xs text-blue-200 mt-3">100,000 requests/day shared quota · Free · Works with any MCP client</p>
+            </div>
+          </div>
+
+          <!-- Zero Setup — ChatGPT + Claude Desktop side by side -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- ChatGPT -->
+            <div class="bg-white border border-gray-200 p-6">
+              <div class="flex items-center gap-3 mb-4">
+                <svg class="w-6 h-6 text-gray-800 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>
+                <h4 class="display-font text-lg font-semibold text-navy">ChatGPT</h4>
+                <span class="mono text-xs text-gray-400 ml-auto">Plus / Team / Enterprise</span>
+              </div>
+              <ol class="space-y-2 text-sm text-gray-600">
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">1.</span><span>Profile menu → <strong>Settings → Apps → Advanced settings</strong></span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">2.</span><span>Enable <strong>Developer mode</strong></span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">3.</span><span>Click <strong>Create app</strong> (top-right)</span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">4.</span><span>Name: <em>CKAN MCP Server</em> · URL: the endpoint above · Auth: <em>No Auth</em></span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">5.</span><span>In a new chat: <strong>+</strong> → <strong>More</strong> → select <em>CKAN MCP Server</em></span></li>
+              </ol>
+            </div>
+
+            <!-- Claude Desktop -->
+            <div class="bg-white border border-gray-200 p-6">
+              <div class="flex items-center gap-3 mb-4">
+                <img src={`${baseUrl}/icon-claude.svg`} alt="Claude" class="w-6 h-6 flex-shrink-0" />
+                <h4 class="display-font text-lg font-semibold text-navy">Claude Desktop</h4>
+              </div>
+              <ol class="space-y-2 text-sm text-gray-600">
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">1.</span><span><strong>Settings → Integrations</strong></span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">2.</span><span>Click <strong>Add custom integration</strong></span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">3.</span><span>Name: <em>CKAN MCP Server</em> · URL: the endpoint above</span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">4.</span><span>Click <strong>Add</strong> to save</span></li>
+                <li class="flex gap-2"><span class="mono text-data-blue font-medium flex-shrink-0">5.</span><span>New chat → <strong>+</strong> → Integrations → enable <em>CKAN MCP Server</em></span></li>
+              </ol>
+            </div>
+          </div>
+
+          <!-- Claude Desktop (local install) -->
           <div class="relative bg-white border border-gray-200 overflow-hidden">
             <div class="absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-data-blue to-teal"></div>
             <div class="p-8">
@@ -381,15 +439,43 @@ const baseUrl = '/ckan-mcp-server';
       </div>
     </section>
 
+    <!-- See it in action Section -->
+    <section class="py-24 px-4 sm:px-6 lg:px-8 bg-cream">
+      <div class="max-w-4xl mx-auto">
+        <div class="text-center mb-12">
+          <h2 class="display-font text-5xl font-bold text-navy mb-4">See it in action</h2>
+          <p class="text-lg text-gray-600">Just ask in plain language — no query syntax needed</p>
+        </div>
+        <div class="bg-white border border-gray-200 p-8">
+          <blockquote class="text-xl text-gray-700 italic border-l-4 border-data-blue pl-6 mb-8 leading-relaxed">
+            "Search dati.gov.it for datasets about air quality in Milan, then summarize what each contains — time coverage, license, and best download format."
+          </blockquote>
+          <p class="text-gray-600 leading-relaxed">
+            The server finds 31 datasets, groups them by structural pattern, and returns a clear summary — including series names, years covered, publisher, and format.
+          </p>
+        </div>
+
+        <div class="mt-10 p-6 bg-white border border-gray-200 text-center">
+          <p class="text-gray-600">
+            Also works with <strong>ChatGPT</strong>, <strong>Claude Code</strong>, <strong>Gemini CLI</strong>, and <strong>Codex CLI</strong>.
+            See the <a href="https://github.com/ondata/ckan-mcp-server#-use-it-in-your-favorite-tool" target="_blank" rel="noopener noreferrer" class="text-data-blue hover:underline font-medium">full setup guide</a> for step-by-step instructions.
+          </p>
+        </div>
+      </div>
+    </section>
+
     <!-- Use Cases Section -->
     <section class="py-24 px-4 sm:px-6 lg:px-8 bg-white">
       <div class="max-w-5xl mx-auto">
         <div class="text-center mb-20">
           <h2 class="display-font text-5xl font-bold text-navy mb-6">
             Perfect For
           </h2>
-          <p class="text-lg text-gray-600">
-            Who benefits from CKAN MCP Server?
+          <p class="text-lg text-gray-600 mb-2">
+            Everyone. No CKAN knowledge required.
+          </p>
+          <p class="text-base text-gray-500">
+            Journalists looking for data to verify a story. Researchers exploring public datasets. Public servants checking what data their administration publishes. Developers building data pipelines.
           </p>
         </div>
 
@@ -574,20 +660,20 @@ const baseUrl = '/ckan-mcp-server';
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
           <a
-            href="https://github.com/ondata/ckan-mcp-server"
+            href="https://github.com/ondata/ckan-mcp-server/blob/main/README.md"
             target="_blank"
             rel="noopener noreferrer"
             class="inline-block bg-white text-navy px-10 py-4 rounded-none font-semibold hover:bg-cream transition-all duration-300 hover:scale-105"
           >
-            View Documentation
+            Full README →
           </a>
           <a
-            href="https://www.npmjs.com/package/@aborruso/ckan-mcp-server"
+            href="https://github.com/ondata/ckan-mcp-server"
             target="_blank"
             rel="noopener noreferrer"
             class="inline-block bg-transparent text-white px-10 py-4 rounded-none font-semibold border-2 border-white hover:bg-white hover:text-navy transition-all duration-300"
           >
-            npm Package
+            GitHub
           </a>
         </div>
       </div>