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 <[email protected]> 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" } } -} +}
