Fix tutorials issues

Author: yashovardhan

src/components/GuidesPage/index.tsx

@@ -20,7 +20,7 @@ export default function Guides({ content = {} }: GuidesInterface) {
 
   const completeGuides = Object.entries(safeContent)
     .map(([key, value]) => {
-      if (value && value.type === 'guide') return { ...value, link: `/guides/${key}` }
+      if (value && value.type === 'guide') return { ...value, link: `/tutorials/${key}` }
       return null
     })
     .filter(Boolean)

src/pages/tutorials/android-wallet.mdx

@@ -17,7 +17,7 @@ import WalletPreview from '@site/static/img/guides/android-wallet-preview.png'
   title="Build your own Ethereum Web3 wallet in Android"
   description="Empower your Android app with a Ethereum Web3 wallet using the Web3Auth PnP SDK."
   image="https://docs.metamask.io/img/guides/guides-banners/android-wallet.png"
-  slug="/guides/android-wallet"
+  slug="/tutorials/android-wallet"
 />
 
 In this guide, we'll talk about how we can use Web3Auth to build your Ethereum Web3 wallet in Android. The wallet will only support the Ethereum ecosystem, but functionality can be extended with any blockchain ecosystem.

src/pages/tutorials/erc20-paymaster.mdx

@@ -16,7 +16,7 @@ import Tabs from '@theme/Tabs'
   title="Send your first transaction with ERC-20 Paymaster"
   description="Learn how to use ERC-20 paymaster with Web3Auth Native Account Abstraction."
   image="https://web3auth.io/docs/img/guides/guides-banners/erc20-paymaster.png"
-  slug="/guides/sending-gassless-transaction"
+  slug="/tutorials/erc20-paymaster"
 />
 
 A paymaster is a vital component in the ERC-4337 standard, responsible for covering transaction costs on behalf of the user. There are various types of paymasters, such as gasless paymasters, ERC-20 paymasters, and more.

src/pages/tutorials/flutter-wallet.mdx

@@ -17,7 +17,7 @@ import WalletPreview from '@site/static/img/guides/flutter-wallet-preview.png'
   title="Build your own Chain Agnostic Web3 wallet in Flutter"
   description="Empower your Flutter app with a Chain Agnostic Web3 wallet using the Web3Auth PnP SDK."
   image="https://web3auth.io/docs/img/guides/guides-banners/flutter-wallet.png"
-  slug="/guides/flutter-wallet"
+  slug="/tutorials/flutter-wallet"
 />
 
 In this guide, we'll talk about how we can use Web3Auth to build your chain-agnostic Web3 wallet in Flutter. The wallet will support the Ethereum and Solana ecosystem.

src/pages/tutorials/pnp-no-modal-multichain.mdx

@@ -17,7 +17,7 @@ import Tabs from '@theme/Tabs'
   title="Create a Chain Agnostic Web3 Wallet with Web3Auth"
   description="Learn how to create a chain-agnostic Web3 wallet using Web3Auth"
   image="https://web3auth.io/docs/img/guides/guides-banners/multi.png"
-  slug="/guides/pnp-no-modal-multichain-connection"
+  slug="/tutorials/pnp-no-modal-multichain"
 />
 
 This guide will cover the basics of how to integrate Web3Auth with different blockchains at the same time. In this demo, you will be able to authenticate with different social logins and get different addresses from each blockchain. Of course, you can interact and sign transactions with any of them.

src/pages/tutorials/sending-gasless-transaction.mdx

@@ -16,7 +16,7 @@ import Tabs from '@theme/Tabs'
   title="Send your first gasless transaction"
   description="Learn how to use gasless paymaster with Web3Auth Native Account Abstraction."
   image="https://web3auth.io/docs/img/guides/guides-banners/gasless-transaction.png"
-  slug="/guides/sending-gassless-transaction"
+  slug="/tutorials/sending-gasless-transaction"
 />
 
 A paymaster is a vital component in the ERC-4337 standard, responsible for covering transaction costs on behalf of the user. There are various types of paymasters, such as gasless paymasters, ERC-20 paymasters, and more.

src/pages/tutorials/telegram-miniapp-client.mdx

@@ -16,7 +16,7 @@ import TelegramMiniAppDiagram from '@site/static/img/guides/telegram-mini-app-fl
   title="Client-Side Setup for Telegram Mini App with Web3Auth"
   description="Learn how to set up the client-side of a Telegram Mini App using Web3Auth to authenticate users and retrieve wallet details."
   image="https://web3auth.io/docs/img/guides/guides-banners/telegram-miniapp-client.png"
-  slug="/guides/telegram-miniapp-client"
+  slug="/tutorials/telegram-miniapp-client"
 />
 
 :::tip Live Demo

src/pages/tutorials/telegram-miniapp-server.mdx

@@ -17,7 +17,7 @@ import TelegramMiniAppFlowDiagram from '@site/static/img/guides/telegram-mini-ap
   title="Server-Side Setup for Telegram Mini App with Web3Auth"
   description="Learn how to set up a server for a Telegram Mini App using Web3Auth and validate Telegram login data to generate JWT tokens."
   image="https://web3auth.io/docs/img/guides/guides-banners/telegram-miniapp-server.png"
-  slug="/guides/telegram-miniapp-server"
+  slug="/tutorials/telegram-miniapp-server"
 />
 
 :::tip Live Demo

src/pages/tutorials/telegram.mdx

@@ -26,7 +26,7 @@ import TabItem from '@theme/TabItem'
   title="How to use Telegram OAuth with Web3Auth"
   description="Learn how to seamlessly integrate Telegram Login with Web3Auth to enhance your app's authentication capabilities."
   image="https://web3auth.io/docs/img/guides/guides-banners/telegram-oauth.png"
-  slug="/guides/telegram"
+  slug="/tutorials/telegram"
 />
 
 This guide will explain the basic steps of integrating the [Telegram Login Widget](https://core.telegram.org/widgets/login) _aka_ Telegram OAuth with Web3Auth for authentication. In this guide, you will learn how to create a Telegram bot, generate a JWKS file, and establish a custom JWT verifier on Web3Auth. Finally, we will demonstrate how to implement the Telegram OAuth flow for user authentication and generate Ethereum/Solana keys using [Web3Auth Plug and Play](https://web3auth.io/docs/sdk/web/install) and [Single Factor Auth](https://web3auth.io/docs/sdk/sfa/sfa-js/install) SDKs.

src/plugins/docusaurus-plugin-tutorials/index.js

@@ -33,6 +33,8 @@ module.exports = (context, options) => ({
   async contentLoaded({ content, actions }) {
     const { createData, addRoute } = actions
     const contentHub = await createData('tutorials.json', JSON.stringify(content))
+    
+    // Create the hub page that lists all tutorials
     addRoute({
       path: '/tutorials',
       exact: true,