docs: update styling, add roles docs (#2686)

apps/docs/app/global/access-roles/page.mdx

@@ -0,0 +1,100 @@
+import { MdxImage } from "@/components/MdxImage";
+import AddMember from "./images/add-member.webp";
+import BulkInvite from "./images/bulk-invite.webp";
+import IndvInvite from "./images/individual-invite.webp";
+import MenuItem from "./images/team-settings-menu.webp";
+
+export const metadata = {
+  title: "Team Access Roles",
+  description:
+    "Assign different roles to team members to grant them specific rights like creating surveys, viewing responses, or managing team members.",
+};
+
+# Team Access Roles
+
+Assign different roles to team members to grant them specific rights like creating surveys, viewing responses, or managing team members.
+
+<Note>Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited team members as `Admins`.</Note>
+
+
+| Role | Rights |
+| --- | --- |
+| Owner | Full rights; there can only one owner per team. Ownership can be transferred. |
+| Admin | Full access rights incl. managing team members |
+| Developer | Full product access to setup and run surveys incl. global styling, actions and attribute management, etc |
+| Editor | Create and edit surveys. No access to features related to setting up or maintaining Formbricks. |
+| Viewer | View survey results only. |
+
+## Inviting team members
+
+There are two ways to invite team members: One by one or in bulk.
+
+### Invite team members one by one
+
+1. Go to the `Team Settings` page via the menu in the lower right corner:
+
+<MdxImage 
+src={MenuItem}
+  alt="Where to find the Menu Item for Team Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Click on the `Add Member` button:
+
+<MdxImage
+  src={AddMember}
+  alt="Add Member Button Position"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. In the modal, add the Name, Email and Role of the team member you want to invite:
+
+<MdxImage
+  src={IndvInvite}
+  alt="Individual Invite Modal Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+<Note>Access Roles is a feature of the **Enterprise Edition**. In the **Community Edition** and on the **Free** and **Startup** plan in the Cloud you can invite unlimited team members as `Admins`.</Note>
+
+
+Formbricks sends an email to the team member with an invitation link. The team member can accept the invitation or create a new account by clicking on the link.
+
+
+### Invite team members in bulk
+
+1. Go to the `Team Settings` page via the menu in the lower right corner:
+
+<MdxImage
+  src={MenuItem}
+  alt="Where to find the Menu Item for Team Settings"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Click on the `Add Member` button:
+
+<MdxImage
+  src={AddMember}
+  alt="Add Member Button Position"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. In the modal, switch to `Bulk Invite`. You can download an example .CSV file to fill in the Name, Email and Role of the team members you want to invite:
+
+<MdxImage
+  src={BulkInvite}
+  alt="Individual Invite Modal Tab"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+4. Upload the filled .CSV file and invite the team members in bulk ✅
+
+Formbricks sends an email to each team member in the CSV. The member can accept the invitation or create a new account by clicking on the link.
+
+---

apps/docs/app/global/custom-styling/page.mdx

@@ -1,260 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import PreRequisiteImage from "./images/Pre-requisite.webp";
-import StepEight from "./images/StepEight.webp";
-import StepEleven from "./images/StepEleven.webp";
-import StepFive from "./images/StepFive.webp";
-import StepFour from "./images/StepFour.webp";
-import StepNine from "./images/StepNine.webp";
-import StepOne from "./images/StepOne.webp";
-import StepSeven from "./images/StepSeven.webp";
-import StepSix from "./images/StepSix.webp";
-import StepTen from "./images/StepTen.webp";
-import StepThree from "./images/StepThree.webp";
-import StepTwo from "./images/StepTwo.webp";
-
-import Doggo from "./images/Doggo.jpg";
-import HipsterLiving from "./images/HipsterLiving.jpg";
-import Mario from "./images/Mario.webp";
-import WindowsXp from "./images/WindowsXp.jpg";
-
-export const metadata = {
-  title: "Custom Styling in Formbricks Surveys",
-  description:
-    "Style your surveys effortlessly with Formbricks to match your brand's unique aesthetic, from Super Mario themes to the minimalist Windows XP style. Customize everything from color schemes to adding your logo, all without needing any coding skills.",
-};
-
-# Custom Styling
-
-Style your surveys effortlessly with Formbricks to match your brand's unique aesthetic, from Super Mario themes to the minimalist Windows XP style. Customize everything from color schemes to adding your logo, all without needing any coding skills. Don’t miss out some of our standout design surveys at the end!
-
-### Product Styling
-
-Easily apply a consistent style across all your current & future surveys:
-
-**Pre-requisites:**
-
-1. Navigate to the **Settings** tab on the Formbricks Dashboard.
-2. Select **Look & Feel** under the **Product** section in the left navbar
-
-<MdxImage
-  src={PreRequisiteImage}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-**Switch between Link Survey & App Survey** to preview different styles
-
-### **Styling Options**
-
-1. **Form Styling:** Customize the survey card using the following settings
-
-<MdxImage
-  src={StepOne}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Brand Color**: Sets the primary color tone of the survey.
-- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
-- **Input Color:** Alters the border color of input fields.
-- **Input Border Color**: This is the color of the border of the form input field.
-
-2. **Card Styling:** Adjust the look of the survey card
-
-<MdxImage
-  src={StepTwo}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
-- **Card Background Color**: Sets the card's main background color.
-- **Card Border Color**: Changes the border color of the card
-- **Card Shadow Color**: Adds a shadow effect for depth
-- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
-- **Add Highlight Border**: Adds a distinct border for emphasis.
-
-3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)
-
-<Note>This is only available for Link Surveys</Note>
-
-<MdxImage
-  src={StepThree}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Color**: Pick any color for the background
-- **Animation**: Add dynamic animations to enhance user experience..
-- **Upload**: Use a custom uploaded image for a personalized touch
-- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
-- **Background Overlay**: Adjust the background's opacity
-
-### Add Brand Logo:
-
-Customize your survey with your brand's logo.
-
-<Note>only available for link survyes</Note>
-
-1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.
-
-<MdxImage
-  src={StepFour}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-2. Upload your logo
-
-<MdxImage
-  src={StepFive}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.
-
-<MdxImage
-  src={StepSix}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-4. Remember to save your changes!
-
-<MdxImage
-  src={StepSeven}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-<Note>The logo setting applies across all link surveys</Note>
-
-### Overwrite Product Styling
-
-Create surveys with specific styles that differ from your general product style.
-
-**Pre-requisites**:
-
-- Enable the **Custom Styling** toggle in the **Look & Feel** settings
-
-<MdxImage
-  src={StepEight}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-**Steps:**
-
-1. Open the survey editor you want to change the styling of and switch to the Styling tab.
-
-<MdxImage
-  src={StepNine}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-2. Activate the **Add Custom Styles** toggle to override the default product styling.
-
-<MdxImage
-  src={StepTen}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-3. Customize your survey's style as needed!
-
-<MdxImage
-  src={StepEleven}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-Voila! just hit the save button to apply your changes. Your survey is now ready to impress with its unique look!
-
-## Overwrite CSS Styles for App & Website Surveys
-
-You can overwrite the default CSS styles for the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`):
-
-Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.
-
-<Col>
-<CodeGroup title="Overwrite Formbricks CSS">
-
-```css
-/* Formbricks CSS */
---fb-brand-color: red;
---fb-brand-text-color: white;
---fb-border-color: green;
---fb-border-color-highlight: rgb(13, 13, 12);
---fb-focus-color: red;
---fb-heading-color: yellow;
---fb-subheading-color: green;
---fb-info-text-color: orange;
---fb-signature-text-color: blue;
---fb-survey-background-color: black;
---fb-accent-background-color: rgb(13, 13, 12);
---fb-accent-background-color-selected: red;
---fb-placeholder-color: white;
---fb-shadow-color: var(--fb-brand-color);
---fb-rating-fill: rgb(13, 13, 12);
---fb-rating-hover: green;
---fb-back-btn-border: blue;
---fb-submit-btn-border: transparent;
---fb-rating-selected: black;
-```
-
-</CodeGroup>
-</Col>
-
-We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here.
-
-### Funky Survey Examples
-
-- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things
-
-<MdxImage
-  src={Mario}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Hipster Living**: Does your monstera get enough water?
-
-<MdxImage
-  src={HipsterLiving}
-  alt="Choose a link survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia.
-  <MdxImage
-    src={WindowsXp}
-    alt="Choose a link survey template"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl "
-  />
-- **Whosagooooodbooooy**: Things you've likely said to your dog.
-  <MdxImage
-    src={Doggo}
-    alt="Choose a link survey template"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl "
-  />
-
----

apps/docs/app/global/overwrite-styling/page.mdx

@@ -0,0 +1,131 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import StepEleven from "./images/StepEleven.webp";
+import StepNine from "./images/StepNine.webp";
+import StepTen from "./images/StepTen.webp";
+
+import Doggo from "./images/Doggo.jpg";
+import HipsterLiving from "./images/HipsterLiving.jpg";
+import Mario from "./images/Mario.webp";
+import WindowsXp from "./images/WindowsXp.jpg";
+
+export const metadata = {
+  title: "Overwrite Styling Theme on Individual Surveys",
+  description:
+    "Overwrite the global styling theme for individual surveys to create unique styles for each survey.",
+};
+
+# Overwrite Styling Theme on Individual Surveys
+
+Overwrite the global styling theme for individual surveys to create unique styles for each survey.
+
+<Note>To set a styling theme for all surveys, please see the [Styling Theme](/global/styling-theme) manual. </Note>
+
+
+### Overwrite Styling Theme
+
+1. In the Survey Editor of the survey you want to style, navigate to the **Styling** tab:
+
+<MdxImage
+  src={StepNine}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Activate the **Add Custom Styles** toggle to override the default product styling:
+
+<MdxImage
+  src={StepTen}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. Customize your survey's style as needed:
+
+<MdxImage
+  src={StepEleven}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+Voila! just hit the save button to apply your changes. Your survey is now ready to impress with its unique look!
+
+## Overwrite CSS Styles for App & Website Surveys
+
+You can overwrite the default CSS styles for the app & website surveys by adding the following CSS to your global CSS file (eg. `globals.css`):
+
+Make sure that you do not change the CSS variable names as they are used by Formbricks to identify the CSS variables. You can change the values to your liking. We have filled in some sample values for you to change according to your desired appearance.
+
+<Col>
+<CodeGroup title="Overwrite Formbricks CSS">
+
+```css
+/* Formbricks CSS */
+--fb-brand-color: red;
+--fb-brand-text-color: white;
+--fb-border-color: green;
+--fb-border-color-highlight: rgb(13, 13, 12);
+--fb-focus-color: red;
+--fb-heading-color: yellow;
+--fb-subheading-color: green;
+--fb-info-text-color: orange;
+--fb-signature-text-color: blue;
+--fb-survey-background-color: black;
+--fb-accent-background-color: rgb(13, 13, 12);
+--fb-accent-background-color-selected: red;
+--fb-placeholder-color: white;
+--fb-shadow-color: var(--fb-brand-color);
+--fb-rating-fill: rgb(13, 13, 12);
+--fb-rating-hover: green;
+--fb-back-btn-border: blue;
+--fb-submit-btn-border: transparent;
+--fb-rating-selected: black;
+```
+
+</CodeGroup>
+</Col>
+
+We have an example of this in our [Demo project](https://github.com/formbricks/formbricks/blob/main/apps/demo/styles/globals.css) here.
+
+## Funky Survey Examples
+
+- **Super Mario:** I guess he won't let himself be limited by radio buttons and do all three things
+
+<MdxImage
+  src={Mario}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Hipster Living**: Does your monstera get enough water?
+
+<MdxImage
+  src={HipsterLiving}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Windows XP**: Hach, nostalgia. Made us wanna play Mafia.
+
+<MdxImage
+  src={WindowsXp}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Whosagooooodbooooy**: Things you've likely said to your dog.
+
+<MdxImage
+  src={Doggo}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+---

apps/docs/app/global/styling-theme/page.mdx

@@ -0,0 +1,149 @@
+import { MdxImage } from "@/components/MdxImage";
+
+import StepEight from "./images/StepEight.webp";
+import StepEleven from "./images/StepEleven.webp";
+import StepFive from "./images/StepFive.webp";
+import StepFour from "./images/StepFour.webp";
+import StepNine from "./images/StepNine.webp";
+import StepSeven from "./images/StepSeven.webp";
+import StepSix from "./images/StepSix.webp";
+import StepTen from "./images/StepTen.webp";
+import AllowOverwrite from "./images/allow-overwrite.webp";
+import BackgroundSettings from "./images/background-settings.webp";
+import CardSettings from "./images/card-settings.webp";
+import FormSettings from "./images/form-settings.webp";
+import LookAndFeelSettings from "./images/look-and-feel.webp";
+
+import Doggo from "./images/Doggo.jpg";
+import HipsterLiving from "./images/HipsterLiving.jpg";
+import Mario from "./images/Mario.webp";
+import WindowsXp from "./images/WindowsXp.jpg";
+
+export const metadata = {
+  title: "Styling Theme",
+  description:
+    "Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.",
+};
+
+# Styling Theme
+
+Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.
+
+## Configuration
+
+In the left side bar, you find the `Configuration` page. On this page you find the `Look & Feel` section:
+
+<MdxImage
+  src={LookAndFeelSettings}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## **Styling Options**
+
+1. **Form Styling:** Customize the survey card using the following settings
+
+<MdxImage
+  src={FormSettings}
+  alt="Form styling options UI"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Brand Color**: Sets the primary color tone of the survey.
+- **Text Color**: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
+- **Input Color:** Alters the border color of input fields.
+- **Input Border Color**: This is the color of the border of the form input field.
+
+2. **Card Styling:** Adjust the look of the survey card
+
+<MdxImage
+  src={CardSettings}
+  alt="Card styling options UI"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Roundness**: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
+- **Card Background Color**: Sets the card's main background color.
+- **Card Border Color**: Changes the border color of the card
+- **Card Shadow Color**: Adds a shadow effect for depth
+- **Hide Progress Bar**: Optionally remove the progress bar to simplify the survey experience
+- **Add Highlight Border**: Adds a distinct border for emphasis.
+
+3. **Background Styling**: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)
+
+<Note>This is only available for Link Surveys</Note>
+
+<MdxImage
+  src={BackgroundSettings}
+  alt="Background styling options UI"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+- **Color**: Pick any color for the background
+- **Animation**: Add dynamic animations to enhance user experience..
+- **Upload**: Use a custom uploaded image for a personalized touch
+- Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
+- **Background Overlay**: Adjust the background's opacity
+
+## Add Brand Logo
+
+Customize your survey with your brand's logo.
+
+<Note>Brand logos are only visible on Link Survey pages.</Note>
+
+1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.
+
+<MdxImage
+  src={StepFour}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+2. Upload your logo
+
+<MdxImage
+  src={StepFive}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+3. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.
+
+<MdxImage
+  src={StepSix}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+4. Remember to save your changes!
+
+<MdxImage
+  src={StepSeven}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl "
+/>
+
+<Note>The logo settings apply across all Link Surveys pages.</Note>
+
+## Overwrite Styling Theme
+
+You can allow to overwrite the styling theme for individual surveys to create unique styles for each survey:
+
+<MdxImage
+  src={AllowOverwrite}
+  alt="Choose a link survey template"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+In the survey editor, a tab called `Styling` will appear. Here you can overwrite the default styling theme.
+
+---

apps/docs/lib/navigation.ts

@@ -37,7 +37,7 @@ export const navigation: Array<NavGroup> = [
           { title: "Recontact Options", href: "/app-surveys/recontact" },
           { title: "Multi Language Surveys", href: "/global/multi-language-surveys" }, // global
           { title: "User Metadata", href: "/global/metadata" }, // global
-          { title: "Custom Styling", href: "/global/custom-styling" }, // global
+          { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
           { title: "Conditional Logic", href: "/global/conditional-logic" }, // global
           { title: "Custom Start & End Conditions", href: "/global/custom-start-end-conditions" }, // global
           { title: "Recall Functionality", href: "/global/recall" }, // global
@@ -59,7 +59,7 @@ export const navigation: Array<NavGroup> = [
           { title: "Recontact Options", href: "/app-surveys/recontact" },
           { title: "Multi Language Surveys", href: "/global/multi-language-surveys" }, // global
           { title: "User Metadata", href: "/global/metadata" }, // global
-          { title: "Custom Styling", href: "/global/custom-styling" }, // global
+          { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
           { title: "Conditional Logic", href: "/global/conditional-logic" }, // global
           { title: "Custom Start & End Conditions", href: "/global/custom-start-end-conditions" }, // global
           { title: "Recall Functionality", href: "/global/recall" }, // global
@@ -84,7 +84,7 @@ export const navigation: Array<NavGroup> = [
           { title: "Embed Surveys Anywhere", href: "/link-surveys/embed-surveys" },
           { title: "Multi Language Surveys", href: "/global/multi-language-surveys" },
           { title: "User Metadata", href: "/global/metadata" },
-          { title: "Custom Styling", href: "/global/custom-styling" },
+          { title: "Custom Styling", href: "/global/overwrite-styling" }, // global
           { title: "Conditional Logic", href: "/global/conditional-logic" },
           { title: "Custom Start & End Conditions", href: "/global/custom-start-end-conditions" },
           { title: "Recall Functionality", href: "/global/recall" },
@@ -95,6 +95,13 @@ export const navigation: Array<NavGroup> = [
       },
     ],
   },
+  {
+    title: "Core Features",
+    links: [
+      { title: "Access Roles", href: "/global/access-roles" },
+      { title: "Styling Theme", href: "/global/styling-theme" },
+    ],
+  },
   {
     title: "Self-Hosting",
     links: [

apps/docs/next.config.mjs

@@ -111,6 +111,11 @@ const nextConfig = {
         destination: "/developer-docs/integrations/:path",
         permanent: true,
       },
+      {
+        source: "/global/custom-styling",
+        destination: "/global/overwrite-styling",
+        permanent: true,
+      },
     ];
   },
 };