improve root docs page

Author: davidemarcoli

app/docs/[[...slug]]/page.tsx

@@ -18,7 +18,7 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   const MDX = page.data.body;
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage toc={page.data.toc} full={page.data.full} tableOfContent={{style: 'clerk'}}>
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>

content/docs/index.mdx

@@ -3,6 +3,9 @@ title: Riven
 description: All in one media management solution
 ---
 
+import { Callout } from "fumadocs-ui/components/callout"
+import { Tabs, Tab } from "fumadocs-ui/components/tabs"
+
 <div align="center">
     <a href="https://github.com/rivenmedia/riven">
         <picture>
@@ -59,10 +62,11 @@ description: All in one media management solution
     </a>
 </div>
 
-!!! riven "Riven"
+<Callout type="info">
     **Riven** is a powerful media management and streaming solution designed to integrate with various media servers and third-party services. It automates the process of finding, downloading, and organizing media content, making it instantly available for streaming through your preferred media server.
+</Callout>
 
-<div className="grid grid-cols-2 cards" markdown="1" style={{ justifyContent: "center" }} id="home-cards">
+<div className="grid grid-cols-2 gap-4 cards" markdown="1" style={{ justifyContent: "center" }} id="home-cards">
 
 <div>
    ⚙️ __Easy Installation__
@@ -93,8 +97,9 @@ description: All in one media management solution
 
 ![step-5](/images/onboard/final.png)
 
-!!! warning "**Beta**"
-    Riven is under active development, we are constantly working on new features and fixing bugs.
+<Callout type="warning">
+Riven is under active development, we are constantly working on new features and fixing bugs.
+</Callout>
 
 Riven streamlines your media consumption experience by:
 
@@ -115,32 +120,34 @@ Before we begin, we need to set up the required folders and files for Riven.
 
 Grab the `docker-compose.yml` file from the [installation guide](#installation) and then `docker-compose up -d` to start the services.
 
-!!! note
+<Callout type="info">
     * **Linux**: Riven only supports Linux-based operating systems.
     * **Windows**: Riven only supports Windows Subsystem for Linux (WSL) in Windows.
     * **Rclone**: Required to mount debrid service. Additionally, Zurg is preferred for Real-Debrid users. [Learn more](https://rclone.org/)
     * **Media Server**: Plex, Jellyfin, and Emby are supported.
     * **Docker**: Required to run Riven in a containerized environment. [Learn more](https://www.docker.com/)
+</Callout>
 
-!!! tip "Debrid Support"
-    Currently only **Real-Debrid**, **All-Debrid** and **Torbox** are supported. More
+<Callout type="tip" title="Debrid Support">
+    Currently only **Real-Debrid** and **Torbox** are supported. More
     services will be added in the future!
+</Callout>
 
 ---
 
 ### Setup Directories
 
-For detailed information on the filesystem and VFS configuration, please refer to the [Filesystem (VFS)](services/filesystem/index.md) page. This page will help you understand how to configure and manage your media library using Riven's virtual filesystem. It will help you understand the mount path configuration and how to properly set up volume mounts in the `docker-compose.yml` file.
+For detailed information on the filesystem and VFS configuration, please refer to the [Filesystem (VFS)](docs/services/filesystem/) page. This page will help you understand how to configure and manage your media library using Riven's virtual filesystem. It will help you understand the mount path configuration and how to properly set up volume mounts in the `docker-compose.yml` file.
 
 ---
 
 ## Installation
 
-!!! danger "Setup VFS Mount Path First! :fire:"
-
-    This is incredibly important and must be setup first! When configuring the mount path and library path, you need to make sure that the mount propagation is set up correctly for your system. More information can be found at the [Filesystem (VFS)](services/filesystem/index.md) page.
+<Callout type="error" title="Setup VFS Mount Path First! 🔥">
+    This is incredibly important and must be setup first! When configuring the mount path and library path, you need to make sure that the mount propagation is set up correctly for your system. More information can be found at the [Filesystem (VFS)](docs/services/filesystem) page.
 
     The VFS mount path should be set to the container path (e.g., `/mount`), and proper mount propagation must be configured on the host.
+</Callout>
 
 `docker-compose.yml` file is used to run Riven in a containerized environment. It consists of three services:
 
@@ -237,21 +244,23 @@ Now this won't work as is, you need to modify the `docker-compose.yml` file to m
 
 Depending on how you installed Riven, execute the following command:
 
-=== "Docker"
-
+<Tabs items={['Docker', 'Local']}>
+<Tab value="Docker">
     ```bash
     docker-compose up -d && docker-compose logs -f
     ```
-
-=== "Local"
-
-    !!! warning "Python Version"
+</Tab>
+<Tab value="Local">
+    <Callout type="warning" title="Python Version">
         Riven requires Python 3.11 or higher and `poetry` to be installed.
+    </Callout>
 
     ```bash
     poetry install --without dev
     poetry run python /src/main.py
     ```
+</Tab>
+</Tabs>
 
 You can access the Riven web interface by navigating to the specified `ORIGIN` URL you entered in the `docker-compose.yml` file or your reverse proxy URL.
 
@@ -309,17 +318,17 @@ At this point you can take a look at the [services](services/index.md) page to l
 
 ## Frequently Asked Questions
 
-!!! warning "Cross-site POST form submissions are forbidden"
-    The most common reason for this is that you may not have set up `ORIGIN`
-    correctly in the `docker-compose.yml` file. If you are running Riven
-    behind a reverse proxy, you can remove the `ORIGIN` environment variable
-    from the `riven-frontend` service.
+<Callout type="warn" title="I am seeing CORS errors in the browser console">
+    Make sure that the `ORIGIN` environment variable in the `riven-frontend` service is set to the correct URL you are accessing the web interface from. If you are running Riven behind a reverse proxy, you can remove the `ORIGIN` environment variable from the `riven-frontend` service.
+</Callout>
 
-!!! warning "I am seeing an error when trying to save changes"
+<Callout type="warn" title="I am seeing an error when trying to save changes">
     If you are seeing an error when trying to save changes, it is most likely due to incorrect configuration or backend failure. Please check the logs of the Riven service to see the error message. If you are unable to resolve the issue, feel free to ask for help in the Riven Discord server.
+</Callout>
 
-!!! warning "I am stuck in an onboarding loop"
+<Callout type="warn" title="I am stuck in an onboarding loop">
     If you are stuck in the onboarding loop, it is most likely due to incorrect symlink settings. Check your library path and rclone mount path. If they are correct, check the logs of the Riven service. If you are unable to resolve the issue, feel free to ask for help in the Riven Discord server.
+</Callout>
 
 {/* ## What is Next?