feat: add user docs (#392)

* feat: add user docs

* ch: change slug

src/components/Docs/SideBarDocs.tsx

@@ -7,6 +7,7 @@ function SideBarDocs() {
     return (
         <section className = "py-8 px-5 ">
             <ul className ="p-2 flex flex-col gap-4" >
+              <NavLink className={(navData) => {if (navData.isActive) return 'text-primary'; return ''}} to='/docs/getting-started'>Getting started (new users)</NavLink>
                 <NavLink
                  className={(navData) => {
                     if (navData.isActive) return 'text-primary';

src/components/Docs/users.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import DocsMain from './DocsMain'
+
+const UsersDocs = () => {
+    return (
+        <div>
+        <DocsMain
+            content={
+            <div className="flex items-start box-border">
+                <div className="w-full">
+                <div className=" w-full sm:px-10 mb-10 text-gray-600  dark:text-slate-300 text-lg ml-0 pt-4">
+                    <h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
+                    Getting started
+                    </h2>
+                    <div className="mt-5 w-[100%] sm:w-full mb-4">
+                        Devpulse is a semi-open platform i.e. using it, requires a certain level of approval from the owners/managers. If you browse the homepage, you might wonder why there is no signup button, this is because to sign up you need an invitation.
+                        <h3 className="m-2 mb-4 text-2xl font-bold">
+                        Terminology to be familiar with:</h3>
+                        <ul className=" list-disc ml-12">
+
+                            <li><b>Organizations</b>: each Devpulse user belongs to an organization. The default organization is Andela. The  admin of a given organisation has the highest privilege; they are the one in charge of managing the rest of the users and different administrative tasks</li>
+
+                            <li><b>Programs</b>: each organization should have a program that it is running.</li>
+                            <li><b>Managers:</b> each program should have managers with different access levels. (coordinators, technical team leads, managers)</li>
+                            <li><b>Trainees:</b> an ordinary user of the app will fall under the role of a trainee. As a trainee, you belong to a team, which in turn belongs to a cohort, which in turn belongs to a program</li>
+                        </ul>
+
+                        <h3 className="m-2 mb-4 text-2xl font-bold">Signing up as a user</h3>
+                        <p>To sign up, <b><u>your org admin must send you an invite</u></b>. The invitation email will contain the details of how to sign up</p>
+                        <h3 className="m-2 mb-4 text-2xl font-bold">Signing in as a user</h3>
+                        <p>To sign in, go to the signin page, provide the correct name of your organization, on the next screen enter username and password.</p>
+                    </div>
+                </div>
+                </div>
+            </div>
+            }
+        />
+        </div>
+    )
+}
+export default UsersDocs

src/containers/Routes.tsx

@@ -32,6 +32,7 @@ const SignupOrgDocs = React.lazy(
 const SigninOrgDocs = React.lazy(
   () => import('../components/Docs/SigninOrgDocs'),
 );
+const UsersDocs = React.lazy( () => import ('../components/Docs/users'),)
 /* istanbul ignore next */
 import Noredirect from '../pages/Noredirect';
 import ProtectedRoutes from '../ProtectedRoute';
@@ -90,6 +91,7 @@ function MainRoutes() {
             />
             <Route path="/docs/org-signup" element={<SignupOrgDocs />} />
             <Route path="/docs/org-signin" element={<SigninOrgDocs />} />
+            <Route path='/docs/users' element={< UsersDocs />} />
             <Route path="/noredirect" element={<Noredirect />} />
           </Route>
           <Route path="*" element={<Error />} />