adding feature of anchor links

frontend/__tests__/unit/pages/ProjectDetails.test.tsx

@@ -98,7 +98,7 @@ describe('ProjectDetailsPage', () => {
 
     const contributorsSection = screen
       .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
+      .closest('div.mb-8') as HTMLElement
     const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 

frontend/__tests__/unit/pages/RepositoryDetails.test.tsx

@@ -99,7 +99,7 @@ describe('RepositoryDetailsPage', () => {
 
     const contributorsSection = screen
       .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
+      .closest('div.mb-8') as HTMLElement
     const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 

frontend/src/components/CardDetailsPage.tsx

@@ -1,4 +1,4 @@
-import { faCalendar, faFileCode, faTag } from '@fortawesome/free-solid-svg-icons'
+import { faCalendar, faFileCode, faLink, faTag } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { DetailsCardProps } from 'types/card'
 import { formatDate } from 'utils/dateFormatter'
@@ -8,6 +8,7 @@ import InfoBlock from 'components/InfoBlock'
 import ItemCardList from 'components/ItemCardList'
 import RepositoriesCard from 'components/RepositoriesCard'
 import SecondaryCard from 'components/SecondaryCard'
+import TitleWithIcon from 'components/TitleWithIcon'
 import ToggleableList from 'components/ToggleableList'
 import TopContributors from 'components/ToggleContributors'
 
@@ -38,13 +39,19 @@ const DetailsCard = ({
         {!is_active && (
           <span className="ml-2 rounded bg-red-200 px-2 py-1 text-sm text-red-800">Inactive</span>
         )}
-        <SecondaryCard title="Summary">
+        <SecondaryCard title={<TitleWithIcon href="#summary" icon={faLink} title="Summary" />}>
           <p>{summary}</p>
         </SecondaryCard>
 
         <div className="grid grid-cols-1 gap-6 md:grid-cols-7">
           <SecondaryCard
-            title={`${type[0].toUpperCase() + type.slice(1)} Details`}
+            title={
+              <TitleWithIcon
+                href={`#${type}-details`}
+                icon={faLink}
+                title={`${type[0].toUpperCase() + type.slice(1)} Details`}
+              />
+            }
             className={`${type !== 'chapter' ? 'md:col-span-5' : 'md:col-span-3'} gap-2`}
           >
             {details &&
@@ -58,7 +65,10 @@ const DetailsCard = ({
             )}
           </SecondaryCard>
           {(type === 'project' || type === 'repository' || type === 'committee') && (
-            <SecondaryCard title="Statistics" className="md:col-span-2">
+            <SecondaryCard
+              title={<TitleWithIcon href="#statistics" icon={faLink} title="Statistics" />}
+              className="md:col-span-2"
+            >
               {stats.map((stat, index) => (
                 <InfoBlock key={index} className="pb-1" icon={stat.icon} value={stat.value} />
               ))}
@@ -84,8 +94,18 @@ 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}
+                label={<TitleWithIcon href="#languages" icon={faLink} title="Languages" />}
+              />
+            )}
+            {topics.length !== 0 && (
+              <ToggleableList
+                items={topics}
+                label={<TitleWithIcon href="#topics" icon={faLink} title="Topics" />}
+              />
+            )}
           </div>
         )}
 
@@ -94,7 +114,7 @@ const DetailsCard = ({
         {(type === 'project' || type === 'repository') && (
           <>
             <ItemCardList
-              title="Recent Issues"
+              title={<TitleWithIcon href="#recent-issues" icon={faLink} title="Recent Issues" />}
               data={recentIssues}
               renderDetails={(item) => (
                 <div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
@@ -106,7 +126,9 @@ const DetailsCard = ({
               )}
             />
             <ItemCardList
-              title="Recent Releases"
+              title={
+                <TitleWithIcon href="#recent-releases" icon={faLink} title="Recent Releases" />
+              }
               data={recentReleases}
               renderDetails={(item) => (
                 <div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
@@ -120,7 +142,10 @@ const DetailsCard = ({
           </>
         )}
         {type === 'project' && repositories.length > 0 && (
-          <SecondaryCard title="Repositories" className="mt-6">
+          <SecondaryCard
+            title={<TitleWithIcon href="#repositories" icon={faLink} title="Repositories" />}
+            className="mt-6"
+          >
             <RepositoriesCard repositories={repositories} />
           </SecondaryCard>
         )}

frontend/src/components/ItemCardList.tsx

@@ -1,4 +1,5 @@
 import { JSX } from 'react'
+import React from 'react'
 import { ProjectIssuesType, ProjectReleaseType } from 'types/project'
 import SecondaryCard from './SecondaryCard'
 
@@ -7,7 +8,7 @@ const ItemCardList = ({
   data,
   renderDetails,
 }: {
-  title: string
+  title: React.ReactNode
   data: ProjectReleaseType[] | ProjectIssuesType[]
   renderDetails: (item: {
     createdAt: string
@@ -48,7 +49,7 @@ const ItemCardList = ({
         ))}
       </div>
     ) : (
-      <p>No {title.toLowerCase()}.</p>
+      <p>Currently , Nothing to Display . </p>
     )}
   </SecondaryCard>
 )

frontend/src/components/SecondaryCard.tsx

@@ -5,7 +5,7 @@ const SecondaryCard = ({
   children = null,
   className = '',
 }: {
-  title?: string
+  title?: React.ReactNode
   children?: React.ReactNode
   className?: string
 } = {}) => (

frontend/src/components/TitleWithIcon.tsx

@@ -0,0 +1,38 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+
+interface TitleWithIconProps {
+  href: string
+  icon: IconProp
+  title: string
+}
+
+const TitleWithIcon: React.FC<TitleWithIconProps> = ({ href, icon, title }) => {
+  const id = href.replace('#', '')
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    const element = document.getElementById(id)
+    if (element) {
+      event.preventDefault()
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  return (
+    <div id={id} className="relative scroll-mt-20">
+      <div className="items-top group relative flex">
+        <h2 className="mb-4 text-2xl font-semibold">{title}</h2>
+        <a
+          href={href}
+          className="inherit-color ml-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+          onClick={handleClick}
+        >
+          <FontAwesomeIcon icon={icon} className="h-7 w-5" />
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default TitleWithIcon

frontend/src/components/ToggleContributors.tsx

@@ -1,9 +1,11 @@
 import { Button } from '@chakra-ui/react'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown, faChevronUp, faLink } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { TopContributorsTypeGraphql } from 'types/contributor'
+import TitleWithIcon from 'components/TitleWithIcon'
+
 const TopContributors = ({
   contributors,
   label = 'Top Contributors',
@@ -29,7 +31,7 @@ const TopContributors = ({
   }
   return (
     <div className={`mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800 ${className}`}>
-      <h2 className="mb-4 text-2xl font-semibold">{label}</h2>
+      <TitleWithIcon href="#top-contributors" icon={faLink} title={label} />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         {displayContributors.map((contributor, index) => (
           <div

frontend/src/components/ToggleableList.tsx

@@ -2,14 +2,15 @@ import { Button } from '@chakra-ui/react'
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
+import React from 'react'
 
 const ToggleableList = ({
   items,
   label,
   limit = 10,
 }: {
   items: string[]
-  label: string
+  label: React.ReactNode
   limit?: number
 }) => {
   const [showAll, setShowAll] = useState(false)

frontend/src/index.css

@@ -293,3 +293,11 @@ a {
     transform: rotate(360deg);
   }
 }
+
+html {
+  scroll-behavior: smooth;
+}
+
+.inherit-color {
+  color: inherit;
+}

frontend/src/pages/Home.tsx

@@ -5,6 +5,7 @@ import {
   faCalendar,
   faCode,
   faFileCode,
+  faLink,
   faMapMarkerAlt,
   faTag,
 } from '@fortawesome/free-solid-svg-icons'
@@ -23,6 +24,7 @@ import ItemCardList from 'components/ItemCardList'
 import LoadingSpinner from 'components/LoadingSpinner'
 import MultiSearchBar from 'components/MultiSearch'
 import SecondaryCard from 'components/SecondaryCard'
+import TitleWithIcon from 'components/TitleWithIcon'
 import TopContributors from 'components/ToggleContributors'
 
 export default function Home() {
@@ -127,7 +129,9 @@ export default function Home() {
         </div>
       </div>
       <div className="grid gap-4 md:grid-cols-2">
-        <SecondaryCard title="New Chapters">
+        <SecondaryCard
+          title={<TitleWithIcon href="#new-chapters" icon={faLink} title="New Chapters" />}
+        >
           <div className="space-y-4">
             {data.recentChapters.map((chapter) => (
               <div key={chapter.key} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -150,7 +154,9 @@ export default function Home() {
             ))}
           </div>
         </SecondaryCard>
-        <SecondaryCard title="New Projects">
+        <SecondaryCard
+          title={<TitleWithIcon href="#new-Projects" icon={faLink} title="New Projects" />}
+        >
           <div className="space-y-4">
             {data.recentProjects.map((project) => (
               <div key={project.key} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -179,15 +185,15 @@ export default function Home() {
       </div>
       <TopContributors contributors={data.topContributors} maxInitialDisplay={9} />
       <div className="mb-20">
-        <h2 className="mb-6 text-3xl font-semibold">OWASP Chapters Nearby</h2>
+        <TitleWithIcon href="#chapters-nearby" icon={faLink} title="OWASP Chapters Nearby" />
         <ChapterMap
           geoLocData={geoLocData}
           style={{ height: '400px', width: '100%', zIndex: '0' }}
         />
       </div>
       <div className="grid gap-4 md:grid-cols-2">
         <ItemCardList
-          title="Recent Issues"
+          title={<TitleWithIcon href="#recent-issues" icon={faLink} title="Recent Issues" />}
           data={data.recentIssues}
           renderDetails={(item) => (
             <div className="mt-2 flex flex-shrink-0 items-center text-sm text-gray-600 dark:text-gray-300">
@@ -199,7 +205,7 @@ export default function Home() {
           )}
         />
         <ItemCardList
-          title="Recent Releases"
+          title={<TitleWithIcon href="#recent-releases" icon={faLink} title="Recent Releases" />}
           data={data.recentReleases}
           renderDetails={(item) => (
             <div className="mt-2 flex flex-shrink-0 text-sm text-gray-600 dark:text-gray-300">