(apisix-website) branch feat/seo-homepage-rewrite updated: feat(seo): link AI capability cards to docs + add Comparisons to navbar

[wenming]

This is an automated email from the ASF dual-hosted git repository.

moonming pushed a commit to branch feat/seo-homepage-rewrite
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/feat/seo-homepage-rewrite by 
this push:
     new 709cf335a8d feat(seo): link AI capability cards to docs + add 
Comparisons to navbar
709cf335a8d is described below

commit 709cf335a8de3552a4d23aad4517fe5b19207125
Author: Ming Wen <moonbingb...@gmail.com>
AuthorDate: Mon Jun 22 17:30:20 2026 +0800

    feat(seo): link AI capability cards to docs + add Comparisons to navbar
    
    - AI Gateway cards are now links to their plugin docs (ai-proxy,
      ai-proxy-multi, ai-rate-limiting, ai-prompt-guard) / the AI gateway page.
    - Add a 'Comparisons' navbar item -> /learning-center/tags/comparison
      (the comparison-article list, used by apisix-vs-kong, 
open-source-comparison...).
---
 config/navbar.js                                   |  6 ++++++
 .../src/components/sections/AIGatewaySection.tsx   | 11 +++++++++--
 .../src/css/landing-sections/ai-gateway-home.scss  | 22 ++++++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/config/navbar.js b/config/navbar.js
index 93c9f4a2fef..10a55444ff2 100644
--- a/config/navbar.js
+++ b/config/navbar.js
@@ -58,6 +58,12 @@ module.exports = [
     position: 'right',
     target: '_parent',
   },
+  {
+    to: '/learning-center/tags/comparison',
+    label: 'Comparisons',
+    position: 'right',
+    target: '_parent',
+  },
   {
     to: '/blog',
     label: 'Blog',
diff --git a/website/src/components/sections/AIGatewaySection.tsx 
b/website/src/components/sections/AIGatewaySection.tsx
index 541bd3a70c3..7920b5be4f1 100644
--- a/website/src/components/sections/AIGatewaySection.tsx
+++ b/website/src/components/sections/AIGatewaySection.tsx
@@ -8,6 +8,7 @@ import '../../css/landing-sections/ai-gateway-home.scss';
 interface Capability {
   title: JSX.Element;
   desc: JSX.Element;
+  href: string;
 }
 
 const CAPABILITIES: Capability[] = [
@@ -18,6 +19,7 @@ const CAPABILITIES: Capability[] = [
         Route to OpenAI, Anthropic, AWS Bedrock, DeepSeek, Ollama and 20+ 
providers through one endpoint.
       </Translate>
     ),
+    href: '/docs/apisix/plugins/ai-proxy/',
   },
   {
     title: <Translate id="home.ai.cap.lb.t">LLM load balancing</Translate>,
@@ -26,6 +28,7 @@ const CAPABILITIES: Capability[] = [
         Distribute traffic across providers and models for throughput and 
resilience.
       </Translate>
     ),
+    href: '/docs/apisix/plugins/ai-proxy-multi/',
   },
   {
     title: <Translate id="home.ai.cap.fallback.t">Retry &amp; 
fallback</Translate>,
@@ -34,6 +37,7 @@ const CAPABILITIES: Capability[] = [
         Fail over to a backup model or provider automatically when one is 
unavailable.
       </Translate>
     ),
+    href: '/docs/apisix/plugins/ai-proxy-multi/',
   },
   {
     title: <Translate id="home.ai.cap.token.t">Token rate limiting</Translate>,
@@ -42,6 +46,7 @@ const CAPABILITIES: Capability[] = [
         Cap usage and cost with token-based rate limits per consumer.
       </Translate>
     ),
+    href: '/docs/apisix/plugins/ai-rate-limiting/',
   },
   {
     title: <Translate id="home.ai.cap.security.t">Prompt security</Translate>,
@@ -50,6 +55,7 @@ const CAPABILITIES: Capability[] = [
         Guardrails, content moderation, and prompt decoration before requests 
reach the model.
       </Translate>
     ),
+    href: '/docs/apisix/plugins/ai-prompt-guard/',
   },
   {
     title: <Translate id="home.ai.cap.mcp.t">MCP support</Translate>,
@@ -58,6 +64,7 @@ const CAPABILITIES: Capability[] = [
         Expose and govern Model Context Protocol tools through the gateway.
       </Translate>
     ),
+    href: '/ai-gateway/',
   },
 ];
 
@@ -98,10 +105,10 @@ const AIGatewaySection: FC = () => (
 
       <div className="ai-home__grid">
         {CAPABILITIES.map((capability) => (
-          <div className="ai-home__card" key={capability.title.props.id}>
+          <Link className="ai-home__card" to={capability.href} 
key={capability.title.props.id}>
             <h3 className="ai-home__card-title">{capability.title}</h3>
             <p className="ai-home__card-desc">{capability.desc}</p>
-          </div>
+          </Link>
         ))}
       </div>
 
diff --git a/website/src/css/landing-sections/ai-gateway-home.scss 
b/website/src/css/landing-sections/ai-gateway-home.scss
index de5a8d8b76f..8bb5ccd459b 100644
--- a/website/src/css/landing-sections/ai-gateway-home.scss
+++ b/website/src/css/landing-sections/ai-gateway-home.scss
@@ -101,10 +101,32 @@
 }
 
 .ai-home__card {
+  display: block;
   background: #fff;
   border: 1px solid #ececec;
   border-radius: 12px;
   padding: 1.25rem 1.3rem;
+  color: inherit;
+  text-decoration: none;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s 
ease;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: #f3b6b3;
+    box-shadow: 0 6px 18px rgb(232 67 62 / 8%);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &:hover .ai-home__card-title {
+    color: #e8433e;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-home__card:hover {
+    transform: none;
+  }
 }
 
 .ai-home__card-title {