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 1a7b1b4f14f feat(seo): add AI Gateway capability section to homepage
1a7b1b4f14f is described below
commit 1a7b1b4f14f06b1957e4f3abd870639ec54ccbbb
Author: Ming Wen <[email protected]>
AuthorDate: Mon Jun 22 17:16:38 2026 +0800
feat(seo): add AI Gateway capability section to homepage
Standalone section (after Pathways) showcasing APISIX as an AI gateway: a
flow visual (apps -> APISIX -> 20+ LLM providers) and a 6-card capability
grid (multi-LLM proxy, LLM load balancing, retry & fallback, token rate
limiting, prompt security, MCP), linking to /ai-gateway/. APISIX has no UI
to
screenshot, so capabilities are shown via the flow + grid.
---
.../src/components/sections/AIGatewaySection.tsx | 116 ++++++++++++++++++
.../src/css/landing-sections/ai-gateway-home.scss | 135 +++++++++++++++++++++
website/src/pages/index.tsx | 2 +
3 files changed, 253 insertions(+)
diff --git a/website/src/components/sections/AIGatewaySection.tsx
b/website/src/components/sections/AIGatewaySection.tsx
new file mode 100644
index 00000000000..541bd3a70c3
--- /dev/null
+++ b/website/src/components/sections/AIGatewaySection.tsx
@@ -0,0 +1,116 @@
+import type { FC } from 'react';
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+
+import '../../css/landing-sections/ai-gateway-home.scss';
+
+interface Capability {
+ title: JSX.Element;
+ desc: JSX.Element;
+}
+
+const CAPABILITIES: Capability[] = [
+ {
+ title: <Translate id="home.ai.cap.proxy.t">Multi-LLM proxy</Translate>,
+ desc: (
+ <Translate id="home.ai.cap.proxy.d">
+ Route to OpenAI, Anthropic, AWS Bedrock, DeepSeek, Ollama and 20+
providers through one endpoint.
+ </Translate>
+ ),
+ },
+ {
+ title: <Translate id="home.ai.cap.lb.t">LLM load balancing</Translate>,
+ desc: (
+ <Translate id="home.ai.cap.lb.d">
+ Distribute traffic across providers and models for throughput and
resilience.
+ </Translate>
+ ),
+ },
+ {
+ title: <Translate id="home.ai.cap.fallback.t">Retry &
fallback</Translate>,
+ desc: (
+ <Translate id="home.ai.cap.fallback.d">
+ Fail over to a backup model or provider automatically when one is
unavailable.
+ </Translate>
+ ),
+ },
+ {
+ title: <Translate id="home.ai.cap.token.t">Token rate limiting</Translate>,
+ desc: (
+ <Translate id="home.ai.cap.token.d">
+ Cap usage and cost with token-based rate limits per consumer.
+ </Translate>
+ ),
+ },
+ {
+ title: <Translate id="home.ai.cap.security.t">Prompt security</Translate>,
+ desc: (
+ <Translate id="home.ai.cap.security.d">
+ Guardrails, content moderation, and prompt decoration before requests
reach the model.
+ </Translate>
+ ),
+ },
+ {
+ title: <Translate id="home.ai.cap.mcp.t">MCP support</Translate>,
+ desc: (
+ <Translate id="home.ai.cap.mcp.d">
+ Expose and govern Model Context Protocol tools through the gateway.
+ </Translate>
+ ),
+ },
+];
+
+const PROVIDERS = ['OpenAI', 'Anthropic', 'AWS Bedrock', 'DeepSeek', 'Ollama'];
+
+const AIGatewaySection: FC = () => (
+ <section className="ai-home">
+ <div className="ai-home__inner">
+ <span className="ai-home__eyebrow">
+ <Translate id="home.ai.eyebrow">AI Gateway</Translate>
+ </span>
+ <h2 className="ai-home__title">
+ <Translate id="home.ai.title">The same gateway, now for your LLM
traffic</Translate>
+ </h2>
+ <p className="ai-home__subtitle">
+ <Translate id="home.ai.subtitle">
+ Proxy, secure, and govern traffic to 20+ LLM providers — with the
performance, plugins,
+ and observability you already run for your APIs.
+ </Translate>
+ </p>
+
+ <div className="ai-home__flow">
+ <span className="ai-home__node">
+ <Translate id="home.ai.flow.apps">AI apps & agents</Translate>
+ </span>
+ <span className="ai-home__arrow" aria-hidden="true">→</span>
+ <span className="ai-home__node ai-home__node--apisix">Apache
APISIX</span>
+ <span className="ai-home__arrow" aria-hidden="true">→</span>
+ <span className="ai-home__providers">
+ {PROVIDERS.map((provider) => (
+ <span className="ai-home__provider"
key={provider}>{provider}</span>
+ ))}
+ <span className="ai-home__provider ai-home__provider--more">
+ <Translate id="home.ai.flow.more">+ more</Translate>
+ </span>
+ </span>
+ </div>
+
+ <div className="ai-home__grid">
+ {CAPABILITIES.map((capability) => (
+ <div className="ai-home__card" key={capability.title.props.id}>
+ <h3 className="ai-home__card-title">{capability.title}</h3>
+ <p className="ai-home__card-desc">{capability.desc}</p>
+ </div>
+ ))}
+ </div>
+
+ <Link className="ai-home__cta" to="/ai-gateway/">
+ <Translate id="home.ai.cta">Explore the AI Gateway</Translate>
+ {' →'}
+ </Link>
+ </div>
+ </section>
+);
+
+export default AIGatewaySection;
diff --git a/website/src/css/landing-sections/ai-gateway-home.scss
b/website/src/css/landing-sections/ai-gateway-home.scss
new file mode 100644
index 00000000000..de5a8d8b76f
--- /dev/null
+++ b/website/src/css/landing-sections/ai-gateway-home.scss
@@ -0,0 +1,135 @@
+.ai-home {
+ background: #faf7f7;
+ padding: 4rem var(--ifm-spacing-horizontal);
+}
+
+.ai-home__inner {
+ max-width: 1000px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.ai-home__eyebrow {
+ display: inline-block;
+ font-size: 0.82rem;
+ font-weight: 600;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #a32d2d;
+ background: #fcebeb;
+ padding: 5px 14px;
+ border-radius: 20px;
+ margin-bottom: 1rem;
+}
+
+.ai-home__title {
+ font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem);
+ font-weight: 700;
+ margin-bottom: 0.5rem;
+}
+
+.ai-home__subtitle {
+ color: #6b6b6b;
+ max-width: 680px;
+ margin: 0 auto 2.25rem;
+ font-size: 1rem;
+ line-height: 1.6;
+}
+
+.ai-home__flow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+ margin-bottom: 2.5rem;
+}
+
+.ai-home__node {
+ background: #fff;
+ border: 1px solid #e6e6e6;
+ border-radius: 8px;
+ padding: 8px 14px;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #2c2c2a;
+}
+
+.ai-home__node--apisix {
+ background: #e8433e;
+ border-color: #e8433e;
+ color: #fff;
+ font-weight: 700;
+}
+
+.ai-home__arrow {
+ color: #e8433e;
+ font-weight: 700;
+}
+
+.ai-home__providers {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.ai-home__provider {
+ background: #fff;
+ border: 1px solid #e6e6e6;
+ border-radius: 20px;
+ padding: 6px 12px;
+ font-size: 0.82rem;
+ color: #444;
+}
+
+.ai-home__provider--more {
+ color: #888;
+}
+
+.ai-home__grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1rem;
+ text-align: left;
+}
+
+@media (max-width: 820px) {
+ .ai-home__grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+.ai-home__card {
+ background: #fff;
+ border: 1px solid #ececec;
+ border-radius: 12px;
+ padding: 1.25rem 1.3rem;
+}
+
+.ai-home__card-title {
+ font-size: 1.05rem;
+ font-weight: 700;
+ margin: 0 0 0.4rem;
+ color: #1c1c1c;
+}
+
+.ai-home__card-desc {
+ font-size: 0.9rem;
+ line-height: 1.55;
+ color: #6b6b6b;
+ margin: 0;
+}
+
+.ai-home__cta {
+ display: inline-block;
+ margin-top: 2rem;
+ font-size: 1rem;
+ font-weight: 600;
+ color: #e8433e;
+
+ &:hover {
+ color: #c7352f;
+ text-decoration: none;
+ }
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 192aef2c754..65a89d98656 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -15,6 +15,7 @@ import OpensourcePromo from
'../components/sections/OpensourcePromo';
import EndCTA from '../components/sections/Endcta';
import Pathways from '../components/sections/Pathways';
import Integrations from '../components/sections/Integrations';
+import AIGatewaySection from '../components/sections/AIGatewaySection';
// Structured data for the homepage. Organization + WebSite are already
injected
// globally by config/schema-org.js; these add product-level
(SoftwareApplication)
@@ -139,6 +140,7 @@ const Index: FC = () => (
</Head>
<HeroSection />
<Pathways />
+ <AIGatewaySection />
<Architecture />
<Features />
<Integrations />
