Merge branch 'main' of https://github.com/darwinia-network/crab-home …

…into main
darwinia-network · Mar 23, 2021 · 036e5e9 · 036e5e9
2 parents 1f2f44c + b30a5cf
commit 036e5e9
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 42 deletions.
diff --git a/src/components/PageHeader/PageHeader.js b/src/components/PageHeader/PageHeader.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import Head from '@docusaurus/Head';
 import { useTranslation } from 'react-i18next';
 import {
     Button,
@@ -81,6 +82,7 @@ const PageHeader = () => {
 
     return (
         <>
+            <Head><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.svg" /></Head>
             <SideBar visible={visibleSideBar} onClose={handleCloseSideBar} onLngChange={handleClickChangeLng} />
             <div className={styles.container}>
                 <Container className={styles.subContainer}>

diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -18,13 +18,13 @@ body {
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #ec3783;
+  --ifm-color-primary-dark: #e91c73;
+  --ifm-color-primary-darker: #e2156b;
+  --ifm-color-primary-darkest: #ba1258;
+  --ifm-color-primary-light: #ef5293;
+  --ifm-color-primary-lighter: #f05f9c;
+  --ifm-color-primary-lightest: #f487b4;
   --ifm-code-font-size: 95%;
 }
 

diff --git a/src/locales/en-us.json b/src/locales/en-us.json
@@ -8,22 +8,24 @@
         "zh": "简体中文"
     },
     "home_page": {
-        "crabnet_sumary": "The Darwinia Crab network is the first cross-chain NFT chain in Polkadot ecology, supports easy migration of Dapps such as Defi and NFT to Polkadot.",
+        "crabnet_sumary": "Darwinia Crab network is the canary network for Darwinia. It is the first cross-chain NFT blockchain in the Polkadot ecology, and provides the smart contract solution. Crab is going to participate in the Kusama Parachain Slot Auction.",
         "economic_title": "Economic Model",
         "economic_content_p1": "Crab Network is a long-term valuable network. Some RINGs are allocated to Crab Network as backing assets to make it serve as a canary network having real economic incentives and massive gaming theory testing, not just working a testnet.",
         "economic_content_p2": "Crab has the same parameters as Darwinia Mainnet, and use the same Staking mechanism and inflation model. Crab’s tokens are CRING and CKTON, the initial supply of CRING is 2000M, and the supply of CKTON is 0.",
         "read_more": "Read More",
-        "parachain_auction": "Parachain Auction",
-        "crowdfunding": "Crowdfunding",
+        "see_darwinia": "Refer to Darwinia Mainnet",
+        "see_circulate": "Circulating",
+        "parachain_auction": "Kusama Parachain Slot Auction",
+        "crowdfunding": "Crowdloaning",
         "crowdfunding_content1": "KSM holders lock their tokens on Kusama for a period of time (6, 12 or 24 months) to help Darwinia rent a slot. In return for these KSM holders, participants will receive CRING, NFT, etc. as rewards.",
-        "crowdfunding_content2": "Your token lock takes place on the chain in a decentralized manner and will be returned to the holder after the lock-up period, so you don’t have to worry about the security of the token.",
+        "crowdfunding_content2": "Your token lock takes place on the chain in a decentralized manner and will be returned to the holder after the lock-up period, so you don’t have to worry about the security of the token. The user's KSM will not leave their wallet (except for those hosted by the exchange).",
         "crowdfunding_content3": "CRING is the token of the Crab network. Holding CRINGs can participate in the staking and on-chain governance of the Crab network.",
         "how_to_participate": "How to participate",
         "participate_content1": "Prepare your KSMs. If it is in the bond state, the unbond operation must be performed at least 14 days in advance.",
-        "participate_content2_0": "Participate in crowdfunding. After the crowdfunding starts, you can participate in the crowdfunding through ",
+        "participate_content2_0": "Participate in crowdloaning. After the crowdloaning starts, you can participate in the crowdloaning through ",
         "participate_content2_1": "",
         "and": "and",
         "kusama_p1": "Kusama is a multi-chain network. Parachains can be accessed through slots. Parachains and Kusama jointly form an interoperable blockchain network. Kusama guarantees the security of the entire network, while parachains provide a variety of capabilities for the entire network. All parachains must participate in the parachain auction to obtain the right to rent a slot.",
-        "kusama_p2": "The Crab network needs to crowdfund enough KSMs to win the parachain auction. Crab Network chooses to crowdfund KSMs in a trustless way. During Crab’s parachain lease, these KSMs will be “locked” in the Kusama relay chain."
+        "kusama_p2": "The Crab network needs to crowdloan enough KSMs to win the parachain auction. Crab Network chooses to crowdloan KSMs in a trustless way. During Crab’s parachain lease, these KSMs will be “locked” in the Kusama relay chain."
     }
 }
diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json
@@ -8,22 +8,24 @@
         "zh": "简体中文"
     },
     "home_page": {
-        "crabnet_sumary": "Darwinia Crab网络是波卡生态第一条跨链NFT链，支持Defi，NFT等Dapps轻松迁移至波卡",
+        "crabnet_sumary": "Darwinia Crab网络是达尔文网络先行网，波卡生态第一条跨链NFT链，并提供智能合约方案。即将参与波卡Kusama平行链插槽拍卖。",
         "economic_title": "经济模型",
         "economic_content_p1": "Crab 网络将会是一个有价值的长期运行的网络。一部分 RINGs 将作为背书资产分配给 Crab Network，使其成为具有真正经济激励和大规模博弈理论测试的金丝雀网络，而不仅仅是测试网。",
         "economic_content_p2": "Crab 网络的参数与 Darwinia 主网一样，并使用相同的 Staking 机制和通胀模型。通证分别为 CRING 和 CKTON，CRING 的初始供应量为 2000M，CKTON 的供应量为 0。",
         "read_more": "更多",
-        "parachain_auction": "平行链拍卖",
-        "crowdfunding": "众筹",
+        "see_darwinia": "参见Darwinia",
+        "see_circulate": "查看流通情况",
+        "parachain_auction": "Kusama平行链拍卖",
+        "crowdfunding": "众贷",
         "crowdfunding_content1": "KSM持有者将其令牌锁定在Kusama上一段时间（6、12或24个月），以帮助达尔文租用插槽。 作为这些KSM持有者的回报，参与者将获得CRING、NFT等作为奖励。",
-        "crowdfunding_content2": "您的令牌锁定以去中心、去信任的方式在链上进行，在锁定期过后持有人就可以继续使用您的令牌，因此您不必担心令牌的安全性。",
+        "crowdfunding_content2": "您的令牌锁定以去中心、去信任的方式在链上进行，在锁定期过后持有人就可以继续使用您的令牌，因此您不必担心令牌的安全性。用户的KSM不会脱离用户的钱包账户(托管给交易所的除外)。",
         "crowdfunding_content3": "CRING是Crab网络的令牌。 持有CRING可以参与Crab网络的staking和链上治理。",
         "how_to_participate": "如何参加",
         "participate_content1": "准备您的KSM。 如果处于绑定状态，则必须至少提前14天执行取消绑定操作。",
-        "participate_content2_0": "参与众筹。 众筹开始后，您可以通过",
-        "participate_content2_1": "参与众筹",
+        "participate_content2_0": "参与众贷。 众贷开始后，您可以通过",
+        "participate_content2_1": "参与众贷",
         "and": "和",
         "kusama_p1": "Kusama是一个多链网络。  Parachain可以通过插槽访问Kusama。 Parachain和Kusama共同形成了一个可互操作的区块链网络。 Kusama保证了整个网络的安全性，而平行链则为整个网络提供了多种功能。 所有平行链必须参与平行链拍卖，以获得租用插槽的权利。",
-        "kusama_p2": "Crab网络需要众筹足够多的KSM以赢得平行链拍卖。 Crab网络选择以一种去信任的方式对KSM进行众筹。 在Crab的顺链租赁期间，这些KSM将“锁定”在Kusama中。"
+        "kusama_p2": "Crab网络需要众贷足够多的KSM以赢得平行链拍卖。 Crab网络选择以一种去信任的方式对KSM进行众贷。 在Crab的顺链租赁期间，这些KSM将“锁定”在Kusama中。"
     }
 }
