From 108f09c207592483500b51a7737257dc85f8a271 Mon Sep 17 00:00:00 2001
From: Saksham Jain <reach2saksham2004@gmail.com>
Date: Mon, 9 Mar 2026 21:42:25 +0530
Subject: [PATCH 1/3] feat: restructure projects page with tabbed org sections
 and add missing projects

- Add tabbed organisation switcher (AOSSIE / StabilityNexus / DjedAlliance)
  with animated crossfade via AnimatePresence
- Add 10 missing AOSSIE-Org projects: Agora Web, Agora iOS, OpenPeerChat
  (Flutter & React Native), Skeptik, Sensala, CarbonFootprint API & Mobile,
  CrowdAlert Web, DebateAI
- Add 19 StabilityNexus projects: hodlCoin, FairFund, Gluon (Ergo SDK/UI/
  Solidity), BenefactionPlatform, Bene FundRaising, Clowder, Treee, Hammer
  Auction House, RainDrop, Fate, HackHub, Maelstrom, Chainvoice, Plaza,
  VouchMe, Destiny, TNT
- Add 6 DjedAlliance projects: Gluon Ergo WebUI, Djed Solidity, Oracle
  Solidity & Backend, StablePay, Gluon Ergo Backend Contracts
- Replace random sort with deterministic A-Z sort (fixes hydration mismatch)
- Add StabilityNexus.png and DjedAlliance.png org logos
- Apply existing unused Carbon.png and scholar.png to matching projects

Closes #638
---
 src/app/projects/page.jsx | 201 +++++++++++++-----
 src/helper/projects.js    | 425 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 569 insertions(+), 57 deletions(-)

diff --git a/src/app/projects/page.jsx b/src/app/projects/page.jsx
index 5d6c90df..eee93601 100644
--- a/src/app/projects/page.jsx
+++ b/src/app/projects/page.jsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import Link from 'next/link';
 import Grid from '@mui/material/Grid';
 import MuiCard from '@mui/material/Card';
@@ -15,7 +16,7 @@ import projects from '@/helper/projects'
 import { CardProduct } from '@/components/products/CardProduct'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
-import { motion } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 
 
 function LinkIcon(props) {
@@ -29,7 +30,32 @@ function LinkIcon(props) {
   )
 }
 
