Add descriptions for each samples on the Menu Page

src/pages/menu-page/MenuPage.css

@@ -1,11 +1,22 @@
 .menu-container {
-    position: flex;
-    flex-direction: column;
-    align-items: center;
-    color: rgb(1, 1, 1);
-  }
-
-  h1 {
-    margin-bottom: 20px; 
-    font-size: 36px;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: rgb(1, 1, 1);
+}
+
+h1 {
+  margin-bottom: 20px;
+  font-size: 36px;
+}
+
+.menu-item {
+  display: flex;
+  flex-direction: column; /* Stack items vertically */
+  align-items: center; /* Center align items */
+}
+
+.description {
+  text-align: center; /* Center-align the description text */
+  max-width: 1200px; 
+}

src/pages/menu-page/MenuPage.js

@@ -15,11 +15,26 @@ const Menu = () => {
   return (
     <div className="menu-container">
       <h1>Iotum Sample Apps</h1>
-      <MenuPageButton text="Tabbed Dashboard" path="/iotum-samples/tabbed-dashboard" />
-      <MenuPageButton text="Chat Room List" path="/iotum-samples/chat-room-list" />
-      <MenuPageButton text="Simple Meeting" path="/iotum-samples/simple-meeting" />
-      <MenuPageButton text="List Widget UI" path="/iotum-samples/list-widget-ui" />
-      <MenuPageButton text="Popout Chat" path="/iotum-samples/popout-chat" />
+      <div className='menu-item'>
+        <p className='description'>This sample shows how to integrate one or more of iotum’s features into your application using tabs. The user lands on the ‘parent’ application page, which would be a home or calling page, and this has three additional tabs for ‘Team Chat’, ‘Drive’, and ‘Contacts’. The iotum applications sit inside tabs to look and feel like part of the parent app. When a user clicks on ‘Team Chat’ for example, our widget renders.</p>
+        <MenuPageButton text="Tabbed Dashboard" path="/iotum-samples/tabbed-dashboard" />
+      </div>
+      <div className='menu-item'>
+        <p className='description'>In this sample, the ‘Team Chat’ navigation will show as a strip in a narrow sidebar. Users can then select an individual chat ‘room’ (channel or DM) that will open in a floating window inside their application. The size and location of each floating window can be customized and the sidebar can be hidden or shown as required. This is a very flexible way of integrating the chat widget into another application.</p>
+        <MenuPageButton text="Chat Room List" path="/iotum-samples/chat-room-list" />
+      </div>
+      <div className='menu-item'>
+        <p className='description'>This sample is an example of one of our most common integrations. This meeting widget can be used for almost any kind of application, from telehealth to a standard video call. The developer initiates a meeting for the user inside a container that can be controlled in a myriad of ways. This could be a floating window, in a tab, or a particular section of the page. The size, shape, and location are fully customizable.</p>
+        <MenuPageButton text="Simple Meeting" path="/iotum-samples/simple-meeting" />
+      </div>
+      <div className='menu-item'>
+        <p className='description'>In this sample, the parent application is in full control of how the user gets to the chat room. The user will perhaps see a list of contacts with a chat icon next to each name instead of seeing the ‘Team Chat’ sidebar UI. After clicking on that icon, a container will open with the chat conversation displayed. This container could be a floating window or could fill a large section of the window. The size, shape, and location are fully customizable. This is useful if you want to control how a user gets into a specific chat room with different people.</p>
+        <MenuPageButton text="List Widget UI" path="/iotum-samples/list-widget-ui" />
+      </div>
+      <div className='menu-item'>
+        <p className='description'>This sample shows two distinct options. The first is that a user can access ‘Team Chat’ via a button that could be located anywhere on the parent application and have the unread message count synced so that they know if there are new messages to read. The second is that this shows how the widget can pop out into another tab or window where that is the desired user experience. This app also shows how the parent app can display the number of unread messages and keep it up to date.  This unread message badge could be added to a button or tab in the parent app.</p>
+        <MenuPageButton text="Popout Chat" path="/iotum-samples/popout-chat" />
+      </div>
       <TokenButton position="left"/>
     </div>
   );