Enhance /about page with new sections

frontend/src/app/about/page.tsx

@@ -5,7 +5,6 @@ import {
   faClock,
   faUserGear,
   faMapSigns,
-  faScroll,
   faUsers,
   faTools,
   faArrowUpRightFromSquare,
@@ -24,7 +23,7 @@ import { GET_LEADER_DATA } from 'server/queries/userQueries'
 import type { Contributor } from 'types/contributor'
 import type { Project } from 'types/project'
 import type { User } from 'types/user'
-import { aboutText, technologies } from 'utils/aboutData'
+import { technologies, missionContent, keyFeatures, getInvolvedContent, projectHistory } from 'utils/aboutData'
 import AnchorTitle from 'components/AnchorTitle'
 import AnimatedCounter from 'components/AnimatedCounter'
 import LoadingSpinner from 'components/LoadingSpinner'
@@ -107,14 +106,30 @@ const About = () => {
     <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
         <h1 className="mt-4 mb-6 text-4xl font-bold">About</h1>
-        <SecondaryCard icon={faScroll} title={<AnchorTitle title="History" />}>
-          {aboutText.map((text) => (
-            <div key={text} className="mb-4">
-              <div key={text}>
-                <Markdown content={text} />
+        <div className="grid gap-6 md:grid-cols-2 mb-6">
+          <SecondaryCard icon={faMapSigns} title={<AnchorTitle title="Mission" />}>
+            <h3 className="mb-2 text-xl font-semibold text-blue-400">Our Mission</h3>
+            <p className="text-gray-600 dark:text-gray-300">{missionContent.mission}</p>
+          </SecondaryCard>
+
+          <SecondaryCard icon={faUsers} title={<AnchorTitle title="Who It's For" />}>
+            <h3 className="mb-2 text-xl font-semibold text-blue-400">Target Audience</h3>
+            <p className="text-gray-600 dark:text-gray-300">{missionContent.whoItsFor}</p>
+          </SecondaryCard>
+        </div>
+
+        <SecondaryCard icon={faCircleCheck} title={<AnchorTitle title="Key Features" />}>
+          <div className="grid gap-4 md:grid-cols-2">
+            {keyFeatures.map((feature) => (
+              <div
+                key={feature.title}
+                className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
+              >
+                <h3 className="mb-2 text-lg font-semibold text-blue-400">{feature.title}</h3>
+                <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </SecondaryCard>
 
         <SecondaryCard icon={faArrowUpRightFromSquare} title={<AnchorTitle title="Leaders" />}>
@@ -224,14 +239,42 @@ const About = () => {
           </SecondaryCard>
         )}
 
+        <SecondaryCard icon={faUsers} title={<AnchorTitle title="Get Involved" />}>
+          <p className="mb-4 text-gray-600 dark:text-gray-300">{getInvolvedContent.description}</p>
+          <ul className="mb-6 list-inside list-disc space-y-2">
+            {getInvolvedContent.ways.map((way) => (
+              <li key={way} className="text-gray-600 dark:text-gray-300">{way}</li>
+            ))}
+          </ul>
+          <Markdown content={getInvolvedContent.callToAction} />
+        </SecondaryCard>
+
+        <SecondaryCard icon={faClock} title={<AnchorTitle title="Project History" />}>
+          <div className="space-y-6">
+            {projectHistory.map((milestone, index) => (
+              <div key={`${milestone.year}-${milestone.title}`} className="relative pl-8">
+                {index !== projectHistory.length - 1 && (
+                  <div className="absolute left-[11px] top-8 h-full w-0.5 bg-blue-400"></div>
+                )}
+                <div aria-hidden="true" className="absolute left-0 top-2 h-6 w-6 rounded-full bg-blue-400"></div>
+                <div className="pt-1">
+                  <h3 className="text-lg font-semibold text-blue-400">{milestone.year}</h3>
+                  <h4 className="mb-1 font-medium">{milestone.title}</h4>
+                  <p className="text-gray-600 dark:text-gray-300">{milestone.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </SecondaryCard>
+
         <div className="grid gap-6 md:grid-cols-4">
           {[
             { label: 'Forks', value: projectMetadata.forksCount },
             { label: 'Stars', value: projectMetadata.starsCount },
             { label: 'Contributors', value: projectMetadata.contributorsCount },
             { label: 'Open Issues', value: projectMetadata.issuesCount },
-          ].map((stat, index) => (
-            <div key={index}>
+          ].map((stat) => (
+            <div key={stat.label}>
               <SecondaryCard className="text-center">
                 <div className="mb-2 text-3xl font-bold text-blue-400">
                   <AnimatedCounter end={Math.floor(stat.value / 10) * 10} duration={2} />+

frontend/src/types/about.ts

@@ -0,0 +1,22 @@
+export interface KeyFeature {
+  title: string
+  description: string
+}
+
+export interface ProjectHistory {
+  year: string
+  title: string
+  description: string
+}
+
+export interface GetInvolved {
+  description: string
+  ways: string[]
+  callToAction: string
+}
+
+export interface MissionContent {
+  mission: string
+  whoItsFor: string
+}
+

frontend/src/utils/aboutData.ts

@@ -1,9 +1,90 @@
+import type {
+  KeyFeature,
+  ProjectHistory,
+  GetInvolved,
+  MissionContent,
+} from 'types/about'
+
 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.',
   'The code is licensed under the MIT License, encouraging contributions while protecting the authors from legal claims. All OWASP Nest leaders are certified ISC2 professionals and OWASP members who adhere to the OWASP Code of Conduct.',
 ]
 
+export const missionContent: MissionContent = {
+  mission:
+    'OWASP Nest is a comprehensive platform built to enhance collaboration and streamline contributions across the OWASP community. Acting as a central hub, it helps users discover projects, find contribution opportunities, and connect with like-minded individuals based on their interests and expertise.',
+  whoItsFor:
+    "OWASP Nest is designed for developers, designers, technical writers, students, security professionals, and contributors of all backgrounds. Whether you're just starting out or a seasoned OSS veteran, Nest provides intuitive tools to help you engage meaningfully in the OWASP ecosystem.",
+} as const
+
+export const keyFeatures: KeyFeature[] = [
+  {
+    title: 'Advanced Search Capabilities',
+    description:
+      'Easily filter and explore projects or issues using keywords, tags, and contributor preferences.',
+  },
+  {
+    title: 'Slack Integration',
+    description:
+      'Stay connected through a Slack bot that delivers updates and supports both direct and channel messaging.',
+  },
+  {
+    title: 'OWASP Chapters Proximity Page',
+    description: 'Discover and connect with nearby OWASP chapters for local engagement.',
+  },
+  {
+    title: 'AI-Generated Insights',
+    description:
+      'Benefit from AI-powered summaries and actionable suggestions for tackling project issues.',
+  },
+]
+
+export const getInvolvedContent: GetInvolved = {
+  description:
+    "OWASP Nest thrives thanks to community-driven contributions. Here's how you can make an impact:",
+  ways: [
+    'Code Contributions – Fix bugs or build new features',
+    'Code Review – Improve quality by reviewing pull requests',
+    'Documentation – Create or enhance onboarding guides and tutorials',
+    'Issue Reporting – Report bugs or propose improvements',
+    'Community Engagement – Join Slack discussions and provide feedback',
+  ],
+  callToAction:
+  'To get started, visit the [OWASP Nest Repository](https://github.com/OWASP/Nest), explore the [Contributing Guidelines](https://github.com/OWASP/Nest/blob/main/CONTRIBUTING.md), and review the [Code of Conduct](https://github.com/OWASP/Nest/blob/main/CODE_OF_CONDUCT.md).',
+}
+
+export const projectHistory: ProjectHistory[] = [
+  {
+    title: 'Project Inception',
+    description:
+      'Initial brainstorming and vision by Arkadii Yakovets (Ark) & Starr Brown to solve OWASP project navigation challenges',
+    year: 'Jan 2023',
+  },
+  {
+    title: 'Backend MVP',
+    description:
+      'Backend foundations built using Python, Django, DRF with AI capabilities integrated',
+    year: 'Mar 2023',
+  },
+  {
+    title: 'Frontend Development',
+    description:
+      'Frontend initially developed by Kateryna Golovanova (Kate) using Vue.js, later transitioned to React',
+    year: 'Sep 2024',
+  },
+  {
+    title: 'Platform Integrations',
+    description: 'Slack & Algolia integrations implemented for enhanced user experience',
+    year: 'Nov 2024',
+  },
+  {
+    title: 'GSoC Integration',
+    description: 'Scaled to support Google Summer of Code and streamline contributor onboarding',
+    year: 'Dec 2024',
+  },
+]
+
 export const technologies = [
   {
     section: 'Backend',