feat: initial quickcode guide for deploying contract using hardhat or…

… foundry

.vscode/settings.json

@@ -9,5 +9,8 @@
   "files.eol": "\n",
   "[markdown]": {
     "editor.wordWrap": "on"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.markdownlint": true
   }
 }

components/content/DeployContract.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Deploy Contract',
+    content: `
+      Deploying contracts on the zkSync Sepolia testnet requires having testnet ETH. If you're working within the local development environment, you can utilize pre-configured rich wallets and skip this step. For testnet deployments, follow these steps to secure your funds: 
+      1. Obtaining Testnet ETH:
+        - Use the [LearnWeb3 faucet](https://learnweb3.io/faucets/zksync_sepolia/) to directly receive testnet ETH on zkSync Sepolia.
+        - Alternatively, acquire SepoliaETH from [recommended faucets](https://www.notion.so/tooling/network-faucets.md) and transfer it to the zkSync Sepolia testnet via the [zkSync bridge](https://portal.zksync.io/bridge/?network=sepolia).
+      2. Verify your balance:
+        - Check your wallet's balance using the [zkSync Sepolia explorer](https://sepolia.explorer.zksync.io/).
+      `,
+  },
+  {
+    label: 'Configuring Your Wallet in the Project',
+    content: `
+      To deploy contracts, you'll need to securely add your wallet's private key to the project environment:
+
+      1. **Extract Your Private Key:**
+          - Find your wallet's private key. For MetaMask users, here's how to [export your wallet's private key](https://support.metamask.io/hc/en-us/articles/360015289632-How-to-export-an-account-s-private-key). If you're in the local environment, use a private key from the available rich accounts.
+      2. **Prepare the Environment File:**
+      - Locate the **.env.example** file in your project directory. Rename this file to **.env**.
+      1. **Add Your Private Key:**
+          - Open the .env file and add your private key in the following format:
+          code
+          PRIVATE_KEY=your_private_key_here
+          code
+        - Replace **your_private_key_here** with your actual private key.
+    `,
+  },
+];
+</script>
+
+<template>
+  <ULandingFAQ
+    :items="items"
+    multiple
+  >
+    <template #item="{ item }">
+      <component :is="item.contentComponent" />
+    </template>
+  </ULandingFAQ>
+</template>

components/content/EnvSetup.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Install Node.js or Bun.sh ',
+    content: `
+      To effectively utilize the **zksync-cli** tool, your development environment needs to be set up with either Node.js or Bun.sh. The choice depends on your project's requirements and personal preference for package management and execution speed.
+
+      - Node.js
+          - Download the Long-Term Support (LTS) version from the [official Node.js website](https://nodejs.org/en/download).
+          - For first-time users, the [Node.js usage guide](https://nodejs.org/api/synopsis.html#usage) offers comprehensive instructions on getting started.
+      - Bun.sh
+          - Obtain the latest version from the [Bun installation page](https://bun.sh/docs/installation). Bun.sh is known for its high performance and modern JavaScript features.
+      `,
+  },
+  {
+    label: 'Setup local node (optional)',
+    content: `
+      After installing Node.js or Bun, leveraging **zksync-cli** to set up a local development environment is a beneficial next step. This local setup allows for quicker testing and debugging processes without incurring testnet transaction costs.
+
+      **Prerequisites:**
+
+      - **Docker Installation:** **zksync-cli**'s local environment relies on Docker. Download the appropriate version from the Docker website. If you're new to Docker, consider exploring the Docker getting started guide.
+      1. **Open Your Terminal:** Access it from the Applications folder or use Spotlight search (Command + Space).
+      2. **Initialize Local zkSync Node:**
+          - Run the command: **npx zksync-cli@latest dev start**
+          - When prompted, choose “In memory node” to deploy a local zkSync node in a Docker container.
+      3. **Access Rich Accounts:** For pre-configured rich wallets, visit [era-test-node rich wallets](https://era.zksync.io/docs/tools/testing/era-test-node.html#use-pre-configured-rich-wallets).
+      4. **Local Node URL:** Your local zkSync node is accessible at **[http://127.0.0.1:8011](http://127.0.0.1:8011/)**, ready for deployment or testing purposes.
+    `,
+  },
+  {
+    label: 'Initialize project',
+    content: `
+    Run the following command in your terminal to create a new project using zkSync CLI.
+
+      npx zksync-cli@latest —template zksync-quickstart
+    `,
+  },
+];
+</script>
+
+<template>
+  <ULandingFAQ
+    :items="items"
+    multiple
+  >
+    <template #item="{ item }">
+      <component :is="item.contentComponent" />
+    </template>
+  </ULandingFAQ>
+</template>

