Content for the set up the inbox component page

content/docs/platform/concepts/meta.json

@@ -0,0 +1,5 @@
+{
+  "title": "Concepts",
+  "icon": "Layers",
+  "pages": ["notification-event", "workflows", "subscribers", "topics", "integrations"]
+}

content/docs/platform/concepts/notifications.mdx → content/docs/platform/concepts/notification-event.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Notifications'
+title: 'Notification event'
 description: 'Learn about the Novu notifications lifecycle and the key entities that make up a notification.'
 icon: 'BellRing'
 ---

content/docs/platform/inbox/advanced-customization/custom-bell.mdx

@@ -0,0 +1,10 @@
+---
+title: 'Custom Bell'
+description: "Learn how to integrate Novu <Inbox />, a pre-built notification center component for real-time in-app notifications in your application."
+icon: 'LayoutDashboard'
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { MessageSquare, Palette, Zap } from 'lucide-react';
+
+The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.

content/docs/platform/inbox/advanced-customization/custom-notification.mdx

@@ -0,0 +1,10 @@
+---
+title: 'Custom Notification'
+description: "Learn how to integrate Novu <Inbox />, a pre-built notification center component for real-time in-app notifications in your application."
+icon: 'LayoutDashboard'
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { MessageSquare, Palette, Zap } from 'lucide-react';
+
+The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.

content/docs/platform/inbox/advanced-customization/meta.json

@@ -0,0 +1,6 @@
+{
+  "title": "Advanced Customization",
+  "icon": "Layers",
+  "pages": ["custom-notification", "custom-bell", "render-html-content"],
+  "description": "Learn how to customize your inbox with advanced features like custom notifications, templates, and actions."
+}

content/docs/platform/inbox/advanced-customization/render-html-content.mdx

@@ -0,0 +1,12 @@
+---
+pageTitle: 'Render HTML Content'
+title: 'Render HTML Content'
+description: 'Learn how to style the pre built Inbox component'
+icon: 'Palette'
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.

content/docs/platform/inbox/configuration/data-object.mdx

@@ -0,0 +1,12 @@
+---
+pageTitle: 'Data Object'
+title: 'Data Object'
+description: 'Learn how to style the pre built Inbox component'
+icon: 'Palette'
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.

content/docs/platform/inbox/configuration/meta.json

@@ -0,0 +1,6 @@
+{
+  "title": "Confiquration",
+  "icon": "Layers",
+  "pages": ["styling", "tabs", "preferences", "data-object", "snooze", "localization"],
+  "description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, snooze functionality, and localization options."
+}

content/docs/platform/inbox/configuration/snooze.mdx

@@ -0,0 +1,12 @@
+---
+pageTitle: 'Snooze'
+title: 'Snooze'
+description: 'Learn how to style the pre built Inbox component'
+icon: 'Palette'
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Customization Hierarchy
+
+The Inbox component is built to allow for multiple layers of styling, which allows the specificity required to style the Inbox to meet the requirements of your use case.

content/docs/platform/inbox/react/headless.mdx → content/docs/platform/inbox/headless.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Headless'
+title: 'Use Inbox in Headless Mode'
 pageTitle: 'Headless notification Inbox for JavaScript applications'
 description: 'Learn how to use the Novu Inbox API to build your own inbox'
 icon: 'Braces'

content/docs/platform/inbox/meta.json

@@ -1,3 +1,12 @@
 {
-  "pages": ["overview", "...react"]
+  "pages": [
+    "setup-inbox",
+    "navigation-and-events",
+    "configuration",
+    "advanced-customization",
+    "prepare-for-production",
+    "tenants",
+    "headless",
+    "migration-guide"
+  ]
 }

content/docs/platform/inbox/react/migration-guide.mdx → content/docs/platform/inbox/migration-guide.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Migration Guide'
+title: 'Migrate to the New Inbox'
 description: 'This guide outlines the key differences between the `@novu/notification-center` package and the new `@novu/react` package. Follow the steps below to migrate your application to the latest version.'
 icon: 'RefreshCcwDot'
 ---

content/docs/platform/inbox/navigation-and-events.mdx

