Update whitelabel docs

Author: yashovardhan

docs/features/whitelabel.mdx

@@ -6,17 +6,27 @@ description: "Whitelabeling Web3Auth | Documentation - Web3Auth"
 image: "images/docs-meta-cards/documentation-card.png"
 ---
 
+import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
+
 Whitelabeling is a pivotal feature of Web3Auth that empowers developers to offer a seamless and
 cohesive user experience across their applications. Through customization of the user interface,
 branding, and translations, Web3Auth's whitelabeling capabilities ensure that every aspect of the
 authentication flow aligns with your application's identity.
 
 #### Steps for Customization
 
-1. **Choose Your SDK:** Decide between Plug and Play or Core Kit SDKs based on your needs for
-   customization and control.
-2. **Define Your Branding:** Customize the elements of the SDKs, such as modals, screens, and logos,
-   to align with your branding guidelines.
+1. **Choose Your SDK:** Decide between Plug and Play, SFA & MPC Core Kit SDKs based on your needs
+   for customization and control.
+
+   :::info
+
+   With Single Factor Auth & MPC Core Kit SDKs, Web3Auth is invisible to the user, and you have the
+   complete control over the user interface, branding, and translations.
+
+   :::
+
+2. **Define Your Branding:** While using Plug and Play SDKs, you can customize the elements of the
+   SDKs, such as modals, screens, and logos, to align with your branding guidelines.
 3. **Apply Translations:** Tailor the language and translations within the authentication flow to
    cater to your target audience.
 
@@ -34,6 +44,13 @@ level of customization to ensure the user interface, branding, and translations
 application's needs. These SDKs support detailed customization, offering a seamless and cohesive
 user experience.
 
+:::info
+
+Head over to the [Web3Auth PnP SDK Reference](/sdk/pnp/web/modal/whitelabel) to whitelabel your PnP
+integration.
+
+:::
+
 - **Seamless Integration:** Effortlessly embed Web3Auth's authentication modal within your
   application, ensuring a unified user experience that aligns with your brand identity. Customize
   every aspect, from the modal appearance to the user flow, including MFA screens, to maintain
@@ -48,20 +65,19 @@ user experience.
   aesthetics, reinforcing your brand with every user interaction. Web3Auth allows for detailed
   branding customization, ensuring the wallet experience feels like an integral part of your app.
 
-### Customization Examples
-
-- **Login Modal Customization:** Adapt the login modal's design to reflect your application's
-  branding, from colors and logos to fonts and button styles.
-
-  ![Web3Auth Plug and Play Login Modal](/images/whitelabel/modal/whitelable-login-modal.gif)
+## Language Customization and Localization (l10n)
 
-- **User Flow and MFA Screen Transition:** Provide a consistent and engaging experience throughout
-  the user authentication process, including the transition between different authentication stages
-  and support for both light and dark modes.
+A significant aspect of Web3Auth's whitelabeling capabilities is its support for multiple languages,
+enhancing accessibility and user engagement across diverse demographics.
 
-  ![Web3Auth - User Flow Screens](/images/whitelabel/user-flow-screens.gif)
+- **Multiple Languages Support:** Web3Auth supports localization for a variety of languages
+  including English (en), Spanish (es), German (de), Chinese (zh), Japanese (ja), Korean (ko),
+  French (fr), Portuguese (pt), and Dutch (nl).
+- **Open Source Contributions:** The Web3Auth locales are maintained in an open-source repository,
+  inviting contributions from the community to add or refine language support.
+  [Contribute to Web3Auth Locales](https://github.com/Web3Auth/web3auth-locales).
 
-### NEW: Whitelabeling via the Dashboard:
+## NEW: Whitelabeling via the Dashboard:
 
 - From version `8.5.0`, **Web3Auth's Plug and Play SDKs** and **WalletServicesPlugin** offer
   whitelabeling capabilities via the **Dashboard**, enabling developers to customize the
@@ -87,35 +103,22 @@ Access to Whitelabeling Dashboard is gated. The minimum
 plan, you would see a limited version of the dashboard, with disabled whitelabeling options for
 mainnet projects. For `sapphire_devnet` projects, you can access all the whitelabeling options,
 regardless of your pricing plan.
+
 ![Base Whitelabeling Dashboard](/images/whitelabel/base-whitelabeling-dashboard.png)
 
 :::
 
-## Core Kit SDKs Whitelabeling
-
-- **Complete Control:** The Core Kit SDKs go a step further by providing total invisibility of
-  Web3Auth's underlying mechanisms. Developers have the freedom to design their authentication pages
-  and flows, offering unparalleled customization.
-- **No Redirection:** Distinguishing itself from the Plug and Play model, the Core Kit eliminates
-  the need for user redirection to `auth.web3auth.io` for authentication, ensuring all processes are
-  kept within your application's ecosystem.
+## Customization Examples
 
-## Wallet Services Whitelabeling
+- **Login Modal Customization:** Adapt the login modal's design to reflect your application's
+  branding, from colors and logos to fonts and button styles.
 
-- **Comprehensive Customization:** For Wallet Services, whitelabeling extends to modifying the
-  entire user interface, including logos, color schemes, and visibility of specific sections,
-  ensuring a branded experience throughout.
-- **Application Identity:** Tailor the appearance of wallet service components, such as chain logos
-  and the dApp logo, to reinforce your application's brand identity across all user interactions.
+  ![Web3Auth Plug and Play Login Modal](/images/whitelabel/modal/whitelable-login-modal.gif)
 
-## Language Customization and Localization (l10n)
+- **User Flow and MFA Screen Transition:** Provide a consistent and engaging experience throughout
+  the user authentication process, including the transition between different authentication stages
+  and support for both light and dark modes.
 
-A significant aspect of Web3Auth's whitelabeling capabilities is its support for multiple languages,
-enhancing accessibility and user engagement across diverse demographics.
+  ![Web3Auth - User Flow Screens](/images/whitelabel/user-flow-screens.gif)
 
-- **Multiple Languages Support:** Web3Auth supports localization for a variety of languages
-  including English (en), Spanish (es), German (de), Chinese (zh), Japanese (ja), Korean (ko),
-  French (fr), Portuguese (pt), and Dutch (nl).
-- **Open Source Contributions:** The Web3Auth locales are maintained in an open-source repository,
-  inviting contributions from the community to add or refine language support.
-  [Contribute to Web3Auth Locales](https://github.com/Web3Auth/web3auth-locales).
+<WhiteLabelShowcase />