Fix: Improve plugin icons rendering and responsiveness on Plugins Page #1963

website/src/components/sections/Architecture.tsx

@@ -42,10 +42,10 @@ const Architecture: FC = () => (
       </div>
       <div className="arch-card-caption">
         <p>
-          <Translate id="architecture.component.card.caption">
-            Apache APISIX is based on NGINX and etcd. Compared with traditional API Gateways, APISIX
-            has features like dynamic routing and hot-loading plugins, etc.
-          </Translate>
+          Apache APISIX is based on NGINX and etcd.
+          Compared with traditional API Gateways,
+          APISIX has features like dynamic routing<br />
+          and hot-loading plugins, etc.
         </p>
       </div>
       <div className="arch-card-border" />

website/src/components/sections/HeroSection.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 
@@ -10,9 +10,6 @@ import ArrowAnim from '../ArrowAnim';
 import '../../css/landing-sections/hero.scss';
 
 const LazyLoadHeroCanvas = () => {
-  const windowType = useWindowType();
-  if (windowType === 'mobile') return null;
-
   return (
     <BrowserOnly>
       {() => {
@@ -24,39 +21,69 @@ const LazyLoadHeroCanvas = () => {
   );
 };
 
-const HeroSection: FC = () => (
-  <div className="hero-sec-wrap" style={{ width: '100%' }}>
-    <div className="hero-text">
-      <h1 className="hero-title">
-        <Translate id="hero.component.title.fragment1">API Gateway & AI Gateway for APIs and AI Agents</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.
-        </Translate>
-      </h3>
-      <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>
-        </Link>
-        <ArrowAnim />
-      </div>
-    </div>
-    <div className="add-margin">
+const HeroSection: FC = () => {
+  useEffect(() => {
+    const handleScroll = () => {
+      const heroSection = document.querySelector('.hero-sec-wrap');
+      const navbar = document.querySelector('.navbar');
+
+      if (heroSection && navbar) {
+        const heroRect = heroSection.getBoundingClientRect();
+        const isInHeroSection = heroRect.top <= 100 && heroRect.bottom >= 0;
+
+        if (isInHeroSection) {
+          document.body.classList.add('hero-navbar');
+        } else {
+          document.body.classList.remove('hero-navbar');
+        }
+      }
+    };
+
+    // Set initial state
+    handleScroll();
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      document.body.classList.remove('hero-navbar');
+    };
+  }, []);
+
+  return (
+    <div className="hero-sec-wrap" style={{ width: '100%' }}>
       <LazyLoadHeroCanvas />
+      <div className="hero-text">
+        <h1 className="hero-title">
+          <Translate id="hero.component.title.fragment1">API Gateway & AI Gateway for APIs and AI Agents</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.
+          </Translate>
+        </h3>
+        <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>
+          </Link>
+          <ArrowAnim />
+        </div>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default HeroSection;