components/content/IconList.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="list-container">
+    <ul class="custom-list">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="list-item"
+      >
+        <UIcon
+          name="i-heroicons-check-circle-16-solid"
+          class="icon green-icon"
+        />
+        {{ item }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const items = [
+  'Initializing a new project with a scaffolding tool.',
+  "Crafting a smart contract to store Zeek's latest adventure.",
+  'Deploying the contract on the zkSync Era using your choice of Hardhat or Foundry.',
+];
+</script>
+
+<style scoped>
+.custom-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+}
+.green-icon {
+  color: green;
+}
+</style>

components/content/PageLinks.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  labels: string[];
+  icon: string;
+  title: string;
+}>();
+</script>
+
+<template>
+  <UPageLinks
+    :links="
+      props.labels.map((label) => ({
+        icon: props.icon,
+        label,
+      }))
+    "
+    :title="props.title"
+  />
+</template>

components/content/WalletSetup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Fund Wallet',
+    content: `
+      Deploying contracts on the zkSync Sepolia testnet requires having testnet ETH. If you're working within the local development environment, you can utilize pre-configured rich wallets and skip this step. For testnet deployments, follow these steps to secure your funds: 
+      1. Obtaining Testnet ETH:
+        - Use the [LearnWeb3 faucet](https://learnweb3.io/faucets/zksync_sepolia/) to directly receive testnet ETH on zkSync Sepolia.
+        - Alternatively, acquire SepoliaETH from [recommended faucets](https://www.notion.so/tooling/network-faucets.md) and transfer it to the zkSync Sepolia testnet via the [zkSync bridge](https://portal.zksync.io/bridge/?network=sepolia).
+      2. Verify your balance:
+        - Check your wallet's balance using the [zkSync Sepolia explorer](https://sepolia.explorer.zksync.io/).
+      `,
+  },
+  {
+    label: 'Configuring Your Wallet in the Project',
+    content: `
+      To deploy contracts, you'll need to securely add your wallet's private key to the project environment:
+
+      1. **Extract Your Private Key:**
+          - Find your wallet's private key. For MetaMask users, here's how to [export your wallet's private key](https://support.metamask.io/hc/en-us/articles/360015289632-How-to-export-an-account-s-private-key). If you're in the local environment, use a private key from the available rich accounts.
+      2. **Prepare the Environment File:**
+      - Locate the **.env.example** file in your project directory. Rename this file to **.env**.
+      1. **Add Your Private Key:**
+          - Open the .env file and add your private key in the following format:
+          code
+          PRIVATE_KEY=your_private_key_here
+          code
+        - Replace **your_private_key_here** with your actual private key.
+    `,
+  },
+];
+</script>
+
+<template>
+  <ULandingFAQ
+    :items="items"
+    multiple
+  >
+    <template #item="{ item }">
+      <component :is="item.contentComponent" />
+    </template>
+  </ULandingFAQ>
+</template>

content/10.getting-started/1.index.md

@@ -1,79 +1,44 @@
 ---
-title: Introduction
-description: Welcome to Nuxt UI Pro documentation template.
+title: Deploy Smart Contracts on zkSync!
+description: Learn to deploy smart contracts efficiently in the zkSync environment.
 layout: test
 ---
 
-This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of
-premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in
-minutes.
+Welcome to the Quickstart Guide for deploying smart contracts on zkSync! In this guide, we'll walk you through the process of creating and deploying a simple smart contract that holds an adventure for Zeek.
 
