-
-
+
{t('benchmarkTitle')}
-{t('benchmarkDesc')}
+
+
+
{t('benchmarkTitle')}
+{t('benchmarkDesc')}
diff --git a/website/theme/components/Landingpage/BuiltWithRspack/index.module.scss b/website/theme/components/Landingpage/BuiltWithRspack/index.module.scss
deleted file mode 100644
index a1abd9d8ccc8..000000000000
--- a/website/theme/components/Landingpage/BuiltWithRspack/index.module.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-// M
-@media screen and (min-width: 601px) and (max-width: 834px) {
- .title {
- font-size: 32px !important;
- line-height: 48px !important;
- }
- .innerContainer {
- background: url('https://assets.rspack.dev/rspack/assets/landingpage-built-with-rspack-bg-m.png')
- no-repeat !important;
- background-size: 100% 100% !important;
- }
- .logo {
- min-width: 200px !important;
- }
-}
-
-// S
-@media screen and (max-width: 600px) {
- .title {
- font-size: 32px !important;
- line-height: 48px !important;
- }
- .innerContainer {
- background: url('https://assets.rspack.dev/rspack/assets/landingpage-built-with-rspack-bg-m.png')
- no-repeat !important;
- background-size: 100% 100% !important;
- }
- .logo {
- min-width: 160px !important;
- }
-}
-
-.innerContainer {
- width: 100%;
- display: flex;
- padding: 32px 0px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 24px;
- background: url('https://assets.rspack.dev/rspack/assets/landingpage-built-with-rspack-bg.png')
- no-repeat;
- background-size: 100% 100%;
- background-position: center center;
-}
-
-.title {
- text-align: center;
-
- /* Style 10 */
-
- font-size: 48px;
- font-style: normal;
- font-weight: 700;
- line-height: normal; /* 100% */
-
- background: linear-gradient(279deg, #ff8b00 27.12%, #f93920 72.56%);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
-}
-
-.logos {
- display: flex;
- align-items: flex-start;
- align-self: stretch;
- flex-wrap: wrap;
- filter: var(--landingpage-invert-filter);
- gap: 16px;
-
- .logo {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 8px;
- min-height: 140px;
- flex: 1 0;
- align-self: stretch;
- }
-
- .logoText {
- color: #0b0c0e;
- text-align: center;
-
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 28px; /* 116.667% */
- }
-}
diff --git a/website/theme/components/Landingpage/BuiltWithRspack/index.tsx b/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
index 91f4cb5220fc..01a1d927993d 100644
--- a/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
+++ b/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
@@ -1,14 +1,17 @@
+import { BuiltWithRspack as BaseBuiltWithRspack } from '@rstack-dev/doc-ui/built-with-rspack';
+import {
+ containerStyle,
+ innerContainerStyle,
+} from '@rstack-dev/doc-ui/section-style';
import { memo } from 'react';
import { Link } from 'rspress/theme';
import { useI18n } from '../../../i18n';
-import sharedStyles from '../shared.module.scss';
import amazonLogo from './assets/amazon.svg';
import bitDevLogo from './assets/bit.svg';
import bytedanceLogo from './assets/bytedance.svg';
import discordLogo from './assets/discord.svg';
import intuitLogo from './assets/intuit.svg';
import microsoftLogo from './assets/microsoft.svg';
-import styles from './index.module.scss';
type Company = {
name: string;
@@ -58,41 +61,19 @@ const companyList: Company[] = [
},
];
-const CompanyItem = ({ item }: { item: Company }) => {
- const { logo, name, url, text, width } = item;
- return (
-
- 
- {text !== undefined ? (
- {text}
- ) : (
- <>
- )}
-
- );
-};
-
-const BuiltWithRsPack: React.FC = memo(() => {
+const BuiltWithRspack: React.FC = memo(() => {
const t = useI18n();
return (
-
-
-
-
+
);
});
-export default BuiltWithRsPack;
+export default BuiltWithRspack;
diff --git a/website/theme/components/Landingpage/FullyFeatured/index.module.scss b/website/theme/components/Landingpage/FullyFeatured/index.module.scss
deleted file mode 100644
index 641e7b4ca88a..000000000000
--- a/website/theme/components/Landingpage/FullyFeatured/index.module.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-// M
-@media screen and (min-width: 601px) and (max-width: 1000px) {
- .features {
- flex-wrap: wrap !important;
- gap: 32px 16px !important;
- }
- .featureCard {
- max-width: 50% !important;
- flex: 1 0 45% !important;
- }
- .main {
- gap: 32px !important;
- }
-}
-
-// S
-@media screen and (max-width: 600px) {
- .features {
- flex-wrap: wrap;
- }
- .featureCard {
- max-width: 50% !important;
- flex: 1 0 40% !important;
- flex-direction: column !important;
- justify-content: center !important;
- align-items: center !important;
-
- .featureTitle {
- text-align: center !important;
- }
- .featureDescription {
- display: none !important;
- }
- }
-
- .main {
- gap: 16px !important;
- }
-}
-
-.main {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 32px;
-}
-
-.features {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 16px;
-
- .featureCard {
- display: flex;
- flex: 1 1 25%;
- align-items: flex-start;
- gap: 16px;
- min-height: 110px;
-
- &:hover {
- transition: all 0.2s;
- transform: scale(1.04, 1.04);
- opacity: 0.8;
- }
-
- .icon {
- filter: var(--landingpage-invert-filter);
- display: flex;
- width: 32px;
- height: 32px;
- justify-content: center;
- align-items: center;
- }
-
- .featureContent {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- text-align: left;
- gap: 8px;
-
- .featureTitle {
- color: var(--landingpage-title-color);
-
- font-size: 18px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%; /* 27px */
- }
-
- .featureDescription {
- color: var(--landingpage-desc-color);
-
- font-size: 15px;
- font-style: normal;
- font-weight: 400;
- line-height: 23.8px; /* 158.667% */
- }
- }
- }
-}
diff --git a/website/theme/components/Landingpage/FullyFeatured/index.tsx b/website/theme/components/Landingpage/FullyFeatured/index.tsx
index 6bd2a82b234a..a7ac4cb0d6c9 100644
--- a/website/theme/components/Landingpage/FullyFeatured/index.tsx
+++ b/website/theme/components/Landingpage/FullyFeatured/index.tsx
@@ -1,7 +1,14 @@
+import { FullyFeatured as BaseFullyFeatured } from '@rstack-dev/doc-ui/fully-featured';
+import {
+ containerStyle,
+ descStyle,
+ innerContainerStyle,
+ titleAndDescStyle,
+ titleStyle,
+} from '@rstack-dev/doc-ui/section-style';
import { memo } from 'react';
import { Link } from 'rspress/theme';
import { useI18n, useI18nUrl } from '../../../i18n';
-import sharedStyles from '../shared.module.scss';
import arrow from './assets/arrow.svg';
import javascriptApi from './assets/javascriptApi.svg';
import layer from './assets/layer.svg';
@@ -14,7 +21,6 @@ import server from './assets/server.svg';
import setting from './assets/setting.svg';
import swc from './assets/swc.svg';
import tree from './assets/tree.svg';
-import styles from './index.module.scss';
type Feature = {
icon: string;
@@ -109,34 +115,16 @@ const FullyFeatured = memo(() => {
];
return (
-
-
{t('builtWithRspack')}
-
- {companyList.map(i => {
- return
+
+
-
-
- {t('fullyFeaturedTitle')}
-{t('fullyFeaturedDesc')}
-
- {[FeatureRow1, FeatureRow2, FeatureRow3].map((row, index) => {
- return (
-
+
);
diff --git a/website/theme/components/Landingpage/Hero/BackgroundStar.tsx b/website/theme/components/Landingpage/Hero/BackgroundStar.tsx
deleted file mode 100644
index 7ff873ee6ece..000000000000
--- a/website/theme/components/Landingpage/Hero/BackgroundStar.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import styles from './index.module.scss';
-
-const BackgroundStar = ({
- top,
- left,
- pageX,
- pageY,
- size,
-}: {
- top: number | string;
- left: number | string;
- pageX: number | null;
- pageY: number | null;
- size: number;
-}) => {
- const ref = useRef();
- const [transformX, setTransformX] = useState(0);
- const [transformY, setTransformY] = useState(0);
- useEffect(() => {
- if (ref.current) {
- const { x, y } = ref.current.getBoundingClientRect();
-
- if (pageX && pageY) {
- const distanceX = pageX - x;
- const distanceY = pageY - y;
- if (Math.abs(distanceX) < 100 && Math.abs(distanceY) < 100) {
- setTransformX(distanceX);
- setTransformY(distanceY);
- } else {
- setTransformX(0);
- setTransformY(0);
- }
- }
- }
- }, [pageX, pageY]);
-
- return (
- ();
- const [pageX, setPageX] = useState(null);
- const [pageY, setPageY] = useState(null);
-
- const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
- setPageX(pageX);
- setPageY(pageY);
- };
-
- return {
- ref,
- pageX,
- pageY,
- onMouseMove: handleMove,
- };
-};
const Hero = memo(() => {
const tUrl = useI18nUrl();
@@ -73,51 +16,17 @@ const Hero = memo(() => {
navigate(tUrl('/guide/start/introduction'));
}, [tUrl, navigate]);
- const { pageX, pageY, ref, onMouseMove } = useMouseMove();
-
return (
-
- {positions.map(([top, left], i) => {
- return (
-
+
-
- {row.map(({ icon, description, link, title }, index) => (
-
- 
-
- );
- })}
+
-
-
- ))}
- {title}
-{description}
-
+
+
+ {t('fullyFeaturedTitle')}
+{t('fullyFeaturedDesc')}
-
-
- );
-};
-
-export default BackgroundStar;
diff --git a/website/theme/components/Landingpage/Hero/index.module.scss b/website/theme/components/Landingpage/Hero/index.module.scss
deleted file mode 100644
index 22dba7e83ae0..000000000000
--- a/website/theme/components/Landingpage/Hero/index.module.scss
+++ /dev/null
@@ -1,189 +0,0 @@
-// S
-@media screen and (max-width: 600px) {
- .logo {
- width: 120px !important;
- height: 100px !important;
- }
- .ovalBg {
- width: 168px !important;
- height: 140px !important;
- }
- .buttonGroup {
- display: flex;
- padding-top: 16px;
- flex-direction: column;
- align-items: center;
- gap: 16px;
- align-self: stretch;
- }
- .button {
- width: 100% !important;
- }
- .innerHero {
- height: auto !important;
- padding: 24px !important;
- }
- .title {
- font-size: 32px !important;
- line-height: normal !important;
- }
- .subtitle {
- font-size: 20px !important;
- line-height: normal !important;
- }
- .description {
- font-size: 16px !important;
- line-height: 20px;
- }
-
- .backgroundStarContainer {
- pointer-events: none;
- transform: scale(0.6);
- }
-}
-
-.hero {
- display: flex;
- justify-content: center;
- align-items: center;
- background-size: cover;
- position: relative;
-}
-
-.innerHero {
- display: flex;
- width: 100%;
- height: 646px;
- padding: 64px 0px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 16px;
-}
-
-.logo {
- width: 216px;
- height: 180px;
- position: relative;
- user-select: none;
-
- .ovalBg {
- width: 303px; // 216.225px * 1.4
- height: 252px; // 180px * 1.4
- z-index: -1;
- position: absolute;
- // our logo center is on the right and down
- top: calc(50% + 5px);
- left: calc(50% + 5px);
- transform: translate(-50%, -50%);
- background-image: url('./ovalBg.svg');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- background-position: center;
- }
-}
-
-.title {
- text-align: center;
-
- font-size: 72px;
- font-style: normal;
- font-weight: 700;
- line-height: 93.6px; /* 130% */
-
- // background
- background: var(
- --orange-gradient,
- linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
- );
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
-}
-
-.subtitle {
- color: var(--landingpage-title-color, #0b0c0e);
- text-align: center;
-
- font-size: 50px;
- font-style: normal;
- font-weight: 700;
- line-height: 72px; /* 144% */
-}
-
-.description {
- color: var(--landingpage-desc-color, #6b7075);
- text-align: center;
- /* Style 5 */
-
- font-size: 24px;
- font-style: normal;
- font-weight: 400;
-}
-
-.buttonGroup {
- display: flex;
- justify-content: center;
- gap: 10px;
- margin-top: 20px;
-}
-
-.button {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 12px 24px 12px 24px;
- border-radius: 25px;
- text-align: center;
-
- font-size: 16px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%; /* 24px */
- text-transform: capitalize;
-
- &:hover {
- transition: all 0.2s;
- opacity: 0.8;
- }
-
- &:active {
- opacity: 0.6;
- }
-}
-
-.buttonPrimary {
- // style
- background: var(
- --orange-gradient,
- linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
- );
-
- // text
- color: #fff;
-}
-
-.buttonSecondary {
- // style
- border: 1.5px solid var(--orange-gradient, #ff8b00);
- // text
- color: var(--landingpage-title-color, #0b0c0e);
-}
-
-.backgroundStarContainer {
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-
- user-select: none;
- pointer-events: none;
-
- .backgroundStar {
- transition: all 0.2s;
- filter: blur(2px);
-
- user-select: none;
- pointer-events: none;
- }
-}
diff --git a/website/theme/components/Landingpage/Hero/index.tsx b/website/theme/components/Landingpage/Hero/index.tsx
index 09f800cea14f..31b2272f88ce 100644
--- a/website/theme/components/Landingpage/Hero/index.tsx
+++ b/website/theme/components/Landingpage/Hero/index.tsx
@@ -1,64 +1,7 @@
-import { memo, useCallback, useRef, useState } from 'react';
+import { Hero as BaseHero } from '@rstack-dev/doc-ui/hero';
+import { memo, useCallback } from 'react';
import { useNavigate } from 'rspress/runtime';
import { useI18n, useI18nUrl } from '../../../i18n';
-import BackgroundStar from './BackgroundStar';
-import styles from './index.module.scss';
-
-const positions = [
- [91.4, 22.9],
- [36, 67.6],
- [94.1, 47.7],
- [33.8, 32.5],
- [43.1, 77.6],
- [9.8, 73.4],
- [16.1, 17.1],
- [1, 10],
- [88.3, 44.9],
- [19.3, 79],
- [28.5, 11.8],
- [94.6, 44.9],
- [53.8, 3.4],
- [41.7, 20],
- [56.9, 80.6],
- [16.4, 83.4],
- [39.4, 66.8],
- [19, 18.4],
- [25.1, 28.1],
- [18.9, 35.6],
- [32.9, 12.3],
- [21.2, 72.8],
- [83.3, 79.8],
- [71.4, 36.8],
- [62.2, 50.4],
- [45.4, 13.7],
- [61.1, 28.5],
- [18.2, 64.1],
- [40.7, 34.7],
- [87.6, 20.7],
- [78.3, 30.8],
- [84.4, 58.2],
- [74.2, 74.5],
- [12.4, 66.4],
- [68.2, 41.6],
-];
-
-const useMouseMove = () => {
- const ref = useRef
-
-
- 
-
-
-
-
- Rspack
-{t('heroSlogan')}
-{t('heroSubSlogan')}
-
-
-
-
-
-
-
- {t('toolStackTitle')}
-{t('toolStackDesc')}
-
- {tools.map(({ name, desc, logo, url }) => {
- return (
-
-
-
+
);
diff --git a/website/theme/components/Landingpage/WhyRspack/index.module.scss b/website/theme/components/Landingpage/WhyRspack/index.module.scss
deleted file mode 100644
index 2859c43d1708..000000000000
--- a/website/theme/components/Landingpage/WhyRspack/index.module.scss
+++ /dev/null
@@ -1,237 +0,0 @@
-// ---------- 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) {
- .featureCard {
- flex: 1 0 30% !important;
- }
-}
-
-// L
-@media screen and (min-width: 835px) and (max-width: 1280px) {
- .featureCard {
- min-width: 40% !important;
- max-width: 50% !important;
- }
-}
-
-// M
-@media screen and (min-width: 601px) and (max-width: 834px) {
- .whyRspack {
- padding: 16px !important;
- .whyRspackTitle {
- font-size: 32px !important;
- font-weight: 700 !important;
- line-height: normal !important;
- letter-spacing: -1.28px !important;
- }
- .whyRspackDescription {
- font-size: 20px !important;
- font-style: normal !important;
- font-weight: 400 !important;
- line-height: normal !important;
- }
- }
- .featureCard {
- min-width: 45% !important;
- max-width: 50% !important;
- .featureCardInner {
- padding: 16px !important;
- }
- .featureDescription {
- font-size: 14px !important;
- }
- }
-}
-
-// S
-@media screen and (max-width: 600px) {
- .whyRspack {
- min-width: 100% !important;
- padding: 16px !important;
- .whyRspackTitle {
- font-size: 24px !important;
- font-style: normal !important;
- font-weight: 700 !important;
- line-height: normal !important;
- letter-spacing: -0.96px !important;
- }
- .whyRspackDescription {
- font-size: 16px !important;
- font-style: normal !important;
- font-weight: 400 !important;
- line-height: normal !important;
- }
- }
- .featureCard {
- min-width: 100% !important;
- .featureCardInner {
- padding: 16px !important;
- }
- .featureDescription {
- font-size: 14px !important;
- }
- }
-
- // extra
- .whyRspackBg {
- max-width: 50% !important;
- max-height: 50% !important;
- }
-}
-
-.whyRspackCard {
- flex: 2 0 60% !important;
- align-self: stretch;
-
- .whyRspack {
- width: 100%;
- height: 100%;
- position: relative;
- display: flex;
- padding: 32px;
- flex-direction: column;
- align-items: center;
- gap: 16px;
-
- // style
- border-radius: 20px;
- border: 1px solid var(--why-rspack-card-stroke);
- background: var(--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;
- // 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: 20px;
- font-style: normal;
- font-weight: 400;
- line-height: 40px; /* 166.667% */
- margin-top: 4px;
-
- // style
- background: var(--why-rspack-description-bg);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- }
- }
-}
-
-.features {
- width: 100%;
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- align-items: center;
- gap: 16px;
- padding: 0px;
-
- .featureCard {
- display: flex;
- flex: 1 0 30%;
- align-self: stretch;
-
- .featureCardInner {
- width: 100%;
- height: 100%;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 16px;
-
- // style
- border-radius: 20px;
- border: 1px solid var(--why-rspack-card-stroke);
- background: var(--why-rspack-card-gradient);
- padding: 32px;
-
- .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;
- }
- }
-
- .featureContent {
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 8px;
-
- .featureTitle {
- color: var(--landingpage-title-color);
-
- font-size: 20px;
- font-style: normal;
- font-weight: 700;
- line-height: 1.5;
- }
-
- .featureDescription {
- color: var(--landingpage-desc-color);
-
- font-size: 15px;
- font-style: normal;
- font-weight: 400;
- line-height: 24px; /* 150% */
- }
- }
- }
- }
-}
diff --git a/website/theme/components/Landingpage/WhyRspack/index.tsx b/website/theme/components/Landingpage/WhyRspack/index.tsx
index 03f528310f7b..ca916b404906 100644
--- a/website/theme/components/Landingpage/WhyRspack/index.tsx
+++ b/website/theme/components/Landingpage/WhyRspack/index.tsx
@@ -1,7 +1,11 @@
+import {
+ containerStyle,
+ innerContainerStyle,
+} from '@rstack-dev/doc-ui/section-style';
+import { WhyRspack as BaseWhyRspack } from '@rstack-dev/doc-ui/why-rspack';
import { memo, useMemo } from 'react';
import { Link } from 'rspress/theme';
import { useI18n, useI18nUrl } from '../../../i18n';
-import sharedStyles from '../shared.module.scss';
import CompatibleJson from './assets/Compatible.json';
import Compatible from './assets/Compatible.svg';
import FrameCheckJson from './assets/FrameCheck.json';
@@ -10,9 +14,6 @@ import LightningJson from './assets/Lightning.json';
import Lightning from './assets/Lightning.svg';
import SpeedometerJson from './assets/Speedometer.json';
import Speedometer from './assets/Speedometer.svg';
-import styles from './index.module.scss';
-import { useCardAnimation } from './useCardAnimation';
-import { useLottieAnimation } from './useLottieAnimation';
type Feature = {
img: string;
@@ -22,180 +23,6 @@ type Feature = {
lottieJsonData: any;
};
-const WhyRspackCard = () => {
- const t = useI18n();
- const {
- container,
- onMouseEnter,
- onMouseLeave,
- onMouseMove,
- onTouchEnd,
- onTouchMove,
- onTouchStart,
- outerContainer,
- ref,
- shine,
- shineBg,
- } = useCardAnimation();
-
- return (
-
-
{name}
-{desc}
- - ); - })} +
+
+
+ {t('toolStackTitle')}
+{t('toolStackDesc')}
-
- );
-};
-
-const FeatureItem = memo(({ feature }: { feature: Feature }) => {
- const { description, img, title, url, lottieJsonData } = feature;
- const {
- container,
- isHovering,
- onMouseEnter,
- onMouseLeave,
- onMouseMove,
- onTouchEnd,
- onTouchMove,
- onTouchStart,
- outerContainer,
- ref: cardAnimationContainerRef,
- shine,
- shineBg,
- } = useCardAnimation();
-
- const { ref: lottieContainerRef } = useLottieAnimation(
- isHovering,
- lottieJsonData,
- );
-
- return (
-
-
-
-
- 
-
- {t('whyRspack')}
-{t('whyRspackDesc')}
-
-
-
-
-
- );
-});
-
const WhyRspack = memo(() => {
const t = useI18n();
const tUrl = useI18nUrl();
@@ -235,15 +62,14 @@ const WhyRspack = memo(() => {
);
return (
-
- 
-
-
-
-
-
- {title}
-{description}
-
-
+
);
diff --git a/website/theme/components/Landingpage/WhyRspack/useCardAnimation.tsx b/website/theme/components/Landingpage/WhyRspack/useCardAnimation.tsx
deleted file mode 100644
index b58a7c1d03c1..000000000000
--- a/website/theme/components/Landingpage/WhyRspack/useCardAnimation.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useRef, useState } from 'react';
-
-export const useCardAnimation = () => {
- const [pageX, setPageX] = useState(null);
- const [pageY, setPageY] = useState(null);
- const [isHovering, setIsHovering] = useState(false);
- const ref = useRef();
-
- const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
- setPageX(pageX);
- setPageY(pageY);
- };
-
- const handleTouchMove = (evt: any) => {
- evt.preventDefault();
- const { pageX, pageY } = evt.touches[0];
- handleMove({ pageX, pageY });
- };
-
- const handleEnter = () => {
- setIsHovering(true);
- };
- const handleLeave = () => {
- setIsHovering(false);
- };
-
- let shine: string;
- let shineBg: string;
- let container: string;
- let outerContainer: string;
- const ele = ref.current;
- if (pageX && pageY && ele) {
- const rootElemWidth = ele.clientWidth || ele.offsetWidth || ele.scrollWidth;
- const rootElemHeight =
- ele.clientHeight || ele.offsetHeight || ele.scrollHeight;
-
- const bodyScrollTop =
- document.body.scrollTop ||
- document.getElementsByTagName('html')[0].scrollTop;
- const bodyScrollLeft = document.body.scrollLeft;
-
- const offsets = ele.getBoundingClientRect();
- const wMultiple = 320 / rootElemWidth;
- const multiple = wMultiple * 0.05;
- const offsetX =
- 0.52 - (pageX - offsets.left - bodyScrollLeft) / rootElemWidth;
- const offsetY =
- 0.52 - (pageY - offsets.top - bodyScrollTop) / rootElemHeight;
- const dy = pageY - offsets.top - bodyScrollTop - rootElemHeight / 2;
- const dx = pageX - offsets.left - bodyScrollLeft - rootElemWidth / 2;
- const yRotate = (offsetX - dx) * multiple;
- const xRotate =
- (dy - offsetY) * (Math.min(offsets.width / offsets.height, 1) * multiple);
- const arad = Math.atan2(dy, dx);
- const rawAngle = (arad * 180) / Math.PI - 90;
- const angle = rawAngle < 0 ? rawAngle + 360 : rawAngle;
-
- shine = `translateX(${offsetX - 0.1}px) translateY(${offsetY - 0.1}px)`;
- shineBg = `linear-gradient(${angle}deg, rgba(255, 255, 255, ${
- ((pageY - offsets.top - bodyScrollTop) / rootElemHeight) * 0.2
- }) 0%, rgba(255, 255, 255, 0) 50%)`;
-
- container = `rotateX(${xRotate}deg) rotateY(${yRotate}deg) ${
- isHovering ? ' scale3d(1.01,1.01,1.01)' : ''
- }`;
- outerContainer = `perspective(${rootElemWidth * 2}px`;
- } else {
- shine = '';
- shineBg = '';
- container = '';
- outerContainer = '';
- }
-
- return {
- ref,
- isHovering,
- shine: isHovering ? shine : '',
- shineBg: isHovering ? shineBg : '',
- container: isHovering ? container : '',
- outerContainer: isHovering ? outerContainer : '',
-
- onMouseEnter: handleEnter,
- onMouseLeave: handleLeave,
- onMouseMove: handleMove,
- onTouchMove: handleTouchMove,
- onTouchStart: handleEnter,
- onTouchEnd: handleLeave,
- };
-};
diff --git a/website/theme/components/Landingpage/WhyRspack/useLottieAnimation.tsx b/website/theme/components/Landingpage/WhyRspack/useLottieAnimation.tsx
deleted file mode 100644
index c0cbea935d9f..000000000000
--- a/website/theme/components/Landingpage/WhyRspack/useLottieAnimation.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import lottie from 'lottie-web';
-import type { AnimationItem } from 'lottie-web';
-import { useEffect, useRef } from 'react';
-
-export const useLottieAnimation = (
- isHovering: boolean,
- lottieJsonData: string,
-) => {
- const ref = useRef();
-
- const animationRef = useRef();
-
- useEffect(() => {
- if (!ref.current) {
- return;
- }
- const animation = lottie.loadAnimation({
- container: ref.current,
- animationData: lottieJsonData,
- renderer: 'svg',
- loop: false,
- autoplay: false,
- });
-
- animation.setSpeed(3);
-
- animationRef.current = animation;
- }, [lottieJsonData]);
- useEffect(() => {
- if (!animationRef.current || !ref.current) {
- return;
- }
-
- if (isHovering) {
- animationRef.current.goToAndPlay(0, true);
- } else {
- animationRef.current.goToAndStop(0, true);
- }
- }, [isHovering]);
-
- return {
- ref,
- };
-};
- {/* Why Rspack? */}
-
+
+