diff --git a/pages/src/assets/icons/apple.svg b/pages/src/assets/icons/apple.svg new file mode 100644 index 00000000..be6c6662 --- /dev/null +++ b/pages/src/assets/icons/apple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/src/assets/icons/linux.svg b/pages/src/assets/icons/linux.svg new file mode 100644 index 00000000..a027c8a1 --- /dev/null +++ b/pages/src/assets/icons/linux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/src/assets/icons/npm.svg b/pages/src/assets/icons/npm.svg new file mode 100644 index 00000000..076b0922 --- /dev/null +++ b/pages/src/assets/icons/npm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/src/assets/icons/windows.svg b/pages/src/assets/icons/windows.svg new file mode 100644 index 00000000..2bb2138a --- /dev/null +++ b/pages/src/assets/icons/windows.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/src/components/HeroSection.tsx b/pages/src/components/HeroSection.tsx index 0af00952..145d4e6a 100644 --- a/pages/src/components/HeroSection.tsx +++ b/pages/src/components/HeroSection.tsx @@ -4,7 +4,10 @@ import { Link } from 'react-router-dom'; import { useTranslation } from '../i18n'; import { useResponsive } from '../hooks/useResponsive'; import ColorBends from './ColorBends'; -import docDownloadIcon from '../assets/icons/doc-download-green.svg'; +import npmIcon from '../assets/icons/npm.svg'; +import appleIcon from '../assets/icons/apple.svg'; +import linuxIcon from '../assets/icons/linux.svg'; +import windowsIcon from '../assets/icons/windows.svg'; import copyIcon from '../assets/icons/icon-copy.svg'; @@ -116,11 +119,16 @@ const terminalLines = [ { num: 12, content: ｜ }, ]; -const INSTALL_CMD = 'npm i -g @alibaba-group/open-code-review'; +const INSTALL_CHANNELS = [ + { key: 'npm', labelKey: 'hero.installNpm', cmd: 'npm i -g @alibaba-group/open-code-review', icons: [npmIcon] }, + { key: 'unix', labelKey: 'hero.installUnix', cmd: 'curl -fsSL https://raw.githubusercontent.com/alibaba/open-code-review/main/install.sh | sh', icons: [appleIcon, linuxIcon] }, + { key: 'windows', labelKey: 'hero.installWindows', cmd: 'irm https://raw.githubusercontent.com/alibaba/open-code-review/main/install.ps1 | iex', icons: [windowsIcon] }, +]; const HeroSection: React.FC = () => { const { t } = useTranslation(); - const { isMobile, isTablet } = useResponsive(); + const { isMobile, isTablet, isDesktop } = useResponsive(); + const twoCol = isDesktop; const [toastVisible, setToastVisible] = useState(false); const [toastMessage, setToastMessage] = useState(''); @@ -170,7 +178,7 @@ const HeroSection: React.FC = () => { style={{ width: '100vw', marginLeft: 'calc(-50vw + 50%)', - height: isMobile ? 850 : isTablet ? 830 : 990, + height: isMobile ? 1000 : isTablet ? 900 : 860, position: 'relative', overflow: 'hidden', display: 'flex', @@ -222,123 +230,194 @@ const HeroSection: React.FC = () => { position: 'relative', zIndex: 2, display: 'flex', - flexDirection: 'column', + flexDirection: twoCol ? 'row' : 'column', alignItems: 'center', - paddingTop: isMobile ? 100 : 180, - paddingLeft: isMobile ? 20 : 0, - paddingRight: isMobile ? 20 : 0, - gap: isMobile ? 24 : 32, - maxWidth: isMobile ? '100%' : 742, + justifyContent: 'center', + paddingTop: isMobile ? 80 : 170, + paddingLeft: isMobile ? 20 : 40, + paddingRight: isMobile ? 20 : 40, + gap: twoCol ? 56 : isMobile ? 24 : 32, + maxWidth: twoCol ? 1200 : isMobile ? '100%' : 742, + width: '100%', }} > - {/* Install Badge */} + {/* Left column */}
- -

- {INSTALL_CMD} -

- Copy handleCopy(INSTALL_CMD)} - /> -
+ {/* Title */} +
+

+ {t('hero.title').split('\n').map((line, i, arr) => ( + + {line} + {i < arr.length - 1 &&
} + + ))} +

+

+ {t('hero.description')} +

+
- {/* Title */} -
-

- {t('hero.title').split('\n').map((line, i, arr) => ( - - {line} - {i < arr.length - 1 &&
} - + {INSTALL_CHANNELS.map((ch) => ( +
+
+ {ch.key === 'unix' ? (() => { + const parts = t(ch.labelKey).split('/'); + const macLabel = (parts[0] ?? '').trim(); + const linuxLabel = (parts[1] ?? '').trim(); + return ( + <> + + + {macLabel}{linuxLabel ? ' /' : ''} + + {linuxLabel && ( + <> + + + {linuxLabel} + + + )} + + ); + })() : ( + <> + {ch.icons.map((icon, idx) => ( + + ))} + + {t(ch.labelKey)} + + + )} +
+
+ + {ch.cmd} + + Copy handleCopy(ch.cmd)} + /> +
+
))} -

-

- {t('hero.description')} -

-
+ - {/* Buttons */} -
- - {t('hero.quickStart')} - - - {t('hero.learnMore')} - + {/* Buttons */} +
+ + {t('hero.quickStart')} + + + {t('hero.learnMore')} + +
{/* Terminal */}