From 46f2d18aeec7c8d138bd6e6e907f67c25b81c15c Mon Sep 17 00:00:00 2001
From: Ming Wen <moonbingbing@gmail.com>
Date: Fri, 26 Jun 2026 10:41:52 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(seo):=20homepage=20a11y=20polish=20?=
 =?UTF-8?q?=E2=80=94=20WCAG=20AA=20contrast=20+=20heading=20hierarchy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Darken low-contrast text to meet WCAG AA:
  - secondary greys #777 / #8a8a8a / #888 -> #6b6b6b (5.3:1)
  - CTA red text #e8433e -> #c7352f (the existing hover shade, ~5.3:1) on the
    Pathways / Integrations / AI-gateway CTAs and the comparison APISIX column
  - left the large bold hero stat value (passes AA-large) and the decorative
    aria-hidden flow arrow unchanged
- Promote Pathways card titles h3 -> h2 to fix the homepage h1->h3 heading skip
  (styling is class-driven, so no visual change)
---
 website/src/components/sections/Pathways.tsx          | 2 +-
 website/src/css/landing-sections/ai-gateway-home.scss | 4 ++--
 website/src/css/landing-sections/comparison.scss      | 4 ++--
 website/src/css/landing-sections/hero.scss            | 2 +-
 website/src/css/landing-sections/integrations.scss    | 2 +-
 website/src/css/landing-sections/pathways.scss        | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/website/src/components/sections/Pathways.tsx b/website/src/components/sections/Pathways.tsx
index 565a6cb659c28..f09e10154835f 100644
--- a/website/src/components/sections/Pathways.tsx
+++ b/website/src/components/sections/Pathways.tsx
@@ -53,7 +53,7 @@ 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>
+        <h2 className="pathways__title">{pathway.title}</h2>
         <p className="pathways__desc">{pathway.description}</p>
         <span className="pathways__cta">
           {pathway.cta}
diff --git a/website/src/css/landing-sections/ai-gateway-home.scss b/website/src/css/landing-sections/ai-gateway-home.scss
index 8bb5ccd459bc2..28f89b56568ac 100644
--- a/website/src/css/landing-sections/ai-gateway-home.scss
+++ b/website/src/css/landing-sections/ai-gateway-home.scss
@@ -84,7 +84,7 @@
 }
 
 .ai-home__provider--more {
-  color: #888;
+  color: #6b6b6b;
 }
 
 .ai-home__grid {
@@ -148,7 +148,7 @@
   margin-top: 2rem;
   font-size: 1rem;
   font-weight: 600;
-  color: #e8433e;
+  color: #c7352f;
 
   &:hover {
     color: #c7352f;
diff --git a/website/src/css/landing-sections/comparison.scss b/website/src/css/landing-sections/comparison.scss
index 9131ed9ffb857..4bcfb087f999a 100644
--- a/website/src/css/landing-sections/comparison.scss
+++ b/website/src/css/landing-sections/comparison.scss
@@ -71,7 +71,7 @@
 }
 
 .compare-col-apisix {
-  color: #e8433e;
+  color: #c7352f;
 }
 
 .compare-col-apisix,
@@ -85,7 +85,7 @@
 }
 
 .compare-other-cell {
-  color: #8a8a8a;
+  color: #6b6b6b;
 }
 
 .compare-table svg {
diff --git a/website/src/css/landing-sections/hero.scss b/website/src/css/landing-sections/hero.scss
index 29fecfbbe8111..5d72ce2671d28 100644
--- a/website/src/css/landing-sections/hero.scss
+++ b/website/src/css/landing-sections/hero.scss
@@ -244,6 +244,6 @@
 
 .hero-stats__label {
   font-size: 0.85rem;
-  color: #777;
+  color: #6b6b6b;
   margin-top: 2px;
 }
diff --git a/website/src/css/landing-sections/integrations.scss b/website/src/css/landing-sections/integrations.scss
index 1d1cfb6446902..bb8ec9cfdb68f 100644
--- a/website/src/css/landing-sections/integrations.scss
+++ b/website/src/css/landing-sections/integrations.scss
@@ -74,7 +74,7 @@
   margin-top: 2rem;
   font-size: 1rem;
   font-weight: 600;
-  color: #e8433e;
+  color: #c7352f;
 
   &:hover {
     color: #c7352f;
diff --git a/website/src/css/landing-sections/pathways.scss b/website/src/css/landing-sections/pathways.scss
index 01312e5d6666b..02e28538d2337 100644
--- a/website/src/css/landing-sections/pathways.scss
+++ b/website/src/css/landing-sections/pathways.scss
@@ -52,7 +52,7 @@
 .pathways__cta {
   font-size: 0.95rem;
   font-weight: 600;
-  color: #e8433e;
+  color: #c7352f;
 }
 
 @media (prefers-reduced-motion: reduce) {

From 4aad9e5ead80953b6483acb443b8c1fa344ebc19 Mon Sep 17 00:00:00 2001
From: Ming Wen <moonbingbing@gmail.com>
Date: Fri, 26 Jun 2026 10:57:50 +0800
Subject: [PATCH 2/2] fix(seo): reserve a fixed box for Showcase logos (CLS)

The Showcase user-logo wall sized logos with max-width/max-height only, so the
browser reserved no space until each (lazy, variable-aspect) logo loaded. Give
each logo a fixed 100x40 box with object-fit: contain plus matching width/height
attributes: space is reserved (no layout shift), logos are not distorted, and
the wall renders uniformly. The Plugin Hub logos use a 250x180 max and would
need a deliberate box-reservation design pass, so they're intentionally left.
---
 website/src/css/showcase.scss  | 5 +++--
 website/src/pages/showcase.tsx | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/website/src/css/showcase.scss b/website/src/css/showcase.scss
index 221645dc568c9..6f88a5963ecf8 100644
--- a/website/src/css/showcase.scss
+++ b/website/src/css/showcase.scss
@@ -55,8 +55,9 @@
     padding: 30px 10px;
 
     .logo {
-      max-width: 100px;
-      max-height: 40px;
+      width: 100px;
+      height: 40px;
+      object-fit: contain;
     }
   }
 
diff --git a/website/src/pages/showcase.tsx b/website/src/pages/showcase.tsx
index 962142c04cf3b..4f4b1aa9a1932 100644
--- a/website/src/pages/showcase.tsx
+++ b/website/src/pages/showcase.tsx
@@ -50,7 +50,7 @@ const UserCard: FC<UserCardProps> = (props) => {
   return (
     <div className="user-card">
       <a href={infoLink}>
-        <img className="logo" src={image} alt={caption} />
+        <img className="logo" src={image} alt={caption} width={100} height={40} />
       </a>
     </div>
   );