Add product switcher graphic

organize/navigation.mdx

@@ -246,9 +246,9 @@
 }
 ```
 
 For anchors that direct to external links only, use the `global` keyword. Anchors in a `global` object must have an `href` field and cannot point to a relative path. 
 
 Global anchors are particularly useful for linking to resources that are not part of your documentation, but should be readily accessible to your users like a blog or support portal
 
 ```json
 {
@@ -274,7 +274,7 @@
 
 ## Dropdowns
 
 Dropdowns are contained in an expandable menu at the top of your sidebar navigation. Each item in a dropdown directs to a section of your documentation.
 
 <img
   className="block dark:hidden pointer-events-none"
@@ -321,6 +321,16 @@
 
 ## Products
 
+<img
+  className="block dark:hidden pointer-events-none"
+  src="/images/navigation/product-switcher-light.png"
+/>
+
+<img
+  className="hidden dark:block pointer-events-none"
+  src="/images/navigation/product-switcher-dark.png"
+/>
+
 Products create a dedicated navigation division for organizing product-specific documentation. Use products to separate different offerings, services, or major feature sets within your documentation.
 
 In the `navigation` object, `products` is an array where each entry is an object that requires a `product` field and can contain other navigation fields such as groups, pages, icons, or links to external pages.
@@ -372,7 +382,7 @@
 
 Integrate OpenAPI specifications directly into your navigation structure to automatically generate API documentation. Create dedicated API sections or place endpoint pages within other navigation components.
 
 Set a default OpenAPI specification at any level of your navigation hierarchy. Child elements will inherit this specification unless they define their own specification.
 
 ```json
 {
@@ -462,7 +472,7 @@
 
 In the `navigation` object, `languages` is an array where each entry is an object that requires a `language` field and can contain any other navigation fields.
 
 We currently support the following languages for localization:
 
 <CardGroup cols={2}>
   <Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal />
@@ -512,7 +522,7 @@
 
 ## Nesting
 
 You can use any combination of anchors, tabs, dropdowns, and products. The components can be nested within each other interchangeably to create your desired navigation structure.
 
 <CodeGroup>
 
@@ -634,7 +644,7 @@
 
 ## Breadcrumbs
 
 Breadcrumbs display the full navigation path at the top of pages. Some themes have breadcrumbs enabled by default and others do not. You can control whether breadcrumbs are enabled for your site using the `styling` property in your `docs.json`.
 
 <CodeGroup>
 
@@ -658,10 +668,10 @@
 
 ### Enable auto-navigation for groups
 
 When a user expands a navigation group, some themes will automatically navigate to the first page in the group. You can override a theme's default behavior using the `drilldown` option.
 
 - Set to `true` to force automatic navigation to the first page when a navigation group is selected.
 - Set to `false` to prevent navigation and only expand or collapse the group when it is selected.
 - Leave unset to use the theme's default behavior.
 
 <CodeGroup>