Skip to content

Commit

Permalink
feat: change features UI
Browse files Browse the repository at this point in the history 
Signed-off-by: zhaoxinxin <[email protected]>
  • Loading branch information
@Liam-Zhao
Liam-Zhao committed Feb 1, 2024
1 parent 69e8add commit 9169ced
Show file tree
Hide file tree
Showing 4 changed files with 231 additions and 146 deletions.
55 changes: 41 additions & 14 deletions i18n/zh/code.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,41 +233,68 @@
"P2P technology": {
"message": "P2P 技术"
},
"Based on P2P technology, use the idle bandwidth of Peer to improve download speed.": {
"message": "通过利用 P2P 技术进行文件传输，它能最大限度地利用每个 Peer 的带宽资源。提高下载效率，并节省大量跨机房带宽，尤其是昂贵的跨境带宽。"
"Based on P2P technology, use the idle bandwidth of Peer to": {
"message": "通过利用 P2P 技术进行文件传输，它能最大限度地利用每个 Peer 的带宽资源。"
},
"improve download speed.": {
"message": "提高下载效率，并节省大量跨机房带宽，尤其是昂贵的跨境带宽。"
},
"Non-invasive": {
"message": "非侵入式"
},
"Non-intrusive support for multiple container runtimes, download tools, AI infrastructure, etc.": {
"message": "可非侵入式支持多种容器运行时、文件下载工具以及 AI 基础设施等。"
"Non-intrusive support for": {
"message": "可非侵入式支持"
},
"multiple container runtimes, download tools, AI infrastructure,": {
"message": "多种容器运行时、文件下载工具以及 AI 基础设施"
},
"节点级别配置": {
"message": "可动态配置节点级别负载、并发以及限流等能力。"
"etc.": {
"message": "等。"
},
"Peer configuration": {
"message": "节点级别配置"
},
"Load limit, concurrent limit, traffic limit, etc. can be configured.": {
"message": "来提高下载稳定性和成功率。"
"Load": {
"message": "可动态配置"
},
"Load limit, concurrent limit, traffic limit,": {
"message": "节点级别负载、并发以及限流"
},
"etc. can be configured.": {
"message": "等能力。"
},
"Consistency": {
"message": "一致性"
},
"Ensures downloaded files are consistent even if the user does not check for consistency.": {
"message": "可确保下载的文件是一致的，即使用户不进行最终一致性校验。"
"Ensures downloaded files are": {
"message": "可确保下载的文件是"
},
"consistent": {
"message": "一致的，"
},
"even if the user does not check for consistency.": {
"message": "即使用户不进行最终一致性校验。"
},
"Exception isolation": {
"message": "异常隔离"
},
"Isolate exceptions based on Service level, Peer level and Task level to improve download stability.": {
"message": "通过 Service、Peer 以及 Task 三个级别自动隔离异常提高下载稳定性。"
"Isolate exceptions": {
"message": "通过 Service、Peer 以及 Task 三个级别"
},
"based on Service level, Peer level and Task level to improve download stability.": {
"message": "自动隔离异常提高下载稳定性。"
},
"Ecosystem": {
"message": "生态"
},
"Provides simple integration with AI infrastructure, container runtimes, container registry, download tools,etc.": {
"message": "跟 AI 基础设施、容器镜像以及文件分发等生态项目都有简单的集成方案。"
"Provides simple integration with": {
"message": "跟"
},
"AI infrastructure, container runtimes, container registry, download tools,": {
"message": "AI 基础设施、容器镜像以及文件分发"
},
" etc.": {
"message": "等生态项目都有简单的集成方案。"
},
"theme.blog.post.readMoreLabel": {
"message": "阅读 {title} 的全文",
Expand Down
56 changes: 42 additions & 14 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,42 +190,70 @@ export default function Home() {
{
cardTitle: <Translate>P2P technology</Translate>,
cardContent: (
<Translate>Based on P2P technology, use the idle bandwidth of Peer to improve download speed.</Translate>
<>
<Translate>Based on P2P technology, use the idle bandwidth of Peer to</Translate>
<span className={styles.featuresHighlight}>
<Translate>improve download speed.</Translate>
</span>
</>
),
},
{
cardTitle: <Translate>Non-invasive</Translate>,
cardContent: (
<Translate>
Non-intrusive support for multiple container runtimes, download tools, AI infrastructure, etc.
</Translate>
<>
<Translate>Non-intrusive support for</Translate>
<span className={styles.featuresHighlight}>
<Translate>multiple container runtimes, download tools, AI infrastructure,</Translate>
</span>
<Translate>etc.</Translate>
</>
),
},
{
cardTitle: <Translate>Peer configuration</Translate>,
cardContent: <Translate>Load limit, concurrent limit, traffic limit, etc. can be configured.</Translate>,
cardContent: (
<>
<span className={styles.featuresInitialHighlight}>
<Translate>Load limit, concurrent limit, traffic limit,</Translate>
</span>
<Translate>etc. can be configured.</Translate>
</>
),
},
{
cardTitle: <Translate>Consistency</Translate>,
cardContent: (
<Translate>Ensures downloaded files are consistent even if the user does not check for consistency.</Translate>
<>
<Translate>Ensures downloaded files are</Translate>
<span className={styles.featuresHighlight}>
<Translate>consistent</Translate>
</span>
<Translate>even if the user does not check for consistency.</Translate>
</>
),
},
{
cardTitle: <Translate>Exception isolation</Translate>,
cardContent: (
<Translate>
Isolate exceptions based on Service level, Peer level and Task level to improve download stability.
</Translate>
<>
<span className={styles.featuresInitialHighlight}>
<Translate>Isolate exceptions</Translate>
</span>
<Translate>based on Service level, Peer level and Task level to improve download stability.</Translate>
</>
),
},
{
cardTitle: <Translate>Ecosystem</Translate>,
cardContent: (
<Translate>
Provides simple integration with AI infrastructure, container runtimes, container registry, download
tools,etc.
</Translate>
<>
<Translate>Provides simple integration with</Translate>
<span className={styles.featuresHighlight}>
<Translate>AI infrastructure, container runtimes, container registry, download tools,</Translate>
</span>
<Translate> etc.</Translate>
</>
),
},
];
Expand Down Expand Up @@ -316,7 +344,7 @@ export default function Home() {
{FeaturesList.map((item, index) => {
return (
<div className={clsx('col col--3', styles.featuresInfoWrapper)} key={index}>
<h2 className={styles.featuresCardTitle}>{item.cardTitle}</h2>
<div className={styles.featuresCardTitle}>{item.cardTitle}</div>
<span className={styles.featuresCardContent}>{item.cardContent}</span>
</div>
);
Expand Down
89 changes: 54 additions & 35 deletions src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,20 +509,20 @@ a {
background: linear-gradient(
180deg,
#85d9a8,
#90e4b4 15.73%,
#99eabb 29.02%,
#a5f1c5 40.13%,
#b1f5ce 49.33%,
#b8f8d3 56.87%,
#c8fadd 63.04%,
#d5fde6 68.08%,
#e1feed 72.27%,
#e8fff2 75.87%,
#f0fff6 79.16%,
#f6fffa 82.38%,
#f9fffb 85.81%,
#fbfffc 89.71%,
#fdfffe 94.35%,
#99eabc 15.73%,
#b0f9cf 29.02%,
#c7fadd 40.13%,
#d9fbe8 49.33%,
#e5fff0 56.87%,
#f0fff7 63.04%,
#f3fff9 68.08%,
#f6fffa 72.27%,
#f7fffb 75.87%,
#f7fffb 79.16%,
#f7fffb 82.38%,
#fbfffd 85.81%,
#fbfffd 89.71%,
#fbfffd 94.35%,
#fff0
);
}
Expand Down Expand Up @@ -630,51 +630,69 @@ a {
justify-content: center;
position: relative;
align-items: center;
padding: 3rem;
padding: 7rem 0rem;
margin-top: 1rem;
}

.featuresBackground {
width: 36rem;
height: 36rem;
width: 34rem;
height: 34rem;
}

.featuresInfoWrapper {
padding: 1rem;
background-color: #fff;
box-shadow:
2px 5px 20px 0px rgba(0, 0, 0, 0.1),
6px 6px 10px -5px rgba(0, 0, 0, 0.04);
background: rgba(255, 255, 255, 0.9);
border-radius: 0.4rem;
}

.featuresInfoWrapper:nth-child(1) {
position: absolute;
top: 28%;
left: 4rem;
text-align: center;
top: 29%;
left: 0;
}

.featuresInfoWrapper:nth-child(2) {
position: absolute;
top: 0;
text-align: center;
bottom: 79%;
}

.featuresInfoWrapper:nth-child(3) {
position: absolute;
top: 28%;
right: 4rem;
text-align: center;
top: 29%;
right: 0;
}

.featuresInfoWrapper:nth-child(4) {
position: absolute;
top: 67%;
left: 4rem;
text-align: center;
top: 62%;
left: 0;
}

.featuresInfoWrapper:nth-child(5) {
position: absolute;
bottom: 0;
text-align: center;
top: 79%;
}

.featuresInfoWrapper:nth-child(6) {
position: absolute;
top: 67%;
right: 4rem;
text-align: center;
top: 62%;
right: 0;
}

.featuresHighlight {
color: var(--ifm-color-higlight);
margin: 0 0.3rem;
font-weight: 600;
}

.featuresInitialHighlight {
color: var(--ifm-color-higlight);
margin: 0 0.3rem 0 0;
font-weight: 600;
}

.featuresImageBackground {
Expand All @@ -687,10 +705,11 @@ a {

.featuresCardTitle {
font-size: 1.2rem;
padding-bottom: 0.4rem;
margin-bottom: 0.4rem;
font-weight: 600;
height: 1.5rem;
line-height: 1.5rem;
position: relative;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}

.featuresCardContent {
Expand Down
Loading

0 comments on commit 9169ced

Please sign in to comment.