feat: add Build landing page (#50)

# What 💻 
* Create a landing page for Build section that provides an overview and
links to the 101 and quickstart guides.
* Moved the content from the ZKsync 101 intro into the Build
Introduction page since it works really well for the landing page.
* Added a couple additional entries to the glossary
* Moved the Connect to ZKsync from ZKsync 101 to a top level navigation
just under the new Build landing page.
* The reasoning behind this is that it provides all the information on
connecting a user's wallet to the ZKsync network which should be valid
for everything and not just inside ZKsync 101 section.
* This makes the link for someone to add the network to their wallet
extremely quick to find.

# Why ✋
* Provide a starting landing page that helps guide the reader to
resources they might need at a quick glance.

.eslintrc.json

@@ -4,7 +4,7 @@
     "es2021": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:vue/vue3-essential", "@nuxt/eslint-config"],
+  "extends": ["eslint:recommended", "plugin:vue/vue3-essential", "@nuxt/eslint-config", "@vue/eslint-config-prettier"],
   "plugins": ["vue"],
   "rules": {
     "quote-props": ["error", "as-needed"],

app.vue

@@ -54,7 +54,7 @@ const links = computed(() => {
   return [
     {
       label: 'Build',
-      to: '/build/quick-start',
+      to: '/build',
       active: route.path.startsWith('/build'),
     },
     {

content/00.build/00.zksync-101/1.zksync-overview.md → content/00.build/00.index.md

@@ -1,23 +1,46 @@
 ---
-title: ZKsync overview
-description: A quick overview of what is ZKsync
+title: Introduction
+description:
 ---
 
-## What is ZKsync?
-
-**ZKsync Era** is a Layer 2 **[ZK
-rollup](https://docs.zksync.io/build/developer-reference/rollups.html#what-are-zk-rollups)**, a trustless protocol that
-uses cryptographic validity proofs to provide scalable and low-cost transactions on Ethereum. In ZKsync Era, computation
-is performed off-chain and most data is stored off-chain as well. Transactions are bundled into batches before
-generating a validity proof. As all validity proofs are proven on the Ethereum mainchain, users enjoy the same security
+**ZKsync Era** is a Layer 2
+**[ZK rollup](/build/resources/glossary#zk-rollup)**, a trustless protocol that
+uses cryptographic validity proofs to provide scalable and low-cost transactions on Ethereum.
+In ZKsync Era, computation is performed off-chain and most data is stored off-chain as well.
+Transactions are bundled into batches before generating a validity proof.
+As all validity proofs are proven on the Ethereum mainchain, users enjoy the same security
 level as in Ethereum.
 
-ZKsync Era is made to look and feel like Ethereum, but with a higher throughput and lower fees. Just like on Ethereum,
-smart contracts are written in Solidity/Vyper and can be called using the same clients as the other EVM-compatible
+ZKsync Era is made to look and feel like Ethereum, but with a higher throughput and lower fees.
+Just like on Ethereum, smart contracts are written in Solidity/Vyper and can be called using the same clients as the other EVM-compatible
 chains.
 
-You don't need to register a separate private key before using it; ZKsync supports existing Ethereum wallets out of the
-box.
+You don't need to register a separate private key before using it;
+ZKsync supports existing Ethereum wallets out of the box.
+
+::callout{icon="i-heroicons-cube-transparent-solid" color="blue"}
+If you have not connected to ZKsync Era before, you will need to
+configure your wallet with the network. To add ZKsync Era, see [Connect to ZKsync Era](/build/connect-to-zksync).
+::
+
+::card-group
+  ::card
+  ---
+  title: ZKsync 101
+  icon: i-heroicons-academic-cap-solid
+  to: /build/zksync-101
+  ---
+  Experience a quick tutorial on building and deploying smart contracts on ZKsync Era.
+  ::
+  ::card
+  ---
+  title: Quickstart
+  icon: i-heroicons-rocket-launch-solid
+  to: /build/quick-start
+  ---
+  Learn to build projects locally for ZKsync Era using zksync-cli.
+  ::
+::
 
 ## Main features
 :check-icon Mainnet-like security with zero reliance on 3rd parties.
@@ -65,9 +88,3 @@ Interacting with applications built on ZKsync Era is seamless, cheap and fast.
 - Transaction fees can be conveniently paid with ERC20 tokens (e.g. USDC) thanks to **[native account abstraction and
   paymasters](https://docs.zksync.io/build/developer-reference/account-abstraction.html)**.
 - Support for existing Ethereum-based wallets like Metamask, TrustWallet, Zerion or Rabby.
-
-## Get started
-
-- Follow [this guide to add the ZKsync network to your wallet](connect-zksync).
-- Get [testnet funds from one of the faucets](/ecosystem/network-faucets)
-- Deploy your first smart contract to ZKsync Era in the **[quickstart](quickstart)**.

content/00.build/01.connect-to-zksync.md

@@ -0,0 +1,31 @@
+---
+title: Connect to ZKsync Era
+description: Step-by-step guide to connect your wallet to ZKsync Era mainnet and testnet.
+---
+
+## Add ZKsync Era to your MetaMask wallet
+
+You can add ZKsync Era to your MetaMask wallet using the buttons below:
+
+:network-adder{ network="mainnet" }  :network-adder{ network="testnet" }
+
+## Manually add ZKsync Era
+
+To manually add ZKsync Era as a custom network in your wallet, follow these steps:
+
+1. Find the “Add Network” option in your wallet (in MetaMask, you can find this in the networks dropdown).
+1. Click on “Add Network"
+1. Fill in the following details for the ZKsync Era network environments:
+
+### Mainnet network details
+
+:display-partial{ path="_partials/_mainnet-network-details" }
+
+### Sepolia testnet network details
+
+:display-partial{ path="_partials/_testnet-network-details" }
+
+## Funding your wallet
+
+Once you have your wallet connected to a ZKsync Era environment,
+you can [get testnet funds from one of the available faucets in our list](/ecosystem/network-faucets).

content/00.build/05.zksync-101/1.index.md

@@ -0,0 +1,22 @@
+---
+title: Overview
+description: Learn how to interact with ZKsync Era
+---
+
+Welcome to ZKsync 101!
+
+This tutorial will help you to learn how to write, compile and deploy smart contracts to ZKsync Era.
+In the first step, you will build and deploy a simple contract and interact with it by sending messages.
+The second section will have you creating your own ERC20 token and the final section will
+introduce a specialized feature of ZKsync Era, native account abstraction and paymasters.
+
+This section is designed for developers new to ZKsync Era and uses online IDE's - Remix and AtlasZK -
+to help you learn as quickly and efficiently as possible.
+
+## Get started
+
+- If you haven't already added ZKsync Era to your wallet, follow the instructions in [Connect ZKsync Era to your wallet](/build/connect-to-zksync).
+- Continue to [Deploy your first contract](/build/zksync-101/deploy-your-first-contract) to learn how to use Remix or Atlas
+  to deploy a contract onto ZKsync Era.
+- If you are familiar with ZKsync Era and want to develop using `zksync-cli` locally
+  on your machine, you can jump over to the [Quickstart](/build/quick-start) section.

content/00.build/00.zksync-101/3.quickstart.md → content/00.build/05.zksync-101/3.deploy-your-first-contract.md

@@ -1,12 +1,12 @@
 ---
 title: Deploy your first contract
-description: Deploy a smart contract to ZKsync from your browser in under 5 minutes
+description: Deploy a smart contract to ZKsync from your browser using Remix or Atlas in under 5 minutes
 ---
 
 This tutorial shows you how to deploy and interact with a smart contract on ZKsync Era in less than 5 minutes.
 It will help you get familiar with the ZKsync smart contract development and deployment process using different tools.
 
-This is what we're going to do:
+In this section you will learn how to:
 
 :check-icon Build a smart contract to exchange secret messages with Zeek.
 
@@ -17,7 +17,7 @@ This is what we're going to do:
 ## Prerequisites
 
 1. Before you start, make sure that
-[you’ve configured the %%zk_testnet_name%% in your browser wallet by following the instructions here](connect-zksync).
+[you’ve configured the %%zk_testnet_name%% in your browser wallet by following the instructions here](/build/connect-to-zksync).
 1. In addition, fund your wallet with %%zk_testnet_name%% ETH using [one of the available faucets](/ecosystem/network-faucets).
 
 ## Review the smart contract code
@@ -116,6 +116,6 @@ ZK is the endgame ✌️
 
 - Join the [ZKsync developer community in Discord](https://join.zksync.dev/) where you can ask any questions about this tutorial in the #dev-101
   channel
-- Continue learning by [deploying an ERC20 token to ZKsync](erc20-token).
+- Continue learning by [deploying an ERC20 token to ZKsync](/build/zksync-101/erc20-token).
 - Join our :external-link{text="GitHub Discussions Community" href="%%zk_git_repo_zksync-developers%%/discussions/"} to
   help other devs building on ZKsync or share your project.

content/00.build/00.zksync-101/4.erc20-token.md → content/00.build/05.zksync-101/4.erc20-token.md

@@ -13,10 +13,9 @@ This is what we’re going to do:
 
 ## Prerequisites
 
-Before you start, make sure that you’ve configured the %%zk_testnet_name%% in your browser wallet by following the
-instructions here.
-
-In addition, fund your wallet with testnet ETH on %%zk_testnet_name%%.
+1. Before you start, make sure that
+[you’ve configured the %%zk_testnet_name%% in your browser wallet by following the instructions here](/build/connect-to-zksync).
+1. In addition, fund your wallet with %%zk_testnet_name%% ETH using [one of the available faucets](/ecosystem/network-faucets).
 
 To complete this tutorial we’ll use either Atlas or Remix. Select your preferred tool:
 

content/00.build/00.zksync-101/5.paymasters-introduction.md → content/00.build/05.zksync-101/5.paymasters-introduction.md

@@ -3,8 +3,9 @@ title: Paymasters introduction
 description: Learn about paymasters and use one to pay transaction fees with your own token
 ---
 
-This tutorial makes use of smart contracts deployed in the previous two tutorials, [Deploy your first
-contract](quickstart) and [Create an ERC20 token](erc20-token). This section introduces one of the custom features
+This tutorial makes use of smart contracts deployed in the previous two tutorials,
+[Deploy your first contract](/build/zksync-101/deploy-your-first-contract) and [Create an ERC20 token](/build/zksync-101/erc20-token).
+This section introduces one of the custom features
 of ZKsync: native account abstraction and paymasters.
 
 In this tutorial we will:
@@ -15,7 +16,11 @@ In this tutorial we will:
 
 :check-icon Use the testnet paymaster to pay transaction fees with our own ERC20 token.
 
-Before you start, make sure that you’ve configured the %%zk_testnet_name%% in your browser wallet by [following the instructions here](/build/zksync-101/connect-zksync).
+## Prerequisites
+
+1. Before you start, make sure that
+[you’ve configured the %%zk_testnet_name%% in your browser wallet by following the instructions here](/build/connect-to-zksync).
+1. In addition, fund your wallet with %%zk_testnet_name%% ETH using [one of the available faucets](/ecosystem/network-faucets).
 
 ## What is a paymaster?
 

content/00.build/00.zksync-101/_erc20_tutorial/_atlas_erc20_tutorial.md → content/00.build/05.zksync-101/_erc20_tutorial/_atlas_erc20_tutorial.md

@@ -49,7 +49,7 @@ Atlas is a browser-based IDE with an integrated AI assistant that allows you to
 directly from your browser. Click the button below to open the project in Atlas.
 
 :u-button{ icon="i-heroicons-code-bracket" size="xl" color="primary" variant="solid" :trailing="false"
-to="https://app.atlaszk.com/projects?template=https://github.com/uF4No/zksync-101-atlas&open=/contracts/TestToken.sol&chainId=300"
+to="https://app.atlaszk.com/projects?template=https://github.com/uF4No/zksync-101-atlas&open=/contracts/TestToken.sol&chainId=%%zk_testnet_chain_id%%"
 target="_blank" label="Open smart contract in Atlas"}
 
 You can see the contract in the Atlas code editor. In the right sidebar,

content/00.build/00.zksync-101/_erc20_tutorial/_remix_erc20_tutorial.md → content/00.build/05.zksync-101/_erc20_tutorial/_remix_erc20_tutorial.md

@@ -50,6 +50,8 @@ The Remix IDE is an open-source web and desktop application that supports Ethere
 deployment, offering tools for writing, testing, debugging, and deploying smart contracts written in Solidity to EVM
 compatible protocols.
 
+### Enable the Remix ZKsync plugin
+
 :display-partial{path="/_partials/_enable-remix-zksync-plugin"}
 
 Click the button below to open the project in Remix and see the contract in the Remix code editor.

content/00.build/00.zksync-101/_paymaster_intro/_atlas_paymaster_intro.md → content/00.build/05.zksync-101/_paymaster_intro/_atlas_paymaster_intro.md

@@ -5,7 +5,7 @@ title: Paymaster with Atlas
 Click the following button to open the project in Atlas:
 
 :u-button{ icon="i-heroicons-code-bracket" size="xl" color="primary" variant="solid" :trailing="false"
-to="https://app.atlaszk.com/projects?template=https://github.com/uF4No/zksync-101-atlas&open=/scripts/paymaster-transaction.ts&chainId=300"
+to="https://app.atlaszk.com/projects?template=https://github.com/uF4No/zksync-101-atlas&open=/scripts/paymaster-transaction.ts&chainId=%%zk_testnet_chain_id%%"
 target="_blank" label="Open script in Atlas"}
 
 It’ll open the script to send a transaction via the paymaster. Let’s go through the most important parts:
@@ -110,8 +110,8 @@ Finally we retrieve and print the ETH and ERC20 balances to see how they’ve ch
 ## Run the script
 
 To run the script, first enter the addresses of the `ZeekSecretMessages.sol` and `TestToken.sol` contracts that we
-deployed previously ([here](/build/zksync-101/quickstart) and
-[here](/build/zksync-101/erc20-token)) in the following variables at the beginning of
+deployed previously ([Deploy your first contract](/build/zksync-101/deploy-your-first-contract) and
+[Erc20 Token](/build/zksync-101/erc20-token)) in the following variables at the beginning of
 the script:
 
 ```typescript

content/00.build/00.zksync-101/_paymaster_intro/_remix_paymaster_intro.md → content/00.build/05.zksync-101/_paymaster_intro/_remix_paymaster_intro.md

@@ -116,8 +116,8 @@ Finally we retrieve and print the ETH and ERC20 balances to see how they’ve ch
 ## Run the script
 
 To run the script, first enter the addresses of the `ZeekSecretMessages.sol` and `TestToken.sol` contracts that we
-deployed previously ([here](/build/zksync-101/quickstart) and
-[here](/build/zksync-101/erc20-token)) in the following variables at the beginning of
+deployed previously ([Deploy your first contract](/build/zksync-101/deploy-your-first-contract) and
+[Erc20 Token](/build/zksync-101/erc20-token)) in the following variables at the beginning of
 the script:
 
 ```typescript

content/00.build/00.zksync-101/_quickstart/_atlas_deploy_contract.md → content/00.build/05.zksync-101/_quickstart/_atlas_deploy_contract.md

@@ -5,7 +5,7 @@ Atlas is a browser-based IDE with an integrated AI assistant that allows you to
 directly from your browser. Click the button below to open the project in Atlas.
 
 :u-button{ icon="i-heroicons-code-bracket" size="xl" color="primary" variant="solid" :trailing="false"
-to="https://app.atlaszk.com/projects?template=https://github.com/uF4No/zksync-101-atlas&open=/contracts/ZeekSecretMessages.sol&chainId=300"
+to="https://app.atlaszk.com/projects?template=https://github.com/uF4No/zksync-101-atlas&open=/contracts/ZeekSecretMessages.sol&chainId=%%zk_testnet_chain_id%%"
 target="_blank" label="Open smart contract in Atlas"}
 
 You can see the contract in the Atlas code editor.

content/00.build/00.zksync-101/_quickstart/_remix_deploy_contract.md → content/00.build/05.zksync-101/_quickstart/_remix_deploy_contract.md

@@ -6,6 +6,8 @@ The Remix IDE is an open-source web and desktop application that supports Ethere
 deployment, offering tools for writing, testing, debugging, and deploying smart contracts written in Solidity to EVM
 compatible protocols.
 
+### Enable the Remix ZKsync plugin
+
 :display_partial{path="/_partials/_enable-remix-zksync-plugin"}
 
 Click the button below to open the project in Remix and see the contract in the Remix code editor.

content/00.build/10.quick-start/00.index.md

@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: Getting started
 description: Learn to build and deploy smart contracts on ZKsync Era.
 ---
 

content/00.build/10.quick-start/10.hello-zksync.md

@@ -20,7 +20,7 @@ Let's dive in and start your developer journey on ZKsync!
 
 This Quickstart series requires some initial setup of tools to elevate your
 development experience building for ZKsync.
-Make sure to go through the setup provided in the initial [Getting Started](/build/quick-start) section.
+Make sure to go through the setup provided in the initial [Getting started](/build/quick-start) section.
 
 Select the framework you want to get started using ZKsync Era with.
 

content/00.build/10.quick-start/30.testing.md

@@ -47,7 +47,7 @@ that enhance the testing process.
 With a solid foundation in contract testing, you're well-equipped to advance your ZKsync
 development journey. Consider the following steps to further your expertise:
 
-- **Upgradeability**: Delve into the [next guide](/build/quick-start/upgrading) focusing on contract upgradability.
+- **Upgradeability**: Dive into the [Upgradeability article](/build/quick-start/upgrading) focusing on contract upgradeability.
 Learning to make your contracts upgradeable will enable you to update and improve your smart contracts
 over time without losing state or funds.
 - **Advanced ZKsync Integrations:** Explore deeper into ZKsync's ecosystem by

content/00.build/10.quick-start/_deploy_factory/_foundry_deploy_contract_factory.md

@@ -104,7 +104,7 @@ our new `CrowdfundingFactory`.
 command:
 
     ```bash
-    forge create src/CrowdfundFactory.sol:CrowdfundingFactory --factory-deps src/CrowdfundingCampaign.sol:CrowdfundingCampaign --rpc-url zkSyncSepoliaTestnet --chain 300 --private-key <YOUR-PRIVATE-KEY> --zksync
+    forge create src/CrowdfundFactory.sol:CrowdfundingFactory --factory-deps src/CrowdfundingCampaign.sol:CrowdfundingCampaign --rpc-url zkSyncSepoliaTestnet --chain %%zk_testnet_chain_id%% --private-key <YOUR-PRIVATE-KEY> --zksync
     # To deploy the contract on local in-memory node:
     # forge script script/DeployFactory.s.sol:DeployFactoryAndCreateCampaign --rpc-url inMemoryNode --broadcast --zksync
     ```
@@ -121,7 +121,7 @@ command:
 1. Using the `CrowdfundingFactory` contract address let's deploy our `CrowdfundingCampaign`:
 
     ```bash
-    cast send 0x607545Fd35ef49d7445555ddFa22938fD4Efb219 "createCampaign(uint256)" "1" --rpc-url zkSyncSepoliaTestnet --chain 300 --private-key <YOUR-PRIVATE-KEY>
+    cast send 0x607545Fd35ef49d7445555ddFa22938fD4Efb219 "createCampaign(uint256)" "1" --rpc-url zkSyncSepoliaTestnet --chain %%zk_testnet_chain_id%% --private-key <YOUR-PRIVATE-KEY>
     # To use the contract factory on local in-memory node:
     # cast send 0x607545Fd35ef49d7445555ddFa22938fD4Efb219 "createCampaign(uint256)" "1" --rpc-url inMemoryNode --chain 260 --private-key <YOUR-PRIVATE-KEY>
     ```

content/00.build/40.tooling/20.hardhat/10.getting-started.md

@@ -1,6 +1,6 @@
 ---
 title: Getting started
-description: Learn how to use HardHat with ZKsync.
+description: Learn how to use Hardhat with ZKsync.
 ---
 
 ::callout{icon="i-heroicons-exclamation-triangle" color="amber"}