Made minor update to the quickstart guide for React and Next.js

content/docs/platform/quickstart/nextjs.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Next.js'
 pageTitle: 'Novu Next.js Quickstart'
-description: 'Create an account and learn how to start using Novu notification Inbox in your Next.js application.'
+description: 'Learn how to integrate the Novu Inbox component into your Next.js application using the App Router.'
 ---
 
 import { Accordion, Accordions } from '@/components/accordion';

content/docs/platform/quickstart/react.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'React'
 pageTitle: 'Novu React Quickstart Guide'
-description: 'Create an account and learn how to start using Novu Inbox Notification in your application.'
+description: 'Learn how to integrate the Novu Inbox component into a React application and add routing with React Router.'
 ---
 
 import { Accordion, Accordions } from '@/components/accordion';
@@ -48,17 +48,17 @@ This guide walks you through integrating Novu’s Inbox into your React applicat
   ### Install `@novu/react`
   The [Novu React SDK](/platform/sdks/react) gives you access to the Inbox component.
 
-  Run the following command to install the SDK and  React Router Dom:
+  Run the following command to install the SDK:
 
     ```package-install
-    npm install @novu/react react-router-dom
+    npm install @novu/react
     ```
 
   </Step>
 
   <Step>
   ### Create the Inbox component
-  In the `src` directory, create a `components/notification-center.tsx` file and use the <Method href="/platform/inbox/react/components/inbox">{`<Inbox />`}</Method> component, passing :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
+  In the `src` directory, create a `components/novu-inbox.tsx` file and use the <Method href="/platform/inbox/react/components/inbox">{`<Inbox />`}</Method> component, passing :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
 
   <CodeTemplateBlock templateId="react-inbox" />
 
@@ -73,24 +73,28 @@ This guide walks you through integrating Novu’s Inbox into your React applicat
   </Step>
 
   <Step>
-  ### Set up React Router and add the Notification Center
-    Now you can set up React Router and add the `NotificationCenter` component to your app layout:
+  ### Set up React Router and import the Inbox component
+    Now you can set up React Router and add the `NovuInbox` component to your app layout:
 
     ```tsx title="src/App.tsx"
     import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-    import { NotificationCenter } from './components/notification-center';
+    import { NovuInbox } from './components/novu-inbox';
 
     function Layout({ children }: { children: React.ReactNode }) {
       return (
         <div>
           <nav>
-            <NotificationCenter />
+            <NovuInbox />
           </nav>
           {children}
         </div>
       );
     }
 
+    function Home() {
+      return <div>Welcome to the Home page!</div>;
+    }
+
     function App() {
       return (
         <Router>

src/components/quickstart/inbox-code.tsx

@@ -42,7 +42,7 @@ type CodeTemplate = {
 const CODE_TEMPLATES: CodeTemplate[] = [
   {
     id: 'nextjs-inbox',
-    title: 'components/inbox.tsx',
+    title: 'app/layout.tsx',
     language: 'tsx',
     code: `import { Inbox } from '@novu/nextjs';
 import './globals.css';
@@ -124,13 +124,12 @@ export class App implements AfterViewInit {
   },
   {
     id: 'react-inbox',
-    title: 'src/components/notification-center.tsx',
+    title: 'src/components/novu-inbox.tsx',
     language: 'tsx',
-    code: `import React from 'react';
-import { Inbox } from '@novu/react';
+    code: `import { Inbox } from '@novu/react';
 import { useNavigate } from 'react-router';
 
-export function NotificationCenter() {
+export function NovuInbox() {
   const navigate = useNavigate();
 
   return (