Improve Dashboard Site Homepage

__tests__/home/home.test.js

@@ -348,7 +348,9 @@ describe('Home Page', () => {
       discordUsersButton,
     );
     const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
-    expect(trimmedDiscordUsersButtonText).toBe('Discord Users');
+    expect(trimmedDiscordUsersButtonText).toBe(
+      'Discord Users\nManage Discord user roles and activities.',
+    );
   });
 
   it('should display the User Management anchor button', async () => {
@@ -529,7 +531,9 @@ describe('Home Page', () => {
       applicationButton,
     );
     const trimmedApplicationButtonText = applicationButtonText.trim();
-    expect(trimmedApplicationButtonText).toBe('Applications');
+    expect(trimmedApplicationButtonText).toBe(
+      'Applications\nManage and review submitted applications.',
+    );
   });
 
   it('should close hamburger menu on clicking anywhere on the screen except the menu', async () => {

index.html

@@ -84,15 +84,30 @@
         id="create-goal"
       >
         Create Goals
+        <div class="description">
+          Set and track goals to align efforts and measure progress.
+        </div>
+      </a>
+
+      <a class="action-button" href="/task/index.html">
+        Create Tasks
+        <div class="description">
+          Define the tasks, create new tasks and track the progress.
+        </div>
+      </a>
+      <a class="action-button" href="/profile/index.html">
+        Profile
+        <div class="description">
+          View and edit your personal profile information.
+        </div>
       </a>
-      <a class="action-button" href="/task/index.html"> Create Tasks </a>
-      <a class="action-button" href="/profile/index.html"> Profile </a>
       <a
         id="discord-user-link"
         class="action-button"
         href="/users/discord/index.html"
       >
         Discord Users
+        <div class="description">Manage Discord user roles and activities.</div>
       </a>
       <a
         id="user-management-link"
@@ -106,6 +121,9 @@
         class="action-button element-display-remove"
         href="/requests/index.html"
         >Requests
+        <div class="description">
+          Manage requests for various resources and services.
+        </div>
       </a>
       <a
         id="extension-requests-link"
@@ -123,26 +141,41 @@
       </a>
       <a href="/online-members/online-members.html" class="action-button">
         Online Members
+        <div class="description">
+          View the list of currently online members.
+        </div>
+      </a>
+      <a class="action-button" href="/groups/index.html">
+        Discord Groups
+        <div class="description">Manage Discord group memberships.</div>
+      </a>
+      <a class="action-button" href="/standup/index.html">
+        Standup Updates
+        <div class="description">Post and view daily standup updates.</div>
       </a>
-      <a class="action-button" href="/groups/index.html"> Discord Groups </a>
-      <a class="action-button" href="/standup/index.html"> Standup Updates</a>
       <a class="action-button" href="/identity-service-logs/index.html"
-        >Identity Service Logs</a
-      >
+        >Identity Service Logs
+        <div class="description">Review logs related to identity services.</div>
+      </a>
       <a
         class="action-button element-display-remove"
         href="/feed/index.html"
         id="create-activity-feed"
       >
-        Activity Feed</a
+        Activity Feed
+        <div class="description">
+          View updates on activities and project progress.
+        </div></a
       >
       <a id="application-button" href="/applications" class="action-button">
         Applications
+        <div class="description">Manage and review submitted applications.</div>
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
         <button id="repo-sync-button" class="action-button">
           <span class="spinner"></span>
           Sync Repo
+          <div class="description">Sync repository to update the changes</div>
         </button>
         <div class="status" id="sync-repo-status-update"></div>
         <div id="toast" class="hidden">

style.css

@@ -30,6 +30,7 @@ body {
 }
 
 .buttonSection {
+  margin-top: 10px;
   height: 80vh;
   display: flex;
   justify-content: center;
@@ -99,8 +100,9 @@ footer {
 }
 
 .action-button {
+  width: 350px;
   color: var(--black-color);
-  font-weight: 500;
+  font-weight: 1000;
   font-size: larger;
   background-color: var(--white-color);
   border: 2px solid var(--black-color);
@@ -119,6 +121,12 @@ footer {
   border-color: var(--blue-color);
 }
 
+.description {
+  margin-top: 5px;
+  font-weight: 500;
+  font-size: medium;
+}
+
 #sync-buttons.element-display-remove {
   display: none;
 }
@@ -236,11 +244,25 @@ footer {
   display: none !important;
 }
 
-@media only screen and (max-width: 600px) {
+/* @media only screen and (max-width: 600px) {
+  .buttonSection {
+    flex-direction: column;
+  }
+  .action-button {
+    text-align: center;
+  }
+} */
+
+@media only screen and (max-width: 1105px) {
   .buttonSection {
     flex-direction: column;
+    height: auto;
+    padding: 15px;
   }
   .action-button {
     text-align: center;
+    width: 100%;
+    padding: 10px;
+    font-size: medium;
   }
 }