Nexus docs expansion

.gitignore

@@ -51,4 +51,5 @@ public/sitemap-0.xml
 public/nexus
 public/da
 public/user-guides
+public/tutorials
 public/llms-full.txt

app/_meta.ts

@@ -14,6 +14,12 @@ export default {
       type: "page",
       title: "Data Availability",
     },
+
+    'tutorials': {
+      type: "page",
+      title: "Tutorials",
+    },
+
     'user-guides': {
       type: 'page',
       title: 'User Guides',

app/nexus/nexus-cheatsheet/page.mdx

@@ -0,0 +1,67 @@
+---
+image: "/img/docs-link-preview.png"
+title: Nexus cheat sheet
+description: "A single page to find all external links and resources to help you get started with Avail Nexus"
+---
+
+import { Callout, Steps, Tabs, Cards } from 'nextra/components';
+import { FileIcon, FilesIcon, LinkIcon, GithubIcon24 } from '@components/icons'
+
+
+# Nexus cheat sheet
+
+We created this page to make it easier for devs to navigate between all the links and resources related to Avail Nexus.
+Feel free to suggest any additions you think are missing.
+
+## Nexus SDK
+
+The most convenient way to interact with the decentralized solver network powering Avail Nexus is through the Nexus SDK.
+
+Link to the Nexus SDK Github repo:
+
+<Cards num={2} >
+<Cards.Card title="Nexus SDK" href="https://github.com/availproject/nexus-sdk" target="_blank" rel="noopener noreferrer" icon={<GithubIcon24 />} arrow />
+</Cards>
+
+The overall Nexus SDK is split into two main packages:
+
+### Nexus-core
+
+The headless version , for fine-grained control over the Nexus SDK.
+
+<Cards num={2}>
+    <Cards.Card title="Github Link" icon={<GithubIcon24 />} href="https://github.com/availproject/nexus-sdk/tree/main/packages/core" target="_blank" rel="noopener noreferrer" arrow />
+    <Cards.Card title="npm page" icon={<LinkIcon />} href="https://www.npmjs.com/package/@avail-project/nexus-core?activeTab=code" target="_blank" rel="noopener noreferrer" arrow />
+</Cards>
+
+We also built a demo app with `nexus-core` to provide more reference code:
+
+<Cards num={2}>
+    <Cards.Card title="Nexus Headless Demo" icon={<LinkIcon />} href="https://avail-nexus-demo-five.vercel.app/" target="_blank" rel="noopener noreferrer" arrow />
+    <Cards.Card title="Github Link" icon={<GithubIcon24 />} href="https://github.com/availproject/avail-nexus-demo" target="_blank" rel="noopener noreferrer" arrow />
+</Cards>
+
+### Nexus-widgets
+
+Comes with built-in UI components to make it easier to integrate the Nexus SDK into your React app.
+
+<Cards num={2}>
+    <Cards.Card title="Github Link" icon={<GithubIcon24 />} href="https://github.com/availproject/nexus-sdk/tree/main/packages/widgets" target="_blank" rel="noopener noreferrer" arrow />
+    <Cards.Card title="npm page" icon={<LinkIcon />} href="https://www.npmjs.com/package/@avail-project/nexus-widgets?activeTab=code" target="_blank" rel="noopener noreferrer" arrow />
+</Cards>
+
+We also built a demo app with `nexus-widgets` to provide more reference code:
+
+<Cards num={2}>
+    <Cards.Card title="Nexus Widgets Demo" icon={<LinkIcon />} href="https://nexus-demo.availproject.org/" target="_blank" rel="noopener noreferrer" arrow />
+    <Cards.Card title="Github Link" icon={<GithubIcon24 />} href="https://github.com/availproject/nexus-ui-components-demo" target="_blank" rel="noopener noreferrer" arrow />
+</Cards>
+
+## Nexus SDK templates
+
+Clone these repos to quickly get started with the Nexus SDK using `Next JS` or `Vite`.
+
+<Cards num={2}>
+    <Cards.Card title="Nexus Next JS Template" icon={<LinkIcon />} href="https://github.com/availproject/nexus-nextjs-template" target="_blank" rel="noopener noreferrer" arrow />
+    <Cards.Card title="Nexus Vite Template" icon={<LinkIcon />} href="https://github.com/availproject/nexus-vite-template" target="_blank" rel="noopener noreferrer" arrow />
+</Cards>

app/tutorials/_meta.ts

@@ -0,0 +1,13 @@
+export default {
+
+    "Nexus Tutorials": {
+        type: "separator",
+        title: "Nexus Tutorials",
+      },
+
+    "nexus-initialization": "Initialize the Nexus SDK using Next JS",
+    "nexus-bridge": "Bridge tokens using the Nexus SDK",
+    "tut-3": "Tutorial-3",
+    "tut-4": "Tutorial-4",
+    "tut-5": "Tutorial-5",
+}

app/tutorials/nexus-bridge/page.mdx

@@ -0,0 +1,51 @@
+---
+title: "Bridge tokens using the Nexus SDK"
+description: "This tutorial will teach you about the .bridge() function of the Nexus SDK"
+keywords:
+  - docs
+  - Avail Nexus
+  - Nexus SDK
+  - bridge
+---
+
+import { Callout, Steps, Tabs } from 'nextra/components';
+
+# Bridge tokens using the Nexus SDK
+
+This tutorial will cover the bridging functionality of the Nexus SDK,
+covered under the `bridge()` function.
+
+We will use the [Nexus Next JS template repo](https://github.com/availproject/nexus-nextjs-template) to
+make the setup process easier.
+
+## Start the template locally
+
+1. Clone the template repo:
+
+```bash filename="Terminal"
+git clone https://github.com/availproject/nexus-nextjs-template.git
+```
+
+2. Install the dependencies:
+
+```bash filename="Terminal"
+cd nexus-nextjs-template
+pnpm install
+```
+
+3. Set up the `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` environment variable by creating a `.env.local` file:
+
+```dotenv filename=".env"
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=YOUR_PROJECT_ID
+```
+
+<Callout type="info">
+**Note:**<br/>
+Log in to your [WalletConnect](https://walletconnect.network/) account and create a project to get your project ID.
+</Callout>
+
+4. Run the dev server:
+
+```bash filename="Terminal"
+pnpm dev
+```