This is an automated email from the ASF dual-hosted git repository.
guoqqqi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 4fa31a79d30 feat(seo): rewrite homepage for CTR + funnel to
docs/comparisons/AI gateway (#2056)
4fa31a79d30 is described below
commit 4fa31a79d3018cb3c88943bf9a2e5172540e7bbe
Author: Ming Wen <[email protected]>
AuthorDate: Wed Jun 24 17:23:50 2026 +0800
feat(seo): rewrite homepage for CTR + funnel to docs/comparisons/AI gateway
(#2056)
---
config/navbar.js | 6 +
.../src/components/sections/AIGatewaySection.tsx | 123 ++++++++++++++++
website/src/components/sections/Comparison.tsx | 132 ++++++++---------
website/src/components/sections/HeroSection.tsx | 70 ++++-----
website/src/components/sections/Integrations.tsx | 134 ++++++++++++++++++
website/src/components/sections/Pathways.tsx | 67 +++++++++
website/src/css/comparisons.scss | 99 +++++++++++++
website/src/css/customTheme.scss | 17 +++
.../src/css/landing-sections/ai-gateway-home.scss | 157 +++++++++++++++++++++
website/src/css/landing-sections/comparison.scss | 106 +++++++++-----
website/src/css/landing-sections/hero.scss | 114 ++++++++++-----
website/src/css/landing-sections/integrations.scss | 101 +++++++++++++
website/src/css/landing-sections/pathways.scss | 62 ++++++++
website/src/pages/comparisons.tsx | 107 ++++++++++++++
website/src/pages/index.tsx | 6 +
website/static/img/integrations/clickhouse.svg | 1 +
website/static/img/integrations/consul.svg | 1 +
website/static/img/integrations/elasticsearch.svg | 5 +
website/static/img/integrations/grafana.svg | 1 +
website/static/img/integrations/kubernetes.svg | 1 +
website/static/img/integrations/nginx.svg | 1 +
website/static/img/integrations/opentelemetry.svg | 4 +
website/static/img/integrations/redis.svg | 1 +
website/static/img/integrations/vault.svg | 1 +
24 files changed, 1141 insertions(+), 176 deletions(-)
diff --git a/config/navbar.js b/config/navbar.js
index 93c9f4a2fef..382062740b1 100644
--- a/config/navbar.js
+++ b/config/navbar.js
@@ -58,6 +58,12 @@ module.exports = [
position: 'right',
target: '_parent',
},
+ {
+ to: '/comparisons/',
+ 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
new file mode 100644
index 00000000000..7920b5be4f1
--- /dev/null
+++ b/website/src/components/sections/AIGatewaySection.tsx
@@ -0,0 +1,123 @@
+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;
+ href: string;
+}
+
+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>
+ ),
+ href: '/docs/apisix/plugins/ai-proxy/',
+ },
+ {
+ 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>
+ ),
+ href: '/docs/apisix/plugins/ai-proxy-multi/',
+ },
+ {
+ 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>
+ ),
+ href: '/docs/apisix/plugins/ai-proxy-multi/',
+ },
+ {
+ 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>
+ ),
+ href: '/docs/apisix/plugins/ai-rate-limiting/',
+ },
+ {
+ 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>
+ ),
+ href: '/docs/apisix/plugins/ai-prompt-guard/',
+ },
+ {
+ 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>
+ ),
+ href: '/ai-gateway/',
+ },
+];
+
+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) => (
+ <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>
+ </Link>
+ ))}
+ </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/components/sections/Comparison.tsx
b/website/src/components/sections/Comparison.tsx
index 07c374cd9db..c01aedd7ac3 100644
--- a/website/src/components/sections/Comparison.tsx
+++ b/website/src/components/sections/Comparison.tsx
@@ -1,6 +1,5 @@
import type { FC } from 'react';
import React from 'react';
-
import Translate from '@docusaurus/Translate';
import Cross from '../../assets/icons/cross.svg';
@@ -8,80 +7,83 @@ import Tick from '../../assets/icons/tick.svg';
import '../../css/landing-sections/comparison.scss';
+interface Row {
+ feature: JSX.Element;
+ apisix: JSX.Element | string;
+ other: JSX.Element | string;
+}
+
+const ROWS: Row[] = [
+ {
+ feature: <Translate id="comparison.row.throughput">Single-core
throughput</Translate>,
+ apisix: '18,000 QPS',
+ other: '~1,700 QPS',
+ },
+ {
+ feature: <Translate id="comparison.row.latency">Added latency</Translate>,
+ apisix: '0.2 ms',
+ other: '~2 ms',
+ },
+ {
+ feature: <Translate id="comparison.row.ai">AI gateway / LLM
proxy</Translate>,
+ apisix: <Tick title="Supported" />,
+ other: <Cross title="Not supported" />,
+ },
+ {
+ feature: <Translate id="comparison.row.oss">Fully open-source, no
paywalled features</Translate>,
+ apisix: <Tick title="Supported" />,
+ other: <Cross title="Not supported" />,
+ },
+ {
+ feature: <Translate id="comparison.row.dynamic">Dynamic, real-time
configuration</Translate>,
+ apisix: <Tick title="Supported" />,
+ other: <Cross title="Not supported" />,
+ },
+ {
+ feature: <Translate id="comparison.row.hotreload">Hot plugin reload, no
restart</Translate>,
+ apisix: <Tick title="Supported" />,
+ other: <Cross title="Not supported" />,
+ },
+];
+
const Comparison: FC = () => (
- <div className="compare">
- <div>
- <h3 className="compare-head">
- <Translate id="comparison.component.title">Among the best, and always
improving</Translate>
- </h3>
- </div>
- <div className="compare-subtitle">
- <p>
- <Translate id="comparison.component.subtitle">
- Apache APISIX Gateway is open source and ever-evolving.
- Here's a general comparison of APISIX with other API Gateway
options,
- choose your right API Gateway.
- </Translate>
- </p>
- </div>
- <div>
- <table className="table">
+ <section className="compare">
+ <h2 className="compare-head">
+ <Translate id="comparison.component.title">Among the best, and always
improving</Translate>
+ </h2>
+ <p className="compare-subtitle">
+ <Translate id="comparison.component.subtitle">
+ Apache APISIX is an open-source API gateway and AI gateway — here is
how it compares on
+ performance and core capabilities.
+ </Translate>
+ </p>
+ <div className="compare-table-wrap">
+ <table className="compare-table">
<thead>
- <tr className="table-head">
- <th scope="col" style={{ fontWeight: '900' }}>Feature</th>
- <th scope="col" style={{ background: '#FF90A3' }}>
- APISIX
+ <tr>
+ <th className="compare-col-feature">
+ <Translate id="comparison.col.feature">Feature</Translate>
</th>
- <th scope="col" style={{ background: '#EBEBEB' }}>
- Other API Gateways
+ <th className="compare-col-apisix">Apache APISIX</th>
+ <th className="compare-col-other">
+ <Translate id="comparison.col.other">Other gateways</Translate>
</th>
</tr>
</thead>
<tbody>
- <tr>
- <th scope="row">Single-core CPU, QPS (enable limit-count and
prometheus plugins)</th>
- <td>18000</td>
- <td>~1700</td>
- </tr>
- <tr>
- <th scope="row">Latency</th>
- <td>0.2 ms</td>
- <td>2 ms</td>
- </tr>
- <tr>
- <th scope="row">Dubbo, MQTT, Tengine and REST API to gRPC
transcoding</th>
- <td><Tick title="Supported" /></td>
- <td><Cross title="Not supported" /></td>
- </tr>
- <tr>
- <th scope="row">Configuration rollback</th>
- <td><Tick title="Supported" /></td>
- <td><Cross title="Not supported" /></td>
- </tr>
- <tr>
- <th scope="row">Custom Load Balancing and routing</th>
- <td><Tick title="Supported" /></td>
- <td><Cross title="Not supported" /></td>
- </tr>
- <tr>
- <th scope="row">Plugin hot loading</th>
- <td><Tick title="Supported" /></td>
- <td><Cross title="Not supported" /></td>
- </tr>
- <tr>
- <th scope="row">Dashboard</th>
- <td><Tick title="Supported" /></td>
- <td><Cross title="Not supported" /></td>
- </tr>
- <tr>
- <th scope="row">Support any NGINX variable as routing
condition</th>
- <td><Tick title="Supported" /></td>
- <td><Cross title="Not supported" /></td>
- </tr>
+ {ROWS.map((row, index) => (
+ <tr key={index}>
+ <th scope="row" className="compare-col-feature">
+ {row.feature}
+ </th>
+ <td className="compare-apisix-cell">{row.apisix}</td>
+ <td className="compare-other-cell">{row.other}</td>
+ </tr>
+ ))}
</tbody>
</table>
</div>
- </div>
+ </section>
);
export default Comparison;
diff --git a/website/src/components/sections/HeroSection.tsx
b/website/src/components/sections/HeroSection.tsx
index f30f108b146..3dab2641758 100644
--- a/website/src/components/sections/HeroSection.tsx
+++ b/website/src/components/sections/HeroSection.tsx
@@ -2,61 +2,49 @@ import type { FC } from 'react';
import React from 'react';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
-
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import useWindowType from '@theme/hooks/useWindowSize';
import useBaseUrl from '@docusaurus/useBaseUrl';
-import ArrowAnim from '../ArrowAnim';
import '../../css/landing-sections/hero.scss';
-const LazyLoadHeroCanvas = () => {
- const windowType = useWindowType();
- if (windowType === 'mobile') return null;
-
- return (
- <BrowserOnly>
- {() => {
- // eslint-disable-next-line @typescript-eslint/no-var-requires,
global-require
- const HeroCanvas = require('../HeroCanvas').default;
- return <HeroCanvas />;
- }}
- </BrowserOnly>
- );
-};
+const STATS: { value: string; label: JSX.Element }[] = [
+ { value: '100+', label: <Translate
id="hero.stats.plugins">plugins</Translate> },
+ { value: '~18k', label: <Translate id="hero.stats.qps">QPS /
core</Translate> },
+ { value: '0.2 ms', label: <Translate id="hero.stats.latency">added
latency</Translate> },
+ { value: 'Apache 2.0', label: <Translate
id="hero.stats.license">licensed</Translate> },
+];
const HeroSection: FC = () => (
- <div className="hero-sec-wrap" style={{ width: '100%' }}>
+ <header className="hero-sec-wrap">
<div className="hero-text">
+ <span className="hero-eyebrow">
+ <Translate id="hero.component.eyebrow">Apache Software Foundation
top-level project</Translate>
+ </span>
<h1 className="hero-title">
- <Translate id="hero.component.title.fragment1">API Gateway & AI
Gateway for APIs and AI Agents</Translate>
+ <Translate id="hero.component.title.main">The open-source API Gateway
& AI Gateway</Translate>
</h1>
- <h2
- className="hero-subtitle"
- style={{
- color: '#E8433E', fontSize: 32, fontWeight: 700, lineHeight: 1.2,
- }}
- >
- <Translate id="hero.component.title.fragment2">
- Open-Source, Community-Driven, Future-Ready
- </Translate>
- </h2>
- <h3 className="hero-subtitle">
- <Translate id="hero.component.subtitle.content">
- APISIX API Gateway provides rich traffic management features like
load balancing, dynamic
- upstream, canary release, circuit breaking, auth, and observability.
+ <p className="hero-subtitle">
+ <Translate id="hero.component.subtitle.main">
+ High-performance traffic management for APIs, microservices, and LLM
workloads —
+ dynamic routing, load balancing, authentication, observability, and
100+ plugins.
</Translate>
- </h3>
+ </p>
<div className="hero-ctas">
<Link target="_parent" to={useBaseUrl('docs/apisix/getting-started')}
className="btn btn-download">
- <Translate id="hero.component.download.btn">Getting
Started</Translate>
+ <Translate id="hero.component.download.btn">Get started</Translate>
+ </Link>
+ <Link target="_parent" to={useBaseUrl('plugins/')} className="btn
btn-secondary">
+ <Translate id="hero.component.plugins.btn">Browse 100+
plugins</Translate>
</Link>
- <ArrowAnim />
</div>
+ <ul className="hero-stats">
+ {STATS.map((stat) => (
+ <li className="hero-stats__item" key={stat.value}>
+ <span className="hero-stats__value">{stat.value}</span>
+ <span className="hero-stats__label">{stat.label}</span>
+ </li>
+ ))}
+ </ul>
</div>
- <div className="add-margin">
- <LazyLoadHeroCanvas />
- </div>
- </div>
+ </header>
);
export default HeroSection;
diff --git a/website/src/components/sections/Integrations.tsx
b/website/src/components/sections/Integrations.tsx
new file mode 100644
index 00000000000..4dc51911595
--- /dev/null
+++ b/website/src/components/sections/Integrations.tsx
@@ -0,0 +1,134 @@
+import type { FC } from 'react';
+import React from 'react';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+
+import '../../css/landing-sections/integrations.scss';
+
+interface Integration {
+ name: string;
+ /** Plugin name whose brand-colored icon lives in the shared plugin sprite.
*/
+ icon?: string;
+ /** Colored logo served from /img/integrations/ (for non-plugin ecosystem
logos). */
+ logo?: string;
+ /** Doc link. Falls back to the plugin doc derived from `icon`. */
+ href?: string;
+}
+
+const GROUPS: { title: string; items: Integration[] }[] = [
+ {
+ title: 'Observability & tracing',
+ items: [
+ { name: 'Prometheus', icon: 'prometheus' },
+ { name: 'Grafana', logo: '/img/integrations/grafana.svg', href:
'/docs/apisix/plugins/prometheus/' },
+ { name: 'Datadog', icon: 'datadog' },
+ { name: 'OpenTelemetry', logo: '/img/integrations/opentelemetry.svg',
href: '/docs/apisix/plugins/opentelemetry/' },
+ { name: 'Apache SkyWalking', icon: 'skywalking' },
+ { name: 'Zipkin', icon: 'zipkin' },
+ ],
+ },
+ {
+ title: 'Logging & data',
+ items: [
+ { name: 'Elasticsearch', logo: '/img/integrations/elasticsearch.svg',
href: '/docs/apisix/plugins/elasticsearch-logger/' },
+ { name: 'ClickHouse', logo: '/img/integrations/clickhouse.svg', href:
'/docs/apisix/plugins/clickhouse-logger/' },
+ { name: 'Google Cloud', icon: 'google-cloud-logging' },
+ ],
+ },
+ {
+ title: 'Streaming & protocols',
+ items: [
+ { name: 'Apache Kafka', icon: 'kafka-logger' },
+ { name: 'gRPC', icon: 'grpc-transcode' },
+ ],
+ },
+ {
+ title: 'Service discovery & runtime',
+ items: [
+ { name: 'Kubernetes', logo: '/img/integrations/kubernetes.svg', href:
'/docs/apisix/discovery/kubernetes/' },
+ { name: 'Consul', logo: '/img/integrations/consul.svg', href:
'/docs/apisix/discovery/consul/' },
+ { name: 'NGINX', logo: '/img/integrations/nginx.svg', href:
'/docs/apisix/architecture-design/apisix/' },
+ { name: 'Redis', logo: '/img/integrations/redis.svg', href:
'/docs/apisix/plugins/limit-count/' },
+ ],
+ },
+ {
+ title: 'Security & secrets',
+ items: [
+ { name: 'OpenID Connect', icon: 'openid-connect' },
+ { name: 'Keycloak', icon: 'authz-keycloak' },
+ { name: 'Casbin', icon: 'authz-casbin' },
+ { name: 'HashiCorp Vault', logo: '/img/integrations/vault.svg', href:
'/docs/apisix/terminology/secret/' },
+ ],
+ },
+ {
+ title: 'AI & LLM providers',
+ items: [
+ { name: 'OpenAI', href: '/docs/apisix/plugins/ai-proxy/' },
+ { name: 'Anthropic', href: '/docs/apisix/plugins/ai-proxy/' },
+ { name: 'AWS Bedrock', href: '/docs/apisix/plugins/ai-proxy/' },
+ { name: 'DeepSeek', href: '/docs/apisix/plugins/ai-proxy/' },
+ { name: 'Ollama', href: '/docs/apisix/plugins/ai-proxy/' },
+ ],
+ },
+];
+
+const IntegrationTile: FC<{ item: Integration }> = ({ item }) => {
+ const href = item.href ?? (item.icon ? `/docs/apisix/plugins/${item.icon}/`
: undefined);
+ const inner = (
+ <>
+ {item.logo ? (
+ <img className="integrations__img" src={item.logo} alt={item.name}
loading="lazy" width={30} height={30} />
+ ) : item.icon ? (
+ <svg className="integrations__icon" aria-hidden="true">
+ <use xlinkHref={`#icon${item.icon}`} />
+ </svg>
+ ) : null}
+ <span className="integrations__name">{item.name}</span>
+ </>
+ );
+ return href ? (
+ <Link className="integrations__tile" to={href} title={item.name}>
+ {inner}
+ </Link>
+ ) : (
+ <div className="integrations__tile" title={item.name}>
+ {inner}
+ </div>
+ );
+};
+
+const Integrations: FC = () => (
+ <section className="integrations" aria-labelledby="integrations-heading">
+ <Head>
+ {/* Injects the shared plugin icon sprite used by #icon<name>
references. */}
+ <script src="/js/plugin-icon.js" defer />
+ </Head>
+ <h2 id="integrations-heading" className="integrations__heading">
+ <Translate id="home.integrations.title">Integrates with your
stack</Translate>
+ </h2>
+ <p className="integrations__subtitle">
+ <Translate id="home.integrations.subtitle">
+ Connect APISIX to your observability, security, service discovery, and
AI tools through 100+ plugins.
+ </Translate>
+ </p>
+ <div className="integrations__groups">
+ {GROUPS.map((group) => (
+ <div className="integrations__group" key={group.title}>
+ <div className="integrations__group-title">{group.title}</div>
+ <div className="integrations__tiles">
+ {group.items.map((item) => (
+ <IntegrationTile item={item} key={item.name} />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ <Link className="integrations__cta" to="/plugins/">
+ <Translate id="home.integrations.cta">Explore all 100+
plugins</Translate>
+ {' →'}
+ </Link>
+ </section>
+);
+
+export default Integrations;
diff --git a/website/src/components/sections/Pathways.tsx
b/website/src/components/sections/Pathways.tsx
new file mode 100644
index 00000000000..565a6cb659c
--- /dev/null
+++ b/website/src/components/sections/Pathways.tsx
@@ -0,0 +1,67 @@
+import type { FC } from 'react';
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+
+import '../../css/landing-sections/pathways.scss';
+
+interface Pathway {
+ id: string;
+ title: JSX.Element;
+ description: JSX.Element;
+ cta: JSX.Element;
+ to: string;
+}
+
+const PATHWAYS: Pathway[] = [
+ {
+ id: 'build',
+ to: '/docs/apisix/getting-started/',
+ title: <Translate id="home.pathways.build.title">Get started</Translate>,
+ description: (
+ <Translate id="home.pathways.build.desc">
+ Install APISIX and configure your first route in minutes.
+ </Translate>
+ ),
+ cta: <Translate id="home.pathways.build.cta">Read the docs</Translate>,
+ },
+ {
+ id: 'learn',
+ to: '/learning-center/',
+ title: <Translate id="home.pathways.learn.title">Learn the
concepts</Translate>,
+ description: (
+ <Translate id="home.pathways.learn.desc">
+ API gateway, AI gateway, rate limiting, mTLS, Kubernetes and more.
+ </Translate>
+ ),
+ cta: <Translate id="home.pathways.learn.cta">Explore the learning
center</Translate>,
+ },
+ {
+ id: 'case-studies',
+ to: '/blog/tags/case-studies/',
+ title: <Translate id="home.pathways.cases.title">Case studies</Translate>,
+ description: (
+ <Translate id="home.pathways.cases.desc">
+ See how teams run Apache APISIX in production at scale.
+ </Translate>
+ ),
+ cta: <Translate id="home.pathways.cases.cta">Read case studies</Translate>,
+ },
+];
+
+const Pathways: FC = () => (
+ <section className="pathways" aria-label="Get started with Apache APISIX">
+ {PATHWAYS.map((pathway) => (
+ <Link className="pathways__card" to={pathway.to} key={pathway.id}>
+ <h3 className="pathways__title">{pathway.title}</h3>
+ <p className="pathways__desc">{pathway.description}</p>
+ <span className="pathways__cta">
+ {pathway.cta}
+ {' →'}
+ </span>
+ </Link>
+ ))}
+ </section>
+);
+
+export default Pathways;
diff --git a/website/src/css/comparisons.scss b/website/src/css/comparisons.scss
new file mode 100644
index 00000000000..0c8c20e535f
--- /dev/null
+++ b/website/src/css/comparisons.scss
@@ -0,0 +1,99 @@
+.comparisons {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: clamp(3rem, 6vw, 5rem) var(--ifm-spacing-horizontal) 4rem;
+}
+
+.comparisons__header {
+ text-align: center;
+ margin-bottom: 2.5rem;
+}
+
+.comparisons__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;
+}
+
+.comparisons__title {
+ font-size: clamp(2rem, 1rem + 3vw, 2.75rem);
+ font-weight: 700;
+ margin-bottom: 0.6rem;
+}
+
+.comparisons__subtitle {
+ color: var(--ifm-color-emphasis-700);
+ max-width: 640px;
+ margin: 0 auto;
+ font-size: 1.05rem;
+ line-height: 1.6;
+}
+
+.comparisons__grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.25rem;
+}
+
+@media (max-width: 768px) {
+ .comparisons__grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+.comparisons__card {
+ display: flex;
+ flex-direction: column;
+ background: var(--ifm-background-surface-color);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-top: 3px solid #e8433e;
+ border-radius: 12px;
+ padding: 1.6rem 1.5rem;
+ color: inherit;
+ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s
ease;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 10px 28px rgb(0 0 0 / 8%);
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &:hover .comparisons__card-title {
+ color: #e8433e;
+ }
+}
+
+.comparisons__card-title {
+ font-size: 1.2rem;
+ font-weight: 700;
+ line-height: 1.3;
+ margin: 0 0 0.5rem;
+}
+
+.comparisons__card-desc {
+ font-size: 0.95rem;
+ line-height: 1.55;
+ color: var(--ifm-color-emphasis-700);
+ margin: 0 0 1rem;
+ flex: 1;
+}
+
+.comparisons__card-cta {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #e8433e;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .comparisons__card:hover {
+ transform: none;
+ }
+}
diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
index e12aff151cb..425a6b720cf 100644
--- a/website/src/css/customTheme.scss
+++ b/website/src/css/customTheme.scss
@@ -585,3 +585,20 @@ h3,
}
}
/* stylelint-enable no-descending-specificity */
+
+/* Learning Center / blog article layout.
+ The default blog layout gives the nav sidebar col--3 (25%) and the article
+ only col--7 (~58%), squeezing the reading column between the sidebar and the
+ right-hand table of contents. Rebalance to a narrower sidebar and a wider
+ content column. Desktop only, so the mobile stacked layout stays intact. */
+@media (min-width: 997px) {
+ .blog-wrapper .container > .row > .col--3 {
+ flex: 0 0 18%;
+ max-width: 18%;
+ }
+
+ .blog-wrapper .container > .row > .col--7 {
+ flex: 0 0 65%;
+ max-width: 65%;
+ }
+}
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..8bb5ccd459b
--- /dev/null
+++ b/website/src/css/landing-sections/ai-gateway-home.scss
@@ -0,0 +1,157 @@
+.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 {
+ 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 {
+ 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/css/landing-sections/comparison.scss
b/website/src/css/landing-sections/comparison.scss
index e619344ecb5..566f8f84293 100644
--- a/website/src/css/landing-sections/comparison.scss
+++ b/website/src/css/landing-sections/comparison.scss
@@ -1,56 +1,94 @@
.compare {
- padding: 50px 0;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 3.5rem var(--ifm-spacing-horizontal);
+ text-align: center;
}
-.table tbody td:nth-child(even) {
- background: rgb(14 30 37 / 2%);
+.compare-head {
+ font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem);
+ font-weight: 700;
+ margin-bottom: 0.5rem;
}
-.table tbody tr:nth-child(odd) {
- background: rgb(14 30 37 / 2%);
+.compare-subtitle {
+ color: #6b6b6b;
+ max-width: 640px;
+ margin: 0 auto 2.25rem;
+ font-size: 1rem;
+ line-height: 1.6;
}
-.table thead {
- font-size: 1.13rem;
+.compare-table-wrap {
+ overflow-x: auto;
}
-.table {
- background: #fff;
- border-radius: 8px;
- box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 2px 4px 0 rgb(14 30 37 /
12%);
- color: rgb(14 30 37 / 87%);
- font-size: 1.13rem;
- margin: 1em auto;
- border-collapse: collapse;
+.compare-table {
+ width: fit-content;
max-width: 100%;
- overflow-x: auto;
- table-layout: fixed;
- width: 66.4%;
- font-family: MaisonNeue-Light, sans-serif;
- display: table;
+ margin: 0 auto;
+ border-collapse: separate;
+ border-spacing: 0;
+ background: #fff;
+ border: 1px solid #ececec;
+ border-radius: 12px;
+ overflow: hidden;
+ font-size: 1rem;
}
-/* stylelint-disable-next-line no-descending-specificity */
-.table td,
-.table th {
- font-weight: 700;
- min-width: 11.089em;
- padding: 0.85rem 1rem;
+.compare-table th,
+.compare-table td {
+ padding: 0.95rem 1.1rem;
text-align: center;
+ border-bottom: 1px solid #f0f0f0;
}
-.table-head {
- font-weight: 900;
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 1.25rem;
+.compare-table tbody tr:last-child th,
+.compare-table tbody tr:last-child td {
+ border-bottom: none;
}
-.table tbody th {
+.compare-table thead th {
font-weight: 700;
+ font-size: 1.02rem;
+ background: #fafafa;
+ border-bottom: 1px solid #ececec;
+}
+
+.compare-table tbody th[scope="row"] {
+ font-weight: 500;
+ color: #2c2c2a;
}
-/* stylelint-disable-next-line no-descending-specificity */
-.table td:first-child,
-.table th:first-child {
+.compare-col-feature {
text-align: left;
}
+
+.compare-col-apisix,
+.compare-apisix-cell {
+ background: #fff5f4;
+}
+
+.compare-col-apisix {
+ color: #e8433e;
+}
+
+.compare-col-apisix,
+.compare-col-other {
+ min-width: 160px;
+}
+
+.compare-apisix-cell {
+ font-weight: 700;
+ color: #1c1c1c;
+}
+
+.compare-other-cell {
+ color: #8a8a8a;
+}
+
+.compare-table svg {
+ width: 22px;
+ height: 22px;
+ vertical-align: middle;
+}
diff --git a/website/src/css/landing-sections/hero.scss
b/website/src/css/landing-sections/hero.scss
index 61bdaa5005f..29fecfbbe81 100644
--- a/website/src/css/landing-sections/hero.scss
+++ b/website/src/css/landing-sections/hero.scss
@@ -23,57 +23,49 @@
.hero-subtitle {
z-index: 100;
- font-size: 1.1rem;
+ font-size: 1.15rem;
font-family: MaisonNeue-Light, sans-serif;
position: relative;
- color: #615d5d;
- line-height: 30px;
+ color: #5f5d5d;
+ line-height: 1.6;
letter-spacing: 0.2px;
- margin: 25px 0;
- padding-right: 20px;
- animation-delay: 0.25s;
+ max-width: 620px;
+ margin: 1.25rem 0 0;
+ animation-delay: 0.2s;
}
.hero-ctas {
display: flex;
align-items: center;
- animation-delay: 0.5s;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 1.75rem;
+ animation-delay: 0.4s;
}
.hero-sec-wrap {
display: flex;
- background: #f4f4f4ad;
- height: 100vh;
-}
-
-.homeCanvas-overlay {
- position: absolute;
- width: 50vw;
- height: 100vh;
- background: #fff;
- top: -1px;
- right: 0;
-}
-
-.homeCanvas {
- width: 50vw;
- height: 100vh;
+ justify-content: center;
+ background: #f7f7f8;
+ padding: clamp(3rem, 9vh, 7rem) 24px clamp(2.5rem, 7vh, 5rem);
}
.hero-text {
- height: 100%;
+ width: 100%;
+ max-width: 780px;
display: flex;
- flex-wrap: wrap;
- align-content: center;
- width: 50%;
- padding: 0 0 0 6vw;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
}
.hero-title {
font-family: MaisonNeue-Bold, sans-serif;
color: #121212;
- width: 42vw;
- font-size: 4.2rem;
+ max-width: 780px;
+ font-size: clamp(2.4rem, 1rem + 4.2vw, 4rem);
+ line-height: 1.08;
letter-spacing: 0.2px;
margin: 0;
}
@@ -150,12 +142,7 @@
@include respond-between(md, lg) {
.hero-title {
- width: 40vw;
- font-size: 5.2rem;
- }
-
- .hero-subtitle {
- width: 40vw;
+ font-size: clamp(3rem, 1rem + 5vw, 4.5rem);
}
}
@@ -205,3 +192,58 @@
animation: none;
}
}
+
+.hero-eyebrow {
+ display: inline-block;
+ font-size: 0.82rem;
+ font-weight: 600;
+ color: #a32d2d;
+ background: #fcebeb;
+ padding: 5px 14px;
+ border-radius: 20px;
+ margin-bottom: 1.25rem;
+}
+
+.btn-secondary {
+ background: #fff;
+ color: #1c1c1c;
+ border: 1px solid #d6d6d6;
+}
+
+.btn-secondary:hover {
+ background: #f1f1f1;
+ color: #1c1c1c;
+ border-color: #c0c0c0;
+}
+
+.hero-stats {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1.5rem 2.5rem;
+ list-style: none;
+ width: 100%;
+ max-width: 640px;
+ margin: 2.25rem 0 0;
+ padding: 1.5rem 0 0;
+ border-top: 1px solid #e6e6e6;
+}
+
+.hero-stats__item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.hero-stats__value {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #e8433e;
+ line-height: 1.1;
+}
+
+.hero-stats__label {
+ font-size: 0.85rem;
+ color: #777;
+ margin-top: 2px;
+}
diff --git a/website/src/css/landing-sections/integrations.scss
b/website/src/css/landing-sections/integrations.scss
new file mode 100644
index 00000000000..b0c79358050
--- /dev/null
+++ b/website/src/css/landing-sections/integrations.scss
@@ -0,0 +1,101 @@
+.integrations {
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 3.5rem var(--ifm-spacing-horizontal) 1rem;
+ text-align: center;
+}
+
+.integrations__heading {
+ font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem);
+ font-weight: 700;
+ margin-bottom: 0.5rem;
+}
+
+.integrations__subtitle {
+ color: #6b6b6b;
+ max-width: 620px;
+ margin: 0 auto 2.25rem;
+ font-size: 1rem;
+ line-height: 1.6;
+}
+
+.integrations__groups {
+ display: flex;
+ flex-direction: column;
+ gap: 1.75rem;
+}
+
+.integrations__group-title {
+ font-size: 0.78rem;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: #9a9a9a;
+ margin-bottom: 0.85rem;
+}
+
+.integrations__tiles {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.75rem;
+}
+
+.integrations__tile {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ padding: 0.65rem 1.1rem;
+ border: 1px solid #ececec;
+ border-radius: 0.75rem;
+ background: #fff;
+ 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;
+ }
+}
+
+.integrations__icon {
+ width: 30px;
+ height: 30px;
+ flex-shrink: 0;
+}
+
+.integrations__img {
+ width: 30px;
+ height: 30px;
+ object-fit: contain;
+ flex-shrink: 0;
+}
+
+.integrations__name {
+ font-size: 0.95rem;
+ font-weight: 500;
+ color: #2c2c2a;
+ white-space: nowrap;
+}
+
+.integrations__cta {
+ display: inline-block;
+ margin-top: 2rem;
+ font-size: 1rem;
+ font-weight: 600;
+ color: #e8433e;
+
+ &:hover {
+ color: #c7352f;
+ text-decoration: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .integrations__tile:hover {
+ transform: none;
+ }
+}
diff --git a/website/src/css/landing-sections/pathways.scss
b/website/src/css/landing-sections/pathways.scss
new file mode 100644
index 00000000000..01312e5d666
--- /dev/null
+++ b/website/src/css/landing-sections/pathways.scss
@@ -0,0 +1,62 @@
+.pathways {
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 1rem var(--ifm-spacing-horizontal) 1.5rem;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.25rem;
+}
+
+@media (max-width: 820px) {
+ .pathways {
+ grid-template-columns: 1fr;
+ }
+}
+
+.pathways__card {
+ display: flex;
+ flex-direction: column;
+ background: #fff;
+ border: 1px solid #ececec;
+ border-top: 3px solid #e8433e;
+ border-radius: 0.75rem;
+ padding: 1.6rem 1.4rem;
+ color: inherit;
+ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s
ease;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
+ border-color: #f3b6b3;
+ border-top-color: #e8433e;
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+.pathways__title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ margin: 0 0 0.5rem;
+ color: #1c1c1c;
+}
+
+.pathways__desc {
+ font-size: 0.95rem;
+ line-height: 1.55;
+ color: #6b6b6b;
+ margin: 0 0 1rem;
+ flex: 1;
+}
+
+.pathways__cta {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #e8433e;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .pathways__card:hover {
+ transform: none;
+ }
+}
diff --git a/website/src/pages/comparisons.tsx
b/website/src/pages/comparisons.tsx
new file mode 100644
index 00000000000..c5834754ac6
--- /dev/null
+++ b/website/src/pages/comparisons.tsx
@@ -0,0 +1,107 @@
+import type { FC } from 'react';
+import React from 'react';
+import Layout from '@theme/Layout';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import Translate, { translate } from '@docusaurus/Translate';
+
+import '../css/comparisons.scss';
+
+interface Comparison {
+ title: string;
+ description: string;
+ to: string;
+}
+
+const COMPARISONS: Comparison[] = [
+ {
+ title: 'Apache APISIX vs Kong',
+ description:
+ 'Architecture, performance benchmarks, plugin ecosystem, Kubernetes
support, and when to choose each.',
+ to: '/learning-center/apisix-vs-kong/',
+ },
+ {
+ title: 'Open-source API gateways compared',
+ description:
+ 'APISIX vs Kong vs Envoy vs Traefik — a feature-by-feature look at the
leading open-source gateways.',
+ to: '/learning-center/open-source-api-gateway-comparison/',
+ },
+ {
+ title: 'API gateway vs load balancer',
+ description:
+ 'How an API gateway and a load balancer differ, where they overlap, and
when to use each.',
+ to: '/learning-center/api-gateway-vs-load-balancer/',
+ },
+ {
+ title: 'Kubernetes API gateway',
+ description:
+ 'Gateway API vs Ingress, ingress controllers, and deploying an API
gateway on Kubernetes.',
+ to: '/learning-center/kubernetes-api-gateway/',
+ },
+];
+
+const COLLECTION_SCHEMA = {
+ '@context': 'https://schema.org',
+ '@type': 'CollectionPage',
+ name: 'Apache APISIX API gateway comparisons',
+ url: 'https://apisix.apache.org/comparisons/',
+ mainEntity: {
+ '@type': 'ItemList',
+ itemListElement: COMPARISONS.map((c, index) => ({
+ '@type': 'ListItem',
+ position: index + 1,
+ name: c.title,
+ url: `https://apisix.apache.org${c.to}`,
+ })),
+ },
+};
+
+const Comparisons: FC = () => (
+ <Layout>
+ <Head>
+ <title>
+ {translate({ id: 'comparisons.meta.title', message: 'API Gateway
Comparisons | Apache APISIX' })}
+ </title>
+ <meta
+ name="description"
+ content={translate({
+ id: 'comparisons.meta.description',
+ message:
+ 'Compare Apache APISIX with Kong, Envoy, Traefik and other API
gateways — architecture, performance, and features.',
+ })}
+ />
+ <link rel="canonical" href="https://apisix.apache.org/comparisons/"; />
+ <script
type="application/ld+json">{JSON.stringify(COLLECTION_SCHEMA)}</script>
+ </Head>
+ <div className="comparisons">
+ <header className="comparisons__header">
+ <span className="comparisons__eyebrow">
+ <Translate id="comparisons.eyebrow">Comparisons</Translate>
+ </span>
+ <h1 className="comparisons__title">
+ <Translate id="comparisons.title">Compare Apache APISIX</Translate>
+ </h1>
+ <p className="comparisons__subtitle">
+ <Translate id="comparisons.subtitle">
+ See how Apache APISIX stacks up against other API gateways and
architectures — and pick
+ the right tool for your stack.
+ </Translate>
+ </p>
+ </header>
+ <div className="comparisons__grid">
+ {COMPARISONS.map((comparison) => (
+ <Link className="comparisons__card" to={comparison.to}
key={comparison.to}>
+ <h2 className="comparisons__card-title">{comparison.title}</h2>
+ <p className="comparisons__card-desc">{comparison.description}</p>
+ <span className="comparisons__card-cta">
+ <Translate id="comparisons.card.cta">Read comparison</Translate>
+ {' →'}
+ </span>
+ </Link>
+ ))}
+ </div>
+ </div>
+ </Layout>
+);
+
+export default Comparisons;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index a57c738c3c3..65a89d98656 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -13,6 +13,9 @@ import Benefits from '../components/sections/Benefits';
import Comparison from '../components/sections/Comparison';
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)
@@ -136,8 +139,11 @@ const Index: FC = () => (
<script
type="application/ld+json">{JSON.stringify(HOMEPAGE_FAQ_SCHEMA)}</script>
</Head>
<HeroSection />
+ <Pathways />
+ <AIGatewaySection />
<Architecture />
<Features />
+ <Integrations />
<Benefits />
<Comparison />
<OpensourcePromo />
diff --git a/website/static/img/integrations/clickhouse.svg
b/website/static/img/integrations/clickhouse.svg
new file mode 100644
index 00000000000..a3a6e4b8195
--- /dev/null
+++ b/website/static/img/integrations/clickhouse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><path d="M0
0h128v128H0z" fill="#f9ff69"/><path d="M26.54 23.21a.945.945 0 0
0-.938.938v79.618c0 .511.425.937.937.937h7.168a.945.945 0 0 0
.938-.937V24.148a.945.945 0 0 0-.938-.937Zm18.089 0a.945.945 0 0
0-.938.938v79.618c0 .511.426.937.938.937h7.168a.949.949 0 0 0
.941-.937V24.148a.949.949 0 0 0-.941-.937Zm18.09 0a.945.945 0 0
0-.938.938v79.618c0 .511.426.937.938.937h7.168a.949.949 0 0 0
.941-.937V24.148a.949.949 0 0 0-.941-. [...]
diff --git a/website/static/img/integrations/consul.svg
b/website/static/img/integrations/consul.svg
new file mode 100644
index 00000000000..6d37129e296
--- /dev/null
+++ b/website/static/img/integrations/consul.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><path
fill="#e03875" d="M116.407 42.787a5.255 5.255 0 0 1-3.723-8.964 5.249 5.249 0 0
1 5.73-1.136 5.253 5.253 0 0 1-2.007 10.1zm-9.874 18.237a5.24 5.24 0 0
1-5.14-5.243 5.24 5.24 0 0 1 5.14-5.242 5.24 5.24 0 0 1 5.137 5.242 5.24 5.24 0
0 1-5.137 5.243zm15.642-.607a5.246 5.246 0 0 1-5.246-5.242 5.244 5.244 0 1 1
10.489 0 5.267 5.267 0 0 1-5.243 5.242zm-15.642 17.044a5.252 5.252 0 0
1-4.86-3.24 5.249 5.249 0 0 1 6.862-6.862 5.2 [...]
diff --git a/website/static/img/integrations/elasticsearch.svg
b/website/static/img/integrations/elasticsearch.svg
new file mode 100644
index 00000000000..d5d30d0ba0f
--- /dev/null
+++ b/website/static/img/integrations/elasticsearch.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128">
+ <path fill="#343741" d="M4 64c0 5.535.777 10.879 2.098 16H84c8.836 0
16-7.164 16-16s-7.164-16-16-16H6.098A63.738 63.738 0 0 0 4 64"/>
+ <path fill="#fec514" d="M111.695 30.648A61.485 61.485 0 0 0 117.922
24C106.188 9.379 88.199 0 68 0 42.715 0 20.957 14.71 10.574 36H98.04a20.123
20.123 0 0 0 13.652-5.352"/>
+ <path fill="#00bfb3" d="M98.04 92H10.577C20.961 113.29 42.715 128 68
128c20.2 0 38.188-9.383 49.922-24a61.1 61.1 0 0 0-6.227-6.648A20.133 20.133 0 0
0 98.04 92"/>
+</svg>
diff --git a/website/static/img/integrations/grafana.svg
b/website/static/img/integrations/grafana.svg
new file mode 100644
index 00000000000..0387019732a
--- /dev/null
+++ b/website/static/img/integrations/grafana.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><linearGradient
id="a" x1="45.842" x2="45.842" y1="89.57" y2="8.802"
gradientTransform="translate(-2.405 27.316) scale(1.4463)"
gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcee1f"/><stop
offset="1" stop-color="#f15b2a"/></linearGradient><path fill="url(#a)"
d="M69.162 0c-9.91 6.4-11.77 14.865-11.77
14.865s.002.206-.101.412c-.62.104-1.033.31-1.549.413-.722.206-1.445.413-2.168.826l-2.168.93c-1.445.722-2.89
1.341 [...]
diff --git a/website/static/img/integrations/kubernetes.svg
b/website/static/img/integrations/kubernetes.svg
new file mode 100644
index 00000000000..1ceb39f940c
--- /dev/null
+++ b/website/static/img/integrations/kubernetes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><path
fill="#326ce5" d="M63.556 1.912a8.51 8.44 0 0 0-3.26.826L15.795 24a8.51 8.44 0
0 0-4.604 5.725L.214 77.485a8.51 8.44 0 0 0 1.155 6.47 8.51 8.44 0 0 0
.484.672l30.8 38.296a8.51 8.44 0 0 0 6.653 3.176l49.394-.012a8.51 8.44 0 0 0
6.653-3.17l30.789-38.301a8.51 8.44 0 0 0 1.645-7.142l-10.996-47.76a8.51 8.44 0
0 0-4.604-5.726L67.682 2.738a8.51 8.44 0 0 0-4.126-.826z"/><path fill="#fff"
d="M63.975 18.143v.01c-1.472.014-2.664 1. [...]
diff --git a/website/static/img/integrations/nginx.svg
b/website/static/img/integrations/nginx.svg
new file mode 100644
index 00000000000..e8e8cdb10cc
--- /dev/null
+++ b/website/static/img/integrations/nginx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><path d="M24.5
50.5c-1.5 0-2.5 1.2-2.5 2.7v14.1l-15.9-16c-.8-.8-2.2-1-3.2-.6S1 52.1 1
53.2v20.7c0 1.5 1.5 2.7 3 2.7s3-1.2 3-2.7V59.8l16.1 16c.5.5 1.2.8 1.9.8.3 0
.4-.1.7-.2 1-.4 1.3-1.4 1.3-2.5V53.3c0-1.5-1-2.8-2.5-2.8zm19.7 11.8c-1.4 0-2.7
1.4-2.7 2.8s1.3 2.8 2.7 2.8l6.6.4-1.5 3.7h-8.5l-4.2-7.9 4.3-8.1H50l2.1 4h5.5L54
52.1l-.8-1.1H37.6l-.7 1.2L31 62.5l-.7 1.3.7 1.3 5.8 10.3.8 1.6h15.1l.7-1.7
4.3-9 1.9-4.3h-4.4l-11 .3zM65 50.5 [...]
\ No newline at end of file
diff --git a/website/static/img/integrations/opentelemetry.svg
b/website/static/img/integrations/opentelemetry.svg
new file mode 100644
index 00000000000..d7c352f83b2
--- /dev/null
+++ b/website/static/img/integrations/opentelemetry.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128">
+ <path fill="#f5a800" d="M67.648 69.797c-5.246 5.25-5.246 13.758 0 19.008
5.25 5.246 13.758 5.246 19.004 0 5.25-5.25 5.25-13.758
0-19.008-5.246-5.246-13.754-5.246-19.004 0Zm14.207 14.219a6.649 6.649 0 0
1-9.41 0 6.65 6.65 0 0 1 0-9.407 6.649 6.649 0 0 1 9.41 0c2.598 2.586 2.598
6.809 0 9.407ZM86.43 3.672l-8.235 8.234a4.17 4.17 0 0 0 0 5.875l32.149
32.149a4.17 4.17 0 0 0 5.875 0l8.234-8.235c1.61-1.61 1.61-4.261 0-5.87L92.29
3.671a4.159 4.159 0 0 0-5.86 0ZM28.738 108.895a3.763 3.763 0 0 0 [...]
+ <path fill="#425cc7" d="M72.297 27.313 54.004 45.605c-1.625 1.625-1.625
4.301 0 5.926L65.3 62.824c7.984-5.746 19.18-5.035 26.363
2.153l9.148-9.149c1.622-1.625 1.622-4.297 0-5.922L78.22 27.313a4.185 4.185 0 0
0-5.922 0ZM60.55 67.585l-6.672-6.672c-1.563-1.562-4.125-1.562-5.684 0l-23.53
23.54a4.036 4.036 0 0 0 0 5.687l13.331 13.332a4.036 4.036 0 0 0 5.688
0l15.132-15.157c-3.199-6.609-2.625-14.593 1.735-20.73Zm0 0"/>
+</svg>
diff --git a/website/static/img/integrations/redis.svg
b/website/static/img/integrations/redis.svg
new file mode 100644
index 00000000000..7aabb0dd08a
--- /dev/null
+++ b/website/static/img/integrations/redis.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><path
fill="#A41E11" d="M121.8 93.1c-6.7 3.5-41.4 17.7-48.8 21.6-7.4 3.9-11.5
3.8-17.3 1S13 98.1 6.3 94.9c-3.3-1.6-5-2.9-5-4.2V78s48-10.5 55.8-13.2c7.8-2.8
10.4-2.9 17-.5s46.1 9.5 52.6 11.9v12.5c0 1.3-1.5 2.7-4.9 4.4z"/><path
fill="#D82C20" d="M121.8 80.5C115.1 84 80.4 98.2 73 102.1c-7.4 3.9-11.5
3.8-17.3 1-5.8-2.8-42.7-17.7-49.4-20.9C-.3 79-.5 76.8 6 74.3c6.5-2.6 43.2-17
51-19.7 7.8-2.8 10.4-2.9 17-.5s41.1 16.1 47.6 18.5c6.7 [...]
\ No newline at end of file
diff --git a/website/static/img/integrations/vault.svg
b/website/static/img/integrations/vault.svg
new file mode 100644
index 00000000000..0e313a7dac3
--- /dev/null
+++ b/website/static/img/integrations/vault.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 128 128"><path
fill="#ffd814" d="m0 1.953 63.76 124.094L128 1.953Zm53.841
49.254H43.684V41.06H53.84zm0-15.227H43.684V25.822H53.84ZM69.08
66.444H58.97V56.286h10.108zm0-15.237H58.97V41.06h10.108zm0-15.227H58.97V25.822h10.108Zm15.147
15.227H74.027V41.06h10.159ZM74.027 35.98V25.822h10.159V35.98z"/></svg>
