From 375448f1c27fa3fefc7e9b8091beb0a9065970b5 Mon Sep 17 00:00:00 2001
From: "Hong Jing (Jingles)" <jinglescode@gmail.com>
Date: Mon, 9 Dec 2024 14:31:17 +0800
Subject: [PATCH] update website

---
 README.md                                     | 16 +++---
 apps/playground/src/components/link/index.tsx |  2 +-
 .../src/components/site/navbar/index.tsx      |  2 +-
 .../site/navbar/menu-item-dropdown.tsx        |  2 +-
 .../src/components/site/navbar/menu-item.tsx  |  2 +-
 .../site/navbar/submenu-item-dropdown.tsx     |  4 +-
 .../components/site/navbar/submenu-item.tsx   |  2 +-
 apps/playground/src/data/catalyst.ts          | 11 ++--
 apps/playground/src/data/links-api.ts         |  2 +-
 apps/playground/src/pages/guides/nextjs.mdx   | 30 +++++-----
 apps/playground/src/pages/home/intro.tsx      |  4 +-
 .../src/pages/react/getting-started/index.tsx |  6 +-
 .../pages/react/getting-started/install.tsx   | 28 ----------
 .../src/pages/react/getting-started/setup.tsx | 41 ++++++++++++++
 .../pages/svelte/getting-started/index.tsx    |  6 +-
 .../{install.tsx => setup.tsx}                | 21 +++++--
 apps/playground/tailwind.config.js            | 20 +++----
 packages/mesh-core/README.md                  | 56 +++++++++++++------
 scripts/mesh-cli/src/actions/create.ts        |  2 +-
 19 files changed, 153 insertions(+), 104 deletions(-)
 delete mode 100644 apps/playground/src/pages/react/getting-started/install.tsx
 create mode 100644 apps/playground/src/pages/react/getting-started/setup.tsx
 rename apps/playground/src/pages/svelte/getting-started/{install.tsx => setup.tsx} (55%)