diff --git a/src/pages/home/img/desktop-crab-cool.png b/src/pages/home/img/desktop-crab-cool.png
diff --git a/src/pages/home/img/desktop-crab-participate.png b/src/pages/home/img/desktop-crab-participate.png
diff --git a/src/pages/home/img/desktop-crab.png b/src/pages/home/img/desktop-crab.png
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
@@ -110,11 +110,16 @@ const Home = () => {
                     </Animate>
 
                     <Animate delay={50}>
-                        <div className='d-flex justify-content-center'>
-                            <Button variant='light' className={styles.readMoreBtn}
+                        <div className='d-flex flex-column justify-content-between align-items-center'>
+                            <Button variant='light' className={styles.economicBtn} style={{ width: '66%' }}
                                 href='https://darwinia.network/economic_model/'
                             >
-                                <span className={styles.content}>{t("home_page:read_more")}</span>
+                                <span className={styles.content}>{t("home_page:see_darwinia")}</span>
+                            </Button>
+                            <Button variant='light' className={styles.economicBtn} style={{ width: '66%', marginTop: '10px' }}
+                                href='https://crab.subscan.io/account'
+                            >
+                                <span className={styles.content}>{t("home_page:see_circulate")}</span>
                             </Button>
                         </div>
                     </Animate>
@@ -137,12 +142,19 @@ const Home = () => {
                                     <div className={styles.desc2} >{t('home_page:economic_content_p2')}</div>
                                 </div>
                             </Animate>
-                            <Animate delay={300}>
-                                <Button variant='light' className={styles.readMoreBtn}
-                                    href='https://darwinia.network/economic_model/'
-                                >
-                                    <span className={styles.content}>{t("home_page:read_more")}</span>
-                                </Button>
+                            <Animate delay={300} style={{ width: '100%' }}>
+                                <div className='d-flex'>
+                                    <Button variant='light' className={styles.economicBtn}
+                                        href='https://darwinia.network/economic_model/'
+                                    >
+                                        <span className={styles.content}>{t("home_page:see_darwinia")}</span>
+                                    </Button>
+                                    <Button variant='light' className={styles.economicBtn} style={{ marginLeft: '10px' }}
+                                        href='https://crab.subscan.io/account'
+                                    >
+                                        <span className={styles.content}>{t("home_page:see_circulate")}</span>
+                                    </Button>
+                                </div>
                             </Animate>
                             <div style={{ height: '30%' }}></div>
                         </div>
@@ -167,7 +179,10 @@ const Home = () => {
                             <Animate delay={50}>
                                 <div className='d-flex justify-content-center'>
                                     <div className={styles.crowdfunding}>
-                                        {t("home_page:crowdfunding")}
+                                        {i18n.language && i18n.language.toLowerCase() === 'zh-cn'
+                                            ? <a target="_blank" rel="noopener noreferrer" href='/zh-CN/docs/crab-crowdloan'>{t("home_page:crowdfunding")}</a>
+                                            : <a target="_blank" rel="noopener noreferrer" href='/docs/crab-crowdloan'>{t("home_page:crowdfunding")}</a>
+                                        }
                                     </div>
                                 </div>
                             </Animate>
@@ -209,7 +224,10 @@ const Home = () => {
                             <Animate delay={200}>
                                 <div className='d-md-flex justify-content-center'>
                                     <div className={styles.crowdfunding}>
-                                        {t("home_page:crowdfunding")}
+                                        {i18n.language && i18n.language.toLowerCase() === 'zh-cn'
+                                            ? <a target="_blank" rel="noopener noreferrer" href='/zh-CN/docs/crab-crowdloan'>{t("home_page:crowdfunding")}</a>
+                                            : <a target="_blank" rel="noopener noreferrer" href='/docs/crab-crowdloan'>{t("home_page:crowdfunding")}</a>
+                                        }
                                     </div>
                                 </div>
                             </Animate>

diff --git a/src/pages/home/style.module.scss b/src/pages/home/style.module.scss
@@ -3,7 +3,6 @@
 .layout {
     background-image: url(/static/img/background.svg);
     padding-top: 10px;
-    background-image: url('/static/img/background.svg');
 
     ::selection,
     ::selection {
@@ -99,8 +98,9 @@
             }
         }
 
-        .readMoreBtn {
-            padding: 5px 60px;
+        .economicBtn {
+            flex: 1;
+            padding: 5px;
             background: linear-gradient(315deg, #FF0050 0%, #7000FF 71%, #0027FF 100%);
             border-radius: 20px;
 
@@ -141,11 +141,19 @@
                     color: #080C20;
                     line-height: 24px;
                     background: linear-gradient(315deg, #FF0050 0%, #7000FF 71%, #0027FF 100%);
-                    background-clip: text;
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
+                    // background-clip: text;
+                    // -webkit-background-clip: text;
+                    // -webkit-text-fill-color: transparent;
                     margin: 30px auto;
                     display: inline-block;
+
+                    >a {
+                        color: white;
+                        font-weight: bold;
+                        // text-decoration-style: dashed;
+                        text-decoration: underline;
+                        // text-decoration-color: blue;
+                    }
                 }
 
                 .auctionCard {
@@ -234,6 +242,7 @@
                         background: #FFFFFF;
                         border-radius: 20px;
                         margin: 30px 0;
+                        padding: 5px 40px;
 
                         .content {
                             font-size: 14px;
@@ -368,7 +377,8 @@
                     line-height: 20px;
                 }
 
-                .readMoreBtn {
+                .economicBtn {
+                    padding: 5px 0px;
                     background: linear-gradient(315deg, #FF0050 0%, #7000FF 71%, #0027FF 100%);
                     border-radius: 20px;
 
@@ -412,9 +422,9 @@
                         color: #080C20;
                         line-height: 39px;
                         background: linear-gradient(315deg, #FF0050 0%, #7000FF 71%, #0027FF 100%);
-                        background-clip: text;
-                        -webkit-background-clip: text;
-                        -webkit-text-fill-color: transparent;
+                        // background-clip: text;
+                        // -webkit-background-clip: text;
+                        // -webkit-text-fill-color: transparent;
                     }
 
                     .auctionCard {

diff --git a/src/utils/Animate/index.js b/src/utils/Animate/index.js
@@ -3,14 +3,15 @@ import ScrollAnimation from "react-animate-on-scroll";
 import './animate.css/animate.min.css';
 import './animate/_fade.scss';
 
-const Animate = ({ delay = 0, children }) => {
+const Animate = ({ delay = 0, style={}, children }) => {
     return (
         <ScrollAnimation
             animateIn="fadeInUp"
             animateOut="fadeOutDown"
             delay={delay}
             // scrollableParentSelector={scrollableParentSelector}
             animateOnce={true}
+            style={style}
         >
             {children}
         </ScrollAnimation>