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 f60caff62c1 feat(seo): homepage review — drop trusted-by wall, link
integration tiles to docs
f60caff62c1 is described below
commit f60caff62c1c718fb86f8f91c93cb800a129ba6d
Author: Ming Wen <[email protected]>
AuthorDate: Mon Jun 22 15:36:41 2026 +0800
feat(seo): homepage review — drop trusted-by wall, link integration tiles
to docs
- Remove the 'Trusted by' logo marquee section (per review).
- Make each 'Integrates with your stack' tile a link to its plugin doc
(/docs/apisix/plugins/<name>/).
---
website/src/components/sections/Integrations.tsx | 38 ++++++---
website/src/components/sections/TrustedBy.tsx | 80 -------------------
website/src/css/landing-sections/integrations.scss | 6 +-
website/src/css/landing-sections/trusted-by.scss | 89 ----------------------
website/src/pages/index.tsx | 2 -
5 files changed, 31 insertions(+), 184 deletions(-)
diff --git a/website/src/components/sections/Integrations.tsx
b/website/src/components/sections/Integrations.tsx
index 65254a2c673..f0aa086421c 100644
--- a/website/src/components/sections/Integrations.tsx
+++ b/website/src/components/sections/Integrations.tsx
@@ -16,6 +16,8 @@ interface Integration {
* the API7 CDN and set this; it takes precedence over `icon`.
*/
logo?: string;
+ /** Doc link. Defaults to the plugin's doc page derived from `icon`. */
+ href?: string;
}
const GROUPS: { title: string; items: Integration[] }[] = [
@@ -46,18 +48,30 @@ const GROUPS: { title: string; items: Integration[] }[] = [
},
];
-const IntegrationTile: FC<{ item: Integration }> = ({ item }) => (
- <div className="integrations__tile" title={item.name}>
- {item.logo ? (
- <img className="integrations__img" src={item.logo} alt={item.name}
loading="lazy" width={40} height={40} />
- ) : (
- <svg className="integrations__icon" aria-hidden="true">
- <use xlinkHref={`#icon${item.icon}`} />
- </svg>
- )}
- <span className="integrations__name">{item.name}</span>
- </div>
-);
+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={40} height={40} />
+ ) : (
+ <svg className="integrations__icon" aria-hidden="true">
+ <use xlinkHref={`#icon${item.icon}`} />
+ </svg>
+ )}
+ <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">
diff --git a/website/src/components/sections/TrustedBy.tsx
b/website/src/components/sections/TrustedBy.tsx
deleted file mode 100644
index 59f0cefb7d4..00000000000
--- a/website/src/components/sections/TrustedBy.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { FC } from 'react';
-import React, { useState } from 'react';
-import Link from '@docusaurus/Link';
-import Translate, { translate } from '@docusaurus/Translate';
-
-import '../../css/landing-sections/trusted-by.scss';
-
-interface TrustedUser {
- name: string;
- link: string;
- /**
- * Optional logo URL. When omitted, a clean text wordmark is shown instead,
so
- * the section renders correctly before official logos are available.
- * Host official customer logos on the API7 CDN (where the showcase logos
- * already live) and set this to e.g.
- * `https://static.apiseven.com/uploads/users/nasa.svg`.
- */
- logo?: string;
-}
-
-const USERS: TrustedUser[] = [
- { name: 'NASA', link: 'https://www.jpl.nasa.gov/' },
- { name: 'Zoom', link: 'https://zoom.us/' },
- { name: 'HPE', link: 'https://www.hpe.com/' },
- { name: 'Tencent', link: 'https://www.tencent.com/en-us/' },
- { name: 'Hisense', link: 'https://global.hisense.com/' },
- { name: 'k6', link: 'https://k6.io/' },
- { name: 'Citi', link: 'https://www.citigroup.com/' },
- { name: 'API7.ai', link: 'https://api7.ai/' },
- { name: "McDonald's", link: 'https://www.mcdonalds.com/' },
- { name: 'KFC', link: 'https://global.kfc.com/' },
-];
-
-const UserLogo: FC<{ user: TrustedUser }> = ({ user }) => {
- const [failed, setFailed] = useState(!user.logo);
- return (
- <Link
- className="trusted-by__item"
- to={user.link}
- target="_blank"
- rel="noopener noreferrer"
- aria-label={user.name}
- >
- {failed ? (
- <span className="trusted-by__wordmark">{user.name}</span>
- ) : (
- <img
- className="trusted-by__logo"
- src={user.logo}
- alt={user.name}
- loading="lazy"
- width={132}
- height={36}
- onError={() => setFailed(true)}
- />
- )}
- </Link>
- );
-};
-
-const TrustedBy: FC = () => (
- <section
- className="trusted-by"
- aria-label={translate({ id: 'home.trustedBy.label', message:
'Organizations using Apache APISIX' })}
- >
- <div className="trusted-by__eyebrow">
- <Translate id="home.trustedBy.title">Trusted by teams
everywhere</Translate>
- </div>
- <div className="trusted-by__viewport">
- {/* Duplicated once so the CSS marquee loops seamlessly at
translateX(-50%). */}
- <div className="trusted-by__track">
- {[...USERS, ...USERS].map((user, index) => (
- <UserLogo key={`${user.name}-${index}`} user={user} />
- ))}
- </div>
- </div>
- </section>
-);
-
-export default TrustedBy;
diff --git a/website/src/css/landing-sections/integrations.scss
b/website/src/css/landing-sections/integrations.scss
index 4fb36e7b630..b0c79358050 100644
--- a/website/src/css/landing-sections/integrations.scss
+++ b/website/src/css/landing-sections/integrations.scss
@@ -48,12 +48,16 @@
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 rgba(232, 67, 62, 0.08);
+ box-shadow: 0 6px 18px rgb(232 67 62 / 8%);
+ color: inherit;
+ text-decoration: none;
}
}
diff --git a/website/src/css/landing-sections/trusted-by.scss
b/website/src/css/landing-sections/trusted-by.scss
deleted file mode 100644
index fc2a5c28004..00000000000
--- a/website/src/css/landing-sections/trusted-by.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.trusted-by {
- padding: 3rem 0 2.5rem;
- text-align: center;
-}
-
-.trusted-by__eyebrow {
- font-size: 0.8rem;
- letter-spacing: 0.09em;
- text-transform: uppercase;
- color: #8a8a8a;
- margin-bottom: 1.5rem;
-}
-
-.trusted-by__viewport {
- overflow: hidden;
- // Fade the logos in/out at both edges instead of cutting them off hard.
- -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%,
transparent 100%);
- mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%,
transparent 100%);
-}
-
-.trusted-by__track {
- display: flex;
- width: max-content;
- align-items: center;
- gap: 3.5rem;
- // Compositor-only animation (transform). The track holds two identical
- // copies of the list, so translateX(-50%) lands exactly on the loop seam.
- animation: trusted-by-marquee 45s linear infinite;
- will-change: transform;
-}
-
-.trusted-by:hover .trusted-by__track {
- animation-play-state: paused;
-}
-
-.trusted-by__item {
- display: flex;
- align-items: center;
- justify-content: center;
-
- &:hover {
- text-decoration: none;
- }
-}
-
-.trusted-by__logo {
- height: 34px;
- width: auto;
- object-fit: contain;
- filter: grayscale(1);
- opacity: 0.65;
- transition: filter 0.2s ease, opacity 0.2s ease;
-
- .trusted-by__item:hover & {
- filter: grayscale(0);
- opacity: 1;
- }
-}
-
-.trusted-by__wordmark {
- font-size: 1.15rem;
- font-weight: 700;
- white-space: nowrap;
- color: #7a7975;
- transition: color 0.2s ease;
-
- .trusted-by__item:hover & {
- color: #e8433e;
- }
-}
-
-@keyframes trusted-by-marquee {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(-50%);
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .trusted-by__track {
- animation: none;
- width: auto;
- flex-wrap: wrap;
- justify-content: center;
- gap: 2rem 3rem;
- }
-}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 672772387c0..192aef2c754 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -13,7 +13,6 @@ 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 TrustedBy from '../components/sections/TrustedBy';
import Pathways from '../components/sections/Pathways';
import Integrations from '../components/sections/Integrations';
@@ -139,7 +138,6 @@ const Index: FC = () => (
<script
type="application/ld+json">{JSON.stringify(HOMEPAGE_FAQ_SCHEMA)}</script>
</Head>
<HeroSection />
- <TrustedBy />
<Pathways />
<Architecture />
<Features />
