chore: added InviteInfo component in home tab

platform/firecamp-platform/src/components/tabs/home/Home.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react';
 import cx from 'classnames';
 import shallow from 'zustand/shallow';
-import { Container, EditorApi } from '@firecamp/ui';
+import { Container, EditorApi, Row, Column } from '@firecamp/ui';
 import { ERequestTypes, EEditorTheme } from '@firecamp/types';
 import {
   FcIconGetSquare,
@@ -28,13 +28,15 @@ const Home: FC<any> = () => {
   };
 
   return (
+    <Row flex={1} overflow="auto" className="h-full">
+      <Column>
         <Container className="px-14 py-20" overflow="visible">
           <Container.Header>
             <div className="text-2xl mb-8 font-normal">
               Welcome To Firecamp!
               <span className="block text-base font-light text-appForegroundInActive">
-            This campsite is designed for you, giving you the power to do what
-            you love with APIs.
+                This campsite is designed for you, giving you the power to do
+                what you love with APIs.
               </span>
             </div>
           </Container.Header>
@@ -71,6 +73,11 @@ const Home: FC<any> = () => {
             <Theme />
           </Container.Body>
         </Container>
+      </Column>
+      <Column className="p-8 px-8">
+        <InviteInfo />
+      </Column>
+    </Row>
   );
 };
 
@@ -225,3 +232,37 @@ interface IRequestItem {
   /** Open request tab */
   openRequest: () => void;
 }
+
+const InviteInfo = ({ organisation = true }) => {
+  return (
+    <div className="flex flex-col border border-appBorder shadow-md p-4">
+      <p className={'text-base font-semibold mb-2 mt-1'}>
+        {organisation
+          ? "You're in the `My Workspace` workspace of the `Firecamp` organization."
+          : `You're right now in your personal workspace`}
+      </p>
+
+      {organisation ? (
+        <p className="text-base text-appForegroundInActive mb-2">
+          You can invite your team/colleagues to this workspace to work
+          collaboratively.
+        </p>
+      ) : (
+        <p className="text-base text-appForegroundInActive mb-2">
+          The personal workspace is not meant to work collaboratively, for now,
+          you can create an organization and invite your team/colleagues to work
+          collaboratively.
+        </p>
+      )}
+
+      <a
+        className="text-base font-semibold inline-block !text-info cursor-pointer mb-2"
+        href=""
+      >
+        {organisation
+          ? 'create an organization'
+          : 'invite your team/colleagues'}
+      </a>
+    </div>
+  );
+};