This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new ccbb7413 Update Key Features Style (#424)
ccbb7413 is described below
commit ccbb74138eaf135883f360509c7fbb1541646068
Author: Kortin Zhou <[email protected]>
AuthorDate: Tue Feb 11 22:27:13 2025 +0800
Update Key Features Style (#424)
* style: update key feature style
* feat(homepage): update Chinese language
* fix(homepage): fix key feature cards to fit responsive
* feat(homepage): add slogan title
---------
Co-authored-by: benjobs <[email protected]>
---
src/components/BannerTitle/index.tsx | 7 ++++++-
src/components/FeatureCard/index.tsx | 2 +-
src/components/FeatureCard/styles.module.css | 7 ++++---
src/pages/home/feature.data.jsx | 8 ++++----
src/pages/home/index.tsx | 14 ++++++-------
src/pages/home/languages.json | 30 ++++++++++++++++++++--------
6 files changed, 44 insertions(+), 24 deletions(-)
diff --git a/src/components/BannerTitle/index.tsx
b/src/components/BannerTitle/index.tsx
index b7d359b4..1db86ae4 100644
--- a/src/components/BannerTitle/index.tsx
+++ b/src/components/BannerTitle/index.tsx
@@ -8,7 +8,9 @@ interface BannerProps {
export default function BannerTitle({
title = 'Apache StreamPark™',
subTitle = 'Make stream processing easier! Easy-to-use streaming application
development framework and operation platform, with Apache Flink® and Apache
Spark™ supported, provides full lifecycle support for stream processing
applications.',
+ description = 'Apache StreamPark™',
}) {
+
return (
<div
className={'md:px-16 py-8 text-center h-auto bg-shadow-element'}
@@ -17,9 +19,12 @@ export default function BannerTitle({
<h1 className="mt-10 text-2xl xs:text-xl md:text-4xl lg:text-6xl
font-bold relative inline-block text-black dark:text-white">
Apache StreamPark™
</h1>
- <p className="lg:text-base mt-6 text-slate-600 text-center max-w-3xl
mx-auto dark:text-slate-400">
+ <p className="lg:text-[24px] mt-3 text-slate-800 text-center max-w-3xl
mx-auto dark:text-slate-200">
{subTitle}
</p>
+ <p className="lg:text-base mt-4 text-slate-600 text-center max-w-3xl
mx-auto dark:text-slate-400">
+ {description}
+ </p>
</div>
)
}
\ No newline at end of file
diff --git a/src/components/FeatureCard/index.tsx
b/src/components/FeatureCard/index.tsx
index 313f913c..311ee9e2 100644
--- a/src/components/FeatureCard/index.tsx
+++ b/src/components/FeatureCard/index.tsx
@@ -26,7 +26,7 @@ export default function FeatureCard(props: Props) {
>
<div className={styles['feature-icon-wrapper']}>
<div className={styles['feature-icon']}>
- <div className='w-8 h-8'>{props.icon}</div>
+ <div className="w-6 h-6">{props.icon}</div>
</div>
</div>
<div className={clsx(styles['feature-body'])}>
diff --git a/src/components/FeatureCard/styles.module.css
b/src/components/FeatureCard/styles.module.css
index 60330ea9..dae1ba40 100644
--- a/src/components/FeatureCard/styles.module.css
+++ b/src/components/FeatureCard/styles.module.css
@@ -1,7 +1,7 @@
.feature-card-wrapper {
position: relative;
min-width: 387px;
- max-width: 400px;
+ max-width: 460px;
padding: 30px 25px;
background: var(--secondary-bg-color);
@@ -14,7 +14,7 @@
height: 240px;
background-color: var(--bg-color);
border-radius: 8px;
- padding: 15px 10px;
+ padding: 24px;
padding-top: 36px;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.05));
overflow: hidden;
@@ -57,7 +57,8 @@
justify-content: center;
font-size: 1.85rem;
background: var(--feature-icon-color);
- color: var(--bg-color);
+ /* color: var(--bg-color); */
+ color: #fff;
border-radius: 50%;
/* box-shadow: 0 2px 4px 6px var(--feature-icon-shadow); */
/* background: radial-gradient(50% 50% at 50% 50%, var(--feature-icon-color)
20%, var(--feature-icon-shadow) 100%); */
diff --git a/src/pages/home/feature.data.jsx b/src/pages/home/feature.data.jsx
index d615365a..feaefb0a 100644
--- a/src/pages/home/feature.data.jsx
+++ b/src/pages/home/feature.data.jsx
@@ -19,16 +19,16 @@ export const featureCardStyle = {
},
platform: {
style: {
- '--feature-icon-color': 'rgb(173, 103, 247)',
- '--feature-icon-shadow': 'rgba(173, 103, 247, 0.2)',
+ '--feature-icon-color': 'rgb(119, 216, 128)',
+ '--feature-icon-shadow': 'rgba(119, 216, 128, 0.2)',
'--animation-delay': '1s',
},
icon: <PlatformIcon />,
},
unified: {
style: {
- '--feature-icon-color': 'rgb(119, 216, 128)',
- '--feature-icon-shadow': 'rgba(119, 216, 128, 0.2)',
+ '--feature-icon-color': 'rgb(173, 103, 247)',
+ '--feature-icon-shadow': 'rgba(173, 103, 247, 0.2)',
'--animation-delay': '1.8s',
},
icon: <UnifiedIcon />,
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index e71c9c2d..4e84223e 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -50,15 +50,15 @@ export default function HomePage() {
</div>
<section className='banner-section container mt-16 flex flex-col'>
- <BannerTitle />
+ <BannerTitle subTitle={t.slogan.key}
description={t.slogan.description} />
<div
className='flex justify-center space-x-6 text-sm'
data-aos='fade-right'
data-aos-duration='6000'
data-aos-offset='100'
>
- <GetStartButton>Get Start</GetStartButton>
- <GitHubButton>View on GitHub</GitHubButton>
+ <GetStartButton>{t.action.start}</GetStartButton>
+ <GitHubButton>Github</GitHubButton>
</div>
</section>
@@ -68,7 +68,7 @@ export default function HomePage() {
<section data-aos='fade-up' className='flex flex-col items-start my-10'>
<div className='text-base lg:text-xl text-neutral-600
dark:text-neutral-400 mx-auto mb-4'>
- Start using Apache StreamPark™ in minutes
+ {t.common.startUsingTitle}
</div>
<div className='mx-auto px-2'>
<ShellCommand
@@ -76,9 +76,9 @@ export default function HomePage() {
className='max-w-[80vw] md:max-w-full'
/>
<p className='text-xs md:text-sm text-neutral-400
dark:text-neutral-600 mx-auto mt-2 pl-2'>
- <span>Or install other release version from the </span>
+ <span>{t.common.installOtherVersionDescription} </span>
<a href='/download' className='text-primary-400'>
- download page
+ {t.common.downlaodPage}
</a>
<span>.</span>
</p>
@@ -105,7 +105,7 @@ export default function HomePage() {
title={t.common.coreFeatures}
description={t.common.coreFeaturesDesc}
/>
- <div className='flex-center flex-wrap'>
+ <div className='flex-center flex-wrap xl:w-[1400px] mx-auto'>
{t.feature.map((feature, i) => (
<FeatureCard
key={i}
diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
index 03ee32eb..51eec5eb 100644
--- a/src/pages/home/languages.json
+++ b/src/pages/home/languages.json
@@ -15,22 +15,29 @@
"newFeatures": "新特性",
"enhancement": "增强点",
"bugFixs": "问题修复",
- "changeLog": "详细变更"
+ "changeLog": "详细变更",
+ "startUsingTitle": "一条命令开启 Apache StreamPark™ 实时计算之旅",
+ "installOtherVersionDescription": "您也可以从这个页面安装其他发行版本：",
+ "downlaodPage": "下载其他版本"
},
"slogan": {
- "key": "让流处理更简单!",
- "description": "Apache StreamPark™
是一个流处理应用程序开发管理框架，旨在轻松构建和管理流处理应用程序，提供使用 Apache Flink® 和 Apache Spark™
编写流处理应用的开发框架和一站式实时计算平台，核心能力包括不限于应用开发、部署、管理、运维、实时数仓等。"
+ "key": "让流处理更简单",
+ "description": "Apache StreamPark™
是一个简单易用的流处理应用开发框架和一站式云原生实时计算平台，为流作业提供全生命周期管理能力。"
+ },
+ "action": {
+ "start": "快速开始",
+ "github": "在 GitHub 上查看"
},
"feature": [
{
"id": "development",
"title": "流应用开发框架",
- "details": "Apache StreamPark™ 提供流作业开发框架，旨在简化 Apache Flink® 和 Apache
Spark™ 作业的开发流程。标准化了作业配置，内置大量快捷的API 和 即插即用的连接器，让用户只用关系核心业务开发，大幅降低流处理学习成本与开发难度。"
+ "details": "Apache StreamPark™ 提供流作业开发框架，旨在简化 Apache Flink® 和 Apache
Spark™ 作业的开发流程。低代码实现复杂流处理逻辑，内置大量快捷的API 和 即插即用的连接器，降低流处理学习成本与开发难度。"
},
{
"id": "platform",
"title": "一站式实时计算平台",
- "details": "Apache StreamPark™
提供强大的流作业操作管理平台，覆盖从开发调试、编译构建、部署上线到状态管理与恢复、运维操作的全生命周期。作为核心能力，它简化了流作业的管理流程，提升开发与运维效率，是一站式的流计算解决方案。"
+ "details": "Apache StreamPark™ 提供了一站式的流计算平台，云原生架构设计，无缝对接 Apache Hadoop
和 Kubernetes 生态，核心能力包括不限于应用开发、部署、管理、运维、实时数仓等，极大提升流应用开发与运维管理效率。"
},
{
"id": "unified",
@@ -93,11 +100,18 @@
"newFeatures": "New Features",
"enhancement": "Enhancement point",
"bugFixs": "Bug Fix",
- "changeLog": "Changelog"
+ "changeLog": "Changelog",
+ "startUsingTitle": "Start using Apache StreamPark™ in minutes",
+ "installOtherVersionDescription": "Or install other release version from
the",
+ "downlaodPage": "download page"
},
"slogan": {
- "key": "make stream processing easier!",
- "description": "Make stream processing easier! Easy-to-use streaming
application development framework and operation platform, with Apache Flink®
and Apache Spark™ supported, provides full lifecycle support for stream
processing applications."
+ "key": "Make stream processing easier",
+ "description": "Apache StreamPark™ is an easy-to-use streaming
application development framework and one-stop cloud-native real-time computing
platform."
+ },
+ "action": {
+ "start": "Get Start",
+ "github": "View on GitHub"
},
"feature": [
{
