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 63ae47c43056f028bd1cf542bb5c99cecd520563 Author: Ming Wen <[email protected]> AuthorDate: Fri Jun 26 07:34:47 2026 +0800 fix(website): drop the dark OSS-promo card, center the dev resources Remove the "Building API Gateway Together" dark card from the open-source promo and present "Learn from developers" as a single centered block with a width-capped, responsive (fluid) video. --- .../src/components/sections/OpensourcePromo.tsx | 27 +------- .../src/css/landing-sections/os-promo.module.scss | 81 ++++------------------ 2 files changed, 13 insertions(+), 95 deletions(-) diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx index 5b46c5ff6e6..bbe9414e9ca 100644 --- a/website/src/components/sections/OpensourcePromo.tsx +++ b/website/src/components/sections/OpensourcePromo.tsx @@ -6,7 +6,6 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Translate from '@docusaurus/Translate'; import BrowserOnly from '@docusaurus/BrowserOnly'; -import GitHub from '../../assets/icons/github-logo.svg'; import type { VideoProps } from '../Video'; import style from '../../css/landing-sections/os-promo.module.scss'; @@ -53,30 +52,6 @@ const LazyLoadVideo = () => ( const OpensourcePromo: FC = () => ( <div className={style.osPromotion}> - <div className={style.ossPromo}> - <h3> - <Translate id="openSourcePromo.component.ossPromo.title"> - Building API Gateway Together - </Translate> - </h3> - <div className={style.ossPromoSubtitle}> - <p> - <Translate id="openSourcePromo.component.ossPromo.subtitle1"> - Apache APISIX is open source and ever-growing. - </Translate> - <br /> - <Translate id="openSourcePromo.component.ossPromo.subtitle2"> - Contributors are always welcome, reach out to us on GitHub. - </Translate> - </p> - </div> - <div className={style.ossCta}> - <GitHub style={{ width: '20px', margin: '0 10px 0 0' }} /> - <a href="https://github.com/apache/apisix";> - <Translate id="openSourcePromo.component.link.Github">Check us out</Translate> - </a> - </div> - </div> <div className={style.docsPromo}> <div className={style.docsPromoHead}> <h3> @@ -106,7 +81,7 @@ const OpensourcePromo: FC = () => ( </p> </div> </div> - <div className="docs-promo-video"> + <div className={style.docsPromoVideo}> <LazyLoadVideo /> </div> </div> diff --git a/website/src/css/landing-sections/os-promo.module.scss b/website/src/css/landing-sections/os-promo.module.scss index 7c15bdf3d75..5ea407059b7 100644 --- a/website/src/css/landing-sections/os-promo.module.scss +++ b/website/src/css/landing-sections/os-promo.module.scss @@ -1,72 +1,27 @@ -@import '../util'; +@import "../util"; .osPromotion { - display: flex; - margin: 0 10%; + margin: 4rem 10%; a { color: #e8433e; } - & .ossPromo { - background: #121010; - color: #fff; - display: flex; - flex-direction: column; - padding: 80px 40px; - width: fit-content; - min-width: 400px; - border-radius: 1rem; - - h3 { - font-size: 2.4rem; - } - - & .ossPromoSubtitle { - color: hsl(0deg 0% 78%); - font-size: 1.13rem; - letter-spacing: 0.2px; - font-family: MaisonNeue-Light, sans-serif; - } - - & .ossCta { - background: #080808; - border-radius: 32px; - border-style: solid; - border-width: 1.75px; - display: flex; - font-size: 0.95rem; - padding: 5px 12px; - transition: background 0.5s; - width: fit-content; - - &:hover { - background: hsl(0deg 0% 100%); - color: #080808; - cursor: pointer; - } - - & > a { - color: currentcolor; - } - } - } - & .docsPromo { box-sizing: border-box; display: flex; flex-direction: column; - flex: 1; + align-items: center; background-color: #f8f8f8; - padding: 80px 40px 50px; - margin-left: 25px; + padding: 60px 40px; border-radius: 1rem; & .docsPromoHead { display: flex; flex-flow: column; - margin-right: 0; - margin-bottom: 1.5rem; + max-width: 760px; + margin-bottom: 2rem; + text-align: center; h3 { font-size: 2.4rem; @@ -81,30 +36,18 @@ font-family: MaisonNeue-Light, sans-serif; font-weight: 700; } - } - @include respond-below(lg) { - flex-direction: column; - - & .ossPromo { - min-width: unset; - width: auto; - } - - & .docsPromo { - margin: 4rem 0 0; - - & .docsPromoHead { - margin-right: 0; - } + & .docsPromoVideo { + width: 100%; + max-width: 720px; } } @include respond-below(sm) { - margin: 0 1rem; + margin: 3rem 1rem; & .docsPromo { - flex-direction: column; + padding: 40px 20px; } } }
