Merge pull request #623 from zzzhangqi/homepage

feature: modify homepage
goodrain · Oct 9, 2022 · 1b4d1dd · 1b4d1dd
2 parents cc4a705 + f87aae4
commit 1b4d1dd
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^2.5.0",
     "react-dom": "^17.0.1",
+    "react-photo-view": "^1.2.2",
     "react-popper": "^2.3.0",
     "react-spring": "^9.5.2",
     "sass": "^1.49.9",

diff --git a/src/components/HomePage/Command/index.tsx b/src/components/HomePage/Command/index.tsx
@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { animated, useTrail } from "react-spring";
 import CodeBlock from '@theme/CodeBlock';
-import { Tabs, TabPane, RadioGroup, Radio } from '@douyinfe/semi-ui';
-import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
+import { Tabs, TabPane } from '@douyinfe/semi-ui';
+import {useWindowSize} from '@docusaurus/theme-common';
 
 export default function Command() {
 
@@ -22,10 +22,12 @@ export default function Command() {
       tension: 460,
     },
   })
-
+  const windowSize = useWindowSize();
+  const tabPosition = windowSize === 'desktop' ? "left" : "top";
+
   return (
     <animated.div style={animatedTexts[0]}>
-      <Tabs type="line" tabPosition="left">
+      <Tabs type="line" tabPosition={tabPosition}>
         <TabPane tab="Linux" itemKey="1">
           <h3>在 Linux 上快速安装体验 Rainbond</h3>
           <CodeBlock language="bash">

diff --git a/src/components/HomePage/Feature/index.tsx b/src/components/HomePage/Feature/index.tsx
@@ -11,12 +11,13 @@ import { animated, useTrail } from "react-spring";
 import styles from "./styles.module.css";
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
-import { Image } from '@douyinfe/semi-ui';
 import Devops from '/img/homepage/svg/devops.svg';
 import K8s from '/img/homepage/svg/k8sblue.svg';
 import Servicemesh from '/img/homepage/svg/servicemesh.svg';
 import Store from '/img/homepage/svg/store.svg';
 import Model from '/img/homepage/svg/model.svg';
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import 'react-photo-view/dist/react-photo-view.css';
 
 export default function Feature() {
 
@@ -39,12 +40,16 @@ export default function Feature() {
         <div className="row" style={{ paddingTop: '50px'}}>
           <div className="col col--6">
             <div className={clsx('card', styles.card)}>
-              <Image width={'100%'} src="/img/homepage/feature/devops.png" />
+              <PhotoProvider>
+                <PhotoView src="/img/homepage/feature/devops.png">
+                  <img src="/img/homepage/feature/devops.png" width="100%" />
+                </PhotoView>
+              </PhotoProvider>
             </div>
           </div>
           <div className="col col--6">
             <div className="row">
-              <div className="col col--12">
+              <div className={clsx("col col--12", styles.desc_svg)}>
                 <Devops style={{ float: 'right' }}/>
               </div>
               <div className="col col--12">
@@ -53,7 +58,7 @@ export default function Feature() {
                 </h3>
               </div>
               <div className="col col--12">
-                <p className={styles.content} style={{ float: 'right', width: '455px', textAlign: 'left'}}>
+                <p className={clsx(styles.content,styles.devops_content)}>
                   Rainbond使用“以应用为中心”的设计理念,对开发人员友好,不用学习容器和Kubernetes等底层技术,开发人员对应用开发和应用运维过程自主可控,已有项目和代码不需要改变
                   复杂的系统管理和平台管理由平台管理员负责,兼容各种Kubernetes版本和Kubernetes工具,实现各司其职
                 </p>
@@ -77,7 +82,7 @@ export default function Feature() {
                 </h3>
               </div>
               <div className="col col--12">
-                <p className={styles.content} style={{ float: 'left', width: '455px', textAlign: 'left'}}>
+                <p className={clsx(styles.content, styles.k8s_content)}>
                   Rainbond控制台支持对接管理多种Kubernetes集群，支持应用级开发和管理体验，不需要写Yaml，通过应用级抽象，应用跨集群部署、安装、迁移、备份
                 </p>
               </div>
@@ -88,20 +93,28 @@ export default function Feature() {
           </div>
           <div className="col col--6">
             <div className={clsx('card', styles.card)}>
-              <Image src="/img/homepage/feature/k8scluster.png" />
+              <PhotoProvider>
+                <PhotoView src="/img/homepage/feature/k8scluster.png">
+                  <img src="/img/homepage/feature/k8scluster.png" width="100%" />
+                </PhotoView>
+              </PhotoProvider>
             </div>
           </div>
         </div>
         {/* Servier mesh */}
         <div className="row" style={{ paddingTop: '150px'}}>
           <div className="col col--6">
             <div className={clsx('card', styles.card)}>
-              <Image src="/img/homepage/feature/servicemesh.png" />
+              <PhotoProvider>
+                <PhotoView src="/img/homepage/feature/servicemesh.png">
+                  <img src="/img/homepage/feature/servicemesh.png" width="100%" />
+                </PhotoView>
+              </PhotoProvider>
             </div>
           </div>
           <div className="col col--6">
             <div className="row">
-              <div className="col col--12">
+              <div className={clsx("col col--12", styles.desc_svg)}>
                 <Servicemesh style={{ float: 'right' }}/>
               </div>
               <div className="col col--12">
@@ -110,7 +123,7 @@ export default function Feature() {
                 </h3>
               </div>
               <div className="col col--12">
-                <p className={styles.content} style={{ float: 'right', width: '460px', textAlign: 'left'}}>
+                <p className={clsx(styles.content, styles.mesh_content)}>
                   传统应用部署到Rainbond，开启应用级插件就可以支持Service Mesh，并可按需更换Service Mesh框架
                   通过组件级的插件扩展日志管理、性能分析、监控等服务治理工具，并支持Spring Cloud 、Dubbo等常见微服务框架
                 </p>
@@ -134,7 +147,7 @@ export default function Feature() {
                 </h3>
               </div>
               <div className="col col--12">
-                <p className={styles.content} style={{ float: 'left', width: '460px', textAlign: 'left'}}>
+                <p className={clsx(styles.content, styles.store_content)} style={{ }}>
                   支持应用市场全流程管理（应用构建和拼装、应用发布应用市场、应用市场展示和管理、应用导出和导入、应用一键安装和升级）
                   通过应用模版可以将任何类型的应用发布到应用市场，并实现复杂应用一键交付客户环境
                 </p>
@@ -146,20 +159,28 @@ export default function Feature() {
           </div>
           <div className="col col--6">
             <div className={clsx('card', styles.card)}>
-              <Image src="/img/homepage/feature/appstore.png" />
+              <PhotoProvider>
+                <PhotoView src="/img/homepage/feature/appstore.png">
+                  <img src="/img/homepage/feature/appstore.png" width="100%" />
+                </PhotoView>
+              </PhotoProvider>
             </div>
           </div>
         </div>
         {/* Application model */}
         <div className="row" style={{ paddingTop: '150px', paddingBottom: '50px'}}>
           <div className="col col--6">
-            <div className={clsx('card', styles.card)} style={{ width: '500px' }}>
-              <Image src="/img/homepage/feature/appmodel.png" />
+            <div className={clsx('card', styles.card, styles.app_model_image)}>
+              <PhotoProvider>
+                <PhotoView src="/img/homepage/feature/appmodel.png">
+                  <img src="/img/homepage/feature/appmodel.png" width="100%" />
+                </PhotoView>
+              </PhotoProvider>
             </div>
           </div>
           <div className="col col--6">
             <div className="row">
-              <div className="col col--12">
+              <div className={clsx("col col--12", styles.desc_svg)}>
                 <Model style={{ float: 'right' }}/>
               </div>
               <div className="col col--12">
@@ -168,7 +189,7 @@ export default function Feature() {
                 </h3>
               </div>
               <div className="col col--12">
-                <p className={styles.content} style={{ float: 'right', width: '330px', textAlign: 'left'}}>
+                <p className={clsx(styles.content, styles.model_content)}>
                   通过应用模型抽象，让开发人员可以更多的关心业务本身，而不是底层复杂工具的使用问题。最终的效果是降低操作成本和理解难度，让Kubernetes更加容易落地
                 </p>
               </div>

diff --git a/src/components/HomePage/Feature/styles.module.css b/src/components/HomePage/Feature/styles.module.css
@@ -5,6 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  **/
 
+@media screen and (max-width: 996px) {
+  .desc_svg {
+    padding-top: 2rem;
+  }
+  .app_model_image {
+    width: 100% !important;
+  }
+}
+@media screen and (max-width: 396px) {
+  .devops_content {
+    width: 100% !important;
+  }
+
+  .k8s_content {
+    width: 100% !important;
+  }
+
+  .mesh_content {
+    width: 100% !important;
+  }
+
+  .store_content {
+    width: 100% !important;
+  }
+
+  .model_content {
+    width: 100% !important;
+  }
+}
 .global {
   text-align: center;
   line-height: 32px;
@@ -29,4 +58,38 @@
 
 .card {
   box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.app_model_image {
+  width: 500px;
+}
+
+.devops_content {
+  float: right;
+  width: 455px;
+  text-align: left;
+}
+
+.k8s_content {
+  float: left;
+  width: 455px;
+  text-align: left;
+}
+
+.mesh_content {
+  float: right;
+  width: 460px;
+  text-align: left;
+}
+
+.store_content {
+  float: left;
+  width: 460px;
+  text-align: left;
+}
+
+.model_content {
+  float: right;
+  width: 330px;
+  text-align: left;
 }
diff --git a/src/components/HomePage/HowRainbond/index.tsx b/src/components/HomePage/HowRainbond/index.tsx
@@ -75,7 +75,7 @@ export default function HowRainbond() {
       </h1>
       <div className="row">
         {Cards().map(({header, content, link},index) => (
-          <div className={clsx("col col--6", styles.col)}>
+          <div className={clsx("col col--6", styles.col)} key={index}>
             <Link to={link} className={ styles.link }>
               <div className={clsx("card", styles.card)}>
                 <div className={clsx("card__header", styles.header)}>

diff --git a/src/components/HomePage/JoinCommunity/index.tsx b/src/components/HomePage/JoinCommunity/index.tsx
@@ -50,7 +50,7 @@ export default function JoinCommunity() {
                 <Link to="https://github.com/goodrain/rainbond/issues" className={styles.icon}>
                   <Github fill="#191717"/>
                 </Link>
-                <OverlayTrigger trigger="hover" placement="bottom" overlay={
+                <OverlayTrigger placement="bottom" overlay={
                   <div className="card">
                     <div className="card__body">
                       <img width="200px" height="200px" src="/wechat/wechat-public.jpg" />
@@ -61,7 +61,7 @@ export default function JoinCommunity() {
                     <Wechat />
                   </span>
                 </OverlayTrigger>
-                <OverlayTrigger trigger="hover" placement="bottom" overlay={
+                <OverlayTrigger placement="bottom" overlay={
                   <div className="card">
                     <div className="card__body">
                       搜索钉钉群号 <b>31096419</b> 加入 Rainbond 钉钉技术交流群

diff --git a/src/components/HomePage/JoinCommunity/styles.module.css b/src/components/HomePage/JoinCommunity/styles.module.css
@@ -6,6 +6,16 @@
  **/
 
 
+ @media screen and (max-width: 996px) {
+  .card {
+    height: auto !important;
+  }
+  .cardRight {
+    margin-top: 1.5rem;
+    height: auto !important;
+  }
+}
+
 .container {
   padding-top: 100px;
   padding-bottom: 100px;

diff --git a/src/components/HomePage/Primary/index.tsx b/src/components/HomePage/Primary/index.tsx
@@ -34,7 +34,7 @@ export default function Primary() {
 
   return (
     <div className="row">
-      <div className="col col--6">
+      <div className={clsx("col col--6", styles.rainbond)}>
         <animated.h2
           className={clsx({
             [styles.rainbond_title]: ! LocalUrlEn,
@@ -52,7 +52,7 @@ export default function Primary() {
         <animated.div style={animatedTexts[1]} className={styles.btnBox}>
           <Text link={{ href: '/docs/installation/install-with-dind' }}>
             <Button icon={<Iconlinux />} theme="solid" className={styles.buttonLeft} size='large'>
-              <Translate id='first.install'>在主机安装</Translate>
+              <Translate id='first.install'>在单机安装</Translate>
             </Button>
           </Text>
           <Text link={{ href: '/docs/installation/install-with-helm/' }}>
@@ -63,17 +63,14 @@ export default function Primary() {
         </animated.div>
       </div>
       <div className="col col--6">
-          <animated.div
-            className={styles.know_rainbond_video}
-            style={animatedTexts[1]}
-          >
+          <animated.div style={animatedTexts[1]}>
             <div
-              className={clsx('mask_video', styles.know_rainbond_video_div)}
+              className="mask_video"
               onClick={() => {
                 setMask_config(true);
               }}
             >
-              <img src='/img/video/video-rainbond.png' alt='' className={styles.know_rainbond_video_div_img}/>
+              <img src='/img/video/video-rainbond.png'/>
             </div>
           </animated.div>
       </div>

diff --git a/src/components/HomePage/Primary/styles.module.css b/src/components/HomePage/Primary/styles.module.css
@@ -5,6 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  **/
 
+@media screen and (max-width: 996px) {
+  .rainbond {
+    text-align: center;
+    padding-bottom: 5rem;
+  }
+  .rainbond_description {
+    width: 100% !important;
+  }
+}
+@media screen and (max-width: 496px) {
+  .buttonLeft {
+    margin-bottom: 0.5rem;
+  }
+}
+
 /* Rainbond title */
 .rainbond_title {
   font-size: 48px;