-// Define the Cards component here
+// Organisation tab definitions
+const ORG_TABS = [
+  {
+    id: 'aossie',
+    label: 'AOSSIE Projects',
+    shortLabel: 'AOSSIE',
+    filter: (p) =>
+      !p.githubLink ||
+      p.githubLink.includes('github.com/AOSSIE-Org') ||
+      p.githubLink.includes('gitlab.com/aossie'),
+  },
+  {
+    id: 'stabilitynexus',
+    label: 'StabilityNexus Projects',
+    shortLabel: 'StabilityNexus',
+    filter: (p) => p.githubLink && p.githubLink.includes('github.com/StabilityNexus'),
+  },
+  {
+    id: 'djedalliance',
+    label: 'DjedAlliance Projects',
+    shortLabel: 'DjedAlliance',
+    filter: (p) => p.githubLink && p.githubLink.includes('github.com/DjedAlliance'),
+  },
+]
+
+// Cards grid
 const Cards = ({ projectList }) => {
   return (
     <Grid container spacing={{ xs: 2, md: 4 }} sx={{ paddingTop: '40px', justifyContent: 'center' }}>
@@ -51,23 +77,28 @@ const Cards = ({ projectList }) => {
               backdropFilter: 'blur(4px) brightness(100%)',
               display: 'flex',
               flexDirection: 'column',
+              justifyContent: 'space-between',
+
             }}
           >
-            <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
-              <Image
-                src={project.logo}
-                alt={`${project.title} image`}
-                width={80}
-                height={80}
-                style={{ margin: '0 auto 16px', objectFit: 'contain' }}
-              />
+            <CardContent sx={{ textAlign: 'center', pt: 4 }}>
+              {project.logo && (
+                <div className="flex justify-center mb-4">
+                  <Image
+                    src={project.logo}
+                    alt={project.name}
+                    width={60}
+                    height={60}
+                    className="object-contain"
+                  />
+                </div>
+              )}
               <Typography
-                variant="h5"
-                className="mt-6 font-mono text-green-600 dark:text-yellow-400"
-                sx={{
-                  fontFamily: 'Nunito-Bold',
-                  color: '#3c982c',
-                  textAlign: 'center',
+                variant="h6"
+                className="font-mono font-bold text-zinc-800 dark:text-zinc-100 mb-2"
+                sx={{ 
+                  fontFamily: 'Nunito', 
+                  mb: 1 
                 }}
               >
                 {project.name}
@@ -76,16 +107,10 @@ const Cards = ({ projectList }) => {
               <Typography
                 variant="body1"
                 className="text-zinc-600  dark:text-zinc-400 text-lg font-mono leading-7 text-center"
-                sx={{
-                  fontFamily: 'Nunito-Light',
-                  color: 'black',
-                  mt: 2,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  display: '-webkit-box',
-                  WebkitBoxOrient: 'vertical',
-                  WebkitLineClamp: 4,
-                }}
+                sx={{ fontFamily: 'Nunito-Light',
+                   color: 'black',
+                    fontSize: '0.85rem' 
+                  }}
               >
                 {project.description}
               </Typography>
@@ -112,6 +137,8 @@ const Cards = ({ projectList }) => {
   );
 };
 
+//Page header
+
 const ProjectSection = () => {
   return (
     <motion.div 
@@ -120,47 +147,113 @@ const ProjectSection = () => {
       transition={{ duration: 0.8 }}
       className="ideas-text flex items-center justify-center mb-8 relative"
     >
-      <div
-        className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center dark:bg-[url('/logo.png')] bg-[url('/logo.png')] absolute left-10"
-        alt="GSOC Logo"
-      ></div>
 
       <h1 className="font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl md:text-5xl lg:text-6xl text-center">
         PROJECTS
       </h1>
 
-      <div
-        className="hidden md:block w-[75px] h-[75px] m-2 bg-cover bg-center absolute right-10"
-        style={{ backgroundImage: "url('/logo.png')" }}
-        aria-label="Logo"
-      ></div>
-
     </motion.div>
   );
 };
 
-const styles = {
-  bannerWrapper: {
-    width: '100%',
-    position: 'relative',
-    overflow: 'hidden',
-  },
-};
+// Org switcher tabs
+const OrgTabs = ({ activeTab, onTabChange }) => {
+  return (
+    <div className="flex justify-center">
+      <div className="flex text-center justify-center items-center flex-col sm:flex-row flex-wrap gap-2 rounded-xl border border-zinc-200 bg-zinc-100 p-1.5 dark:border-zinc-700 dark:bg-zinc-800/60">
+        {ORG_TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            className={`
+              relative rounded-lg px-4 py-2 font-mono text-sm font-semibold transition-all duration-200
+              ${
+                activeTab === tab.id
+                  ? 'bg-[#00843D] text-white shadow-md dark:bg-yellow-400 dark:text-zinc-900'
+                  : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
+              }
+            `}
+          >
+            <span className="hidden sm:inline">{tab.label}</span>
+            <span className="sm:hidden">{tab.shortLabel}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Main page component
 
 export default function Projects() {
-  const readyToDownload = projects.filter(p => p.category === 'Ready to download');
-  const productionReady = projects.filter(p => p.category === 'Production ready');
-  const ongoing = projects.filter(p => p.category === 'Ongoing');
+  const [activeOrg, setActiveOrg] = useState('aossie')
+  const[sortOrder, setSortOrder] = useState('a-z') // Added sort state
+  const currentTab = ORG_TABS.find((t) => t.id === activeOrg)
+    
+// Sort Logic added 
+  const filteredProjects = projects
+    .filter(currentTab.filter)
+    .slice()
+    .sort((a, b) => {
+      if (sortOrder === 'a-z') return a.name.localeCompare(b.name);
+      if (sortOrder === 'z-a') return b.name.localeCompare(a.name);
+      if (sortOrder === 'length-asc') return a.name.length - b.name.length;
+      if (sortOrder === 'length-desc') return b.name.length - a.name.length;
+      return 0; // default order
+    })
+
 
   return (
     <>
       <Container className="mt-20 mb-28">
         <Container.Inner>
-          <div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3 mb-16">
-            {projects.sort(() => 0.5 - Math.random()).map((product) => (
-              <CardProduct key={product.slug} product={product} />
-            ))}
-          </div>
+            <ProjectSection />
+                          
+            {/* Added a layout to align Tabs and Sorting Dropdown perfectly */}
+            <div className="flex flex-col justify-between items-center mb-8 gap-6">
+              <div className="w-full md:w-1/4 hidden md:block"></div> {/* Spacer for perfect alignment */}
+              
+              <div className="w-full md:w-auto flex justify-center">
+                <OrgTabs activeTab={activeOrg} onTabChange={setActiveOrg} />
+              </div>
+
+              <div className="w-full flex justify-center">
+                <div className="flex items-center gap-2">
+                  <label htmlFor="sort-select" className="text-sm font-semibold text-zinc-600 dark:text-zinc-400 font-mono">
+                    Sort By:
+                  </label>
+                  <select
+                    id="sort-select"
+                    value={sortOrder}
+                    onChange={(e) => setSortOrder(e.target.value)}
+                    className="rounded-lg border border-zinc-200 bg-zinc-100 px-3 py-2 text-sm font-mono font-semibold text-zinc-600 outline-none transition-all duration-200 focus:border-[#00843D] dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:border-yellow-400 cursor-pointer"
+                  >
+                    <option value="a-z">Name (A-Z)</option>
+                    <option value="z-a">Name (Z-A)</option>
+                    <option value="length-asc">Name Length (Asc)</option>
+                    <option value="length-desc">Name Length (Desc)</option>
+                    <option value="default">Default</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={`${activeOrg}-${sortOrder}`}
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              transition={{ duration: 0.3 }}
+              >
+              <div className="mb-16 grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
+                {filteredProjects.map((product) => (
+                  <CardProduct key={product.slug || product.name} product={product} />
+                ))}
+              </div>
+            </motion.div>
+          </AnimatePresence>
 
           {/* 
           <div className="mb-20">
@@ -183,12 +276,6 @@ export default function Projects() {
 
         </Container.Inner>
       </Container>
-
-      <div style={styles.bannerWrapper}>
-        <Container.Outer className="mt-28">
-          <Banner />
-        </Container.Outer>
-      </div>
     </>
   );
 }
diff --git a/src/helper/projects.js b/src/helper/projects.js
index 7e15412d..de354ebe 100644
--- a/src/helper/projects.js
+++ b/src/helper/projects.js
@@ -7,6 +7,7 @@ import PictoPy from '@/images/Pictopy.png'
 import MonumentoLogo from '@/images/monumento.png'
 
 const projects = [
+  // AOSSIE Core Projects
   {
     slug: 'pictopy',
     name: 'PictoPy',
@@ -335,6 +336,430 @@ const projects = [
     status: 'ongoing',
     category: 'Ongoing'
   },
+  {
+    slug: 'agora-web',
+    name: 'Agora Web',
+    description:
+      'The Agora Web application provides a web interface for running elections using a variety of voting algorithms, built on top of the Agora API.',
+    link: { href: 'https://github.com/AOSSIE-Org/Agora-Web', label: 'Agora-Web' },
+    logo: AgoraLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Agora-Web',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'agora-ios',
+    name: 'Agora iOS',
+    description:
+      'An iOS application for conducting elections using multiple voting algorithms, powered by the Agora Web API backend.',
+    link: { href: 'https://github.com/AOSSIE-Org/Agora-iOS', label: 'Agora-iOS' },
+    logo: AgoraLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Agora-iOS',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'openchat-flutter',
+    name: 'OpenPeerChat (Flutter)',
+    description:
+      'A decentralised peer-to-peer chat application built with Flutter, enabling secure and private messaging without a central server.',
+    link: { href: 'https://github.com/AOSSIE-Org/OpenPeerChat-flutter', label: 'OpenPeerChat-flutter' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/OpenPeerChat-flutter',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'openchat-react-native',
+    name: 'OpenPeerChat (React Native)',
+    description:
+      'A React Native implementation of the decentralised peer-to-peer OpenPeerChat platform for secure and private messaging.',
+    link: { href: 'https://github.com/AOSSIE-Org/OpenPeerChat-react-native', label: 'OpenPeerChat-react-native' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/OpenPeerChat-react-native',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'skeptik',
+    name: 'Skeptik',
+    description:
+      'A library and tool for proof compression. Given a proof of a theorem, Skeptik attempts to find a smaller proof of the same theorem.',
+    link: { href: 'https://github.com/AOSSIE-Org/Skeptik', label: 'Skeptik' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Skeptik',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'sensala',
+    name: 'Sensala',
+    description:
+      'A dynamic semantics computational linguistics system that interprets natural language sentences using formal semantic techniques.',
+    link: { href: 'https://github.com/AOSSIE-Org/Sensala', label: 'Sensala' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Sensala',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'carbon-footprint-api',
+    name: 'CarbonFootprint API',
+    description:
+      'The backend API powering the CarbonFootprint project, providing carbon emission data and calculations for various activities and services.',
+    link: { href: 'https://github.com/AOSSIE-Org/CarbonFootprint-API', label: 'CarbonFootprint-API' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/CarbonFootprint-API',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'carbon-footprint-mobile',
+    name: 'CarbonFootprint Mobile',
+    description:
+      'A mobile application that helps users track and reduce their carbon footprint by monitoring CO2 emissions from everyday activities.',
+    link: { href: 'https://github.com/AOSSIE-Org/CarbonFootprint-Mobile', label: 'CarbonFootprint-Mobile' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/CarbonFootprint-Mobile',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'crowdalert-web',
+    name: 'CrowdAlert Web',
+    description:
+      'A crowdsourced incident reporting web platform that allows users to report and view real-time incidents happening around them.',
+    link: { href: 'https://github.com/AOSSIE-Org/CrowdAlert-Web', label: 'CrowdAlert-Web' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/CrowdAlert-Web',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'debateai',
+    name: 'DebateAI',
+    description:
+      'An AI-powered debate platform that helps users practice and improve their debate skills through structured argumentation and feedback.',
+    link: { href: 'https://github.com/AOSSIE-Org/DebateAI', label: 'DebateAI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/DebateAI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+
+  // StabilityNexus projects
+  {
+    slug: 'hodlcoin-solidity',
+    name: 'hodlCoin (Solidity)',
+    description:
+      'A decentralised staking platform on EVM chains where users stake tokens to mint hodlTokens. The exchange rate rises as more tokens are staked.',
+    link: { href: 'https://github.com/StabilityNexus/hodlCoin-Solidity-WebUI', label: 'hodlCoin-Solidity-WebUI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/hodlCoin-Solidity-WebUI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'fairfund',
+    name: 'FairFund',
+    description:
+      'A decentralised funding platform built on Solidity that enables transparent, community-governed allocation of funds to projects and contributors.',
+    link: { href: 'https://github.com/StabilityNexus/FairFund', label: 'FairFund' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/FairFund',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'gluon-ergo-sdk',
+    name: 'Gluon Ergo SDK',
+    description:
+      'A TypeScript SDK for interacting with the Gluon protocol on the Ergo blockchain, enabling developers to build applications using Gluon\'s gold-backed stablecoin system.',
+    link: { href: 'https://github.com/StabilityNexus/Gluon-Ergo-SDK', label: 'Gluon-Ergo-SDK' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Gluon-Ergo-SDK',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'gluon-solidity',
+    name: 'Gluon (Solidity)',
+    description:
+      'A Solidity-based implementation of the Gluon protocol providing a gold-backed stablecoin system on EVM-compatible blockchains.',
+    link: { href: 'https://github.com/StabilityNexus/Gluon-Solidity-WebUI', label: 'Gluon-Solidity-WebUI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Gluon-Solidity-WebUI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'gluon-ergo-ui',
+    name: 'Gluon Ergo UI',
+    description:
+      'The web user interface for the Gluon protocol deployed on the Ergo blockchain, providing access to gold-backed stablecoin operations.',
+    link: { href: 'https://github.com/StabilityNexus/Gluon-Ergo-UI', label: 'Gluon-Ergo-UI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Gluon-Ergo-UI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'benefaction-platform-ergo',
+    name: 'Benefaction Platform (Ergo)',
+    description:
+      'A decentralised fundraising and benefaction platform built on the Ergo blockchain, enabling transparent community-driven funding campaigns.',
+    link: { href: 'https://github.com/StabilityNexus/BenefactionPlatform-Ergo', label: 'BenefactionPlatform-Ergo' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/BenefactionPlatform-Ergo',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'bene-fundraising-evm',
+    name: 'Bene FundRaising (EVM)',
+    description:
+      'An EVM-based decentralised fundraising platform allowing projects to raise funds transparently through smart contracts.',
+    link: { href: 'https://github.com/StabilityNexus/Bene-FundRaising-EVM-Frontend', label: 'Bene-FundRaising-EVM' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Bene-FundRaising-EVM-Frontend',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'clowder',
+    name: 'Clowder',
+    description:
+      'A decentralised platform for organising and managing open-source contributor communities, built on StabilityNexus infrastructure.',
+    link: { href: 'https://github.com/StabilityNexus/Clowder', label: 'Clowder' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Clowder',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'treee',
+    name: 'Treee',
+    description:
+      'A blockchain-based platform for planting and tracking trees, enabling transparent environmental impact verification and carbon credit generation.',
+    link: { href: 'https://github.com/StabilityNexus/Treee', label: 'Treee' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Treee',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'hammer-auction-house',
+    name: 'Hammer Auction House',
+    description:
+      'A decentralised on-chain auction house built with Solidity, enabling transparent and trustless bidding for digital and tokenised assets.',
+    link: { href: 'https://github.com/StabilityNexus/HammerAuctionHouse-WebUI', label: 'HammerAuctionHouse-WebUI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/HammerAuctionHouse-WebUI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'raindrop',
+    name: 'RainDrop',
+    description:
+      'A decentralised token distribution and airdrop platform built on Solidity, enabling fair and transparent token drops to community members.',
+    link: { href: 'https://github.com/StabilityNexus/RainDrop-Frontend', label: 'RainDrop-Frontend' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/RainDrop-Frontend',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'fate-evm',
+    name: 'Fate (EVM)',
+    description:
+      'A prediction market and fate-based gaming platform on EVM chains, enabling decentralised wagering and outcome resolution via smart contracts.',
+    link: { href: 'https://github.com/StabilityNexus/Fate-EVM-Frontend', label: 'Fate-EVM-Frontend' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Fate-EVM-Frontend',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'hackhub',
+    name: 'HackHub',
+    description:
+      'A decentralised hackathon hosting and management platform built on Solidity, providing on-chain prize distribution and project submission tracking.',
+    link: { href: 'https://github.com/StabilityNexus/HackHub-WebUI', label: 'HackHub-WebUI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/HackHub-WebUI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'maelstrom',
+    name: 'Maelstrom',
+    description:
+      'A decentralised vortex-style liquidity and swapping protocol built on Solidity, offering novel AMM mechanics for DeFi participants.',
+    link: { href: 'https://github.com/StabilityNexus/Maelstrom-WebUI', label: 'Maelstrom-WebUI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Maelstrom-WebUI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'chainvoice',
+    name: 'Chainvoice',
+    description:
+      'A blockchain-based invoicing and payment platform that enables transparent, immutable invoice management and settlement on-chain.',
+    link: { href: 'https://github.com/StabilityNexus/Chainvoice', label: 'Chainvoice' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Chainvoice',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'plaza',
+    name: 'Plaza',
+    description:
+      'A decentralised marketplace built on blockchain technology, enabling peer-to-peer trading of digital assets and services without intermediaries.',
+    link: { href: 'https://github.com/StabilityNexus/Plaza', label: 'Plaza' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Plaza',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'vouchme',
+    name: 'VouchMe',
+    description:
+      'A decentralised reputation and vouching system that allows community members to vouch for each other on-chain, building trust without central authority.',
+    link: { href: 'https://github.com/StabilityNexus/VouchMe', label: 'VouchMe' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/VouchMe',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'destiny-evm',
+    name: 'Destiny (EVM)',
+    description:
+      'A decentralised on-chain destiny and outcome determination protocol on EVM chains, leveraging verifiable randomness for fair result generation.',
+    link: { href: 'https://github.com/StabilityNexus/Destiny-EVM', label: 'Destiny-EVM' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/Destiny-EVM',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'tnt',
+    name: 'TNT',
+    description:
+      'A decentralised token and NFT toolkit built on StabilityNexus infrastructure, providing utilities for token creation, management and distribution.',
+    link: { href: 'https://github.com/StabilityNexus/TNT', label: 'TNT' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/StabilityNexus/TNT',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+
+  // Djed Alliance Projects
+  {
+    slug: 'gluon-ergo-webui',
+    name: 'Gluon Ergo WebUI',
+    description:
+      'The web dashboard for the Gluon protocol on Ergo, a gold-backed stablecoin system that lets users mint GAU (gold) and GAUC (counter) tokens.',
+    link: { href: 'https://github.com/DjedAlliance/Gluon-Ergo-WebUI', label: 'Gluon-Ergo-WebUI' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/DjedAlliance/Gluon-Ergo-WebUI',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'djed-solidity',
+    name: 'Djed Solidity',
+    description:
+      'The Solidity smart contract implementation of the Djed algorithmic stablecoin protocol, deployable on any EVM-compatible blockchain.',
+    link: { href: 'https://github.com/DjedAlliance/Djed-Solidity', label: 'Djed-Solidity' },
+    logo: Djed,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/DjedAlliance/Djed-Solidity',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'oracle-solidity',
+    name: 'Oracle Solidity',
+    description:
+      'A Solidity-based price oracle system for the DjedAlliance ecosystem, providing reliable on-chain price feeds for stablecoin protocol collateral management.',
+    link: { href: 'https://github.com/DjedAlliance/Oracle-Solidity', label: 'Oracle-Solidity' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/DjedAlliance/Oracle-Solidity',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'oracle-backend',
+    name: 'Oracle Backend',
+    description:
+      'The backend service for the DjedAlliance oracle system, responsible for fetching, aggregating, and submitting price data on-chain.',
+    link: { href: 'https://github.com/DjedAlliance/Oracle-Backend', label: 'Oracle-Backend' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/DjedAlliance/Oracle-Backend',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'stablepay',
+    name: 'StablePay',
+    description:
+      'A decentralised payment platform that allows merchants and users to transact using stablecoins, providing price-stable crypto payments.',
+    link: { href: 'https://github.com/DjedAlliance/StablePay', label: 'StablePay' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/DjedAlliance/StablePay',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
+  {
+    slug: 'gluon-ergo-backend-contracts',
+    name: 'Gluon Ergo Backend Contracts',
+    description:
+      'The Ergo ErgoScript smart contracts powering the Gluon gold-backed stablecoin protocol backend on the Ergo blockchain.',
+    link: { href: 'https://github.com/DjedAlliance/Gluon-Ergo-Backend-Contracts', label: 'Gluon-Ergo-Backend-Contracts' },
+    logo: DefaultLogo,
+    status: 'ongoing',
+    category: 'Ongoing',
+    githubLink: 'https://github.com/DjedAlliance/Gluon-Ergo-Backend-Contracts',
+    discordLink: 'https://discord.gg/xnmAPS7zqB',
+  },
 ]
 
 

From d3471e755f7d96996d88d1919e84798c3936c45d Mon Sep 17 00:00:00 2001
From: Saksham Jain <reach2saksham2004@gmail.com>
Date: Thu, 12 Mar 2026 21:42:25 +0530
Subject: [PATCH 2/3] fix: remove organization tabs and sorting

---
 src/app/projects/page.jsx | 108 +-------------------------------------
 1 file changed, 2 insertions(+), 106 deletions(-)

diff --git a/src/app/projects/page.jsx b/src/app/projects/page.jsx
index eee93601..9af06409 100644
--- a/src/app/projects/page.jsx
+++ b/src/app/projects/page.jsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { useState } from 'react'
 import Link from 'next/link';
 import Grid from '@mui/material/Grid';
 import MuiCard from '@mui/material/Card';
@@ -16,7 +15,7 @@ import projects from '@/helper/projects'
 import { CardProduct } from '@/components/products/CardProduct'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion } from 'framer-motion'
 
 
 function LinkIcon(props) {
@@ -30,31 +29,6 @@ function LinkIcon(props) {
   )
 }
 
-// Organisation tab definitions
-const ORG_TABS = [
-  {
-    id: 'aossie',
-    label: 'AOSSIE Projects',
-    shortLabel: 'AOSSIE',
-    filter: (p) =>
-      !p.githubLink ||
-      p.githubLink.includes('github.com/AOSSIE-Org') ||
-      p.githubLink.includes('gitlab.com/aossie'),
-  },
-  {
-    id: 'stabilitynexus',
-    label: 'StabilityNexus Projects',
-    shortLabel: 'StabilityNexus',
-    filter: (p) => p.githubLink && p.githubLink.includes('github.com/StabilityNexus'),
-  },
-  {
-    id: 'djedalliance',
-    label: 'DjedAlliance Projects',
-    shortLabel: 'DjedAlliance',
-    filter: (p) => p.githubLink && p.githubLink.includes('github.com/DjedAlliance'),
-  },
-]
-
 // Cards grid
 const Cards = ({ projectList }) => {
   return (
@@ -156,104 +130,26 @@ const ProjectSection = () => {
   );
 };
 
-// Org switcher tabs
-const OrgTabs = ({ activeTab, onTabChange }) => {
-  return (
-    <div className="flex justify-center">
-      <div className="flex text-center justify-center items-center flex-col sm:flex-row flex-wrap gap-2 rounded-xl border border-zinc-200 bg-zinc-100 p-1.5 dark:border-zinc-700 dark:bg-zinc-800/60">
-        {ORG_TABS.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => onTabChange(tab.id)}
-            className={`
-              relative rounded-lg px-4 py-2 font-mono text-sm font-semibold transition-all duration-200
-              ${
-                activeTab === tab.id
-                  ? 'bg-[#00843D] text-white shadow-md dark:bg-yellow-400 dark:text-zinc-900'
-                  : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
-              }
-            `}
-          >
-            <span className="hidden sm:inline">{tab.label}</span>
-            <span className="sm:hidden">{tab.shortLabel}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
 
 // Main page component
 
 export default function Projects() {
-  const [activeOrg, setActiveOrg] = useState('aossie')
-  const[sortOrder, setSortOrder] = useState('a-z') // Added sort state
-  const currentTab = ORG_TABS.find((t) => t.id === activeOrg)
-    
-// Sort Logic added 
-  const filteredProjects = projects
-    .filter(currentTab.filter)
-    .slice()
-    .sort((a, b) => {
-      if (sortOrder === 'a-z') return a.name.localeCompare(b.name);
-      if (sortOrder === 'z-a') return b.name.localeCompare(a.name);
-      if (sortOrder === 'length-asc') return a.name.length - b.name.length;
-      if (sortOrder === 'length-desc') return b.name.length - a.name.length;
-      return 0; // default order
-    })
-
-
   return (
     <>
       <Container className="mt-20 mb-28">
         <Container.Inner>
             <ProjectSection />
-                          
-            {/* Added a layout to align Tabs and Sorting Dropdown perfectly */}
-            <div className="flex flex-col justify-between items-center mb-8 gap-6">
-              <div className="w-full md:w-1/4 hidden md:block"></div> {/* Spacer for perfect alignment */}
-              
-              <div className="w-full md:w-auto flex justify-center">
-                <OrgTabs activeTab={activeOrg} onTabChange={setActiveOrg} />
-              </div>
-
-              <div className="w-full flex justify-center">
-                <div className="flex items-center gap-2">
-                  <label htmlFor="sort-select" className="text-sm font-semibold text-zinc-600 dark:text-zinc-400 font-mono">
-                    Sort By:
-                  </label>
-                  <select
-                    id="sort-select"
-                    value={sortOrder}
-                    onChange={(e) => setSortOrder(e.target.value)}
-                    className="rounded-lg border border-zinc-200 bg-zinc-100 px-3 py-2 text-sm font-mono font-semibold text-zinc-600 outline-none transition-all duration-200 focus:border-[#00843D] dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:focus:border-yellow-400 cursor-pointer"
-                  >
-                    <option value="a-z">Name (A-Z)</option>
-                    <option value="z-a">Name (Z-A)</option>
-                    <option value="length-asc">Name Length (Asc)</option>
-                    <option value="length-desc">Name Length (Desc)</option>
-                    <option value="default">Default</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-
-
-          <AnimatePresence mode="wait">
             <motion.div
-              key={`${activeOrg}-${sortOrder}`}
               initial={{ opacity: 0, y: 12 }}
               animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -8 }}
               transition={{ duration: 0.3 }}
               >
               <div className="mb-16 grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
-                {filteredProjects.map((product) => (
+                 {projects.map((product) => (
                   <CardProduct key={product.slug || product.name} product={product} />
                 ))}
               </div>
             </motion.div>
-          </AnimatePresence>
 
           {/* 
           <div className="mb-20">

From a9ab04c5c6e0fdec4e1e176acf558063bf66a467 Mon Sep 17 00:00:00 2001
From: Saksham Jain <reach2saksham2004@gmail.com>
Date: Thu, 12 Mar 2026 21:59:25 +0530
Subject: [PATCH 3/3] fix: normalize legacy project data to include slug and
 links

---
 src/helper/projects.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/helper/projects.js b/src/helper/projects.js
index de354ebe..08f3cfe2 100644
--- a/src/helper/projects.js
+++ b/src/helper/projects.js
@@ -277,6 +277,7 @@ const projects = [
     discordLink: 'https://discord.gg/xnmAPS7zqB',
   },
   {
+    slug: 'agora-blockchain',
     name: 'Agora Blockchain',
     description:
       'There isn’t just one voting algorithm, there’s hundreds. Therefore, we developed Agora to allow for democratic elections using any algorithm.',
@@ -286,45 +287,60 @@ const projects = [
     },
     logo: AgoraLogo,
     status: 'ongoing',
-    category: 'Ongoing'
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Agora-Blockchain', 
+    discordLink: 'https://discord.gg/xnmAPS7zqB', 
   },
   {
+    slug: 'eduaid',
     name: 'EduAid',
     description:
       'An online tool that can generate short quizzes on input educational content can be of great use to teachers and students alike as it can help retain important information, frame questions and quickly revise large chunks of content.',
     link: { href: 'https://github.com/AOSSIE-Org/EduAid', label: 'EduAid' },
     logo: DefaultLogo,
     status: 'ongoing',
-    category: 'Ongoing'
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/EduAid', 
+    discordLink: 'https://discord.gg/xnmAPS7zqB', 
   },
   {
+    slug: 'openchat',
     name: 'OpenChat',
     description:
       'a decentralised platform for secure and private messaging and file sharing built on top of blockchain',
     link: { href: '#', label: 'OpenChat' },
     logo: DefaultLogo,
     status: 'ongoing',
-    category: 'Ongoing'
+    category: 'Ongoing',
+    githubLink: '#', 
+    discordLink: 'https://discord.gg/xnmAPS7zqB', 
   },
   {
+    slug: 'resonate',
     name: 'Resonate',
     description:
       'With the rising popularity of social voice platforms such as Clubhouse, it is high time for an Open Source alternative. A platform like this would not only enhance credibility within the open-source community but also attract more users and foster growth.  ',
     link: { href: 'https://github.com/AOSSIE-Org/Resonate', label: 'Resonate' },
     logo: ResonateLogo,
     status: 'ongoing',
-    category: 'Ongoing'
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Resonate', 
+    discordLink: 'https://discord.gg/xnmAPS7zqB', 
   },
   {
+    slug: 'monumento',
     name: 'Monumento',
     description:
       'Monumento is an AR-integrated social app that transforms how you connect with the world’s most iconic landmarks. Through Monumento, you can check in to popular monuments, explore famous sites, and discover new people, all within a social platform.',
     link: { href: 'https://github.com/AOSSIE-Org/Monumento', label: 'Monumento' },
     logo: MonumentoLogo,
     status: 'ongoing',
-    category: 'Ongoing'
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Monumento', 
+    discordLink: 'https://discord.gg/xnmAPS7zqB', 
   },
   {
+    slug: 'social-street-smart',
     name: 'Social Street Smart',
     description:
       'With the adevent of Internet, the problems faced by the people have also grown. These include abusive languages.',
@@ -334,7 +350,9 @@ const projects = [
     },
     logo: SSSLogo,
     status: 'ongoing',
-    category: 'Ongoing'
+    category: 'Ongoing',
+    githubLink: 'https://github.com/AOSSIE-Org/Social-Street-Smart', 
+    discordLink: 'https://discord.gg/xnmAPS7zqB', 
   },
   {
     slug: 'agora-web',