@@ -0,0 +1,38 @@
+---
+title: 'Navigation and Events'
+description: "Learn how to integrate Novu <Inbox />, a pre-built notification center component for real-time in-app notifications in your application."
+icon: 'LayoutDashboard'
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card';
+import { MessageSquare, Palette, Zap } from 'lucide-react';
+
+The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.
+
+Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It's in React today, and soon will be available in other popular frameworks including Vue, React Native, and full headless.
+
+<img src="/images/inbox/[email protected]" alt="Fully functional and customizable React Inbox component" />
+
+## Getting Started
+
+<Cards>
+  <Card
+    title="Next.js"
+    href="/platform/quickstart/nextjs"
+    description="Get started with our pre-built UI component in Next.js"
+  />
+  <Card
+    title="React"
+    href="/platform/quickstart/react"
+    description="Get started with our pre-built UI component in React"
+  />
+  <Card
+    title="Remix"
+    href="/platform/quickstart/remix"
+    description="Get started with our pre-built UI component in Remix"
+  />
+</Cards>
+
+## Design Files
+
+To aide your design process, we provide a free [Figma file](https://www.figma.com/community/file/1425407348374863860) that contains all of the design assets. Make a copy of the file into your own account to get started with customizing your graphical Inbox elements.

content/docs/platform/inbox/react/production.mdx → content/docs/platform/inbox/prepare-for-production.mdx

@@ -1,6 +1,6 @@
 ---
-pageTitle: 'Production Setup for React'
-title: 'Going to production'
+pageTitle: 'Prepare for Production'
+title: 'Prepare for Production'
 description: 'Learn how to prepare your React notification inbox for production deployment including HMAC encryption and security best practices.'
 icon: 'ShieldCheck'
 ---

content/docs/platform/inbox/setup-inbox.mdx

@@ -0,0 +1,107 @@
+---
+title: 'Set up the Inbox'
+description: 'Learn how to integrate the Novu Inbox component into your application to display real-time notifications for your users.'
+icon: 'Bell'
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import Link from 'next/link';
+
+You can add the Novu Inbox component to your application with few lines of code minimal setup.
+
+## Try Inbox in Keyless Mode
+
+Keyless mode lets you test the look and features of the Inbox component instantly in your application, no setup required.
+
+<Tabs items = {['Next.js', 'React']}>
+  <Tab value="Next.js">
+    ```tsx
+    import { Inbox } from '@novu/nextjs';
+
+    export function Novu() {
+      return (
+        <Inbox />
+      );
+    }
+    ```
+  </Tab>
+  <Tab value="React">
+    ```tsx
+    import { Inbox } from '@novu/react';
+
+    export function Novu() {
+      return (
+        <Inbox />
+      );
+    }
+    ```
+  </Tab>
+</Tabs>
+
+<div style={{ display: 'flex', justifyContent: 'center' }}>
+  <img src="/images/inbox/Inbox.png" alt="Test" width="400" height="400" />
+</div>
+
+## Use Inbox with real subscribers
+
+To display real-time notifications for your users, connect the Inbox component to your Novu environment using your `applicationIdentifier` and a `subscriberId`. You can create or manage subscribers from the <a href="https://dashboard.novu.co/auth/sign-up" target="_blank" rel="noopener noreferrer" class="nx-text-primary-600 nx-underline">Novu Dashboard</a>.
+
+### US Region (Default)
+
+<Tabs items = {['Next.js', 'React']}>
+  <Tab value="Next.js">
+    ```tsx
+    import { Inbox } from '@novu/nextjs';
+
+    export function Novu() {
+      return (
+        <Inbox
+          applicationIdentifier="APPLICATION_IDENTIFIER"
+          subscriber="SUBSCRIBER_ID"
+        />
+      );
+    }
+    ```
+  </Tab>
+  <Tab value="React">
+    ```tsx
+    import { Inbox } from '@novu/react';
+
+    export function Novu() {
+      return (
+        <Inbox
+          applicationIdentifier="APPLICATION_IDENTIFIER"
+          subscriber="SUBSCRIBER_ID"
+        />
+      );
+    }
+    ```
+  </Tab>
+</Tabs>
+
+<div className="text-sm text-gray-500 text-center mt-2">
+  <Link href="https://dashboard.novu.co/auth/sign-up">Sign in</Link> to get your own API keys
+</div>
+
+### EU Region
+
+If your Novu account is in the EU region, include the `backendUrl` and `socketUrl` props to connect to EU-specific API endpoints:
+
+<Tabs items = {['EU']}>
+<Tab value= "EU">
+```tsx
+import { Inbox } from '@novu/react';
+
+export function Novu() {
+  return (
+    <Inbox
+      subscriber="SUBSCRIBER_ID"
+      applicationIdentifier="APPLICATION_IDENTIFIER"
+      backendUrl="https://eu.api.novu.co"
+      socketUrl="https://eu.ws.novu.co"
+    />
+  );
+}
+```
+</Tab>
+</Tabs>

content/docs/platform/meta.json

@@ -6,19 +6,9 @@
     "overview",
     "what-is-novu",
     "how-novu-works",
+    "concepts",
     "quickstart",
-    "---Concepts---",
-    "concepts/notifications",
-    "concepts/workflows",
-    "concepts/subscribers",
-    "concepts/topics",
-    "concepts/integrations",
-    "concepts/environments",
-    "concepts/trigger",
-    "concepts/preferences",
-    "concepts/tenants",
-    "concepts/webhooks",
-    "---<Inbox />---",
+    "---Integrate Inbox UI ---",
     "...inbox",
     "---Building Workflows---",
     "workflow/overview",