Improved Dashboard Site Homepage

__tests__/home/home.test.js

@@ -348,7 +348,10 @@ describe('Home Page', () => {
       discordUsersButton,
     );
     const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
-    expect(trimmedDiscordUsersButtonText).toBe('Discord Users');
+
+    expect(trimmedDiscordUsersButtonText).toBe(
+      'Discord Users\n\nManage Discord user roles and activities.',
+    );
   });
 
   it('should display the User Management anchor button', async () => {
@@ -364,7 +367,9 @@ describe('Home Page', () => {
       userManagementButton,
     );
     const trimmedUserManagementButtonText = userManagementButtonText.trim();
-    expect(trimmedUserManagementButtonText).toBe('User Management');
+    expect(trimmedUserManagementButtonText).toBe(
+      'User Management\n\nView requests for various resources and services.',
+    );
   });
 
   it('should display the Sync Repo button', async () => {
@@ -529,7 +534,10 @@ describe('Home Page', () => {
       applicationButton,
     );
     const trimmedApplicationButtonText = applicationButtonText.trim();
-    expect(trimmedApplicationButtonText).toBe('Applications');
+
+    expect(trimmedApplicationButtonText).toBe(
+      'Applications\n\nManage and review submitted applications.',
+    );
   });
 
   it('should close hamburger menu on clicking anywhere on the screen except the menu', async () => {

index.html

@@ -78,71 +78,111 @@
     </section>
 
     <section class="buttonSection">
-      <a
-        class="action-button element-display-remove"
-        href="/goal/index.html"
-        id="create-goal"
-      >
-        Create Goals
+      <a class="card" href="/goal/index.html" id="create-goal">
+        <h5 class="card__title">Create Goals</h5>
+        <p class="card__description">
+          Set and track goals to align efforts and measure progress.
+        </p>
       </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
+
+      <a class="card" href="/task/index.html">
+        <h5 class="card__title">Create Tasks</h5>
+        <p class="card__description">
+          Define the tasks, create new tasks and track the progress.
+        </p>
+      </a>
+      <a class="card" href="/profile/index.html">
+        <h5 class="card__title">Profile</h5>
+        <p class="card__description">
+          View and edit your personal profile information.
+        </p>
+      </a>
+      <a id="discord-user-link" class="card" href="/users/discord/index.html">
+        <h5 class="card__title">Discord Users</h5>
+        <p class="card__description">
+          Manage Discord user roles and activities.
+        </p>
       </a>
       <a
         id="user-management-link"
-        class="element-display-remove action-button"
+        class="element-display-remove card"
         href="/users/index.html"
       >
-        User Management
+        <h5 class="card__title">User Management</h5>
+        <p class="card__description">
+          View requests for various resources and services.
+        </p>
       </a>
       <a
         id="requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="/requests/index.html"
-        >Requests
+        ><h5 class="card__title">Requests</h5>
+        <p class="card__description">Monitor and View user activity</p>
       </a>
       <a
         id="extension-requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="extension-requests"
       >
-        Extension Requests
+        <h5 class="card__title">Extension Requests</h5>
+        <p class="card__description">
+          Submit requests for deadline extensions on tasks.
+        </p>
       </a>
       <a
         id="task-requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="task-requests"
       >
-        Task Requests
+        <h5 class="card__title">Task Requests</h5>
+        <p class="card__description">
+          Request new tasks and provide task details,
+        </p>
       </a>
-      <a href="/online-members/online-members.html" class="action-button">
-        Online Members
+      <a href="/online-members/online-members.html" class="card">
+        <h5 class="card__title">Online Members</h5>
+        <p class="card__description">
+          View the list of currently online members.
+        </p>
+      </a>
+      <a class="card" href="/groups/index.html">
+        <h5 class="card__title">Discord Groups</h5>
+        <p class="card__description">Manage Discord group memberships.</p>
+      </a>
+      <a class="card" href="/standup/index.html">
+        <h5 class="card__title">Standup Updates</h5>
+
+        <p class="card__description">Post and view daily standup updates.</p>
+      </a>
+      <a class="card" href="/identity-service-logs/index.html"
+        ><h5 class="card__title">Identity Service Logs</h5>
+
+        <p class="card__description">
+          Review logs related to identity services.
+        </p>
       </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
-      >
       <a
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="/feed/index.html"
         id="create-activity-feed"
       >
-        Activity Feed</a
+        <h5 class="card__title">Activity Feed</h5>
+        <p class="card__description">
+          View updates on activities and project progress.
+        </p></a
       >
-      <a id="application-button" href="/applications" class="action-button">
-        Applications
+      <a id="application-button" href="/applications" class="card">
+        <h5 class="card__title">Applications</h5>
+        <p class="card__description">
+          Manage and review submitted applications.
+        </p>
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
-        <button id="repo-sync-button" class="action-button">
+        <button id="repo-sync-button" class="card">
           <span class="spinner"></span>
-          Sync Repo
+          <h5 class="card__title">Sync Repo</h5>
+          <p class="card__description">Sync repository to update the changes</p>
         </button>
         <div class="status" id="sync-repo-status-update"></div>
         <div id="toast" class="hidden">

style.css

@@ -30,7 +30,7 @@ body {
 }
 
 .buttonSection {
-  height: 80vh;
+  margin-top: 10px;
   display: flex;
   justify-content: center;
   align-content: center;
@@ -62,7 +62,6 @@ button {
   border-color: transparent;
 }
 
-/* profile section */
 .profileSection {
   height: 80vh;
   display: flex;
@@ -99,9 +98,10 @@ footer {
 }
 
 .action-button {
+  width: 100%;
   color: var(--black-color);
-  font-weight: 500;
-  font-size: larger;
+  font-weight: 600;
+  font-size: 1.1rem;
   background-color: var(--white-color);
   border: 2px solid var(--black-color);
   border-radius: 5px;
@@ -112,13 +112,50 @@ footer {
   text-decoration: none;
 }
 
+.card {
+  background-color: white;
+  text-decoration: none;
+  padding: 20px;
+  width: 280px;
+  border-radius: 15px;
+  border: 1px solid hsla(0, 0%, 92%, 1);
+  box-shadow: 1px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
+}
+
+.card:hover {
+  background-color: rgb(215, 230, 241);
+  transition: 0.5s ease;
+}
+
+.card__title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: hsla(0, 0%, 21%, 1);
+}
+
+.card__description {
+  margin-top: 0.6rem;
+  color: hsla(0, 0%, 21%, 0.75);
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 18px;
+}
+
 .action-button:hover,
 .action-button:focus {
   color: var(--white-color);
   background-color: var(--blue-color);
   border-color: var(--blue-color);
 }
 
+.description {
+  margin-top: 0.6rem;
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 18px;
+}
+
 #sync-buttons.element-display-remove {
   display: none;
 }
@@ -130,12 +167,13 @@ footer {
   gap: 1.25rem;
   margin-top: 3.12rem;
   margin-bottom: 1.25rem;
-  padding: 0 6.25rem;
+  padding: 0 1.25rem;
   flex-wrap: wrap;
 }
 
 #sync-buttons .button-container {
-  flex: 1 1 100%;
+  flex: 1 1 auto;
+
   max-width: 250px;
   display: flex;
   flex-direction: column;
@@ -236,11 +274,16 @@ footer {
   display: none !important;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1200px) {
   .buttonSection {
     flex-direction: column;
+    height: auto;
+    padding: 15px;
   }
   .action-button {
     text-align: center;
+    width: 100%;
+    padding: 10px;
+    font-size: medium;
   }
 }