This is an automated email from the ASF dual-hosted git repository.
guoqqqi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 4998542fb67 fix(website): simplify the homepage open-source promo
section (#2062)
4998542fb67 is described below
commit 4998542fb67bb8f16e1686581bb97460b0e36d5d
Author: Ming Wen <[email protected]>
AuthorDate: Fri Jun 26 08:46:09 2026 +0800
fix(website): simplify the homepage open-source promo section (#2062)
---
website/i18n/zh/code.json | 14 ++--
.../src/components/sections/OpensourcePromo.tsx | 36 ++--------
.../src/css/landing-sections/os-promo.module.scss | 81 ++++------------------
3 files changed, 24 insertions(+), 107 deletions(-)
diff --git a/website/i18n/zh/code.json b/website/i18n/zh/code.json
index 10a8526f19f..34c38092e43 100644
--- a/website/i18n/zh/code.json
+++ b/website/i18n/zh/code.json
@@ -271,26 +271,26 @@
"message": "Apache APISIX 是 Apache 软件基金会下的开源项目，并且在不断蓬勃发展。下方是 Apache APISIX
与其它 API 网关对比："
},
"openSourcePromo.component.title": {
- "message": "向更多开发者学习"
+ "message": "刚接触 Apache APISIX？"
},
"openSourcePromo.component.subtitle.fragment1": {
- "message": "想学习 Apache APISIX 的使用，但不知道从哪里开始？请查阅我们的",
- "description": "Want to learn Apache APISIX usage, but don't know
where to start. Check out our"
+ "message": "刚接触微服务或 API 网关？查阅我们的",
+ "description": "New to microservices or API gateways? Get up and running
with our"
},
"openSourcePromo.component.link.docs": {
"message": "官方技术文档。",
"description": "docs."
},
"openSourcePromo.component.subtitle.fragment2": {
- "message": "如果你喜欢通过视频进行学习，可查看",
- "description": "Like visual information, check out our"
+ "message": "想通过视频学习？前往我们的",
+ "description": "Prefer to learn by watching? Head to our"
},
"openSourcePromo.component.link.Youtube": {
"message": "YouTube 频道"
},
"openSourcePromo.component.subtitle.fragment3": {
- "message": "以获取更多教程，欢迎你的订阅。",
- "description": "for detailed tutorials. Subscribe for more."
+ "message": "观看分步视频教程。",
+ "description": "for step-by-step video tutorials."
},
"openSourcePromo.component.ossPromo.title": {
"message": "为 Apache APISIX 贡献你的力量！"
diff --git a/website/src/components/sections/OpensourcePromo.tsx
b/website/src/components/sections/OpensourcePromo.tsx
index 5b46c5ff6e6..f9b9fc32484 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,40 +52,15 @@ 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>
- <Translate id="openSourcePromo.component.title">Learn from
developers</Translate>
+ <Translate id="openSourcePromo.component.title">New to Apache
APISIX?</Translate>
</h3>
<div className={style.docsPromoSubtitle}>
<p>
<Translate id="openSourcePromo.component.subtitle.fragment1">
- What are microservices? What is an API Gateway? Want to learn
Apache APISIX usage, but
- don't know where to start? Check out our
+ New to microservices or API gateways? Get up and running with our
</Translate>
{' '}
<Link style={{ color: '#e8433e' }} to={useBaseUrl('docs')}>
@@ -95,18 +69,18 @@ const OpensourcePromo: FC = () => (
</p>
<p>
<Translate id="openSourcePromo.component.subtitle.fragment2">
- Like visual information, check out our
+ Prefer to learn by watching? Head to our
</Translate>
{' '}
<VideoChannel />
{' '}
<Translate id="openSourcePromo.component.subtitle.fragment3">
- for detailed tutorials. Subscribe for more.
+ for step-by-step video tutorials.
</Translate>
</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;
}
}
}
