You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by kr...@apache.org on 2025/02/11 03:26:36 UTC
(streampark-website) branch feature-icon created (now 7f82e67e)
This is an automated email from the ASF dual-hosted git repository.
kriszu pushed a change to branch feature-icon
in repository https://gitbox.apache.org/repos/asf/streampark-website.git
at 7f82e67e style: change feature icon and color
This branch includes the following new commits:
new 7f82e67e style: change feature icon and color
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(streampark-website) 01/01: style: change feature icon and color
Posted by kr...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
kriszu pushed a commit to branch feature-icon
in repository https://gitbox.apache.org/repos/asf/streampark-website.git
commit 7f82e67e2a11fe68a58fdf1e1aa34430716935a3
Author: kriszu <39...@users.noreply.github.com>
AuthorDate: Tue Feb 11 11:26:22 2025 +0800
style: change feature icon and color
---
src/components/FeatureCard/index.tsx | 14 +-
src/components/FeatureCard/styles.module.css | 42 ++--
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, 442 insertions(+), 69 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..4a3f74dc 100644
--- a/src/components/FeatureCard/styles.module.css
+++ b/src/components/FeatureCard/styles.module.css
@@ -6,23 +6,8 @@
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 {
@@ -33,6 +18,7 @@
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..84074020
--- /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, 193, 7)',
+ '--feature-icon-shadow': 'rgba(255, 193, 7, 0.2)',
+ '--animation-delay': '2.4s',
+ },
+ icon: <EcosystemIcon />,
+ },
+ easy: {
+ style: {
+ '--feature-icon-color': 'rgb(76, 175, 80)',
+ '--feature-icon-shadow': 'rgba(76, 175, 80, 0.2)',
+ '--animation-delay': '3s',
+ },
+ icon: <EasyIcon />,
+ },
+ stable: {
+ style: {
+ '--feature-icon-color': 'rgb(244, 67, 54)',
+ '--feature-icon-shadow': 'rgba(244, 67, 54, 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"
}
}
-}
+}