-::content-switcher
+::icon-list
 ---
-items: [{
-  label: 'HardHat',
-  partial: '_getting-started/_aPartial'
-}, {
-  label: 'Forge',
-  partial: '_getting-started/_anotherpartial'
-}]
 ---
 ::
 
-There are already many websites based on this template:
+Let's dive in and start your developer journey on zkSync!
+
+## Quickstart framework selection
 
-- [Nuxt](https://nuxt.com) - The Nuxt website
-- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
-- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image`
-- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content`
-- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
-- [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
+Select the framework you want to get started using zkSync Era with.
 
-::display-partial
+::content-switcher
 ---
-partial: 'Setting up your wallet'
+items: [{
+  label: 'HardHat',
+  partial: '_getting-started/_hardhat_deploy_contract'
+}, {
+  label: 'Foundry',
+  partial: '_getting-started/_foundry_deploy_contract'
+}]
 ---
 ::
 
-## Features
 
-- Powered by [Nuxt 3](https://nuxt.com)
-- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)
-- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to
-  [Nuxt Content](https://content.nuxt.com)
-- Compatible with [Nuxt Studio](https://nuxt.studio)
-- Auto-generated sidebar navigation
-- Full-Text Search out of the box
-- Beautiful Typography styles
-- Dark mode support
-- And more...
+## Takeaways
 
-## Play online
+- zkSync is EVM compatible and you can write smart contracts in Solidity or Vyper.
+- zkSync supports your favorite development toolkit Hardhat and Foundry.
+- zkSync CLI provides a quick way to scaffold different types of projects thanks to its multiple templates.
+- Contracts deployed to zkSync are compiled using `zksolc` or `zkvyper` as they generate a special bytecode for zkSync's ZKEVM.
 
-You can start playing with this template in your browser using our online sandboxes:
+## Next steps
 
-::card
----
-title: Play on StackBlitz
-icon: i-simple-icons-stackblitz
-to: https://stackblitz.com/github/nuxt-ui-pro/docs/
-target: _blank
----
-Explore Nuxt built-in components for pages, layouts, head, and more.
-::
-
----
-
-::card
----
-title: Play on CodeSandbox
-icon: i-simple-icons-codesandbox
-to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/
-target: _blank
----
-Explore Nuxt built-in components for pages, layouts, head, and more.
-::
-
----
+This was your first step towards becoming a zkSync developer. Here is what you can do next:
 
-Or open [Nuxt UI playground](https://ui.nuxt.com/playground).
+- Let’s take our `ZeekAdventure.sol` contract and create a contract factory!

content/10.getting-started/_getting-started/_foundry_deploy_contract.md

@@ -0,0 +1,26 @@
+---
+title: Foundry | Deploy Contract
+---
+
+`foundry-zksync` is a specialized fork of Foundry, tailored for zkSync. It extends Foundry's capabilities for Ethereum app development to support zkSync, allowing for the compilation, deployment, testing, and interaction with smart contracts on zkSync.
+
+## Step 1: Setting up environment (todo - update)
+::env-setup
+---
+
+---
+::
+
+## Step 2: Set up wallet
+::wallet-setup
+---
+
+---
+::
+
+## Step 3: Deploying your first contract
+::display-partial
+---
+partial: 'Deploy contract using Foundry'
+---
+::

content/10.getting-started/_getting-started/_hardhat_deploy_contract.md

@@ -0,0 +1,26 @@
+---
+title: Hardhat | Deploy Contract
+---
+
+Hardhat is an Ethereum development environment, designed for easy smart contract development in Solidity. zkSync provides its own plugins which makes working with contracts on zkSync simple and efficient. 
+
+## Step 1: Setting up environment 
+::env-setup
+---
+
+---
+::
+
+## Step 2: Set up wallet
+::wallet-setup
+---
+
+---
+::
+
+## Step 3: Deploying your first contract
+::display-partial
+---
+partial: 'Deploy contract using Hardhat'
+---
+::