refactor: simplify why Rspack card

Author: chenjiahan

src/why-rspack/index.module.scss

@@ -1,15 +1,8 @@
 // ---------- responsive layout
-// XXL
-@media screen and (min-width: 1441px) {
-  .featureCard {
-    flex: 1 0 30% !important;
-  }
-}
-
 // XL
-@media screen and (min-width: 1281px) and (max-width: 1440px) {
+@media screen and (min-width: 1281px) {
   .featureCard {
-    flex: 1 0 30% !important;
+    flex: 1 0 20% !important;
   }
 }
 
@@ -123,77 +116,6 @@
   }
 }
 
-.whyRspackCard {
-  flex: 2 0 60% !important;
-  align-self: stretch;
-
-  .whyRspack {
-    box-sizing: border-box;
-    height: 100%;
-    display: flex;
-    padding: 32px;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-
-    // style
-    border-radius: 20px;
-    border: 1px solid var(--rs-why-rspack-card-stroke);
-    background: var(--rs-why-rspack-card-gradient);
-
-    .whyRspackBg {
-      width: 250px;
-      height: 75%;
-      position: absolute;
-      bottom: 32px;
-      right: 32px;
-      z-index: 0;
-      user-select: none;
-    }
-
-    .whyRspackContent {
-      display: flex;
-      padding: 16px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 16px;
-
-      .whyRspackTitle {
-        font-size: 42px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        letter-spacing: -2px;
-        margin: 0;
-        // style
-        background: var(
-          --Linear-Text,
-          linear-gradient(278deg, #ff8b00 52.48%, #f93920 98.12%)
-        );
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-
-      .whyRspackDescription {
-        // text
-        font-size: 19px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 40px; /* 166.667% */
-        margin-top: 4px;
-
-        // style
-        background: var(--rs-why-rspack-description-bg);
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-  }
-}
-
 .features {
   width: 100%;
   display: flex;
@@ -220,28 +142,22 @@
       border-radius: 20px;
       border: 1px solid var(--rs-why-rspack-card-stroke);
       background: var(--rs-why-rspack-card-gradient);
-      padding: 32px;
+      padding: 28px;
 
       // reset
       text-decoration: none;
 
       .featureIcon {
-        background: url('https://assets.rspack.dev/rspack/assets/landingpage-why-rspack-card-bg.png')
-          no-repeat;
-        background-size: 100% 100%;
-
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 100%;
         width: 100%;
-        height: 150px;
 
         user-select: none;
 
         .featureIconImg {
           width: 150px;
-          height: 120px;
+          height: 110px;
         }
       }
 
@@ -256,7 +172,7 @@
         .featureTitle {
           color: var(--rs-why-rspack-title-color);
 
-          font-size: 20px;
+          font-size: 17px;
           font-style: normal;
           font-weight: 700;
           line-height: 1.5;
@@ -268,7 +184,7 @@
         .featureDescription {
           color: var(--rs-why-rspack-desc-color);
 
-          font-size: 15px;
+          font-size: 14px;
           font-style: normal;
           font-weight: 400;
           line-height: 24px; /* 150% */

src/why-rspack/index.tsx

@@ -12,88 +12,6 @@ export type Feature = {
   lottieJsonData?: any;
 };
 
-type WhyRspackCardProps = {
-  title: string;
-  description: string;
-};
-
-const WhyRspackCard: FC<WhyRspackCardProps> = memo(({ title, description }) => {
-  const {
-    container,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseMove,
-    onTouchEnd,
-    onTouchMove,
-    onTouchStart,
-    outerContainer,
-    ref,
-    shine,
-    shineBg,
-  } = useCardAnimation();
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        transform: outerContainer,
-        transformStyle: 'preserve-3d',
-        zIndex: 6,
-        WebkitTapHighlightColor: 'rgba(#000, 0)',
-      }}
-      className={styles.whyRspackCard}
-      ref={ref as any}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onMouseMove={onMouseMove}
-      onTouchMove={onTouchMove}
-      onTouchEnd={onTouchEnd}
-      onTouchStart={onTouchStart}
-    >
-      <div
-        className={styles.whyRspack}
-        style={{
-          transform: container,
-          position: 'relative',
-          transition: 'all 0.2s ease-out',
-        }}
-      >
-        <div
-          className="shine"
-          style={{
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            right: '0',
-            bottom: '0',
-            borderRadius: '20px',
-            zIndex: '8',
-            ...(shine
-              ? {
-                  transform: shine,
-                }
-              : {}),
-            ...(shineBg
-              ? {
-                  background: shineBg,
-                }
-              : {}),
-          }}
-        />
-        <div className={styles.whyRspackContent}>
-          <h3 className={styles.whyRspackTitle}>{title}</h3>
-          <p className={styles.whyRspackDescription}>{description}</p>
-          <img
-            className={styles.whyRspackBg}
-            src="https://assets.rspack.dev/rspack/assets/landingpage-why-rspack-card-why-bg.png"
-            alt="bg"
-          />
-        </div>
-      </div>
-    </div>
-  );
-});
-
 const FeatureItem = memo(
   ({ feature, LinkComp }: { feature: Feature; LinkComp: LinkComp }) => {
     const { description, img, title, url, lottieJsonData } = feature;
@@ -228,19 +146,11 @@ const FeatureList: FC<FeatureListProps> = memo(({ LinkComp, features }) => {
   );
 });
 
-export type WhyRspackProps = FeatureListProps & Partial<WhyRspackCardProps>;
+export type WhyRspackProps = FeatureListProps;
 
-export const WhyRspack: FC<WhyRspackProps> = ({
-  title,
-  description,
-  features,
-  LinkComp,
-}) => {
+export const WhyRspack: FC<WhyRspackProps> = ({ features, LinkComp }) => {
   return (
     <div className={styles.features}>
-      {title && description ? (
-        <WhyRspackCard title={title} description={description} />
-      ) : null}
       <FeatureList features={features} LinkComp={LinkComp} />
     </div>
   );

stories/WhyRspack.stories.tsx

@@ -13,50 +13,45 @@ import Lightning from './why-rspack-assets/Lightning.svg';
 import SpeedometerJson from './why-rspack-assets/Speedometer.json';
 import Speedometer from './why-rspack-assets/Speedometer.svg';
 
+const description =
+  'Using Rspack to bring you the ultimate development experience.';
+
 const features: Feature[] = [
   {
     img: Speedometer,
     url: '/guide/start/introduction',
     title: 'FastStartup',
-    description: 'FastStartupDesc',
+    description,
     lottieJsonData: SpeedometerJson,
   },
   {
     img: Lightning,
     url: '/guide/start/introduction',
     title: 'LightningHMR',
-    description: 'LightningHMRDesc',
+    description,
     lottieJsonData: LightningJson,
   },
   {
     img: FrameCheck,
     url: '/guide/tech/react',
     title: 'FrameworkAgnostic',
-    description: 'FrameworkAgnosticDesc',
+    description,
     lottieJsonData: FrameCheckJson,
   },
   {
     img: Compatible,
     url: '/guide/compatibility/plugin',
     title: 'WebpackCompatible',
-    description: 'WebpackCompatibleDesc',
+    description,
     lottieJsonData: CompatibleJson,
   },
 ];
 
-const title = 'Why Rspack?';
-const description =
-  'Rspack is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.';
-
 export const WhyRspackStory = () => {
   return (
-    <section className={containerStyle} key={title}>
+    <section className={containerStyle}>
       <div className={innerContainerStyle}>
-        <WhyRspack
-          features={features}
-          title={title}
-          description={description}
-        />
+        <WhyRspack features={features} />
       </div>
     </section>
   );
@@ -109,7 +104,7 @@ const rsbuildFeatures = [
 
 export const WhyRspackStoryWithoutFirstCardAndLottie = () => {
   return (
-    <section className={containerStyle} key={title}>
+    <section className={containerStyle}>
       <div className={innerContainerStyle}>
         <WhyRspack features={rsbuildFeatures} />
       </div>