+ {`Copyright © ${new Date().getFullYear()} Nervos Foundation. All Rights Reserved.`}
+
{contactUsContents.map((media, index) => (
@@ -378,10 +537,12 @@ function ContactUsSection(): JSX.Element {
export {
HomeCardSection,
+ DAppSection,
EcoSection,
WalletDisplay,
ToolDisplay,
ProjectDisplay,
DevLogSection,
- ContactUsSection,
+ CTASection,
+ FooterSection,
};
diff --git a/website/src/components/Home/styles.module.css b/website/src/components/Home/styles.module.css
index b7eaea921..081ae1fb4 100644
--- a/website/src/components/Home/styles.module.css
+++ b/website/src/components/Home/styles.module.css
@@ -2,28 +2,37 @@
/* General styling */
.section {
- background: var(--dark-card-bg);
- border-radius: 40px;
- box-shadow: var(--dark-card-shadow);
+ background: var(--dark-alert-secondary-bg);
+ border-radius: 32px;
+ border: 1px solid var(--dark-border-invisible);
+ backdrop-filter: blur(10px);
padding: 2.5rem;
z-index: 1;
width: 100%;
position: relative;
}
-.section::before {
- content: "";
+
+.sectionGlow {
position: absolute;
top: 0;
left: 0;
- width: 100%;
- height: 100%;
- background-image: url("/img/bg-noise.webp");
- background-position: center;
- background-size: cover;
- background-repeat: repeat;
- opacity: 0.5;
+ width: 400px;
+ height: 400px;
+ border-top-left-radius: 32px;
z-index: -1;
}
+
+.sectionGlowOpposite {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 400px;
+ height: 400px;
+ border-bottom-right-radius: 32px;
+ transform: scale(-1, -1);
+ z-index: -1;
+}
+
.flexCol {
display: flex;
flex-direction: column;
@@ -57,9 +66,12 @@
width: 4rem;
height: 4rem;
}
-.iconContainer img {
- max-width: fit-content;
+
+.iconContainerSm {
+ width: 2rem;
+ height: 2rem;
}
+
.section h3,
.section h2,
.section h1 {
@@ -71,33 +83,23 @@
}
/* Home card used in header section */
-.homeCard {
- color: var(--dark-text-primary);
- position: relative;
-}
-.sparkles {
- position: absolute;
- display: none;
- right: 1.25rem;
- top: 1.25rem;
-}
-.homeCard:hover {
- transition: 0.2s;
+.smHomeCard {
+ cursor: pointer;
}
-.homeCard:hover .sparkles {
- display: block;
+.smHomeCard:hover {
+ background-color: var(--dark-hover);
+ text-decoration: none;
}
.cardTitle {
margin-top: 1.5rem;
- margin-bottom: 3rem;
+ margin-bottom: 2.5rem;
}
.cardLinks {
- margin-top: 1.25rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.cardLinks > .borderBtm:not(:last-child) {
- border-bottom: 1px solid var(--dark-border-subtle);
+ border-bottom: 1px solid var(--dark-border-invisible);
}
.link {
line-height: 3rem;
@@ -145,6 +147,55 @@
color: var(--dark-text-primary);
}
+/* DApp section specific */
+.tutorialSection {
+ padding: 7.5rem 2.5rem;
+ gap: 2.5rem;
+}
+.tutorialLeft {
+ width: 636px;
+}
+.tutorialSidebar {
+ margin: 2.5rem 0;
+ color: var(--dark-text-secondary);
+}
+.tutorialItem {
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem 1.25rem;
+ opacity: 0.5;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+.tutorialItem:hover {
+ background-color: var(--dark-hover);
+}
+.itemDecor {
+ position: absolute;
+ right: -1.5rem;
+ top: 0.4rem;
+ z-index: 0;
+ display: none;
+}
+.itemTitle {
+ margin-bottom: 0.5rem;
+ color: var(--dark-text-primary);
+ z-index: 1;
+}
+.itemActive {
+ background: var(--dark-surface-accent);
+ box-shadow: 0px 10px 40px -5px rgba(7, 28, 39, 0.4);
+ opacity: 1;
+}
+.itemActive .itemDecor {
+ display: block;
+}
+.tutorialFrame {
+ width: 567px;
+}
+
/* Dev tools section specific */
.tableContainer {
display: flex;
@@ -190,17 +241,18 @@
}
.arrowLeft,
.arrowRight {
- width: 3rem;
- min-width: 3rem;
- height: 3rem;
+ width: 2rem;
+ min-width: 2rem;
+ height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
- color: var(--dark-text-primary);
- background: var(--dark-surface-03);
+ color: var(--dark-alert-success);
+ background: var(--dark-alert-success-bg);
border-radius: 50%;
+ border: 1px solid var(--dark-border-accent);
}
.arrowLeft:hover,
.arrowRight:hover {
@@ -212,23 +264,71 @@
/* Dev Log specific */
.illusContainer {
- width: 418px;
+ width: 417px;
+ height: 350px;
}
.leftContainer {
- max-width: 50%;
+ max-width: 55%;
}
.description {
color: var(--dark-text-secondary);
+ font-size: 1.25rem;
}
-/* contact section specific */
-.contactSection {
- background: linear-gradient(87deg, #00ce88 -2.44%, #04e7f4 98.1%);
- box-shadow: var(--dark-btn-shadow);
- backdrop-filter: blur(15px);
+/* CTA section specific */
+.ctaSection {
+ background-color: var(--dark-surface-02);
}
-.contactTitle {
- color: var(--dark-text-inverse) !important;
+.ctaSection::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url("/img/noise.png");
+ background-position: center;
+ background-repeat: repeat;
+ z-index: -1;
+}
+.ctaSubsection {
+ max-width: 40%;
+}
+.or {
+ background-color: var(--dark-surface-01);
+ width: 5rem;
+ min-width: 5rem;
+ height: 5rem;
+ border-radius: 50%;
+}
+.command {
+ background-color: var(--dark-alert-success-bg);
+ padding: 0 2rem;
+ line-height: 3rem;
+ width: 286px;
+ border-radius: 40px;
+ color: var(--dark-text-link);
+ cursor: pointer;
+}
+.command:hover {
+ background: radial-gradient(
+ 50% 50% at 50% 50%,
+ rgba(24, 239, 177, 0) 0%,
+ rgba(24, 239, 177, 0.3) 100%
+ );
+ transition: opacity 0.2s;
+}
+
+/* Footer section specific */
+.footerSection {
+ border-top: 1px solid var(--dark-border-invisible);
+ min-height: 4rem;
+ padding: 1rem 4rem;
+}
+.copyright {
+ color: var(--dark-text-secondary);
+ font-size: 0.875rem;
+ text-align: center;
}
.icons {
flex-wrap: wrap;
@@ -238,14 +338,14 @@
display: flex;
align-items: center;
justify-content: center;
- width: 3.5rem;
- height: 3.5rem;
- background-color: #f8fdff;
+ width: 2.25rem;
+ height: 2.25rem;
+ background-color: var(--dark-surface-02);
border-radius: 50%;
cursor: pointer;
}
.iconBG:hover {
- background-color: #eefcfd;
+ background-color: var(--dark-surface-03);
}
/* Responsiveness */
@@ -253,6 +353,14 @@
.illusContainer {
width: 100%;
}
+ .tutorialSection {
+ flex-direction: column;
+ padding: 3.5rem;
+ }
+ .tutorialLeft,
+ .tutorialFrame {
+ width: 100%;
+ }
.devlogSection {
flex-direction: column-reverse;
align-items: start;
@@ -260,9 +368,17 @@
.leftContainer {
max-width: 100%;
}
- .contactSection {
+ .ctaSection {
flex-direction: column;
- gap: 1.25rem;
+ gap: 2.5rem;
+ align-items: start;
+ }
+ .ctaSubsection {
+ max-width: 100%;
+ }
+ .footerSection {
+ flex-direction: column;
+ gap: 1rem;
}
}
@media (max-width: 768px) {
@@ -270,17 +386,11 @@
padding: 2.5rem 1.25rem;
border-radius: 20px;
}
+ .sectionGlow,
+ .sectionGlowOpposite {
+ display: none;
+ }
.flexCol {
gap: 1.25rem;
}
- .solidBtn {
- line-height: 2.5rem;
- width: 100%;
- }
- .arrowLeft,
- .arrowRight {
- width: 2.5rem;
- min-width: 2.5rem;
- height: 2.5rem;
- }
}
diff --git a/website/src/components/TutorialFrame/index.jsx b/website/src/components/TutorialFrame/index.jsx
index ce4501df6..37c9ab7dd 100644
--- a/website/src/components/TutorialFrame/index.jsx
+++ b/website/src/components/TutorialFrame/index.jsx
@@ -1,32 +1,18 @@
-const TutorialFrame = ({ tutorialLink, tutorialTitle, iframeSrc }) => {
+const TutorialFrame = ({ tutorialTitle, iframeSrc }) => {
return (
-
+
);
};
diff --git a/website/src/css/customVariables.css b/website/src/css/customVariables.css
index 1eafc6300..e46d43ee1 100644
--- a/website/src/css/customVariables.css
+++ b/website/src/css/customVariables.css
@@ -74,15 +74,6 @@
--dark-btn-shadow: -2px -2px 4px 0px rgba(228, 247, 255, 0.1),
4px 4px 11px 0px rgba(7, 28, 39, 0.16);
--dark-btn-hover: #00c584;
- --dark-card-shadow: 0px 10px 10px -5px rgba(7, 28, 39, 0.8),
- 0px 20px 25px -5px rgba(7, 28, 39, 0.8), 0px 1px 2px 0px #3d535b inset;
- --dark-card-bg: linear-gradient(180deg, #132831 0%, #071c27 119.54%);
- --dark-card-bg-hover: linear-gradient(
- 0deg,
- var(--hover, rgba(228, 247, 255, 0.06)) 0%,
- var(--hover, rgba(228, 247, 255, 0.06)) 100%
- ),
- linear-gradient(180deg, #132831 0%, #071c27 119.54%);
}
/* Override values for dark theme */
diff --git a/website/src/pages/homeContents.tsx b/website/src/pages/homeContents.tsx
index 01b7e24de..f8a562655 100644
--- a/website/src/pages/homeContents.tsx
+++ b/website/src/pages/homeContents.tsx
@@ -2,14 +2,23 @@ export interface CardLinks {
label: string;
link: string;
}
+export interface TutorialProps {
+ title: string;
+ description: string;
+ link: string;
+ iframeSrc: string;
+ illusSrc: string;
+}
export interface DevToolProps {
title: string;
href: string;
category: string;
}
+
export interface HomeCardProps {
title: string;
- links: CardLinks[];
+ links?: CardLinks[];
+ to?: string;
icon: string;
}
@@ -27,7 +36,7 @@ const homeCardContents: HomeCardProps[] = [
icon: "rocket",
},
{
- title: "Dapp Tutorials",
+ title: "DApp Tutorials",
links: [
{ label: "Transfer CKB", link: "/docs/dapp/transfer-ckb" },
{ label: "Write an On-Chain Message", link: "/docs/dapp/write-message" },
@@ -36,7 +45,7 @@ const homeCardContents: HomeCardProps[] = [
icon: "dapp",
},
{
- title: "Scripts",
+ title: "Scripts (Smart Contracts)",
links: [
{ label: "Intro to Script", link: "/docs/script/intro-to-script" },
{
@@ -49,33 +58,53 @@ const homeCardContents: HomeCardProps[] = [
},
{
title: "Run a Node",
- links: [
- { label: "Run a Mainnet Node", link: "/docs/node/run-mainnet-node" },
- { label: "Run a Testnet Node", link: "/docs/node/run-testnet-node" },
- { label: "Run a Devnet Node", link: "/docs/node/run-devnet-node" },
- ],
+ to: "/docs/node/run-mainnet-node",
icon: "node",
},
{
title: "Mining",
- links: [
- { label: "Rewards", link: "/docs/mining/rewards" },
- { label: "Cost and Profit", link: "/docs/mining/cost-and-profit" },
- { label: "Guide", link: "/docs/mining/guide" },
- ],
+ to: "/docs/mining/algorithm-difficulty",
icon: "mining",
},
{
title: "Tech Explanation",
- links: [
- {
- label: "Nervos Blockchain",
- link: "/docs/tech-explanation/nervos-blockchain",
- },
- { label: "Cell Model", link: "/docs/tech-explanation/cell-model" },
- { label: "Tokenomics", link: "/docs/tech-explanation/economics" },
- ],
- icon: "concept",
+ to: "/docs/tech-explanation/nervos-blockchain",
+ icon: "tech-explanation",
+ },
+];
+
+const tutorialSectionContents: TutorialProps[] = [
+ {
+ title: "Transfer CKB",
+ description: "View and transfer CKB from one address to another",
+ link: "/docs/dapp/transfer-ckb",
+ iframeSrc:
+ "https://codesandbox.io/embed/58n9pq?view=preview&module=%2Flib.ts",
+ illusSrc: "/svg/illus-transfer-ckb.svg",
+ },
+ {
+ title: "Write an On-Chain Message",
+ description: "Write ‘Hello CKB!’ to a CKB Cell and then retrieve it",
+ link: "/docs/dapp/write-message",
+ iframeSrc:
+ "https://codesandbox.io/embed/jsn25g?view=Editor+%2B+Preview&module=%2Flib.ts",
+ illusSrc: "/svg/illus-write-message.svg",
+ },
+ {
+ title: "Create a Fungible Token",
+ description: "Create, view, and transfer a custom token",
+ link: "/docs/dapp/create-token",
+ iframeSrc:
+ "https://codesandbox.io/embed/drlfr5?view=Editor+%2B+Preview&module=%2Flib.ts",
+ illusSrc: "/svg/illus-create-token.svg",
+ },
+ {
+ title: "Create a DOB",
+ description: "Create a digital object using Spore DOB",
+ link: "/docs/dapp/create-dob",
+ iframeSrc:
+ "https://codesandbox.io/embed/rmwshy?view=Editor+%2B+Preview&module=%2Flib.ts",
+ illusSrc: "/svg/illus-create-dob.svg",
},
];
@@ -137,4 +166,9 @@ const HomeContentsPage: React.FC = () => {
};
export default HomeContentsPage;
-export { homeCardContents, devToolSectionContents, contactUsContents };
+export {
+ homeCardContents,
+ tutorialSectionContents,
+ devToolSectionContents,
+ contactUsContents,
+};
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 619e6f066..2370907d6 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -9,8 +9,10 @@ import {
WalletDisplay,
ToolDisplay,
DevLogSection,
- ContactUsSection,
ProjectDisplay,
+ FooterSection,
+ CTASection,
+ DAppSection,
} from "../components/Home";
import { useColorMode } from "@docusaurus/theme-common";
import CookieConsent from "../components/CookieConsent";
@@ -24,18 +26,26 @@ export default function Home() {
+
Nervos CKB Documentation
-
+
Discover the power of Nervos CKB through tutorials, guides, and
concepts
-
+
+
+
+
-
-
+
Ready to Dive In?
+
+ Whether you're curious about how CKB works or eager to jump
+ straight into building, we've got you covered.
+
+
+
);
}
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 752a9b8a3..291c18a9c 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -6,6 +6,12 @@
background: url("/svg/header-bg.svg") no-repeat top center;
background-color: var(--dark-surface-01) !important;
}
+.headerGlow {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+}
.relative {
position: relative;
}
@@ -27,6 +33,7 @@
.description {
text-align: center;
color: var(--dark-text-secondary);
+ font-size: 1.25rem;
}
.titleBtm {
margin-bottom: 2rem;
diff --git a/website/static/img/ankr.png b/website/static/img/ankr.png
deleted file mode 100644
index 9ffd3ac88..000000000
Binary files a/website/static/img/ankr.png and /dev/null differ
diff --git a/website/static/img/block-rewards.png b/website/static/img/block-rewards.png
deleted file mode 100644
index aee406a38..000000000
Binary files a/website/static/img/block-rewards.png and /dev/null differ
diff --git a/website/static/img/ckb_base_issuance_trend.jpg b/website/static/img/ckb_base_issuance_trend.jpg
deleted file mode 100644
index db02a2881..000000000
Binary files a/website/static/img/ckb_base_issuance_trend.jpg and /dev/null differ
diff --git a/website/static/img/cover_logo.png b/website/static/img/cover_logo.png
deleted file mode 100644
index 3dccce957..000000000
Binary files a/website/static/img/cover_logo.png and /dev/null differ
diff --git a/website/static/img/doc_basic.png b/website/static/img/doc_basic.png
deleted file mode 100644
index 8f9e84905..000000000
Binary files a/website/static/img/doc_basic.png and /dev/null differ
diff --git a/website/static/img/doc_cover.svg b/website/static/img/doc_cover.svg
deleted file mode 100644
index 191b8325b..000000000
--- a/website/static/img/doc_cover.svg
+++ /dev/null
@@ -1,58 +0,0 @@
-
diff --git a/website/static/img/doc_essay.png b/website/static/img/doc_essay.png
deleted file mode 100644
index 9dd18b2c7..000000000
Binary files a/website/static/img/doc_essay.png and /dev/null differ
diff --git a/website/static/img/doc_integrate.png b/website/static/img/doc_integrate.png
deleted file mode 100644
index 8d3d0a5d8..000000000
Binary files a/website/static/img/doc_integrate.png and /dev/null differ
diff --git a/website/static/img/doc_lab.png b/website/static/img/doc_lab.png
deleted file mode 100644
index dac1b4a87..000000000
Binary files a/website/static/img/doc_lab.png and /dev/null differ
diff --git a/website/static/img/doc_reference.png b/website/static/img/doc_reference.png
deleted file mode 100644
index 0cd6d6202..000000000
Binary files a/website/static/img/doc_reference.png and /dev/null differ
diff --git a/website/static/img/fib.svg b/website/static/img/fib.svg
deleted file mode 100644
index c9f510c67..000000000
--- a/website/static/img/fib.svg
+++ /dev/null
@@ -1,414 +0,0 @@
-
\ No newline at end of file
diff --git a/website/static/img/footer_forum.png b/website/static/img/footer_forum.png
deleted file mode 100644
index 5597df5dd..000000000
Binary files a/website/static/img/footer_forum.png and /dev/null differ
diff --git a/website/static/img/footer_medium.png b/website/static/img/footer_medium.png
deleted file mode 100644
index 0bbd73487..000000000
Binary files a/website/static/img/footer_medium.png and /dev/null differ
diff --git a/website/static/img/footer_reddit.png b/website/static/img/footer_reddit.png
deleted file mode 100644
index 1950570bc..000000000
Binary files a/website/static/img/footer_reddit.png and /dev/null differ
diff --git a/website/static/img/footer_telegram.png b/website/static/img/footer_telegram.png
deleted file mode 100644
index 93c86122a..000000000
Binary files a/website/static/img/footer_telegram.png and /dev/null differ
diff --git a/website/static/img/footer_twitter.png b/website/static/img/footer_twitter.png
deleted file mode 100644
index 85ec06c55..000000000
Binary files a/website/static/img/footer_twitter.png and /dev/null differ
diff --git a/website/static/img/footer_youtube.png b/website/static/img/footer_youtube.png
deleted file mode 100644
index 53b6b90dc..000000000
Binary files a/website/static/img/footer_youtube.png and /dev/null differ
diff --git a/website/static/img/getblock.png b/website/static/img/getblock.png
deleted file mode 100644
index 6a936ac9c..000000000
Binary files a/website/static/img/getblock.png and /dev/null differ
diff --git a/website/static/img/logo.png b/website/static/img/logo.png
deleted file mode 100644
index b8b0020ae..000000000
Binary files a/website/static/img/logo.png and /dev/null differ
diff --git a/website/static/img/noise.png b/website/static/img/noise.png
new file mode 100644
index 000000000..0972179b2
Binary files /dev/null and b/website/static/img/noise.png differ
diff --git a/website/static/img/oss_logo.png b/website/static/img/oss_logo.png
deleted file mode 100644
index 8183e289b..000000000
Binary files a/website/static/img/oss_logo.png and /dev/null differ
diff --git a/website/static/img/rbf-cpfp.png b/website/static/img/rbf-cpfp.png
deleted file mode 100644
index bf38601a8..000000000
Binary files a/website/static/img/rbf-cpfp.png and /dev/null differ
diff --git a/website/static/img/rbf-merge.png b/website/static/img/rbf-merge.png
deleted file mode 100644
index 848b8284a..000000000
Binary files a/website/static/img/rbf-merge.png and /dev/null differ
diff --git a/website/static/img/rbf-process.png b/website/static/img/rbf-process.png
deleted file mode 100644
index b32d14fa1..000000000
Binary files a/website/static/img/rbf-process.png and /dev/null differ
diff --git a/website/static/img/rbf.png b/website/static/img/rbf.png
deleted file mode 100644
index 74803f265..000000000
Binary files a/website/static/img/rbf.png and /dev/null differ
diff --git a/website/static/img/tx AB 1.png b/website/static/img/tx AB 1.png
deleted file mode 100644
index 16e4d4649..000000000
Binary files a/website/static/img/tx AB 1.png and /dev/null differ
diff --git a/website/static/img/tx AB 2.png b/website/static/img/tx AB 2.png
deleted file mode 100644
index 97048b707..000000000
Binary files a/website/static/img/tx AB 2.png and /dev/null differ
diff --git a/website/static/img/tx AB 3.png b/website/static/img/tx AB 3.png
deleted file mode 100644
index b8597d94f..000000000
Binary files a/website/static/img/tx AB 3.png and /dev/null differ
diff --git a/website/static/img/tx AB 4.png b/website/static/img/tx AB 4.png
deleted file mode 100644
index 25609112e..000000000
Binary files a/website/static/img/tx AB 4.png and /dev/null differ
diff --git a/website/static/img/undraw_code_review.svg b/website/static/img/undraw_code_review.svg
deleted file mode 100644
index 51a505791..000000000
--- a/website/static/img/undraw_code_review.svg
+++ /dev/null
@@ -1 +0,0 @@
-
code review
diff --git a/website/static/img/undraw_monitor.svg b/website/static/img/undraw_monitor.svg
deleted file mode 100644
index 8eef5e026..000000000
--- a/website/static/img/undraw_monitor.svg
+++ /dev/null
@@ -1 +0,0 @@
-
monitor
diff --git a/website/static/img/undraw_note_list.svg b/website/static/img/undraw_note_list.svg
deleted file mode 100644
index 97000b238..000000000
--- a/website/static/img/undraw_note_list.svg
+++ /dev/null
@@ -1 +0,0 @@
-
note list
diff --git a/website/static/img/undraw_online.svg b/website/static/img/undraw_online.svg
deleted file mode 100644
index aeaf6f095..000000000
--- a/website/static/img/undraw_online.svg
+++ /dev/null
@@ -1 +0,0 @@
-
online
diff --git a/website/static/img/undraw_open_source.svg b/website/static/img/undraw_open_source.svg
deleted file mode 100644
index f1ea1d5f8..000000000
--- a/website/static/img/undraw_open_source.svg
+++ /dev/null
@@ -1 +0,0 @@
-
open source
diff --git a/website/static/img/undraw_operating_system.svg b/website/static/img/undraw_operating_system.svg
deleted file mode 100644
index 3dc034b29..000000000
--- a/website/static/img/undraw_operating_system.svg
+++ /dev/null
@@ -1 +0,0 @@
-
operating system
diff --git a/website/static/img/undraw_react.svg b/website/static/img/undraw_react.svg
deleted file mode 100644
index 34d568d85..000000000
--- a/website/static/img/undraw_react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
react
diff --git a/website/static/img/undraw_tweetstorm.svg b/website/static/img/undraw_tweetstorm.svg
deleted file mode 100644
index d074e1e68..000000000
--- a/website/static/img/undraw_tweetstorm.svg
+++ /dev/null
@@ -1 +0,0 @@
-
tweetstorm
diff --git a/website/static/img/undraw_youtube_tutorial.svg b/website/static/img/undraw_youtube_tutorial.svg
deleted file mode 100644
index d6818a084..000000000
--- a/website/static/img/undraw_youtube_tutorial.svg
+++ /dev/null
@@ -1 +0,0 @@
-
youtube tutorial
diff --git a/website/static/img/unifra.png b/website/static/img/unifra.png
deleted file mode 100644
index f1f197597..000000000
Binary files a/website/static/img/unifra.png and /dev/null differ
diff --git a/website/static/svg/header-bg.svg b/website/static/svg/header-bg.svg
index 111177939..4fec9cc82 100644
--- a/website/static/svg/header-bg.svg
+++ b/website/static/svg/header-bg.svg
@@ -1,23 +1,9 @@
-
-
-
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/header-glow.svg b/website/static/svg/header-glow.svg
new file mode 100644
index 000000000..1906f73db
--- /dev/null
+++ b/website/static/svg/header-glow.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/icon-chevron-right.svg b/website/static/svg/icon-chevron-right.svg
index b0e293ae1..f349a7911 100644
--- a/website/static/svg/icon-chevron-right.svg
+++ b/website/static/svg/icon-chevron-right.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/icon-circle-arrow.svg b/website/static/svg/icon-circle-arrow.svg
index 02b784610..ad5a390ca 100644
--- a/website/static/svg/icon-circle-arrow.svg
+++ b/website/static/svg/icon-circle-arrow.svg
@@ -1,4 +1,4 @@
-
-
+
+
diff --git a/website/static/svg/icon-copy-brand.svg b/website/static/svg/icon-copy-brand.svg
new file mode 100644
index 000000000..a8f0cb228
--- /dev/null
+++ b/website/static/svg/icon-copy-brand.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/website/static/svg/illus-create-dob.svg b/website/static/svg/illus-create-dob.svg
new file mode 100644
index 000000000..6de78fd98
--- /dev/null
+++ b/website/static/svg/illus-create-dob.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/illus-create-token.svg b/website/static/svg/illus-create-token.svg
new file mode 100644
index 000000000..b76987593
--- /dev/null
+++ b/website/static/svg/illus-create-token.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/website/static/svg/illus-dev-log.svg b/website/static/svg/illus-dev-log.svg
index e0880a2cd..e0bf6b3ec 100644
--- a/website/static/svg/illus-dev-log.svg
+++ b/website/static/svg/illus-dev-log.svg
@@ -1,134 +1,66 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
+
-
+
-
+
-
+
-
+
-
-
-
-
-
-
-
+
+
+
-
+
-
+
-
+
-
+
-
+
-
-
-
-
diff --git a/website/static/svg/illus-transfer-ckb.svg b/website/static/svg/illus-transfer-ckb.svg
new file mode 100644
index 000000000..e9ec522c4
--- /dev/null
+++ b/website/static/svg/illus-transfer-ckb.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/website/static/svg/illus-write-message.svg b/website/static/svg/illus-write-message.svg
new file mode 100644
index 000000000..5facf9634
--- /dev/null
+++ b/website/static/svg/illus-write-message.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/logo-media-discord.svg b/website/static/svg/logo-media-discord.svg
index 50e9b0ff5..58c8be262 100644
--- a/website/static/svg/logo-media-discord.svg
+++ b/website/static/svg/logo-media-discord.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/logo-media-github.svg b/website/static/svg/logo-media-github.svg
index 23095b122..6bd346099 100644
--- a/website/static/svg/logo-media-github.svg
+++ b/website/static/svg/logo-media-github.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/logo-media-medium.svg b/website/static/svg/logo-media-medium.svg
index c55fddfb9..ffb04edab 100644
--- a/website/static/svg/logo-media-medium.svg
+++ b/website/static/svg/logo-media-medium.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/logo-media-nervostalk.svg b/website/static/svg/logo-media-nervostalk.svg
index 5016f5d1b..e59dfb006 100644
--- a/website/static/svg/logo-media-nervostalk.svg
+++ b/website/static/svg/logo-media-nervostalk.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/logo-media-reddit.svg b/website/static/svg/logo-media-reddit.svg
index 5f1ac52c0..be95ac463 100644
--- a/website/static/svg/logo-media-reddit.svg
+++ b/website/static/svg/logo-media-reddit.svg
@@ -1,6 +1,6 @@
-
-
-
-
+
+
+
+
diff --git a/website/static/svg/logo-media-telegram.svg b/website/static/svg/logo-media-telegram.svg
index f6b58de28..7609a4242 100644
--- a/website/static/svg/logo-media-telegram.svg
+++ b/website/static/svg/logo-media-telegram.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/logo-media-twitter.svg b/website/static/svg/logo-media-twitter.svg
index e824405a6..be346f95d 100644
--- a/website/static/svg/logo-media-twitter.svg
+++ b/website/static/svg/logo-media-twitter.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/logo-media-youtube.svg b/website/static/svg/logo-media-youtube.svg
index 309ba9b6d..b118de496 100644
--- a/website/static/svg/logo-media-youtube.svg
+++ b/website/static/svg/logo-media-youtube.svg
@@ -1,3 +1,3 @@
-
+
diff --git a/website/static/svg/polygon-concept.svg b/website/static/svg/polygon-concept.svg
deleted file mode 100644
index 3f46a7bf4..000000000
--- a/website/static/svg/polygon-concept.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-dapp.svg b/website/static/svg/polygon-dapp.svg
deleted file mode 100644
index cf1da5a26..000000000
--- a/website/static/svg/polygon-dapp.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-mining.svg b/website/static/svg/polygon-mining.svg
deleted file mode 100644
index 2fd15c98b..000000000
--- a/website/static/svg/polygon-mining.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-node.svg b/website/static/svg/polygon-node.svg
deleted file mode 100644
index ad5795bb2..000000000
--- a/website/static/svg/polygon-node.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-project.svg b/website/static/svg/polygon-project.svg
deleted file mode 100644
index 122bc4453..000000000
--- a/website/static/svg/polygon-project.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-resource.svg b/website/static/svg/polygon-resource.svg
deleted file mode 100644
index 4924ded93..000000000
--- a/website/static/svg/polygon-resource.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-rocket.svg b/website/static/svg/polygon-rocket.svg
deleted file mode 100644
index f7703d2eb..000000000
--- a/website/static/svg/polygon-rocket.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-script.svg b/website/static/svg/polygon-script.svg
deleted file mode 100644
index 9d4d9bacc..000000000
--- a/website/static/svg/polygon-script.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-tool.svg b/website/static/svg/polygon-tool.svg
deleted file mode 100644
index 0845d6043..000000000
--- a/website/static/svg/polygon-tool.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/polygon-wallet.svg b/website/static/svg/polygon-wallet.svg
deleted file mode 100644
index 805bbcea7..000000000
--- a/website/static/svg/polygon-wallet.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/website/static/svg/section-glow.svg b/website/static/svg/section-glow.svg
new file mode 100644
index 000000000..fb06330c3
--- /dev/null
+++ b/website/static/svg/section-glow.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/sm-section-glow.svg b/website/static/svg/sm-section-glow.svg
new file mode 100644
index 000000000..e00ccfef9
--- /dev/null
+++ b/website/static/svg/sm-section-glow.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-dapp.svg b/website/static/svg/square-dapp.svg
new file mode 100644
index 000000000..20c3919c5
--- /dev/null
+++ b/website/static/svg/square-dapp.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-devtool.svg b/website/static/svg/square-devtool.svg
new file mode 100644
index 000000000..b4596a3f5
--- /dev/null
+++ b/website/static/svg/square-devtool.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-mining.svg b/website/static/svg/square-mining.svg
new file mode 100644
index 000000000..b087f7cfd
--- /dev/null
+++ b/website/static/svg/square-mining.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-node.svg b/website/static/svg/square-node.svg
new file mode 100644
index 000000000..132b7106e
--- /dev/null
+++ b/website/static/svg/square-node.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-project.svg b/website/static/svg/square-project.svg
new file mode 100644
index 000000000..81d9ed255
--- /dev/null
+++ b/website/static/svg/square-project.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-rocket.svg b/website/static/svg/square-rocket.svg
new file mode 100644
index 000000000..05064a9fc
--- /dev/null
+++ b/website/static/svg/square-rocket.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-script.svg b/website/static/svg/square-script.svg
new file mode 100644
index 000000000..c6dee1cfd
--- /dev/null
+++ b/website/static/svg/square-script.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-tech-explanation.svg b/website/static/svg/square-tech-explanation.svg
new file mode 100644
index 000000000..47a510b88
--- /dev/null
+++ b/website/static/svg/square-tech-explanation.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/website/static/svg/square-wallet.svg b/website/static/svg/square-wallet.svg
new file mode 100644
index 000000000..76e4e330c
--- /dev/null
+++ b/website/static/svg/square-wallet.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+