Adding icons for left headings

frontend/src/app/about/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useQuery } from '@apollo/client'
+import { faMapSigns, faHistory, faUsers, faTools, faCrown } from '@fortawesome/free-solid-svg-icons'
 import { addToast } from '@heroui/toast'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -63,31 +64,36 @@ const About = () => {
     <div className="mt-16 min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
         <h1 className="mb-6 mt-4 text-4xl font-bold">About</h1>
-        <SecondaryCard title="History">
+        <SecondaryCard icon={faHistory} title="History">
           {aboutText.map((text) => (
             <div key={text} className="mb-4">
-              <Markdown key={text} content={text} />
+              <div key={text}>
+                <Markdown content={text} />
+              </div>
             </div>
           ))}
         </SecondaryCard>
 
-        <SecondaryCard title="Leaders">
+        <SecondaryCard icon={faCrown} title="Leaders">
           <div className="flex w-full flex-col items-center justify-around overflow-hidden md:flex-row">
             {leaders.map((username) => (
-              <LeaderData key={username} username={username} />
+              <div key={username}>
+                <LeaderData username={username} />
+              </div>
             ))}
           </div>
         </SecondaryCard>
 
         {project.topContributors && (
           <TopContributors
+            icon={faUsers}
             contributors={project.topContributors}
             maxInitialDisplay={9}
             type="contributor"
           />
         )}
 
-        <SecondaryCard title="Technologies & Tools">
+        <SecondaryCard icon={faTools} title="Technologies & Tools">
           <div className="w-full">
             <div className="grid w-full grid-cols-1 justify-center sm:grid-cols-2 lg:grid-cols-4 lg:pl-8">
               {technologies.map((tech) => (
@@ -120,7 +126,7 @@ const About = () => {
           </div>
         </SecondaryCard>
 
-        <SecondaryCard title="Roadmap">
+        <SecondaryCard icon={faMapSigns} title="Roadmap">
           <ul>
             {roadmap.map((item) => (
               <li key={item.title} className="mb-4 flex flex-row items-center gap-2 pl-4 md:pl-6">
@@ -144,12 +150,14 @@ const About = () => {
             { label: 'Contributors', value: project.contributorsCount },
             { label: 'Issues', value: project.issuesCount },
           ].map((stat, index) => (
-            <SecondaryCard key={index} className="text-center">
-              <div className="mb-2 text-3xl font-bold text-blue-400">
-                <AnimatedCounter end={Math.floor(stat.value / 5) * 5} duration={2} />+
-              </div>
-              <div className="text-gray-600 dark:text-gray-300">{stat.label}</div>
-            </SecondaryCard>
+            <div key={index}>
+              <SecondaryCard className="text-center">
+                <div className="mb-2 text-3xl font-bold text-blue-400">
+                  <AnimatedCounter end={Math.floor(stat.value / 5) * 5} duration={2} />+
+                </div>
+                <div className="text-gray-600 dark:text-gray-300">{stat.label}</div>
+              </SecondaryCard>
+            </div>
           ))}
         </div>
       </div>

frontend/src/components/CardDetailsPage.tsx

@@ -1,3 +1,13 @@
+import {
+  faFileAlt,
+  faChartBar,
+  faChartPie,
+  faFolderOpen,
+  faCode,
+  faTags,
+  faUsers,
+  faBookOpen,
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { DetailsCardProps } from 'types/card'
 import { capitalize } from 'utils/capitalize'
@@ -43,16 +53,25 @@ const DetailsCard = ({
           <span className="ml-2 rounded bg-red-200 px-2 py-1 text-sm text-red-800">Inactive</span>
         )}
         {summary && (
-          <SecondaryCard title="Summary">
+          <SecondaryCard icon={faBookOpen} title="Summary">
             <p>{summary}</p>
           </SecondaryCard>
         )}
 
-        {userSummary && <SecondaryCard title="Summary">{userSummary}</SecondaryCard>}
+        {userSummary && (
+          <SecondaryCard icon={faBookOpen} title="Summary">
+            {userSummary}
+          </SecondaryCard>
+        )}
 
-        {heatmap && <SecondaryCard title="Contribution Heatmap">{heatmap}</SecondaryCard>}
+        {heatmap && (
+          <SecondaryCard icon={faChartBar} title="Contribution Heatmap">
+            {heatmap}
+          </SecondaryCard>
+        )}
         <div className="grid grid-cols-1 gap-6 md:grid-cols-7">
           <SecondaryCard
+            icon={faFileAlt}
             title={`${capitalize(type)} Details`}
             className={`${type !== 'chapter' ? 'md:col-span-5' : 'md:col-span-3'} gap-2`}
           >
@@ -77,7 +96,7 @@ const DetailsCard = ({
             type === 'committee' ||
             type === 'user' ||
             type === 'organization') && (
-            <SecondaryCard title="Statistics" className="md:col-span-2">
+            <SecondaryCard icon={faChartPie} title="Statistics" className="md:col-span-2">
               {stats.map((stat, index) => (
                 <InfoBlock
                   className="pb-1"
@@ -110,12 +129,15 @@ const DetailsCard = ({
           <div
             className={`mb-8 grid grid-cols-1 gap-6 ${topics.length === 0 || languages.length === 0 ? 'md:col-span-1' : 'md:grid-cols-2'}`}
           >
-            {languages.length !== 0 && <ToggleableList items={languages} label="Languages" />}
-            {topics.length !== 0 && <ToggleableList items={topics} label="Topics" />}
+            {languages.length !== 0 && (
+              <ToggleableList items={languages} icon={faCode} label="Languages" />
+            )}
+            {topics.length !== 0 && <ToggleableList items={topics} icon={faTags} label="Topics" />}
           </div>
         )}
         {topContributors && (
           <TopContributors
+            icon={faUsers}
             contributors={topContributors}
             maxInitialDisplay={9}
             type="contributor"
@@ -143,7 +165,7 @@ const DetailsCard = ({
         )}
         {(type === 'project' || type === 'user' || type === 'organization') &&
           repositories.length > 0 && (
-            <SecondaryCard title="Repositories" className="mt-6">
+            <SecondaryCard icon={faFolderOpen} title="Repositories" className="mt-6">
               <RepositoriesCard repositories={repositories} />
             </SecondaryCard>
           )}

frontend/src/components/ToggleableList.tsx

@@ -1,3 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
@@ -6,11 +7,13 @@ import { useState } from 'react'
 const ToggleableList = ({
   items,
   label,
+  icon,
   limit = 10,
 }: {
   items: string[]
   label: string
   limit?: number
+  icon?: IconDefinition
 }) => {
   const [showAll, setShowAll] = useState(false)
   const router = useRouter()
@@ -21,7 +24,10 @@ const ToggleableList = ({
   }
   return (
     <div className="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
-      <h2 className="mb-4 text-2xl font-semibold">{label}</h2>
+      <h2 className="mb-4 text-2xl font-semibold">
+        {icon && <FontAwesomeIcon icon={icon} className="mr-2 h-5 w-5" />}
+        {label}
+      </h2>
       <div className="flex flex-wrap gap-2">
         {(showAll ? items : items.slice(0, limit)).map((item, index) => (
           <button