diff --git a/README.md b/README.md
index ae8e261ed..d0358fd71 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,12 @@ Mesh is an open-source library designed to make building dApps accessible. Wheth
 
 Explore the features on [Mesh Playground](https://meshjs.dev/).
 
+Instant setup a new project with a single command using Mesh CLI and start building:
+
+```
+npx meshjs your-app-name
+```
+
 ## What's inside?
 
 ### Architecture Overview
@@ -109,15 +115,7 @@ Here's a list of open-source smart contracts, complete with documentation, live
 | Swap | Facilitates the exchange of assets between two parties | [[demo](https://meshjs.dev/smart-contracts/swap)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/swap)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshSwapContract)] |
 | Vesting | Allows users to lock tokens for a period of time and withdraw the funds after the lockup period | [[demo](https://meshjs.dev/smart-contracts/vesting)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/vesting)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshVestingContract)] |
 
-## Getting Started
-
-### Usage
-
-To use Mesh in your project, run the following command to install the core package:
-
-```
-npm install @meshsdk/core
-```
+## Usage
 
 ### Install
 
diff --git a/apps/playground/src/components/link/index.tsx b/apps/playground/src/components/link/index.tsx
index b0f298f78..c80a20ba5 100644
--- a/apps/playground/src/components/link/index.tsx
+++ b/apps/playground/src/components/link/index.tsx
@@ -17,7 +17,7 @@ export default function Link({
   return (
     <NextLink
       href={href}
-      className={`${className}`}
+      className={`${className} ${typeof children == "string" && "text-black no-underline hover:underline dark:text-white"} `}
       target={target ? target : href.startsWith("http") ? "_blank" : "_self"}
       rel="noreferrer"
     >
diff --git a/apps/playground/src/components/site/navbar/index.tsx b/apps/playground/src/components/site/navbar/index.tsx
index 9d386ef70..106ba116d 100644
--- a/apps/playground/src/components/site/navbar/index.tsx
+++ b/apps/playground/src/components/site/navbar/index.tsx
@@ -90,7 +90,7 @@ export default function Navbar() {
             {!isSSR && (
               <button
                 type="button"
-                className="rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-700"
+                className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                 onClick={() => {
                   toggle();
                 }}
diff --git a/apps/playground/src/components/site/navbar/menu-item-dropdown.tsx b/apps/playground/src/components/site/navbar/menu-item-dropdown.tsx
index f498d622c..e06798e58 100644
--- a/apps/playground/src/components/site/navbar/menu-item-dropdown.tsx
+++ b/apps/playground/src/components/site/navbar/menu-item-dropdown.tsx
@@ -21,7 +21,7 @@ export default function MenuItemDropdown({
     >
       <button
         type="button"
-        className="lg:hover:text-primary-600 lg:dark:hover:text-primary-500 dark:hover:text-primary-500 flex w-full items-center justify-between border-b border-gray-100 py-2 pl-3 pr-4 font-medium text-gray-700 hover:bg-gray-50 lg:w-auto lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
+        className="dark:text-white lg:hover:text-black lg:dark:hover:text-white dark:hover:text-white flex w-full items-center justify-between border-b border-gray-100 py-2 pl-3 pr-4 font-medium text-gray-700 hover:bg-gray-50 lg:w-auto lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
         aria-label="More"
       >
         {title}
diff --git a/apps/playground/src/components/site/navbar/menu-item.tsx b/apps/playground/src/components/site/navbar/menu-item.tsx
index 4730d20f1..4eb7e5528 100644
--- a/apps/playground/src/components/site/navbar/menu-item.tsx
+++ b/apps/playground/src/components/site/navbar/menu-item.tsx
@@ -11,7 +11,7 @@ export default function MenuItem({
     <li>
       <Link
         href={link}
-        className="lg:hover:text-primary-600 lg:dark:hover:text-primary-500 dark:hover:text-primary-500 block border-b border-gray-100 py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
+        className="lg:hover:text-black lg:dark:hover:text-white dark:hover:text-white block border-b border-gray-100 py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 lg:dark:hover:bg-transparent hover:no-underline"
       >
         {title}
       </Link>
diff --git a/apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx b/apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx
index 193ce5ea7..b0d781b7c 100644
--- a/apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx
+++ b/apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx
@@ -26,7 +26,7 @@ export default function SubmenuItemDropdown({
       <Link href={link ?? "#"}>
         <button
           type="button"
-          className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center justify-between px-4 py-2"
+          className="hover:text-black dark:hover:text-white flex w-full items-center justify-between px-4 py-2"
         >
           <span className="flex items-center">
             {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
@@ -71,7 +71,7 @@ function Item({
     <li>
       <Link
         href={link}
-        className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center px-4 py-2"
+        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
       >
         {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
         {title}
diff --git a/apps/playground/src/components/site/navbar/submenu-item.tsx b/apps/playground/src/components/site/navbar/submenu-item.tsx
index 6be9ba2ef..e905b8f31 100644
--- a/apps/playground/src/components/site/navbar/submenu-item.tsx
+++ b/apps/playground/src/components/site/navbar/submenu-item.tsx
@@ -15,7 +15,7 @@ export default function SubmenuItem({
     <li>
       <Link
         href={link}
-        className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center px-4 py-2"
+        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
         target={link.startsWith("http") ? "_blank" : "_self"}
       >
         {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
diff --git a/apps/playground/src/data/catalyst.ts b/apps/playground/src/data/catalyst.ts
index ae6a8c8d8..12254af0e 100644
--- a/apps/playground/src/data/catalyst.ts
+++ b/apps/playground/src/data/catalyst.ts
@@ -110,9 +110,11 @@ export const fund12 = [
       "Mesh application wallet",
       "Modular CSL library",
       "Wallet support for private blockchain networks (e.g. Yaci)",
+      "CIP 45",
+      "Improve error messages",
     ],
-    tobecompleted: ["CIP 45", "Improve error messages"],
-    status: "In Progress",
+    tobecompleted: [],
+    status: "Closing",
   },
   {
     title: "Mesh Software as a Service",
@@ -153,7 +155,8 @@ export const fund11 = [
       "Escrow",
       "Vesting",
       "Gift card",
-      "Coupon bond guaranteed",
+      "Swap",
+      "Payment splitter",
       "Content ownership",
       "NFT minting machine",
     ],
@@ -193,7 +196,7 @@ export const fund10 = [
       "Demos and tutorials repository",
       "Mesh PBL Season #1",
     ],
-    tobecompleted: ["Student projects"],
+    tobecompleted: [],
     status: "Closing",
   },
 ];
diff --git a/apps/playground/src/data/links-api.ts b/apps/playground/src/data/links-api.ts
index 7755504c8..ff0693efd 100644
--- a/apps/playground/src/data/links-api.ts
+++ b/apps/playground/src/data/links-api.ts
@@ -10,8 +10,8 @@ import { metaWallets } from "./links-wallets";
 
 export const linksApi: MenuItem[] = [
   metaWallets,
-  metaTransaction,
   metaTxbuilder,
+  metaTransaction,
   metaData,
   metaReact,
   metaSvelte,
diff --git a/apps/playground/src/pages/guides/nextjs.mdx b/apps/playground/src/pages/guides/nextjs.mdx
index 32b05551e..03bc8f6a3 100644
--- a/apps/playground/src/pages/guides/nextjs.mdx
+++ b/apps/playground/src/pages/guides/nextjs.mdx
@@ -3,9 +3,9 @@ import { guidenextjs } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
   const sidebarItems = [
-    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Setup Next.js', to: 'setupnextjs' },
     { label: 'Setup Mesh', to: 'setupmesh' },
-    { label: 'See it in action', to: 'seeitinaction' },
+    { label: 'Connect wallet and view assets', to: 'connectwalletandviewassets' },
   ];
 
   return (
@@ -21,23 +21,21 @@ export default function MDXPage({ children }) {
   );
 }
 
-In this guide, you will get your application running, [check this demo](https://starter-template.meshjs.dev/) to see the final result.
+In this guide, we will set up a Next.js application and connect it to the Cardano blockchain using Mesh. We will create a simple application that allows users to connect their wallets and view the assets in their wallets.
 
-[Next.js](https://nextjs.org/) is a web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
-
-Next.js and Mesh are JavaScript libraries, and so we will assume that you have some familiarity with HTML and JavaScript language, but you should be able to follow along even if you are coming from a different programming language. If you don't feel very confident, we recommend going through this [JS tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), or the [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or my preferred method, by watch a few [videos from YouTube](https://www.youtube.com/results?search_query=get+started+with+nextjs).
+Though this guide is focused on Next.js which uses [Mesh React](/react) you can also use Mesh with other frameworks like Remix, React, and Vue. Mesh SDK has [Svelte UI components](/svelte) too.
 
-## System setup
+You may follow this guide to setup your project or use the [Mesh CLI](https://meshjs.dev/) to scaffold a new project.
 
-### 1. Visual Studio Code
-
-Visual Studio Code is a code editor made by Microsoft. Download and install [Visual Studio Code](https://code.visualstudio.com/) for code editing.
+```bash
+npx meshjs your-app-name
+```
 
-### 2. Node.js
+## Setup Next.js
 
-Node.js is a cross-platform JavaScript runtime environment that runs on the V8 engine and executes JavaScript code. Install the Long-Term Support (LTS) version of [Node.js](https://nodejs.org/) (as of writing v16.16.0).
+[Next.js](https://nextjs.org/) is a web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
 
-## Setup Next.js
+Next.js and Mesh are JavaScript libraries, and so we will assume that you have some familiarity with HTML and JavaScript language, but you should be able to follow along even if you are coming from a different programming language. If you don't feel very confident, we recommend going through this [JS tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), or the [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or my preferred method, by watch a few [videos from YouTube](https://www.youtube.com/results?search_query=get+started+with+nextjs).
 
 ### 1. Create project folder and open Visual Studio Code
 
@@ -75,6 +73,8 @@ Visit [http://localhost:3000](http://localhost:3000/) to view your application.
 
 ## Setup Mesh
 
+Mesh is a JavaScript library that provides a simple way to interact with the Cardano blockchain. It provides a set of APIs that allow you to interact with the Cardano blockchain without having to deal with the complexities of the Cardano blockchain.
+
 ### 1. Install MeshJS package
 
 Install the latest version of Mesh with npm:
@@ -85,7 +85,7 @@ npm install @meshsdk/core @meshsdk/react
 
 ### 2. Add webpack in **next.config.js**
 
-Open **next.config.mjs** and append **webpack** configurations. Your **next.config.mjs** should look like this:
+Open **next.config.ts** and append **webpack** configurations. Your **next.config.ts** should look like this:
 
 ```
 /** @type {import('next').NextConfig} */
@@ -107,7 +107,7 @@ export default nextConfig;
 
 You just saved a few weeks of learning and a number days trying to get started. Your Next.js application is ready to connect wallet, browse assets and make some transactions.
 
-## See it in action
+## Connect wallet and view assets
 
 ### 1. Add **MeshProvider**
 
diff --git a/apps/playground/src/pages/home/intro.tsx b/apps/playground/src/pages/home/intro.tsx
index 7113a90ca..36975efcc 100644
--- a/apps/playground/src/pages/home/intro.tsx
+++ b/apps/playground/src/pages/home/intro.tsx
@@ -58,8 +58,8 @@ export default function SectionIntro() {
           </h2>
           <p className="mb-8 font-light lg:text-xl"></p>
           <div className="mb-6 border-b border-t border-gray-200 py-8 dark:border-gray-700">
-            {features.map((feature) => (
-              <div className="flex pb-8">
+            {features.map((feature, i) => (
+              <div className="flex pb-8" key={i}>
                 <div className="bg-primary-100 dark:bg-primary-900 mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
                   <feature.icon className="text-primary-600 dark:text-primary-300 h-5 w-5" />
                 </div>
diff --git a/apps/playground/src/pages/react/getting-started/index.tsx b/apps/playground/src/pages/react/getting-started/index.tsx
index ca83d7699..2462aa3ba 100644
--- a/apps/playground/src/pages/react/getting-started/index.tsx
+++ b/apps/playground/src/pages/react/getting-started/index.tsx
@@ -6,12 +6,12 @@ import Metatags from "~/components/site/metatags";
 import { metaReactGettingstarted } from "~/data/links-react";
 import ReactConnectWallet from "../ui-components/connect-wallet";
 import ReactHookUseWallet from "../wallet-hooks/use-wallet";
-import ReactInstall from "./install";
+import ReactSetup from "./setup";
 import MeshProvider from "./mesh-provider";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
-    { label: "Install", to: "reactInstall" },
+    { label: "Setup", to: "reactSetup" },
     { label: "Mesh Provider", to: "meshProvider" },
     { label: "Connect Wallet", to: "connectWallet" },
     { label: "useWallet Hook", to: "useWallet" },
@@ -36,7 +36,7 @@ const ReactPage: NextPage = () => {
           </p>
         </TitleIconDescriptionBody>
 
-        <ReactInstall />
+        <ReactSetup />
         <MeshProvider />
         <ReactConnectWallet />
         <ReactHookUseWallet />
diff --git a/apps/playground/src/pages/react/getting-started/install.tsx b/apps/playground/src/pages/react/getting-started/install.tsx
deleted file mode 100644
index 7f9610abb..000000000
--- a/apps/playground/src/pages/react/getting-started/install.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
-import Codeblock from "~/components/text/codeblock";
-
-export default function ReactInstall() {
-  return (
-    <TwoColumnsScroll
-      sidebarTo="reactInstall"
-      title="Install"
-      leftSection={Left()}
-    />
-  );
-}
-
-function Left() {
-  return (
-    <>
-      <p>To start, install:</p>
-      <Codeblock data={`npm install @meshsdk/react`} />
-
-      <p>
-        Next, add the Mesh CSS to your application, doing so will apply the
-        default styles to the components. You can add this in{" "}
-        <code>/pages/_app.tsx</code>.
-      </p>
-      <Codeblock data={`import "@meshsdk/react/styles.css";`} />
-    </>
-  );
-}
diff --git a/apps/playground/src/pages/react/getting-started/setup.tsx b/apps/playground/src/pages/react/getting-started/setup.tsx
new file mode 100644
index 000000000..c5b6fdf3d
--- /dev/null
+++ b/apps/playground/src/pages/react/getting-started/setup.tsx
@@ -0,0 +1,41 @@
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function ReactSetup() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="reactSetup"
+      title="Setup"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        The fastest way to get started a new project with React is to use the
+        Mesh-CLI, which will scaffold a new project for you. To do this, run the
+        following:
+      </p>
+      <Codeblock data={`npx meshjs your-app-name`} />
+
+      <p>
+        During the installation process, you will be asked to choose a template.
+        Choose the React template. This will scaffold a new React project with
+        Mesh pre-installed.
+      </p>
+
+      <p>To manually, install the Mesh React package, run the following:</p>
+      <Codeblock data={`npm install @meshsdk/react`} />
+
+      <p>
+        Next, add the Mesh CSS to your application, doing so will apply the
+        default styles to the components. You can add this in{" "}
+        <code>/pages/_app.tsx</code>.
+      </p>
+      <Codeblock data={`import "@meshsdk/react/styles.css";`} />
+    </>
+  );
+}
diff --git a/apps/playground/src/pages/svelte/getting-started/index.tsx b/apps/playground/src/pages/svelte/getting-started/index.tsx
index 0ad04c7ea..d5be7bc17 100644
--- a/apps/playground/src/pages/svelte/getting-started/index.tsx
+++ b/apps/playground/src/pages/svelte/getting-started/index.tsx
@@ -5,12 +5,12 @@ import TitleIconDescriptionBody from "~/components/sections/title-icon-descripti
 import Metatags from "~/components/site/metatags";
 import { metaSvelteGettingstarted } from "~/data/links-svelte";
 import SvelteConnectWallet from "../ui-components/connect-wallet";
-import SvelteInstall from "./install";
+import SvelteSetup from "./setup";
 import SvelteState from "./state";
 
 const SveltePage: NextPage = () => {
   const sidebarItems = [
-    { label: "Install", to: "SvelteInstall" },
+    { label: "Setup", to: "SvelteSetup" },
     { label: "Connect Wallet", to: "connectWallet" },
     { label: "Get Wallet State", to: "svelteState" },
   ];
@@ -34,7 +34,7 @@ const SveltePage: NextPage = () => {
           </p>
         </TitleIconDescriptionBody>
 
-        <SvelteInstall />
+        <SvelteSetup />
         <SvelteConnectWallet />
         <SvelteState />
       </SidebarFullwidth>
diff --git a/apps/playground/src/pages/svelte/getting-started/install.tsx b/apps/playground/src/pages/svelte/getting-started/setup.tsx
similarity index 55%
rename from apps/playground/src/pages/svelte/getting-started/install.tsx
rename to apps/playground/src/pages/svelte/getting-started/setup.tsx
index a557cdfa0..20283e3c1 100644
--- a/apps/playground/src/pages/svelte/getting-started/install.tsx
+++ b/apps/playground/src/pages/svelte/getting-started/setup.tsx
@@ -1,11 +1,11 @@
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
 import Codeblock from "~/components/text/codeblock";
 
-export default function SvelteInstall() {
+export default function SvelteSetup() {
   return (
     <TwoColumnsScroll
-      sidebarTo="svelteInstall"
-      title="Install"
+      sidebarTo="svelteSetup"
+      title="Setup"
       leftSection={Left()}
     />
   );
@@ -22,7 +22,20 @@ function Left() {
 
   return (
     <>
-      <p>To start, install:</p>
+      <p>
+        The fastest way to get started a new project with Svelte is to use the
+        Mesh-CLI, which will scaffold a new project for you. To do this, run the
+        following:
+      </p>
+      <Codeblock data={`npx meshjs your-app-name`} />
+
+      <p>
+        During the installation process, you will be asked to choose a template.
+        Choose the Svelte template. This will scaffold a new Svelte project with
+        Mesh pre-installed.
+      </p>
+
+      <p>To manually, install the Mesh Svelte package, run the following:</p>
       <Codeblock data={`npm install @meshsdk/svelte`} />
 
       <p>
diff --git a/apps/playground/tailwind.config.js b/apps/playground/tailwind.config.js
index 17994b23f..6e2d970e6 100644
--- a/apps/playground/tailwind.config.js
+++ b/apps/playground/tailwind.config.js
@@ -12,16 +12,16 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-          50: "#eff6ff",
-          100: "#dbeafe",
-          200: "#bfdbfe",
-          300: "#93c5fd",
-          400: "#60a5fa",
-          500: "#3b82f6",
-          600: "#2563eb",
-          700: "#1d4ed8",
-          800: "#1e40af",
-          900: "#1e3a8a",
+          // 50: "#eff6ff",
+          // 100: "#dbeafe",
+          // 200: "#bfdbfe",
+          // 300: "#93c5fd",
+          // 400: "#60a5fa",
+          // 500: "#3b82f6",
+          // 600: "#2563eb",
+          // 700: "#1d4ed8",
+          // 800: "#1e40af",
+          // 900: "#1e3a8a",
         },
       },
       typography: {
diff --git a/packages/mesh-core/README.md b/packages/mesh-core/README.md
index b4a4aa945..caea811e7 100644
--- a/packages/mesh-core/README.md
+++ b/packages/mesh-core/README.md
@@ -8,14 +8,14 @@
 
   <h1 style="border-bottom: none"><a href='https://meshjs.dev/'>Mesh</a> TypeScript SDK</h1>
 
-[![Licence](https://img.shields.io/github/license/meshjs/mesh)](https://github.com/meshjs/mesh/blob/master/LICENSE)
-[![Build](https://github.com/meshjs/mesh/actions/workflows/build.yml/badge.svg)](https://github.com/meshjs/mesh/actions/workflows/build.yml)
-[![Package](https://github.com/meshjs/mesh/actions/workflows/publish.yml/badge.svg)](https://github.com/meshjs/mesh/actions/workflows/publish.yml)
+  [![Licence](https://img.shields.io/github/license/meshjs/mesh)](https://github.com/meshjs/mesh/blob/master/LICENSE)
+  [![Build](https://github.com/meshjs/mesh/actions/workflows/build.yml/badge.svg)](https://github.com/meshjs/mesh/actions/workflows/build.yml)
+  [![Package](https://github.com/meshjs/mesh/actions/workflows/publish.yml/badge.svg)](https://github.com/meshjs/mesh/actions/workflows/publish.yml)
 
-[![Twitter/X](https://img.shields.io/badge/Follow%20us-@MeshJS-blue?logo=x&style=for-the-badge)](https://x.com/meshsdk)
-[![NPM](https://img.shields.io/npm/v/%40meshsdk%2Fcore?style=for-the-badge)](https://www.npmjs.com/package/@meshsdk/core)
+  [![Twitter/X](https://img.shields.io/badge/Follow%20us-@MeshJS-blue?logo=x&style=for-the-badge)](https://x.com/meshsdk)
+  [![NPM](https://img.shields.io/npm/v/%40meshsdk%2Fcore?style=for-the-badge)](https://www.npmjs.com/package/@meshsdk/core)
 
-<strong>All-in-one web3 SDK for Cardano apps</strong>
+  <strong>All-in-one TypeScript SDK for Cardano apps</strong>
 
 </div>
 
@@ -25,12 +25,18 @@ Mesh is an open-source library designed to make building dApps accessible. Wheth
 
 Explore the features on [Mesh Playground](https://meshjs.dev/).
 
-## What's inside?
+Instant setup a new project with a single command using Mesh CLI and start building:
 
-This repo includes the following packages/apps:
+```
+npx meshjs your-app-name
+```
+
+## What's inside?
 
 ### Packages
 
+A collection of packages that provide different functionalities to interact with the Cardano blockchain.
+
 |  | Description | Docs | Playground |
 | --- | --- | --- | --- |
 | [@meshsdk/common](https://github.com/MeshJS/mesh/tree/main/packages/mesh-common) | Contains constants, types and interfaces used across the SDK and different serialization libraries | [:page_facing_up:](https://docs.meshjs.dev/common) |  |
@@ -45,20 +51,30 @@ This repo includes the following packages/apps:
 
 ### Apps
 
+Frontend documentation and live demos for Mesh SDK.
+
 |  | Description | Website |
 | --- | --- | --- |
 | [apps/docs](https://github.com/MeshJS/mesh/tree/main/apps/docs) | Mesh technical docs | [:shipit:](https://docs.meshjs.dev/) |
 | [apps/playground](https://github.com/MeshJS/mesh/tree/main/apps/playground) | Mesh homepage and live demos | [:shipit:](https://meshjs.dev/) |
 
-## Getting Started
+### Mesh Smart Contracts Library
 
-### Usage
+Here's a list of open-source smart contracts, complete with documentation, live demos, and end-to-end source code.
 
-To use Mesh in your project, run the following command to install the core package:
-
-```
-npm install @meshsdk/core
-```
+| Contract | Description | Links |
+| --- | --- | --- |
+| Content Ownership | Create a content registry and users can create content that is stored in the registry | [[demo](https://meshjs.dev/smart-contracts/content-ownership)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/content-ownership)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshContentOwnershipContract)] |
+| Escrow | Facilitates the secure exchange of assets between two parties by acting as a trusted intermediary that holds the assets until the conditions of the agreement are met | [[demo](https://meshjs.dev/smart-contracts/escrow)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/escrow)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshEscrowContract)] |
+| Giftcard | Allows users to create a transactions to lock assets into the smart contract, which can be redeemed by any user | [[demo](https://meshjs.dev/smart-contracts/giftcard)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/giftcard)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshGiftcardContract)] |
+| Hello World | A simple lock-and-unlock assets contract, providing a hands-on introduction to end-to-end smart contract validation and transaction building | [[demo](https://meshjs.dev/smart-contracts/hello-world)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/hello-world)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshHelloWorldContract)] |
+| Marketplace | Allows anyone to buy and sell native assets such as NFTs | [[demo](https://meshjs.dev/smart-contracts/marketplace)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/marketplace)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshMarketplaceContract)] |
+| NFT Minting Machine | Mint NFTs with an automatically incremented index, which increases by one for each newly minted NFT | [[demo](https://meshjs.dev/smart-contracts/plutus-nft)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/plutus-nft)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPlutusNFTContract)] |
+| Payment Splitter | Allows users to split incoming payments among a group of accounts | [[demo](https://meshjs.dev/smart-contracts/payment-splitter)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/payment-splitter)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshPaymentSplitterContract)] |
+| Swap | Facilitates the exchange of assets between two parties | [[demo](https://meshjs.dev/smart-contracts/swap)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/swap)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshSwapContract)] |
+| Vesting | Allows users to lock tokens for a period of time and withdraw the funds after the lockup period | [[demo](https://meshjs.dev/smart-contracts/vesting)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/vesting)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshVestingContract)] |
+
+## Usage
 
 ### Install
 
@@ -76,12 +92,18 @@ To build all apps and packages, run the following command:
 npm run build
 ```
 
-### Develop
+### Run
 
-To develop all apps and packages, run the following command:
+To run all apps and packages, run the following command:
 
 ```
 npm run dev
 ```
 
+## Contributing
+
+Mesh SDK project welcomes all constructive contributions. Contributions take many forms, from code for bug fixes and enhancements, to additions and fixes to documentation, additional tests, triaging incoming pull requests and issues, and more!
+
+Check out the [contributing guide](https://github.com/MeshJS/mesh/blob/main/CONTRIBUTING.md).
+
 ![Alt](https://repobeats.axiom.co/api/embed/a55b792080ada8db32fb84c10addc7b4afab7679.svg "Repobeats analytics image")
diff --git a/scripts/mesh-cli/src/actions/create.ts b/scripts/mesh-cli/src/actions/create.ts
index 703411c89..d70c362d3 100644
--- a/scripts/mesh-cli/src/actions/create.ts
+++ b/scripts/mesh-cli/src/actions/create.ts
@@ -22,7 +22,7 @@ export const create = async (name, options) => {
   try {
     createDirectory(name);
 
-    logInfo('📡 - Downloading files..., This might take a moment.');
+    logInfo('📡 - Downloading files...');
     await fetchRepository(template);
 
     logInfo('🏠 - Starting a new git repository...');