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 28180cec854 feat(seo): expand integrations grid + redesign comparison
table
28180cec854 is described below
commit 28180cec8549b555e896bb5b584d0b0d3bef85c9
Author: Ming Wen <[email protected]>
AuthorDate: Mon Jun 22 15:53:07 2026 +0800
feat(seo): expand integrations grid + redesign comparison table
- Integrations: 6 groups / 24 tiles (observability, logging, streaming,
service discovery, security & secrets, AI & LLM). Add 9 official colored
ecosystem logos (kubernetes, redis, nginx, elasticsearch, grafana, consul,
vault, opentelemetry, clickhouse); every tile links to its doc.
- Comparison: modernize rows (drop Tengine/NGINX-variable; add AI gateway,
fully-open-source, dynamic config, hot reload) and redesign the table
(clean card, highlighted APISIX column).
---
website/src/components/sections/Comparison.tsx | 132 +++++++++++-----------
website/src/components/sections/Integrations.tsx | 53 ++++++---
website/src/css/landing-sections/comparison.scss | 101 +++++++++++------
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 +
12 files changed, 189 insertions(+), 113 deletions(-)
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/Integrations.tsx
b/website/src/components/sections/Integrations.tsx
index f0aa086421c..4dc51911595 100644
--- a/website/src/components/sections/Integrations.tsx
+++ b/website/src/components/sections/Integrations.tsx
@@ -10,13 +10,9 @@ interface Integration {
name: string;
/** Plugin name whose brand-colored icon lives in the shared plugin sprite.
*/
icon?: string;
- /**
- * Optional logo URL, for ecosystem logos that are not plugin icons (e.g.
- * Kubernetes, OpenTelemetry, LLM providers). Host official colored SVGs on
- * the API7 CDN and set this; it takes precedence over `icon`.
- */
+ /** Colored logo served from /img/integrations/ (for non-plugin ecosystem
logos). */
logo?: string;
- /** Doc link. Defaults to the plugin's doc page derived from `icon`. */
+ /** Doc link. Falls back to the plugin doc derived from `icon`. */
href?: string;
}
@@ -25,25 +21,54 @@ 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: 'Authentication & security',
+ 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: 'Streaming & protocols',
+ title: 'AI & LLM providers',
items: [
- { name: 'Apache Kafka', icon: 'kafka-logger' },
- { name: 'gRPC', icon: 'grpc-transcode' },
+ { 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/' },
],
},
];
@@ -53,12 +78,12 @@ const IntegrationTile: FC<{ item: Integration }> = ({ item
}) => {
const inner = (
<>
{item.logo ? (
- <img className="integrations__img" src={item.logo} alt={item.name}
loading="lazy" width={40} height={40} />
- ) : (
+ <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>
</>
);
@@ -84,7 +109,7 @@ const Integrations: FC = () => (
</h2>
<p className="integrations__subtitle">
<Translate id="home.integrations.subtitle">
- Connect APISIX to your observability, security, and streaming tools
through 100+ plugins.
+ Connect APISIX to your observability, security, service discovery, and
AI tools through 100+ plugins.
</Translate>
</p>
<div className="integrations__groups">
diff --git a/website/src/css/landing-sections/comparison.scss
b/website/src/css/landing-sections/comparison.scss
index e619344ecb5..1dc0fe98019 100644
--- a/website/src/css/landing-sections/comparison.scss
+++ b/website/src/css/landing-sections/comparison.scss
@@ -1,56 +1,89 @@
.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 {
+.compare-table {
+ width: 100%;
+ max-width: 760px;
+ margin: 0 auto;
+ border-collapse: separate;
+ border-spacing: 0;
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;
- max-width: 100%;
- overflow-x: auto;
- table-layout: fixed;
- width: 66.4%;
- font-family: MaisonNeue-Light, sans-serif;
- display: table;
+ 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;
}
-/* stylelint-disable-next-line no-descending-specificity */
-.table td:first-child,
-.table th:first-child {
+.compare-table tbody th[scope="row"] {
+ font-weight: 500;
+ color: #2c2c2a;
+}
+
+.compare-col-feature {
text-align: left;
}
+
+.compare-col-apisix,
+.compare-apisix-cell {
+ background: #fff5f4;
+}
+
+.compare-col-apisix {
+ color: #e8433e;
+}
+
+.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/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>
