docs: new tutorial

documentation/blog/2022-02-21-react-antd-admin.md

@@ -42,7 +42,7 @@ You can use it with any UI library you want without any problems. Also, [Ant Des
 
 ## Refine Advanced Tutorial
 
-This article will proceed through Refine's [Refine Basic Tutorial](https://refine.dev/docs/tutorial/introduction/index/). That's why I suggest you read the basic tutorial of refine.
+This article will proceed through Refine's [Refine Basic Tutorial](https://refine.dev/tutorial). That's why I suggest you read the basic tutorial of refine.
 
 In this tutorial, we will learn how to include the features(i18n, Realtime, Access Control) provided by the Refine in our project and how we can use it.
 

documentation/blog/2022-02-21-top-react-frameworks.md

@@ -141,7 +141,7 @@ There are two ways to add UI elements to Refine;
 1. Using a UI Library such as Tailwind, Chakra UI, etc.
 2. Using a complete UI Framework such as Ant Design, Material UI, etc.
 
-The recommended way is using the [superplate](https://github.com/pankod/superplate) tool. superplate's CLI wizard will let you create and customize your application in seconds. You can find tutorial from [here](https://refine.dev/docs/tutorial/introduction/index/)
+The recommended way is using the [superplate](https://github.com/pankod/superplate) tool. superplate's CLI wizard will let you create and customize your application in seconds. You can find tutorial from [here](https://refine.dev/tutorial)
 
 ```
 npm create refine-app@latest

documentation/blog/2022-05-23-build-access-control-permify.md

@@ -24,7 +24,7 @@ As an overview, we will:
 
 ### Step 1: Setup the Permify in Refine application
 
-First let's create a demo react application using refine. You can follow the [tutorial to create a simple](https://refine.dev/docs/tutorial/introduction/index/) admin panel for a CMS-like application.
+First let's create a demo react application using refine. You can follow the [tutorial to create a simple](https://refine.dev/tutorial) admin panel for a CMS-like application.
 
 If you're application is ready, lets create a free instant account at Permify from [here](https://panel.permify.co/auth/registration).
 

documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md

@@ -56,7 +56,7 @@ Before we dive into the meat of the article, let's first take a look at the tool
 - [Refine](https://refine.dev/docs/)
 - [Refine StrapiV4 data provider ](https://refine.dev/docs/examples/data-provider/strapi-v4/)
 - [Material UI](https://mui.com/material-ui/getting-started/overview/)
-- [Refine Material UI Tutorial](https://refine.dev/docs/tutorial/introduction/index/)
+- [Refine Material UI Tutorial](https://refine.dev/tutorial)
 
 Your node version need to be minimum `v16.14.0`
 
@@ -212,7 +212,7 @@ Note you will need `src/App.tsx` file to find your pages and posts. In the `/pag
 export * from "./list";
 ```
 
-[Refer to official Refine's Material UI tutorial for detailed explanations and examples &#8594](https://refine.dev//docs/tutorial/adding-crud-pages/mui/add-show-page/)
+[Refer to official Refine's Material UI tutorial for detailed explanations and examples &#8594](/docs/ui-integrations/material-ui/introduction)
 
 <br/>
 <div>
@@ -348,7 +348,7 @@ To show category field in table, we need to add new column to the PostList compo
 
 We use benefits of Strapi V4 relational population feature by using `populate` parameter. It handles to getting relational data automatically.
 
-[If you use another REST API that relational populations need to be handled manually you can check the example at the link &#8594](https://refine.dev/docs/tutorial/adding-crud-pages/mui/index/#handling-relationships)
+[If you use another REST API that relational populations need to be handled manually you can check the example at the link &#8594](/docs/guides-concepts/data-fetching)
 
 :::
 

documentation/blog/2022-08-23-mui-usedatagrid.md

@@ -44,7 +44,7 @@ To follow along with this tutorial, we assume you have the following:
 - Node.js installed on your machine
 - A code editor of your choice (VSCode, Sublime Text, etc.)
 
-If you don't familiar with Refine, we recommend you to check out the [Refine tutorial](https://refine.dev/docs/tutorial/introduction/index/) to get started.
+If you don't familiar with Refine, we recommend you to check out the [Refine tutorial](https://refine.dev/tutorial) to get started.
 
 ## Create a new Refine app
 

documentation/blog/2023-01-06-hackaton-january.md

@@ -111,7 +111,7 @@ The **Refine** team will be taking part in the Hackathon and you'll find us live
 ## Useful resources
 
 - You can step up to complete CRUD app tutorials to learn **Refine** and how it works.
-  - :point_right: https://refine.dev/docs/tutorial/introduction/index/
+  - :point_right: https://refine.dev/tutorial
 - You can take a look at real use case example projects built with **Refine** to get an inspiration.
   - :point_right: https://refine.dev/docs/examples/
   - :point_right: https://refine.dev/examples/

documentation/blog/2023-02-15-refine-pixels-2.md

@@ -26,7 +26,7 @@ This is Day 2 of the [**RefineWeek**](https://refine.dev/week-of-refine-supabase
 
 In the previous post, we got a preview of **Refine**'s underlying architecture, especially on how **Refine**'s core modules abstract and divide an app's logic inside individual providers and allow their methods to be easily accessed and executed with hooks from inside consumer components. This abstraction at the providers layer is where **Refine** shines and require extensive configuration to begin with.
 
-In this part, we will get into the details of two important providers: namely, the [`dataProvider`](https://refine.dev/docs/tutorial/understanding-dataprovider/index/) and [`authProvider`](https://refine.dev/docs/tutorial/understanding-authprovider/index/) props of our [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/) component. We will be building on this knowledge in the coming episodes.
+In this part, we will get into the details of two important providers: namely, the [`dataProvider`](https://refine.dev/docs/data/data-provider) and [`authProvider`](https://refine.dev/docs/authentication/auth-provider/) props of our [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/) component. We will be building on this knowledge in the coming episodes.
 
 The providers will be generated by the `create refine-app` CLI tool based on our choice, so we'll start off with setting up the **Pixels** app right away.
 
@@ -178,7 +178,7 @@ function App() {
 
 ### `<Refine />`'s `dataProvider` Prop
 
-[**Refine**'s **data provider**](https://refine.dev/docs/tutorial/understanding-dataprovider/index/) is the context which allows the app to communicate with a backend API via a `HTTP` client. It subsequently makes response data returned from HTTP requests available to consumer components via a set of **Refine** data hooks.
+[**Refine**'s **data provider**](https://refine.dev/docs/data/data-provider) is the context which allows the app to communicate with a backend API via a `HTTP` client. It subsequently makes response data returned from HTTP requests available to consumer components via a set of **Refine** data hooks.
 
 If we look closely, our `dataProvider` prop derives a value from a call to `dataProvider(supabaseClient)`:
 

documentation/blog/2023-02-16-refine-pixels-3.md

@@ -8,7 +8,7 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-02-09-refine-pix
 hide_table_of_contents: false
 ---
 
-In this post, we build on our existing understanding of [`dataProvider`](https://refine.dev/docs/tutorial/understanding-dataprovider/index/) and [`authProvider`](https://refine.dev/docs/tutorial/understanding-authprovider/index/) props of [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/) to implement CRUD operations in our **Pixels** app that we initialized in the previous post. While doing so, we discuss the roles of `<Refine />` component's [`resources`](https://refine.dev/docs/tutorial/understanding-resources/index/) and `routerProvider` props as well.
+In this post, we build on our existing understanding of [`dataProvider`](https://refine.dev/docs/data/data-provider) and [`authProvider`](https://refine.dev/docs/authentication/auth-provider) props of [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/) to implement CRUD operations in our **Pixels** app that we initialized in the previous post. While doing so, we discuss the roles of `<Refine />` component's [`resources`](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept) and `routerProvider` props as well.
 
 CRUD actions are supported by the [**Supabase**](https://supabase.com/) data provider we chose for our project and in this post we use them to build a public gallery of canvases. We implement creation and displaying of individual canvases as well as drawing on them. We also add authentication features supported by the `supabaseClient` we discussed on Day Two of the [**RefineWeek**](https://refine.dev/week-of-refine-supabase/) series.
 
@@ -263,7 +263,7 @@ function App() {
 export default App;
 ```
 
-Focusing on the top, in order to add a resource to our app, we have to introduce the [`resources`](https://refine.dev/docs/tutorial/understanding-resources/index/) prop to [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/). The value of `resources` prop should be an **array** of resource items with RESTful routes in our app. A typical resource object contains properties and values related to the resource `name`, `options`, and intended actions:
+Focusing on the top, in order to add a resource to our app, we have to introduce the [`resources`](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept) prop to [`<Refine />`](https://refine.dev/docs/api-reference/core/components/refine-config/). The value of `resources` prop should be an **array** of resource items with RESTful routes in our app. A typical resource object contains properties and values related to the resource `name`, `options`, and intended actions:
 
 ```json title="Typical resource object inside resources array"
 {
@@ -527,9 +527,9 @@ We will use the **Ant Design** [`<List />`](https://ant.design/components/list#l
 
 [`<List />`](https://ant.design/components/list#list) component takes in the props inside `listProps` object that `useSimpleList()` hook prepares for us from the fetched canvases array and shows each canvas data inside the `<CanvasTile />` component. All the props and presentation logic are being handled inside the **Ant Design** `<List />` component.
 
-[Refer to Ant Design documentation for more information About <List />. →](https://refine.dev/docs/tutorial/introduction/select-framework/)
+[Refer to Ant Design documentation for more information About <List />. →](https://ant.design/components/list#list)
 
-[Refer to complete Refine CRUD app with Ant Design tutorial here. →](https://refine.dev/docs/tutorial/introduction/select-framework/)
+[Refer to complete Refine CRUD app with Ant Design tutorial here. →](https://refine.dev/docs/ui-integrations/ant-design/introduction)
 
 **2. `useSimpleList()` Hook**
 
@@ -708,7 +708,7 @@ In this example we didn't wrap our `canvases` resource routes with [`<Authentica
 
 However, we use `login`, `register`, `forgot-password` and `update-password` routes as a `fallback` of [`<Authenticated/>`](/docs/authentication/components/authenticated) component. This means that we can not access these routes if we are authenticated.
 
-[Refer to the Auth Provider tutorial for more information. →](/docs/tutorial/understanding-authprovider/index)
+[Refer to the Auth Provider tutorial for more information. →](/docs/authentication/auth-provider)
 
 ### `<Refine />` `create` Action
 
@@ -1133,7 +1133,7 @@ Now that we have our `<CanvasShow />` component ready, let's start implementing
 
 ## Supabase Authentication with Refine
 
-[Refer to the Auth Provider tutorial for more information. →](/docs/tutorial/understanding-authprovider/index)
+[Refer to the Auth Provider tutorial for more information. →](/docs/authentication/auth-provider)
 
 ```tsx title="src/App.tsx"
 <Refine

documentation/blog/2023-02-18-refine-pixels-5.md

@@ -477,7 +477,7 @@ return (
 
 After adding resources we need to create routes for them. For the routes, we'll use the `<UserList/>` and `<CanvasList/>` components we created earlier.
 
-[Refer to the CRUD Pages tutorial for more information. →](/docs/tutorial/adding-crud-pages/antd/index)
+[Refer to the CRUD Pages tutorial for more information. →](/docs/ui-integrations/ant-design/introduction)
 
 ```tsx title="App.tsx"
 // ...

documentation/blog/2023-02-23-refine-strapi-mantine.md

@@ -254,7 +254,7 @@ export * from "./list";
 
 Now we are ready to start connecting to our API by adding a resource to our application
 
-[Refer to documentation for more info about `resources` concept](https://refine.dev/docs/tutorial/understanding-resources/index/)
+[Refer to documentation for more info about `resources` concept](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept)
 
 Finally, replace the `src/App.tsx` file with the code below:
 
@@ -440,7 +440,7 @@ As highlighted in the previous section, our Strapi API has `posts` and `categori
 
 [Refer to documentation for more info about relation populate.](https://refine.dev/docs/packages/documentation/data-providers/strapi-v4/#relations-population)
 
-[Refer to tutorial section for more info about handling relationships.](https://refine.dev/docs/tutorial/adding-crud-pages/mantine/index/#handling-relationships)
+[Refer to tutorial section for more info about handling relationships.](https://refine.dev/docs/guides-concepts/data-fetching)
 
 Therefore, for our data provider to return the categories for each post, we need to specify using the `populate` field of the `meta` property in the object we pass to the `useTable` hook.
 

documentation/blog/2023-03-03-ra-chakra-tutorial.md

@@ -114,7 +114,7 @@ export default App;
 
 #### Resource
 
-A [resources](https://refine.dev/docs/tutorial/understanding-resources/index/) is a fundamental component of a Refine application. A resource acts as a bridge between the Data/API layer and the Document/Page Layer. A resource enables the application's pages to interact with the API.
+A [resources](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept) is a fundamental component of a Refine application. A resource acts as a bridge between the Data/API layer and the Document/Page Layer. A resource enables the application's pages to interact with the API.
 
 To create a resource; define our resources and their action paths. This will inform **Refine** to use these paths when generating the breadcrumbs, menus, handling redirections and inferring the current resource and action.
 In accordance with the path definitions in a resource object, we have to assign a `<Route />` for each path and an element to display at that path.

documentation/blog/2023-03-13-refine-v4-announcement.md

@@ -88,7 +88,7 @@ With its flexible structure, Refine now has enterprise-grade router support for
 
 ## Enterprise-grade routing
 
-We now offer top-notch support for routes for [`resources`](https://refine.dev/docs/tutorial/understanding-resources/index/). With this new feature, you have complete freedom to create routes that can be tailored to meet the specific needs of your advanced and enterprise use cases. There are no limits or restrictions, so you can create routes that truly fit your unique requirements.
+We now offer top-notch support for routes for [`resources`](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept). With this new feature, you have complete freedom to create routes that can be tailored to meet the specific needs of your advanced and enterprise use cases. There are no limits or restrictions, so you can create routes that truly fit your unique requirements.
 
 Changes to the `resources` prop in Refine v4 have made it possible for the prop to act as a connection point between your app and API, rather than being mandatory for the router to work. As a result, your router can work without resources, and your resources can work without a router.
 
@@ -144,7 +144,7 @@ Thanks to full codemod support, imports and exports will be automatically update
 
 ### New Auth Provider
 
-Refine v4 introduces a common interface for the [`authProvider`](https://refine.dev/docs/tutorial/understanding-authprovider/index/) methods to improve transparency for developers and facilitate better understanding and debugging. Previously, developers had to resolve the `authProvider` methods upon success and reject them upon failure.
+Refine v4 introduces a common interface for the [`authProvider`](https://refine.dev/docs/authentication/auth-provider/) methods to improve transparency for developers and facilitate better understanding and debugging. Previously, developers had to resolve the `authProvider` methods upon success and reject them upon failure.
 
 However, this method had its limitations as rejected promises are typically associated with errors or exceptional situations, which could cause confusion for developers and impede the debugging process, especially for non-failure cases like incorrect login credentials.
 

documentation/blog/2023-03-17-react-dashboard-libraries.md

@@ -65,7 +65,7 @@ npm create refine-app@latest
 
 - GitHub stars: +16K
 - License: MIT
-- Links: [Demo](https://example.crm.refine.dev/) | [Documentation](https://refine.dev/docs/tutorial/introduction/index/) | [GitHub](https://github.com/refinedev/refine/tree/master/examples/app-crm)
+- Links: [Demo](https://example.crm.refine.dev/) | [Documentation](https://refine.dev/tutorial) | [GitHub](https://github.com/refinedev/refine/tree/master/examples/app-crm)
 
 ## Ant Design pro
 

documentation/blog/2023-04-06-finefood-admin-dashboard.md

@@ -131,7 +131,7 @@ However, in building our food delivery React admin dashboard application, we wil
 
 ## Adding the Data Provider
 
-A [`dataProvider`](https://refine.dev/docs/tutorial/understanding-dataprovider/index/) in Refine simply allows application to communicate with an external API or service. A `dataProvider` uses predefined methods to send HTTP requests and receive responses as below.
+A [`dataProvider`](https://refine.dev/docs/data/data-provider) in Refine simply allows application to communicate with an external API or service. A `dataProvider` uses predefined methods to send HTTP requests and receive responses as below.
 
 ### The jsonServerDataProvider Provider in Refine
 
@@ -170,7 +170,7 @@ In the course of the tutorial, we will be using Refine's demo finefoodsAPI (http
 
 ## Adding the Auth provider
 
-An [Auth Provider](https://refine.dev/docs/tutorial/understanding-authprovider/index/) in Refine contains predefined methods that handle authentication and access control on the application. the predefined methods are shown below:
+An [Auth Provider](https://refine.dev/docs/authentication/auth-provider/) in Refine contains predefined methods that handle authentication and access control on the application. the predefined methods are shown below:
 
 ```tsx
 import { AuthProvider } from "@refinedev/core";
@@ -1861,7 +1861,7 @@ export const DashboardPage: React.FC = () => {
 
 ## Add Dashboard Page and resource to the Refine component
 
-We will add the Dashboard page as a route and [resource](https://refine.dev/docs/tutorial/understanding-resources/index/#what-is-resource) on the Refine component located at the `src/App.tsx` directory. We update the `src/App.tsx` file with the code below:
+We will add the Dashboard page as a route and [resource](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept#what-is-resource) on the Refine component located at the `src/App.tsx` directory. We update the `src/App.tsx` file with the code below:
 
 ```tsx title="src/App.tsx"
 import { Authenticated, ErrorComponent, GitHubBanner, Refine, WelcomePage } from "@refinedev/core";
@@ -2005,7 +2005,7 @@ Lets explain the block of code we just added:
 ```
 
 A resource object may include properties that define the resource's `name`, action routes(`list`), and additional `metadata` such as label, icon, audit log settings, sider menu nesting, and so on.
-To read more on resources, view [here](https://refine.dev/docs/tutorial/understanding-resources/index/#what-is-resource).
+To read more on resources, view [here](https://refine.dev/docs/guides-concepts/general-concepts/#resource-concept#what-is-resource).
 
 - After Adding a resource, we specify the route that the resource will be linked to which is shown below: