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 3a6ed144 style: change feature icon and color (#423)
3a6ed144 is described below
commit 3a6ed14476e19d1c0877ca41742d076f494721f3
Author: Kriszu <[email protected]>
AuthorDate: Tue Feb 11 12:12:45 2025 +0800
style: change feature icon and color (#423)
* style: change feature icon and color
* fix: color
---
src/components/FeatureCard/index.tsx | 14 +-
src/components/FeatureCard/styles.module.css | 46 ++--
src/pages/home/FeatureIcon.jsx | 312 +++++++++++++++++++++++++++
src/pages/home/feature.data.jsx | 60 ++++++
src/pages/home/index.tsx | 59 ++---
src/pages/home/languages.json | 24 ++-
6 files changed, 444 insertions(+), 71 deletions(-)
diff --git a/src/components/FeatureCard/index.tsx
b/src/components/FeatureCard/index.tsx
index 76bdb55b..313f913c 100644
--- a/src/components/FeatureCard/index.tsx
+++ b/src/components/FeatureCard/index.tsx
@@ -20,21 +20,13 @@ export default function FeatureCard(props: Props) {
<div className={clsx(styles['feature-card-wrapper'], props.className)}>
<div
className={clsx(styles['feature-card'])}
- data-aos="fade-up"
+ data-aos='fade-up'
data-aos-delay={props.animationDelay}
style={props.style}
>
<div className={styles['feature-icon-wrapper']}>
- <div
- className={styles['feature-icon']}
- // style={
- // {
- // '--feature-icon-color': props.color || '#ad67f7',
- // '--feature-icon-shadow': shadowColor,
- // } as React.CSSProperties
- // }
- >
- <i className={props.icon}></i>
+ <div className={styles['feature-icon']}>
+ <div className='w-8 h-8'>{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 5291a8d9..1038f19e 100644
--- a/src/components/FeatureCard/styles.module.css
+++ b/src/components/FeatureCard/styles.module.css
@@ -2,37 +2,23 @@
position: relative;
min-width: 387px;
max-width: 400px;
- padding: 40px;
+ padding: 30px 25px;
background: var(--secondary-bg-color);
transition: background 0s,
- /* disable transition when theme switch */ transform 0.3s;
-}
-
-.feature-card-wrapper:nth-of-type(1) {
- --feature-icon-color: rgb(65, 146, 246);
- --feature-icon-shadow: rgba(65, 146, 246, 0.2);
- --animation-delay: 0ms;
-}
-.feature-card-wrapper:nth-of-type(2) {
- --feature-icon-color: rgb(173, 103, 247);
- --feature-icon-shadow: rgba(173, 103, 247, 0.2);
- --animation-delay: 1s;
-}
-.feature-card-wrapper:nth-of-type(3) {
- --feature-icon-color: rgb(119, 216, 128);
- --feature-icon-shadow: rgba(119, 216, 128, 0.2);
- --animation-delay: 1.8s;
+ /* disable transition when theme switch */
+ transform 0.3s;
}
.feature-body {
height: 240px;
background-color: var(--bg-color);
border-radius: 8px;
- padding: 32px;
+ padding: 30px 24px;
padding-top: 36px;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.05));
overflow: hidden;
+ cursor: pointer;
/* --animation-delay: attr(data-aos-delay); */
}
@@ -66,16 +52,22 @@
.feature-icon {
width: 48px;
height: 48px;
- line-height: 52px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
font-size: 1.85rem;
background: var(--feature-icon-color);
color: var(--bg-color);
- text-align: center;
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%); */
}
+.feature-icon svg {
+ width: 100%;
+ height: 100%;
+}
+
.features-icon i {
line-height: inherit;
font-weight: bold;
@@ -87,11 +79,9 @@
right: -60%;
height: 100%;
width: 100%;
- background: radial-gradient(
- 50% 50% at 50% 50%,
- var(--feature-icon-shadow) 0,
- transparent 100%
- );
+ background: radial-gradient(50% 50% at 50% 50%,
+ var(--feature-icon-shadow) 0,
+ transparent 100%);
animation: breathing infinite 10s ease-in-out;
animation-delay: var(--animation-delay);
transition: transform 0.3s ease-in;
@@ -108,15 +98,19 @@
0% {
right: -50%;
}
+
25% {
right: -20%;
}
+
50% {
right: -50%;
}
+
75% {
right: 30%;
}
+
100% {
right: -50%;
}
diff --git a/src/pages/home/FeatureIcon.jsx b/src/pages/home/FeatureIcon.jsx
new file mode 100644
index 00000000..cbae7e35
--- /dev/null
+++ b/src/pages/home/FeatureIcon.jsx
@@ -0,0 +1,312 @@
+import React from 'react';
+
+export function DevelopmentIcon() {
+ return (
+ <>
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ xmlnsXlink='http://www.w3.org/1999/xlink'
+ version='1.1'
+ width='93.013916015625'
+ height='93.001220703125'
+ viewBox='0 0 93.013916015625 93.001220703125'
+ >
+ <g>
+ <g>
+ <path
+
d='M45.99314952964783,93.00122867431641C42.89164952964783,93.00122867431641,40.05044952964783,92.2246286743164,37.209349529647824,90.93192867431641L4.905759529647828,73.1038686743164C3.1015595296478273,72.0715586743164,2.325009529647827,69.7465586743164,3.361960529647827,67.94701867431641C4.3989095296478276,66.1474666743164,6.723909529647827,65.3523136743164,8.528109529647828,66.38461467431641L40.82704952964783,83.9523286743164C44.27734952964783,85.5054286743164,48.22984952
[...]
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M45.992999175262455,73.9687244567871C42.89149917526245,73.9687244567871,40.05029917526245,73.1922244567871,37.20919917526245,71.8995244567871L4.905629175262451,54.07139445678711C3.096776175262451,53.03909445678711,2.320226175262451,50.71409445678711,3.357176175262451,48.90059445678711C4.394129175262451,47.08709545678711,6.723779175262451,46.32449545678711,8.527979175262452,47.352145456787106L40.826899175262454,64.91982445678711C44.27719917526245,66.46832445678712,48.2249
[...]
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M45.9932,54.322520703125C42.8916,54.322520703125,40.0505,53.550620703125,37.2093,52.253320703125L4.90575,34.429820703125C1.81815,32.621020703125,0,30.035620703125,0,27.194420703125C0,24.353320703125,1.81815,21.507520703125,5.16615,19.698620703125L37.9812,2.130920703125C43.9239,-0.710229296875,50.3828,-0.710229296875,55.8093,2.130920703125L56.0651,2.130920703125L88.1082,19.698620703125C91.2098,21.516820703125,93.014,24.092920703125,93.014,26.934020703125C93.014,29.7752207
[...]
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ </g>
+ </svg>
+ </>
+ );
+}
+
+export function StreamingIcon() {
+ return (
+ <>
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ xmlnsXlink='http://www.w3.org/1999/xlink'
+ fill='none'
+ version='1.1'
+ width='103.83642578125'
+ height='90.0013427734375'
+ viewBox='0 0 103.83642578125 90.0013427734375'
+ >
+ <g>
+ <g>
+ <path
+
d='M102.807,73.6847L92.4257,63.3039C91.0692,61.9475,88.8713,61.9475,87.5093,63.3039C86.1473,64.6603,86.1529,66.8583,87.5093,68.2203L92.0049,72.6827C80.5223,72.6716,69.9753,66.3434,64.5662,56.2117L58.5813,45.0003L64.5662,33.789C69.9753,23.6573,80.5223,17.3291,92.0049,17.318L87.5093,21.7804C86.1529,23.1369,86.1529,25.3348,87.5093,26.6968C88.8657,28.0588,91.0637,28.0532,92.4257,26.6968L102.807,16.3159C104.163,14.9706,104.174,12.7782,102.829,11.4217C102.823,11.4162,102.818,11.4
[...]
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ </g>
+ </svg>
+ </>
+ );
+}
+
+export function EasyIcon() {
+ return (
+ <>
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ xmlnsXlink='http://www.w3.org/1999/xlink'
+ fill='none'
+ version='1.1'
+ width='100'
+ height='100'
+ viewBox='0 0 100 100'
+ >
+ <g>
+ <g>
+ <g>
+ <path
+
d='M86.605557421875,18.837211289062502Q86.872857421875,18.4164212890625,87.012057421875,17.9377462890625Q87.151257421875,17.4590702890625,87.151257421875,16.9605712890625Q87.151257421875,16.7886272890625,87.134357421875,16.6175112890625Q87.117557421875,16.4463952890625,87.083957421875,16.2777552890625Q87.050457421875,16.1091152890625,87.000557421875,15.9445712890625Q86.950557421875,15.7800312890625,86.88475742187501,15.6211812890625Q86.818957421875,15.4623212890625,86.737
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M50,7Q58.7507,7,66.7365,10.37772Q67.39009999999999,10.6542,68.0999,10.6542Q68.2718,10.6542,68.443,10.63735Q68.6141,10.62049,68.7827,10.58695Q68.9513,10.5534,69.1159,10.50349Q69.2804,10.453579999999999,69.4393,10.38778Q69.5981,10.32198,69.7498,10.24092Q69.9014,10.15987,70.0444,10.06434Q70.1874,9.968820000000001,70.3203,9.85974Q70.4532,9.75066,70.5748,9.629069999999999Q70.6964,9.50749,70.8054,9.37458Q70.9145,9.24166,71.01,9.098700000000001Q71.1056,8.955729999999999,71.18
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ </g>
+ </g>
+ </svg>
+ </>
+ );
+}
+
+export function EcosystemIcon() {
+ return (
+ <>
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ xmlnsXlink='http://www.w3.org/1999/xlink'
+ fill='none'
+ version='1.1'
+ width='95.697265625'
+ height='106'
+ viewBox='0 0 95.697265625 106'
+ >
+ <g>
+ <g>
+ <path
+
d='M81.74754197387696,28.867398385620117Q80.95334197387695,30.016398385620118,80.95334197387695,31.435798385620117Q80.95334197387695,32.65639838562012,81.56034197387694,33.70169838562012L82.98594197387695,36.15699838562011L53.47232197387695,53.20059838562012L52.06065197387695,50.73019838562012Q50.763591973876956,48.46029838562012,48.14213197387696,48.46029838562012L45.30974197387695,48.46029838562012L45.30974197387695,14.744088385620117L48.14213197387696,14.744088385620117Q
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M85.49735169754028,35.97108646392822Q85.69055169754029,35.97108646392822,85.69275169754029,35.97068646392822L88.90785169754028,35.53228646392822L88.90785169754028,70.65728646392822L85.81915169754028,70.37648646392822Q85.65785169754028,70.36188646392822,85.49735169754028,70.36188646392822Q82.99485169754028,70.36188646392822,81.65475169754028,72.48448646392822Q80.95325169754028,73.58328646392822,80.95325169754028,74.90588646392823Q80.95325169754028,76.21518646392822,81.655
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g
transform='matrix(0,-1,1,0,-43.755943298339844,133.09107208251953)'>
+ <path
+
d='M44.667564392089844,88.42350769042969L72.71906439208985,88.42350769042969L72.71906439208985,94.0882876904297L44.667564392089844,94.0882876904297L44.667564392089844,88.42350769042969Z'
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g
transform='matrix(-0.8660897016525269,-0.49988865852355957,0.49988865852355957,-0.8660897016525269,48.521631870676174,117.6492124399715)'>
+ <path
+
d='M40.018768310546875,52.32561111450195L68.91766831054687,52.32561111450195L68.91766831054687,57.99039111450195L40.018768310546875,57.99039111450195L40.018768310546875,52.32561111450195Z'
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g
transform='matrix(-0.8659506440162659,-0.5001294612884521,0.5001294612884521,-0.8659506440162659,107.65187294248699,176.81641186097204)'>
+ <path
+
d='M77.52192687988281,73.98127746582031L106.09162687988281,73.98127746582031L106.09162687988281,79.64605746582032L77.52192687988281,79.64605746582032L77.52192687988281,73.98127746582031Z'
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M58.34239075317383,53.004358929443356Q58.34239075317383,50.25545892944336,56.97179075317383,47.90671892944336Q55.638490753173826,45.580828929443356,53.32159075317383,44.210618929443356Q50.92899075317383,42.79555892944336,48.142290753173825,42.79555892944336Q45.35855075317383,42.79555870434536,42.96880075317383,44.20409892944336Q40.65354075317383,45.568738929443356,39.30641075317383,47.89391892944336Q37.93349075317383,50.258388929443356,37.93349075317383,53.00435892944335
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g
transform='matrix(-0.8659898042678833,0.5000616312026978,-0.5000616312026978,-0.8659898042678833,111.01252138507243,89.65333185614145)'>
+ <path
+
d='M43.493282318115234,59.70164108276367L72.55738231811523,59.70164108276367L72.55738231811523,65.36642108276368L43.493282318115234,65.36642108276368L43.493282318115234,59.70164108276367Z'
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M48.142290753173825,0Q52.36999075317383,2.25098e-7,55.35739075317383,2.9899Q58.34239075317383,5.97732,58.34239075317383,10.2001Q58.34239075317383,12.3124,57.51499075317383,14.2305Q56.336690753173826,16.9922,53.82799075317383,18.6787Q51.25429075317383,20.4089,48.142290753173825,20.4089Q45.03354075317383,20.4089,42.45807075317383,18.6815Q39.95235075317383,17.0009,38.76093075317383,14.2394Q37.93349075317383,12.3025,37.93349075317383,10.2001Q37.93349075317383,5.9768,40.92448
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M85.49722163085937,21.227035522460938Q89.72052163085938,21.22703529736294,92.70902163085938,24.218035522460937Q95.69732163085938,27.208745522460937,95.69732163085938,31.435835522460938Q95.69732163085938,35.448935522460935,92.96592163085937,38.38333552246094Q90.25132163085938,41.29963552246094,86.29072163085938,41.60143552246094Q85.91482163085938,41.63593552246094,85.49722163085937,41.63593552246094Q82.71567163085938,41.63593552246094,80.32554163085938,40.229535522460935Q
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M18.8326,25.99023552246094Q20.4089,28.46629552246094,20.4089,31.435835522460938Q20.4089,33.970535522460935,19.2294,36.19623552246094Q17.9278,38.661035522460935,15.5516,40.12523552246094Q13.1001,41.63593552246094,10.2088,41.63593552246094Q5.98087,41.63593552246094,2.99182,38.65173552246094Q-2.25098e-7,35.66483552246093,0,31.435835522460938Q9.00393e-7,27.20738552246094,2.99017,24.217205522460937Q5.98035,21.227035747558936,10.2088,21.227035522460938Q12.8849,21.2270355224609
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M92.96752163085938,67.95586118408202Q90.25872163085937,65.04093918408203,86.31082163085938,64.73317368408203Q85.90422163085938,64.69715073388502,85.49722163085937,64.69715118408203Q82.81587163085938,64.69715095898403,80.49079163085938,66.00873118408204Q78.24355163085937,67.27641118408204,76.87239163085937,69.44825118408203Q75.28842163085938,71.92915118408203,75.28842163085938,74.90595118408203Q75.28842163085938,77.85255118408203,76.86760163085937,80.35615118408204Q78.247
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M19.036101192092897,69.80455118408203Q20.408901192092895,72.15485118408203,20.408901192092895,74.90595118408203Q20.408901192092895,77.66235118408203,19.030901192092895,80.01625118408204Q17.700101192092895,82.32935118408203,15.382301192092896,83.69685118408204Q12.993901192092896,85.10605118408203,10.208801192092896,85.10605118408203Q5.9817011920928955,85.10605118408203,2.9909911920928955,82.11775118408204Q0.0000011920928955078125,79.12925118408204,0.0000011920928955078125
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M57.51949075317383,91.77986785888672Q58.34239075317383,93.69323785888672,58.34239075317383,95.79991785888672Q58.34239075317383,100.02271785888672,55.35739075317383,103.01011785888672Q52.36999075317383,106.00001785888672,48.142290753173825,106.00001785888672Q43.91519075317383,106.00001785888672,40.924480753173825,103.01171785888673Q37.93349052807583,100.02321785888672,37.93349075317383,95.79991785888672Q37.93348985278083,93.68754785888672,38.76086875317383,91.769527858886
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ </g>
+ </svg>
+ </>
+ );
+}
+
+export function StableIcon() {
+ return (
+ <>
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ xmlnsXlink='http://www.w3.org/1999/xlink'
+ fill='none'
+ version='1.1'
+ width='84.485595703125'
+ height='106'
+ viewBox='0 0 84.485595703125 106'
+ >
+ <g>
+ <g>
+ <path
+
d='M78.2967,12.3624L81.3571,12.2312C83.0124,12.1602,84.4119,13.4446,84.4828,15.0999C84.4847,15.1427,84.4856,15.1856,84.4856,15.2284L84.4856,60.3685Q84.4856,73.1094,77.6958,82.6965Q68.0826,96.2701,44.3668,105.381L43.3684,105.783C42.6529,106.071,41.8539,106.072,41.1374,105.787L40.0839,105.367Q0.00000762939,89.9172,0,60.358L0.00000762939,15.2914C0.00000762939,13.6345,1.34315,12.2914,3.00001,12.2914C3.04799,12.2914,3.09597,12.2925,3.14389,12.2948L6.20431,12.4418Q20.309,12.8866,
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M66.00000762939453,37.000003814697266C66.00000762939453,37.711923814697265,65.78290762939453,38.406903814697266,65.37770762939454,38.992233814697265L42.877707629394536,71.49220381469726C41.77740762939453,73.08150381469727,39.59710762939453,73.47800381469727,38.007807629394534,72.37770381469727C37.98860762939454,72.36440381469727,37.96960762939453,72.35100381469726,37.95080762939453,72.33740381469727L19.950787629394533,59.33740381469727C19.03969762939453,58.67940381469727
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ </g>
+ </svg>
+ </>
+ );
+}
+
+export function UnifiedIcon() {
+ return (
+ <>
+ <svg
+ xmlns='http://www.w3.org/2000/svg'
+ xmlnsXlink='http://www.w3.org/1999/xlink'
+ fill='none'
+ version='1.1'
+ width='106'
+ height='106'
+ viewBox='0 0 106 106'
+ >
+ <g>
+ <g>
+ <path
+
d='M69.76760811462403,19.743656607666015Q81.64990811462403,24.885626607666016,88.89960811462403,36.00811660766601Q96.30690811462402,47.37261660766602,96.30690811462402,61.161716607666015Q96.30690811462402,64.42121660766603,95.86180811462403,67.62431660766602L95.33930811462402,71.38441660766603L91.80180811462402,70.00691660766601Q89.65580811462402,69.17131660766601,87.38330811462403,69.17131660766601Q82.19260811462402,69.17131660766601,78.50160811462402,73.025116607666Q74.75
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M18.6269,63.17131423950195Q26.379,63.17131423950195,31.8377,68.87593423950196Q37.2437,74.52541423950196,37.2437,82.49481423950195Q37.2437,90.98651423950196,31.2127,96.73401423950196Q25.866,101.80771423950196,18.6269,101.80771423950196Q10.8759,101.80771423950196,5.41247,96.10591423950196Q-4.76837e-7,90.45721423950195,2.38419e-7,82.49481423950195Q-4.76837e-7,76.23571423950196,3.52533,71.18137423950195Q7.00197,66.19679423950195,12.5951,64.21403423950196Q15.5144,63.171314239
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M93.98930950927735,64.42001423950195Q99.34840950927735,66.53009423950195,102.64680950927735,71.42559423950195Q106.00000950927733,76.40241423950195,106.00000950927733,82.49481423950195Q106.00000950927733,90.45741423950196,100.59350950927734,96.10491423950195Q95.13410950927735,101.80771423950196,87.38320950927735,101.80771423950196Q80.33220950927735,101.80771423950196,75.07329950927735,96.98581423950196Q68.75630903244034,91.20691423950196,68.75630974769635,82.4948142395019
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ <g>
+ <path
+
d='M53.254162115478515,0Q61.00486211547852,0,66.46536211547851,5.70908Q71.8709621154785,11.3606,71.8709621154785,19.3235Q71.8709621154785,21.2045,71.52486211547851,23.0498Q70.26276211547852,29.7461,65.19836211547852,34.1421Q60.020862115478515,38.6364,53.254162115478515,38.6364Q46.490062115478516,38.6364,41.309862115478516,34.1444Q36.24562211547852,29.7531,34.97470311547852,23.0678Q34.627262115478516,21.215,34.627262115478516,19.3235Q34.627262115478516,11.3609,40.03880211547
[...]
+ fill-rule='evenodd'
+ fill='currentColor'
+ fill-opacity='1'
+ />
+ </g>
+ </g>
+ </svg>
+ </>
+ );
+}
diff --git a/src/pages/home/feature.data.jsx b/src/pages/home/feature.data.jsx
new file mode 100644
index 00000000..db8ca469
--- /dev/null
+++ b/src/pages/home/feature.data.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+ DevelopmentIcon,
+ EasyIcon,
+ EcosystemIcon,
+ StableIcon,
+ StreamingIcon,
+ UnifiedIcon,
+} from './FeatureIcon';
+
+export const featureCardStyle = {
+ development: {
+ style: {
+ '--feature-icon-color': 'rgb(65, 146, 246)',
+ '--feature-icon-shadow': 'rgba(65, 146, 246, 0.2)',
+ '--animation-delay': '0ms',
+ },
+ icon: <DevelopmentIcon />,
+ },
+ streaming: {
+ style: {
+ '--feature-icon-color': 'rgb(173, 103, 247)',
+ '--feature-icon-shadow': 'rgba(173, 103, 247, 0.2)',
+ '--animation-delay': '1s',
+ },
+ icon: <StreamingIcon />,
+ },
+ unified: {
+ style: {
+ '--feature-icon-color': 'rgb(119, 216, 128)',
+ '--feature-icon-shadow': 'rgba(119, 216, 128, 0.2)',
+ '--animation-delay': '1.8s',
+ },
+ icon: <UnifiedIcon />,
+ },
+ ecosystem: {
+ style: {
+ '--feature-icon-color': 'rgb(255, 125, 0)',
+ '--feature-icon-shadow': 'rgba(255, 125, 0, 0.2)',
+ '--animation-delay': '2.4s',
+ },
+ icon: <EcosystemIcon />,
+ },
+ easy: {
+ style: {
+ '--feature-icon-color': 'rgb(22, 93, 255)',
+ '--feature-icon-shadow': 'rgba(22, 93, 255, 0.2)',
+ '--animation-delay': '3s',
+ },
+ icon: <EasyIcon />,
+ },
+ stable: {
+ style: {
+ '--feature-icon-color': 'rgb(76, 175, 80)',
+ '--feature-icon-shadow': 'rgba(76, 175, 80, 0.2)',
+ '--animation-delay': '3.8s',
+ },
+ icon: <StableIcon />,
+ },
+};
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 0d67bdb2..e71c9c2d 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -20,6 +20,7 @@ import { useTranslation } from
'@site/src/hooks/useTranslation';
import './style.less';
import BannerVideo from '@site/src/components/BannerVideo';
+import { featureCardStyle } from './feature.data';
export default function HomePage() {
const INSTALL_COMMAND = `curl -L https://streampark.apache.org/quickstart.sh
| sh`;
@@ -40,43 +41,43 @@ export default function HomePage() {
};
}, []);
return (
- <div className="homepage-wrapper overflow-hidden">
+ <div className='homepage-wrapper overflow-hidden'>
<div
- data-aos="fade-down"
- className="absolute top-[60px] right-0 h-[300px] w-[300px]
overflow-hidden z-[-1]"
+ data-aos='fade-down'
+ className='absolute top-[60px] right-0 h-[300px] w-[300px]
overflow-hidden z-[-1]'
>
- <TopWaveImage className="absolute bottom-0 right-0 w-[1400px]
-rotate-6" />
+ <TopWaveImage className='absolute bottom-0 right-0 w-[1400px]
-rotate-6' />
</div>
- <section className="banner-section container mt-16 flex flex-col">
+ <section className='banner-section container mt-16 flex flex-col'>
<BannerTitle />
<div
- className="flex justify-center space-x-6 text-sm"
- data-aos="fade-right"
- data-aos-duration="6000"
- data-aos-offset="100"
+ 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>
</div>
</section>
- <Browser className="!h-auto bg-shadow-primary">
+ <Browser className='!h-auto bg-shadow-primary'>
<BannerVideo />
</Browser>
- <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">
+ <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
</div>
- <div className="mx-auto px-2">
+ <div className='mx-auto px-2'>
<ShellCommand
command={INSTALL_COMMAND}
- className="max-w-[80vw] md:max-w-full"
+ 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">
+ <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>
- <a href="/download" className="text-primary-400">
+ <a href='/download' className='text-primary-400'>
download page
</a>
<span>.</span>
@@ -84,43 +85,45 @@ export default function HomePage() {
</div>
</section>
- <div className="flex justify-end" data-aos="slide-left">
- <BottomWaveImage className="h-[120px] md:h-[250px] w-full shrink-0
mt-[36px] md:mt-[75px]" />
- <BottomWaveImage className="h-[120px] md:h-[250px] w-full shrink-0" />
+ <div className='flex justify-end' data-aos='slide-left'>
+ <BottomWaveImage className='h-[120px] md:h-[250px] w-full shrink-0
mt-[36px] md:mt-[75px]' />
+ <BottomWaveImage className='h-[120px] md:h-[250px] w-full shrink-0' />
</div>
- <section className="lg:pb-20">
+ <section className='lg:pb-20'>
<SectionTitle title={t.users.title} description={''} />
<BrowserOnly>{() => <TrustedUsers />}</BrowserOnly>
</section>
- <section className="p-0">
+ <section className='p-0'>
<BrowserOnly>{() => <AchievementBanner />}</BrowserOnly>
</section>
- <section className="lg:py-20 bg-[#f7f9fe] dark:bg-[#1a1b1c]">
- <div className="w-full overflow-hidden">
+ <section className='lg:py-20 bg-[#f7f9fe] dark:bg-[#1a1b1c]'>
+ <div className='w-full overflow-hidden'>
<SectionTitle
title={t.common.coreFeatures}
description={t.common.coreFeaturesDesc}
/>
- <div className="flex-center flex-wrap">
+ <div className='flex-center flex-wrap'>
{t.feature.map((feature, i) => (
<FeatureCard
key={i}
+ id={feature.id}
title={feature.title}
- icon={feature.icon}
+ icon={featureCardStyle[feature.id]?.icon}
+ style={featureCardStyle[feature.id]?.style}
content={feature.details}
animationDelay={(i % 3) * 100}
- className="hover:-translate-y-[10px] transition-transform
ease-in-out duration-300"
+ className='hover:-translate-y-[10px] transition-transform
ease-in-out duration-300'
/>
))}
</div>
</div>
</section>
- <section className="lg:py-20">
- <div className="w-full overflow-hidden">
+ <section className='lg:py-20'>
+ <div className='w-full overflow-hidden'>
<SectionTitle
title={t.common.development}
description={t.common.developmentDesc}
diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
index aceecc9f..9c7440ae 100644
--- a/src/pages/home/languages.json
+++ b/src/pages/home/languages.json
@@ -23,31 +23,37 @@
},
"feature": [
{
+ "id": "development",
"title": "流应用开发框架",
"icon": "lni-layers",
"details": "Apache StreamPark™ 提供了流作业开发的脚手架，简化了 Apache Flink® 和 Spark™
作业的代码开发流程。集成了一套即插即用的连接器，降低了用户学习和开发的复杂度，让开发更加简单高效。"
},
{
+ "id": "streaming",
"title": "一站式实时计算平台",
"icon": "lni-shuffle",
"details": "Apache StreamPark™
提供了流作业操作管理平台，作为核心能力，提供了涵盖从开发构建、部署上线、状态管理与恢复到操作运维的全生命周期的能力，集等众多功能于一身，是一站式的流计算产品。"
},
{
+ "id": "unified",
"title": "流批融合",
"icon": "lni-display-alt",
"details": "Apache Apache StreamPark™ 既支持流计算引擎 Apache Flink®，又支持微批处理引擎
Apache Spark™，真正实现了流批一体化融合，成为业界首个在同一平台上兼容多引擎、多版本的工具。"
},
{
+ "id": "ecosystem",
"title": "丰富的生态组件",
"icon": "lni-display-alt",
"details": "Apache StreamPark™ 已经与众多开源工具做了良好的支持和集成，支持包括
Flink®、Spark™、Paimon™、Doris、Flink CDC 等在内的诸多生态开源项目，为用户提供了更灵活的技术选择。"
},
{
+ "id": "easy",
"title": "极简易用",
"icon": "lni-display-alt",
"details": "Apache StreamPark™
致力于降低用户的学习和使用门槛，即使是初学者也能在几分钟内快速上手。这种极简的开发体验，让更多企业和开发者能够轻松驾驭实时计算技术，释放数据价值。"
},
{
+ "id": "stable",
"title": "成熟稳定",
"icon": "lni-display-alt",
"details": "Apache StreamPark™
经历多家企业，大规模使用和生产环境的洗礼，稳定健壮，具备秒级作业状态同步、实时监控以及告警通知能力，有效保障了系统的稳定性，为项目持续发展奠定了坚实基础。"
@@ -97,35 +103,41 @@
},
"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."
+ "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."
},
"feature": [
{
+ "id": "development",
"title": "Development Framework",
"icon": "lni-layers",
"details": "Provides a framework to simplify Apache Flink® and Apache
Spark™ job development, with plug-and-play connectors that reduce the learning
curve and development complexity, improving efficiency."
},
{
+ "id": "streaming",
"title": "Streaming Platform",
- "icon": "lni-layers",
+ "icon": "lni-shuffle",
"details": "Provides a streaming job operation and management
platform. It covers the entire lifecycle — from development and build,
deployment and launch, state management and maintenance."
},
{
+ "id": "unified",
"title": "Unified Batch & Streaming",
- "icon": "lni-shuffle",
+ "icon": "lni-display-alt",
"details": "Supports both Apache Flink® and Apache Spark™, enabling
seamless integration of streaming and batch processing, with multi-engine and
multi-version support on a single platform."
},
{
+ "id": "ecosystem",
"title": "Rich Ecosystem",
- "icon": "lni-layers",
+ "icon": "lni-display-alt",
"details": "Integrates with a variety of open-source tools, including
Flink®, Spark™, Paimon™, Doris, and Flink CDC, offering users greater
flexibility in technology choices."
},
{
+ "id": "easy",
"title": "Easy to use",
- "icon": "lni-layers",
+ "icon": "lni-display-alt",
"details": "Apache StreamPark™ is designed to reduce the learning
curve and entry barrier. With just one service, it is easy to deploy. Even
beginners can begin within minutes."
},
{
+ "id": "stable",
"title": "Mature and Stable",
"icon": "lni-display-alt",
"details": "Widely deployed in large-scale production environments,
offering second-level job state tracking, real-time monitoring, and alert
notifications to ensure stability and support ongoing project growth."
@@ -154,4 +166,4 @@
"more": "More Partners"
}
}
-}
+}
