add installation guide & update tutorial overview (#482)

website/docs/dapp/create-dob.mdx

@@ -7,21 +7,16 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import TutorialHeader from "@components/TutorialHeader";
 import Tooltip from "@components/Tooltip";
-import { DOBOVERVIEW } from "./TutorialOverview.tsx";
 import SetupProject from "./SetupProject.tsx";
 import SwitchToTestnet from "./_SwitchToTestnet.mdx";
 
 # Create a Digital Object Using Spore Protocol
 
-<TutorialHeader
-  time={DOBOVERVIEW.time}
-  topics={DOBOVERVIEW.topics}
-  tools={DOBOVERVIEW.tools}
-/>
+<TutorialHeader time={"5 - 10 min"} tools={"dapp"} />
 
-## Spore Protocol on CKB
+## Tutorial Overview
 
-Spore is an on-chain <Tooltip>digital object (DOB)</Tooltip> protocol backed by CKB. An "on-chain" asset refers to a digital asset whose data is directly encoded onto the blockchain. A Spore Cell can hold any type of assets users want to store on-chain, the following data structure is used in the Spore Cell:
+Spore is an on-chain <Tooltip>digital object (DOB)</Tooltip> protocol backed by CKB. An “on-chain” asset refers to a digital asset with its data directly encoded on the blockchain. A Spore Cell can hold any type of asset users want to store on-chain. The data structure for a Spore Cell is as follows:
 
 ```js
 data:
@@ -37,9 +32,9 @@ lock:
     <user_defined>
 ```
 
-Notice that the data field of the Spore Cell contains `content-type` and `content`, which allow users to turn any content form into a digital object. All the fields in a Spore Cell are immutable once created.
+Notice that the data field of the Spore Cell contains `content-type` and `content`, which allow users to transform any content into a digital object. All fields in a Spore Cell are immutable once created.
 
-In this tutorial, we will build a simple dApp to turn a picture on your computer into a digital object on the blockchain using the Spore SDK.
+In this tutorial, you will learn how to build a simple dApp using the Spore SDK that converts a picture on your computer into a digital object on the blockchain.
 
 ## Setup Devnet & Run Example
 

website/docs/dapp/create-token.mdx

@@ -7,33 +7,26 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import TutorialHeader from "@components/TutorialHeader";
 import Tooltip from "@components/Tooltip";
-import { TOKENOVERVIEW } from "./TutorialOverview.tsx";
 import SetupProject from "./SetupProject.tsx";
 import SwitchToTestnet from "./_SwitchToTestnet.mdx";
 
 # Create a Fungible Token
 
-<TutorialHeader
-  time={TOKENOVERVIEW.time}
-  topics={TOKENOVERVIEW.topics}
-  tools={TOKENOVERVIEW.tools}
-/>
+<TutorialHeader time={"5 - 10 min"} tools={"dapp"} />
 
-## Custom Token on CKB
+## Tutorial Overview
 
-Different from [ERC20(Ethereum)](https://eips.ethereum.org/EIPS/eip-20) and [BRC20(Bitcoin)](https://www.brc-20.io/), CKB uses a unique way to build custom tokens based on the UTXO-like <Tooltip>Cell Model</Tooltip>.
+Unlike [ERC20(Ethereum)](https://eips.ethereum.org/EIPS/eip-20) and [BRC20(Bitcoin)](https://www.brc-20.io/), CKB uses a unique way to build custom tokens based on its UTXO-like <Tooltip>Cell Model</Tooltip>.
 
-In CKB, custom tokens are called User-Defined-Token, aka UDT. The core team of CKB has proposed a minimal standard for UDT called xUDT(extensible UDT). In this tutorial, we will use the pre-deployed Script `xUDT script` to issue custom tokens.
+In CKB, custom tokens are called User-Defined Tokens (UDTs). CKB's core team has proposed a minimal standard for UDT called xUDT(extensible UDT). In this tutorial, you will learn how to issue custom tokens using the pre-deployed `xUDT Script`.
 
-The high-level workflow to issue a custom token with xUDT goes like this:
+Steps to Issue a Custom Token with xUDT:
 
-When you issue a token, you create a special Cell that presents some balance of your token, like a piece of printed cash to the dollars.
+1. Create a Special Cell: When you issue tokens, you create a special Cell representing a balance of your custom token, similar to how physical cash represents a balance of currency.
+2. Configure the Cell's Data: This Cell’s data field will store the token amount, while its Type Script will be the xUDT Script. The script’s args field will contain the Lock Script Hash of the issuer.
+3. Establish a Unique Token ID: The issuer’s Lock Script hash serves as the unique identifier for each custom token. Different Lock Script hashes represent different tokens, enabling secure and distinct transactions for each token type.
 
-For this special Cell, its data field contains the amount of the token and its Type Script is xUDT Script where the args of that Script will be the issuer's <Tooltip>Lock Script Hash</Tooltip>.
-
-This issuer's Lock Script Hash works like the unique ID for the custom token. Different Lock Script Hash means a different kind of token. It is also used as a checkpoint to tell that a transaction is triggered by the token issuer or a regular token holder to apply different security validation.
-
-In reality, xUDT is more complicated and powerful with many features but the idea is the same, you can check the [full specs here](https://github.com/XuJiandong/rfcs/blob/xudt/rfcs/0052-extensible-udt/0052-extensible-udt.md).
+While xUDT includes more advanced features, this tutorial focuses on its core concept. For more details on xUDT’s capabilities, you can explore the [full xUDT spec](https://github.com/XuJiandong/rfcs/blob/xudt/rfcs/0052-extensible-udt/0052-extensible-udt.md).
 
 ## Setup Devnet & Run Example
 

website/docs/dapp/simple-lock.mdx

@@ -6,7 +6,6 @@ title: Build a Simple Lock
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import TutorialHeader from "@components/TutorialHeader";
-import { LOCKOVERVIEW } from "./TutorialOverview.tsx";
 import SwitchToTestnet from "./_SwitchToTestnet.mdx";
 import StartDevnet from "./_StartDevnet.mdx";
 import useBaseUrl from "@docusaurus/useBaseUrl";
@@ -16,20 +15,18 @@ import CodeTabs from "./_CodeTabs.mdx";
 
 # Build a Simple Lock
 
-<TutorialHeader
-  time={LOCKOVERVIEW.time}
-  topics={LOCKOVERVIEW.topics}
-  tools={LOCKOVERVIEW.tools}
-/>
+<TutorialHeader time={"10 - 15 min"} tools={"script"} />
+
+## Tutorial Overview
 
-In this tutorial, we'll show you how to create a full-stack dApp, including both the frontend and the Script, to help you better understand CKB blockchain development.
+In this tutorial, you will learn how to create a full-stack dApp, including both the frontend and the Script, to deepen your understanding of CKB blockchain development.
 
-Our example dApp will use a simple toy lock. We'll create a <Tooltip>Lock Script</Tooltip> named `hash_lock` to secure some CKB tokens and build a web interface for users to transfer tokens from this `hash_lock`.
+Our example dApp will use a simple toy lock. You will create a <Tooltip>Lock Script</Tooltip> named `hash_lock` to secure some CKB tokens and build a web interface for users to transfer tokens from this `hash_lock`.
 
-The `hash_lock` project involves specifying a hash in the Script's <Tooltip>script_args</Tooltip>. To unlock it, users must provide the preimage that matches the hash.
+The `hash_lock` project involves specifying a hash in the Script's <Tooltip>script_args</Tooltip>. To unlock it, users must provide the preimage that matches this hash.
 
 :::note
-This toy lock example isn't intended for production, You should ONLY use it in Testnet as an starting point for learning the basics.
+This toy lock example isn't intended for production. Use it ONLY n Testnet as an starting point for learning the basics.
 :::
 
 ## Setup Devnet & Run Example