Redesign Roadmap Section for Enhanced Visual Appeal and Clarity

frontend/src/app/about/page.tsx

@@ -15,14 +15,14 @@ import { GET_PROJECT_DATA } from 'server/queries/projectQueries'
 import { GET_USER_DATA } from 'server/queries/userQueries'
 import { ProjectTypeGraphql } from 'types/project'
 import { aboutText, roadmap, technologies } from 'utils/aboutData'
+import { ErrorDisplay, handleAppError } from 'app/global-error'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import AnimatedCounter from 'components/AnimatedCounter'
 import LoadingSpinner from 'components/LoadingSpinner'
 import Markdown from 'components/MarkdownWrapper'
 import SecondaryCard from 'components/SecondaryCard'
 import TopContributors from 'components/TopContributors'
 import UserCard from 'components/UserCard'
-import { ErrorDisplay, handleAppError } from 'app/global-error'
 
 const leaders = ['arkid15r', 'kasya', 'mamicidal']
 
@@ -74,9 +74,7 @@ const About = () => {
         <SecondaryCard icon={faScroll} title="History">
           {aboutText.map((text) => (
             <div key={text} className="mb-4">
-              <div key={text}>
-                <Markdown content={text} />
-              </div>
+              <Markdown content={text} />
             </div>
           ))}
         </SecondaryCard>

frontend/src/components/Roadmap.tsx

@@ -0,0 +1,51 @@
+'use client'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import { roadmap } from 'utils/aboutData'
+import SecondaryCard from 'components/SecondaryCard'
+
+const Roadmap = () => {
+  return (
+    <SecondaryCard title="Project Roadmap">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        {roadmap.map((item, index) => (
+          <div
+            key={index}
+            className="flex flex-col justify-between border p-4 text-gray-600 dark:border-gray-700 dark:text-gray-300"
+          >
+            <div className="flex items-start">
+              <div className="mr-4 flex h-10 w-10 flex-none items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                <FontAwesomeIcon
+                  icon={item.icon}
+                  className="text-lg text-blue-600 dark:text-blue-400"
+                />
+              </div>
+              <div className="flex flex-col">
+                <div className="h-3/4">
+                  {' '}
+                  <h3 className="mb-1 text-lg font-semibold leading-snug">{item.title}</h3>
+                  <p className="mb-4 line-clamp-3 text-sm">{item.detailedDescription}</p>
+                </div>
+
+                <div className="mt-auto h-1/4 pt-2">
+                  <Link
+                    href={item.issueLink}
+                    target="_blank"
+                    className="inline-flex items-center text-sm text-blue-500 dark:text-blue-400"
+                    aria-label={`View GitHub Issue for ${item.title}`}
+                  >
+                    <FontAwesomeIcon icon={faGithub} className="mr-1" aria-hidden="true" />
+                    View GitHub Issue
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </SecondaryCard>
+  )
+}
+
+export default Roadmap

frontend/src/utils/aboutData.ts

@@ -1,3 +1,12 @@
+import {
+  faCodeBranch,
+  faDesktop,
+  faDatabase,
+  faRobot,
+  faChartLine,
+  faCloud,
+} from '@fortawesome/free-solid-svg-icons'
+
 export const aboutText = [
   'OWASP Nest was originally created by Arkadii Yakovets (Ark) to simplify OWASP projects navigation. Built from scratch based on Ark’s vision and discussions with Starr Brown (Starr), the platform integrates structured system design into the OWASP ecosystem. The initial frontend, based on Vue.js, was introduced by Kateryna Golovanova (Kate), who later became the project co-leader due to her invaluable frontend and project management skills.',
   'Over time, OWASP Nest has expanded to address broader community needs, such as Google Summer of Code (GSoC) student guidance and contribution opportunities discovery. The platform, alongside NestBot, has become a central hub for OWASP projects, chapters, users, and aggregated contribution opportunities.',
@@ -8,28 +17,52 @@ export const roadmap = [
   {
     title: 'Create OWASP Contribution Hub to centralize collaboration opportunities',
     issueLink: 'https://github.com/OWASP/Nest/issues/710',
+    icon: faCodeBranch,
+    description: 'Building a centralized platform for all OWASP contribution opportunities.',
+    detailedDescription:
+      'The Contribution Hub will serve as a single point of entry for new contributors to discover and engage with OWASP projects. It will feature project listings, help wanted issues, mentorship opportunities, and personalized contribution suggestions based on skill sets and interests.',
   },
   {
     title:
       'Design and launch the OWASP API for chapters, projects, committees, and other OWASP entities',
     issueLink: 'https://github.com/OWASP/Nest/issues/707',
+    icon: faDesktop,
+    description: 'Creating a unified API to access data across all OWASP resources.',
+    detailedDescription:
+      "The OWASP API will provide programmatic access to OWASP's ecosystem data, enabling developers to build applications and integrations that leverage OWASP resources. The API will follow REST principles, include comprehensive documentation, and support various authentication methods to ensure secure access.",
   },
   {
     title:
       'Develop OWASP Schema to standardize metadata for chapters, projects, and other entities',
     issueLink: 'https://github.com/OWASP/Nest/issues/709',
+    icon: faDatabase,
+    description: 'Standardizing data structure for consistent representation across the ecosystem.',
+    detailedDescription:
+      'The OWASP Schema project will define standardized data models for projects, chapters, events, and other OWASP entities. This standardization will ensure consistent data representation across systems, facilitate data exchange, and enable more efficient integration between OWASP platforms and tools.',
   },
   {
     title: 'Extend OWASP NestBot with AI agent/assistant capabilities',
     issueLink: 'https://github.com/OWASP/Nest/issues/908',
+    icon: faRobot,
+    description: 'Enhancing NestBot with advanced AI features to better assist the community.',
+    detailedDescription:
+      'The enhanced NestBot will incorporate machine learning models trained on OWASP resources to provide intelligent responses to community questions, suggest relevant resources, and assist with common tasks. The AI capabilities will include natural language understanding, personalized recommendations, and integration with various communication channels.',
   },
   {
     title: 'Implement OWASP Project Health Dashboard',
     issueLink: 'https://github.com/OWASP/Nest/issues/711',
+    icon: faChartLine,
+    description: 'Providing visibility into project activity, contributions, and overall health.',
+    detailedDescription:
+      'The Project Health Dashboard will offer comprehensive insights into the health and activity of OWASP projects through a visual interface. Metrics will include commit frequency, contributor growth, issue response time, release cadence, and community engagement metrics. The dashboard will help project leaders identify areas for improvement and showcase active projects to potential contributors.',
   },
   {
     title: 'Migrate OWASP Nest to Kubernetes',
     issueLink: 'https://github.com/OWASP/Nest/issues/706',
+    icon: faCloud,
+    description: 'Improving scalability and reliability through containerized deployment.',
+    detailedDescription:
+      'The migration to Kubernetes will involve containerizing all OWASP Nest services, implementing Helm charts for deployment, establishing CI/CD pipelines for automatic deployment, and configuring monitoring and logging systems. This will improve system reliability, enable easier scaling, and reduce infrastructure maintenance overhead.',
   },
 ]