This is an automated email from the ASF dual-hosted git repository. moonming pushed a commit to branch feat/plugin-logos-and-homepage in repository https://gitbox.apache.org/repos/asf/apisix-website.git
commit c19b104f57465175e15773f0e4eb162fddf084ad Author: Ming Wen <[email protected]> AuthorDate: Wed Jun 24 20:48:12 2026 +0800 fix(website): tidy homepage layout - Integrations: flatten the per-category centered rows into one dense logo wall so every row is evenly filled (no orphan rows). - Features: remove ~18rem of dead space below the "Why APISIX?" heading, left over from the feature-card body this section no longer renders. - Comparison: the heading/subtitle were shifted 16.8% right by the shared `.arch-head`/`.compare-head` offset rule (duplicated in customTheme.scss and architecture.scss) while the table stayed centered. Drop the comparison classes from that rule so all three share one center axis. - Open-source promo: stack the "Learn from developers" copy above a responsive (fluid) video instead of cramming it beside a fixed 640px player, so the text is readable. --- website/src/components/sections/Integrations.tsx | 13 +++---------- website/src/components/sections/OpensourcePromo.tsx | 1 + website/src/css/customTheme.scss | 3 --- website/src/css/landing-sections/architecture.scss | 4 ---- website/src/css/landing-sections/comparison.scss | 3 ++- website/src/css/landing-sections/features.module.scss | 4 ++-- website/src/css/landing-sections/integrations.scss | 16 ++-------------- website/src/css/landing-sections/os-promo.module.scss | 6 ++++-- 8 files changed, 14 insertions(+), 36 deletions(-) diff --git a/website/src/components/sections/Integrations.tsx b/website/src/components/sections/Integrations.tsx index 4dc51911595..707498c99d9 100644 --- a/website/src/components/sections/Integrations.tsx +++ b/website/src/components/sections/Integrations.tsx @@ -112,16 +112,9 @@ const Integrations: FC = () => ( 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 className="integrations__tiles"> + {GROUPS.flatMap((group) => group.items).map((item) => ( + <IntegrationTile item={item} key={item.name} /> ))} </div> <Link className="integrations__cta" to="/plugins/"> diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx index f0431025204..5b46c5ff6e6 100644 --- a/website/src/components/sections/OpensourcePromo.tsx +++ b/website/src/components/sections/OpensourcePromo.tsx @@ -28,6 +28,7 @@ const VideoChannel: FC = () => { const videoOptions: VideoProps['options'] = { controls: true, + fluid: true, preload: 'none', poster: 'https://static.apiseven.com/202202/apisix-video-poster.jpeg', sources: [ diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 425a6b720cf..92518ac000f 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -256,7 +256,6 @@ a:hover { } .arch-head, -.compare-head, .testimonials-head, .docs-promo-head { font-size: 2.4rem; @@ -266,7 +265,6 @@ a:hover { } .arch-subtitle, -.compare-subtitle, .testimonials-subtitle, .docs-promo-subtitle { font-size: 1.13rem; @@ -452,7 +450,6 @@ a:hover { } .arch-head, - .compare-head, .testimonials-head, .docs-promo-head, .oss-promo-head { diff --git a/website/src/css/landing-sections/architecture.scss b/website/src/css/landing-sections/architecture.scss index b860c54ca76..51bc3642e4e 100644 --- a/website/src/css/landing-sections/architecture.scss +++ b/website/src/css/landing-sections/architecture.scss @@ -55,7 +55,6 @@ } .arch-head, -.compare-head, .testimonials-head, .docs-promo-head { font-size: 2.4rem; @@ -65,7 +64,6 @@ } .arch-subtitle, -.compare-subtitle, .testimonials-subtitle, .docs-promo-subtitle { font-size: 1.13rem; @@ -99,7 +97,6 @@ } .arch-head, - .compare-head, .testimonials-head, .docs-promo-head, .oss-promo-head { @@ -108,7 +105,6 @@ } .arch-subtitle, - .compare-subtitle, .testimonials-subtitle, .docs-promo-subtitle, .oss-promo-subtitle { diff --git a/website/src/css/landing-sections/comparison.scss b/website/src/css/landing-sections/comparison.scss index 566f8f84293..9131ed9ffb8 100644 --- a/website/src/css/landing-sections/comparison.scss +++ b/website/src/css/landing-sections/comparison.scss @@ -8,7 +8,8 @@ .compare-head { font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem); font-weight: 700; - margin-bottom: 0.5rem; + max-width: 760px; + margin: 0 auto 0.5rem; } .compare-subtitle { diff --git a/website/src/css/landing-sections/features.module.scss b/website/src/css/landing-sections/features.module.scss index e2cd0e5da2c..9694c585167 100644 --- a/website/src/css/landing-sections/features.module.scss +++ b/website/src/css/landing-sections/features.module.scss @@ -163,13 +163,13 @@ .features { width: 100%; - margin: 10rem 0; + margin: 6rem 0 2rem; hyphens: auto; position: relative; & .head { padding: 0 10%; - margin-bottom: 8rem; + margin-bottom: 0; h2 { background-color: rgb(232 67 62); diff --git a/website/src/css/landing-sections/integrations.scss b/website/src/css/landing-sections/integrations.scss index b0c79358050..1d1cfb64469 100644 --- a/website/src/css/landing-sections/integrations.scss +++ b/website/src/css/landing-sections/integrations.scss @@ -19,25 +19,13 @@ 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; + max-width: 860px; + margin: 0 auto; } .integrations__tile { diff --git a/website/src/css/landing-sections/os-promo.module.scss b/website/src/css/landing-sections/os-promo.module.scss index 21212cd3891..7c15bdf3d75 100644 --- a/website/src/css/landing-sections/os-promo.module.scss +++ b/website/src/css/landing-sections/os-promo.module.scss @@ -55,7 +55,8 @@ & .docsPromo { box-sizing: border-box; display: flex; - justify-content: center; + flex-direction: column; + flex: 1; background-color: #f8f8f8; padding: 80px 40px 50px; margin-left: 25px; @@ -64,7 +65,8 @@ & .docsPromoHead { display: flex; flex-flow: column; - margin-right: 25px; + margin-right: 0; + margin-bottom: 1.5rem; h3 { font-size: 2.4rem;
