New Walkthroughs

.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-transform-modules-commonjs"]
+}
+

docs/home.mdx

@@ -3,16 +3,16 @@ sidebar_position: 1
 slug: /
 title: Permit.io Docs
 sidebar_label: Welcome to Permit
-sidebar_custom_props: {  icon: road-map-line}
+sidebar_custom_props: { icon: road-map-line }
 hide_table_of_contents: true
 pagination_next: null
+pagination_prev: null
 sidebar_class_name: hidden
 full_width_container: true
 hide_breadcrumbs: true
 ---
 
 import DocCardList from "../src/theme/DocCardList";
-import NodeSvg from "../static/sdks/nodejs.svg";
 import SectionHero from "../src/components/home-page/SectionHero";
 import PagePadding from "../src/components/home-page/PagePadding";
 import PageVerticalPadding from "../src/components/home-page/PageVerticalPadding";
@@ -29,7 +29,12 @@ import {
   <title>Permit.io Docs</title>
 </head>
 
-<SectionHero />
+<SectionHero
+  title="Welcome to Permit.io"
+  text={
+    "Here you'll find comprehensive guides and resources to help </br> you get started with Permit and explore our platform."
+  }
+/>
 
 <PagePadding>
   <PageVerticalPadding>

docs/manage-your-account/projects-and-env.mdx

@@ -40,7 +40,7 @@ You can manage projects from the **[Projects](https://app.permit.io/projects)**
 If your organization needs to deal with **multiple projects**, you can add this project directly within the Projects page.
 
 <video controls>
-	<source src={createProject} />
+  <source src={createProject} />
 </video>
 
 ### Editing, Filtering and Deleting projects
@@ -49,12 +49,12 @@ We also provide the functionality for **filtering** through projects, to provide
 you also get the ability to **edit** and **delete** projects as you wish.
 
 <video controls>
-	<source src={editFilterDeleteProj} />
+  <source src={editFilterDeleteProj} />
 </video>
 
 ### Getting the project id
 
-To retrieve the project ID, click on the three dots and the key will be visible in the pop-ip, or you can consult
+To retrieve the project ID, click on the three dots and the key will be visible in the pop-up, or you can consult
 [this guide](/api/examples/get-project-and-env) for details on obtaining both the project and environment ID's via the API.
 
 ![Getting Project ID](/ui-videos/project-and-env/project-id.png)
@@ -69,7 +69,7 @@ If you want to dive deeper into understanding member roles, refer to the
 [Member Management](/manage-your-account/workspace-settings#member-management) guide.
 
 <video controls>
-	<source src={manageAccessProj} />
+  <source src={manageAccessProj} />
 </video>
 
 ## Environments
@@ -94,15 +94,15 @@ You can manage environments from the **[Project](https://app.permit.io/project-m
 Creating a new environment is as simple as clicking the **New Environment** button and filling in the details.
 
 <video controls>
-	<source src={createEnvironment} />
+  <source src={createEnvironment} />
 </video>
 
 Environments can be created from scratch or copied from an existing environment.
 See [Creating Environments](/manage-your-account/creating-environments) for more details.
 
 ### Getting the environment id
 
-To retrieve the environment ID, click on the three dots and the key will be visible in the pop-ip, or you can consult
+To retrieve the environment ID, click on the three dots and the key will be visible in the pop-up, or you can consult
 [this guide](/api/examples/get-project-and-env) for details on obtaining both the project and environment ID via the API.
 
 :::note
@@ -118,7 +118,7 @@ You will need a project and environment ID for most API calls to Permit.
 ### Editing and deleting environments
 
 <video controls>
-	<source src={editEnvironment} />
+  <source src={editEnvironment} />
 </video>
 
 ![Get env id](/ui-videos/workspace-settings/delete-env.png)
@@ -129,7 +129,7 @@ If you want to dive deeper into understanding member roles, refer to the
 [Member Management](/manage-your-account/workspace-settings#member-management) guide.
 
 <video controls>
-	<source src={manageAccessEnv} />
+  <source src={manageAccessEnv} />
 </video>
 
 ## Working with the Permit Hierarchy

docs/overview/configure-your-first-rbac-policy.mdx

@@ -0,0 +1,120 @@
+---
+sidebar_position: 1
+title: Configure your first RBAC Policy
+timeline: true
+---
+
+**Role-Based Access Control (RBAC)** is a method for managing access to resources by assigning permissions based on user
+roles. It simplifies security management by ensuring users only have access to what they need to perform their job. For a
+deeper dive into RBAC and its benefits, check out our [What is RBAC](https://www.permit.io/rbac) page or explore our
+detailed [blog post](https://www.permit.io/blog/what-is-rbac).
+
+import createRole from "/static/ui-videos/overview/create-a-role.mp4";
+import createResource from "/static/ui-videos/overview/create-a-resource.mp4";
+import createUser from "/static/ui-videos/overview/creating-a-user.mp4";
+import checkPolicies from "/static/ui-videos/overview/check-policies.mp4";
+
+> For example, in a web application, an "Admin" role might have full access to manage resources, while a "Viewer" role can
+> only view them.
+
+In this guide, you'll learn how to configure your first RBAC policy, step by step—starting with creating roles, defining
+resources and actions, and assigning roles to users.
+
+## timeline-start
+
+## Creating your first role
+
+The first step in configuring your RBAC policy is to define roles, which represent a set of permissions associated with
+specific actions and resources. Roles are the foundation of RBAC, as they determine what a user can or cannot do within
+the system.
+
+In this example, we will create a role called **Admin**, which typically represents a user with the highest level of access.
+
+To create the Admin role:
+
+1. Navigate to the Policy Screen
+2. Click `Create a Role`
+3. Enter "Admin" as the name of the role. Make sure the name is clear and meaningful, reflecting the purpose of the role.
+   You can also pass a `key` to uniquely identify a role and a `description` to offer a more meaningful explanation of the role.
+
+<video controls autoPlay loop>
+  <source src={createRole} />
+</video>
+
+## Creating a resource and its actions
+
+1. Navigate to the `Policy` Screen.
+2. Click `Create a Resource`.
+3. Enter `Document` as the name of the resource. Ensure the name clearly represents the entity or object in your system requiring
+   controlled access, such as a **file**, **database entry**, or, in this case, a **document**.
+4. Add the actions associated with this resource. Start with Permit’s basic pre-defined actions — `create`, `read`, `update`, and `delete`
+   (CRUD). These actions cover fundamental operations common across most systems.
+5. Optionally, add **custom actions** to reflect specific operations relevant to your use case. For example, add a custom action called
+   `publish`, representing an operation specific to document management.
+
+:::note
+This combination of predefined and bespoke actions gives you flexibility in crafting access policies tailored to
+your application’s needs.
+:::
+
+<video controls autoPlay loop>
+  <source src={createResource} />
+</video>
+
+## Add a user and assign a role
+
+Now that we’ve defined a role, a resource, and its associated actions, it’s time to **bring a user into the system** and
+grant them access.
+
+:::tip
+A users represent individuals or entities that will interact with your application, and roles determine
+what they can do.
+:::
+
+1. Navigate to the `Directory` page.
+2. Click `Add User`.
+3. Enter `[email protected]` as the user's **email address**. Ensure the email corresponds to the individual who should receive access.
+4. Assign the `Admin` role to this user by selecting it from the list of available roles. This grants the user full administrative
+   permissions to manage resources and perform all actions defined for the role.
+
+<video controls autoPlay loop>
+  <source src={createUser} />
+</video>
+
+## Configuring RBAC permissions in the Policy editor
+
+Finally, with our roles, resources, and users in place, we need to define the exact permissions for the Admin role.
+This is done in the Policy Editor, where you can specify what actions each role is allowed to perform on a given resource.
+
+1. Navigate to the `Policy Editor` Screen.
+2. **Find** the `Admin` role, and the `Document` resource underneath the role.
+3. Tick the **actions** the Admin role can perform on the Document resource:
+   - `create`
+   - `read`
+   - `publish` (the custom action defined earlier).
+
+By mapping specific actions to roles in the Policy Editor, you ensure your access control model is both secure and flexible, tailored
+to your application's requirements.
+
+<video controls autoPlay loop>
+  <source src={checkPolicies} />
+</video>
+
+<br />
+<br />
+
+Once this step is complete, your RBAC setup is ready, and the Admin role will have all the necessary permissions to
+manage the Document resource effectively.
+
+## timeline-stop
+
+## What did you learn?
+
+Congratulations! 🎉 You’ve successfully configured your first **RBAC** policy by creating a role, defining a resource with
+actions, assigning a user, and setting permissions. This foundational setup is the cornerstone of a secure and scalable
+access control system.
+
+:::tip FUN FACT!
+RBAC is so effective that it’s used by NASA to manage access to mission-critical systems! By leveraging roles and
+permissions, they ensure that only authorized personnel can interact with sensitive spacecraft operations and data.
+:::

docs/overview/get-api-key.mdx

@@ -0,0 +1,40 @@
+---
+sidebar_position: 2
+title: Get your API Key
+description: Guide on generating your API Key.
+---
+
+To start using Permit.io, you’ll need an API key to authenticate your application with the Permit platform. This key is
+essential for accessing Permit’s authorization services and managing your app's permissions.
+
+---
+
+## Get your Permit Environment API Key
+
+#### To get your API key:
+
+1. Open the [Permit Dashboard](https://app.permit.io/) and go to the **Projects** screen.
+2. Select the desired [Project](/overview/glossary#projects) and [Environment](/overview/glossary#environment).
+3. On the environment card, click the ![three dots icon](/ui-videos/getting-started/connecting-your-app/dots.png) in the top-right corner.
+4. Choose **Copy API Key** from the dropdown menu.
+
+<img
+  src="/img/updated/quickstart/sdk-key-1.png"
+  alt="Copy secret key from user menu"
+  data-zoomable
+/>
+
+:::tip TOP TIP
+You can also copy the Environment API Key of the active environment by clicking on the **User Menu Icon > Copy Environment Key**
+
+<img
+  src="/img/updated/quickstart/sdk-key-2.png"
+  alt="Copy secret key from Projects management"
+  data-zoomable
+/>
+:::
+
+:::info Remember
+The API Key that you will copy from the user menu is linked to the active environment on the sidebar.
+Switching to another active environment and then clicking on the **Copy Environment Key** option will copy a **different** API Key - the API key of the newly activated environment.
+:::