Merge pull request #32 from iotum/shirleyfyx/include-description

Include Description

README.md

@@ -1,7 +1,24 @@
-# Iotum Sample Apps
+# iotum Sample Apps
 
 ## Overview
-Explore the capabilities of Iotum SDK products through this sample application. Access the app here: [Iotum Sample Apps](https://iotum.github.io/iotum-samples/).
+Explore the capabilities of iotum SDK products through this sample application. Access the app here: [iotum Sample Apps](https://iotum.github.io/iotum-samples/). 
+
+<h3>Below is a brief description of each sample:</h3>
+<p><strong>Tabbed dashboard</strong>: <a href="https://github.com/iotum/iotum-samples/tree/main/src/pages/tabbed-dashboard">View Sample</a><br>
+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>
+
+<p><strong>Chat room list</strong>: <a href="https://github.com/iotum/iotum-samples/tree/main/src/pages/chat-room-list">View Sample</a><br>
+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>
+
+<p><strong>Simple Meeting</strong>: <a href="https://github.com/iotum/iotum-samples/tree/main/src/pages/simple-meeting">View Sample</a><br>
+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>
+
+<p><strong>List widget</strong>: <a href="https://github.com/iotum/iotum-samples/tree/main/src/pages/list-widget-ui">View Sample</a><br>
+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>
+
+<p><strong>Popout chat</strong>: <a href="https://github.com/iotum/iotum-samples/tree/main/src/pages/popout-chat">View Sample</a><br>
+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.<br>
+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>
 
 ## Getting Started with the Application
 
@@ -17,7 +34,7 @@ Explore the capabilities of Iotum SDK products through this sample application.
    - For the Simple Meeting Sample App, an access code is required. The access code is the conference number found in the `Meet` dashboard.  
 
 4. **Using the Application**:
-   - Once logged in, you're ready to explore the various features of the Iotum product suite through the Menu page.
+   - Once logged in, you're ready to explore the various features of the iotum product suite through the Menu page.
 
 > **Note:** For guidance on retrieving the SSO Token and Host ID via Postman, refer to the project's [Postman Documentation](https://github.com/iotum/iotum-samples/wiki/Get-SSO-Token-and-Host-ID-from-Postman).
 

src/components/CredentialsForm.js

@@ -15,7 +15,7 @@ const CredentialsForm = ({ onSubmit }) => {
 
   return (
     <div className="form-wrapper">
-      <h1 className="title">Iotum Sample Apps</h1>
+      <h1 className="title">iotum Sample Apps</h1>
       <form onSubmit={handleSubmit}>
         <label>
           Domain:

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

@@ -14,12 +14,27 @@ 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" />
+      <h1>iotum Sample Apps</h1>
+      <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>
   );