project by category

components/project/project-card.tsx

@@ -40,7 +40,7 @@ const tagCardVariants = cva(
   }
 )
 const projectCardVariants = cva(
-  "flex cursor-pointer flex-col overflow-hidden rounded-lg transition duration-200 ease-in border border-transparent hover:border-anakiwa-500",
+  "flex flex-col overflow-hidden rounded-lg transition duration-200 ease-in border border-transparent",
   {
     variants: {
       showLinks: {
@@ -77,9 +77,6 @@ export default function ProjectCard({
         "group",
         projectCardVariants({ showLinks, border, className })
       )}
-      onClick={() => {
-        router.push(`/projects/${id}`)
-      }}
     >
       {showBanner && (
         <div className="relative flex flex-col border-b border-black/10">
@@ -88,7 +85,7 @@ export default function ProjectCard({
             alt={`${name} banner`}
             width={1200}
             height={630}
-            className="min-h-[160px] w-full overflow-hidden rounded-t-lg border-none object-cover"
+            className="h-[160px] w-full overflow-hidden rounded-t-lg border-none object-cover"
           />
           {!image && (
             <span className="absolute w-full px-5 text-xl font-bold text-center text-black -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
@@ -99,7 +96,14 @@ export default function ProjectCard({
       )}
       <div className="flex flex-col justify-between h-full gap-8 p-4 bg-white rounded-b-lg">
         <div className="flex flex-col justify-start gap-2">
-          <h1 className="text-2xl font-bold leading-7 text-black">{name}</h1>
+          <h1
+            className="text-2xl font-bold leading-7 text-black duration-200 cursor-pointer hover:text-anakiwa-500"
+            onClick={() => {
+              router.push(`/projects/${id}`)
+            }}
+          >
+            {name}
+          </h1>
           {projectContent?.tldr && (
             <div className="flex flex-col h-24 gap-4">
               <p className="text-slate-900/80 line-clamp-4">

components/project/project-filters-bar.tsx

@@ -16,6 +16,8 @@ import { useDebounce } from "react-use"
 
 import { IThemeStatus, IThemesButton, LangProps } from "@/types/common"
 import {
+  ProjectCategories,
+  ProjectCategory,
   ProjectSectionLabelMapping,
   ProjectSections,
   ProjectStatus,
@@ -134,8 +136,8 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
     queryString,
     activeFilters,
     onFilterProject,
-    currentSection,
-    setCurrentSection,
+    currentCategory,
+    setCurrentCategory,
   } = useProjectFiltersState((state) => state)
 
   useEffect(() => {
@@ -309,25 +311,25 @@ export default function ProjectFiltersBar({ lang }: LangProps["params"]) {
             <div
               className={cn(
                 "relative block px-2 py-1 text-sm font-medium uppercase transition-colors cursor-pointer hover:text-primary",
-                currentSection == null
+                currentCategory == null
                   ? "text-sky-400 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-sky-400"
                   : ""
               )}
-              onClick={() => setCurrentSection(null)}
+              onClick={() => setCurrentCategory(null)}
             >
               All
             </div>
-            {ProjectSections.map((key) => {
+            {ProjectCategories.map((key) => {
               return (
                 <div
                   key={key}
                   className={cn(
                     "relative block px-2 py-1 text-sm font-medium uppercase transition-colors cursor-pointer hover:text-primary",
-                    currentSection === key
+                    currentCategory === key
                       ? "text-sky-400 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-sky-400"
                       : ""
                   )}
-                  onClick={() => setCurrentSection(key)}
+                  onClick={() => setCurrentCategory(key as ProjectCategory)}
                 >
                   {key}
                 </div>

components/project/project-link.tsx

@@ -1,7 +1,5 @@
 "use client"
 
-import Image from "next/image"
-
 import { ProjectLinkWebsite } from "@/lib/types"
 
 import { ProjectLinkIconMap } from "./project-links"

components/project/project-list.tsx

@@ -8,6 +8,9 @@ import { cva } from "class-variance-authority"
 
 import { LangProps } from "@/types/common"
 import {
+  ProjectCategories,
+  ProjectCategory,
+  ProjectCategoryLabelMapping,
   ProjectSection,
   ProjectSectionDescriptionMapping,
   ProjectSectionLabelMapping,
@@ -47,7 +50,7 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   const [isManualScroll, setIsManualScroll] = useState(false)
   const [isMounted, setIsMounted] = useState(false)
 
-  const { projects, currentSection } = useProjectFiltersState((state) => state)
+  const { projects, currentCategory } = useProjectFiltersState((state) => state)
 
   const noItems = projects?.length === 0
 
@@ -95,17 +98,17 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
   // loading state skeleton
   if (!isMounted) {
     return (
-      <div className="grid items-start justify-between w-4/5 grid-cols-1 gap-8 md:grid-cols-4 md:gap-10">
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+      <div className="grid items-start justify-between w-full grid-cols-1 gap-2 md:grid-cols-4 md:gap-6">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
-        <div className="min-h-[420px] border border-gray-200 rounded-lg overflow-hidden">
+        <div className="min-h-[380px] border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-300 animate-pulse h-[180px] w-full"></div>
         </div>
       </div>
@@ -114,33 +117,34 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
 
   if (noItems) return <NoResults lang={lang} />
 
+  console.log("ProjectCategories", ProjectCategories)
+
   return (
     <div className="relative grid items-start justify-between grid-cols-1">
       <div className="flex flex-col">
-        {ProjectSections.map((section, index) => {
+        {ProjectCategories.map((category: any, index: number) => {
           const sectionProjects =
-            projects.filter(
-              (project) =>
-                project.section?.toLowerCase() === section?.toLowerCase()
-            ) ?? []
+            projects.filter((project) => project.category === category) ?? []
 
           const hasProjectsForSection = sectionProjects.length > 0
 
           const sectionTitle =
-            ProjectSectionLabelMapping[section as ProjectSection]
+            ProjectCategoryLabelMapping[category as ProjectCategory]
+
           const sectionDescription =
-            ProjectSectionDescriptionMapping[section as ProjectSection]
+            // @ts-ignore
+            ProjectSectionDescriptionMapping[category as any]
 
           // todo: filter by project section
           if (!hasProjectsForSection) return null
 
-          const showTitle = ["archived"].includes(section)
+          const showTitle = ["archived"].includes(category)
 
           return (
             <div
-              key={section}
-              id={section}
-              data-section={section}
+              key={category}
+              id={category}
+              data-section={category}
               className="flex justify-between gap-10"
             >
               <div
@@ -148,8 +152,8 @@ export const ProjectList = ({ lang }: LangProps["params"]) => {
                   "flex w-full flex-col",
                   hasProjectsForSection ? "gap-6 md:gap-10" : "gap-2",
                   showTitle
-                    ? currentSection == null && "pt-[120px]"
-                    : index > 0 && currentSection == null
+                    ? currentCategory == null && "pt-[120px]"
+                    : index > 0 && currentCategory == null
                     ? "pt-10"
                     : ""
                 )}

components/project/project-result-bar.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "@/app/i18n/client"
 import { CategoryTag } from "../ui/categoryTag"
 import { Dropdown } from "../ui/dropdown"
 
-const labelClass = "h-5 text-xs text-base md:h-6 text-slate-900/70 md:text-lg"
+const labelClass = "h-5 text-xs text-base md:h-6 text-slate-900/70 md:text-sm"
 
 export const ProjectResultBar = ({ lang }: LangProps["params"]) => {
   const { t } = useTranslation(lang, "common")

config/site.ts

@@ -30,5 +30,5 @@ export const siteConfig = {
   addGithubResource:
     "https://github.com/privacy-scaling-explorations/website-v2/blob/main/app/%5Blang%5D/content/resources.md",
   editProjectPage: (id: string, locale = "en") =>
-    `https://github.com/privacy-scaling-explorations/pse.dev/blob/main/app/i18n/locales/${locale}/projects/${id}.json`,
+    `https://github.com/privacy-scaling-explorations/pse.dev/blob/main/data/projects/${id}.ts`,
 }

data/projects/anon-aadhaar.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -7,25 +12,25 @@ const content: ProjectContent = {
 ### Overview
 
 Anon Aadhaar is a project that allows Aadhaar ID holders to prove their Indian residency, optionally revealing some aspects of their identity while hiding the others. The project provides ZK Circuits, SDK for Javascript and Solidity, a demo application, and integrates with the PCD framework for a better developer experience.
-    
+
 ### Features
 
 Anon Aadhaar is a zero knowledge protocol that let Aadhaar owners prove their identity in a privacy preserving way.
 Key features include:
 - **Selective Disclosure**:  If your app request to reveal one of the field from the identity the circuit will reveal it in its output. There only four fields that could be revealed (Age > 18, Gender, State, Pincode). Note that by default the Prover will reveal nothing from the ID.
-- **Nullifier**: Nullifier is a unique identifiers derived from data fields, used to prevent double-spending or duplicate proofs without revealing the actual data. 
-- **Timestamp**: The timestamp of the signature associated with the data is converted into a UNIX UTC format, enabling Timebased One Time Passord verification at the verifier level. 
-  
+- **Nullifier**: Nullifier is a unique identifiers derived from data fields, used to prevent double-spending or duplicate proofs without revealing the actual data.
+- **Timestamp**: The timestamp of the signature associated with the data is converted into a UNIX UTC format, enabling Timebased One Time Passord verification at the verifier level.
+
 The protocol is served through an SDK containing:
 - TypeScript Library: [@anon-aadhaar/core](https://www.npmjs.com/package/@anon-aadhaar/core)
 - Solidity Library: [@anon-aadhaar/contracts](https://www.npmjs.com/package/@anon-aadhaar/contracts)
 - React Library: [@anon-aadhaar/react](https://www.npmjs.com/package/@anon-aadhaar/react)
-  
+
 You can play with our **mobile prover**, which offer a faster proving time:
 - [Anon Aadhaar React Native](https://github.com/anon-aadhaar/anon-aadhaar-react-native)
 
 We developed a prover for [Digilocker](https://www.digilocker.gov.in/), that let you generate ZKPs from official documents stored in the Digolocker App, enabling use cases with proof of degrees, UPI, driver license and more.
-  
+
 ### Applications:
 - Quick Setup - [Website](https://anon-aadhaar-quick-setup.vercel.app/) | [GitHub](https://github.com/anon-aadhaar/quick-setup)
 - Boilerplate On-Chain Voting App - [Website](https://boilerplate.anon-aadhaar.pse.dev/) | [GitHub](https://github.com/anon-aadhaar/boilerplate)
@@ -36,7 +41,7 @@ We developed a prover for [Digilocker](https://www.digilocker.gov.in/), that let
 
 export const anonAadhaar: ProjectInterface = {
   id: "anon-aadhaar",
-  section: "pse",
+  category: ProjectCategory.APPLICATION,
   content,
   projectStatus: ProjectStatus.ACTIVE,
   image: "anon-aadhaar.svg",

data/projects/anon-klub.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const anonKlub: ProjectInterface = {
   id: "anon-klub",
-  section: "archived",
+  category: ProjectCategory.APPLICATION,
   content,
   projectStatus: ProjectStatus.INACTIVE,
   image: "anonklub.svg",

data/projects/bandada.ts

@@ -1,13 +1,18 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
     tldr: "An open-source tool for managing privacy-preserving groups of anonymous individuals.",
     description: `### Overview
 
-[Bandada](https://bandada.pse.dev/) is a project designed to simplify the management of privacy-preserving groups. It is aimed at developers who want to build privacy-based applications and integrate anonymity sets, as well as non-developers working in DAOs, governments, international institutions, non-profit organizations, and associations that want to create and manage anonymous groups. 
+[Bandada](https://bandada.pse.dev/) is a project designed to simplify the management of privacy-preserving groups. It is aimed at developers who want to build privacy-based applications and integrate anonymity sets, as well as non-developers working in DAOs, governments, international institutions, non-profit organizations, and associations that want to create and manage anonymous groups.
 
-Bandada offers a plug-and-play infrastructure, reducing the time and complexity required for managing anonymity sets. It enables anonymous signaling, such as voting, messaging, logging in, or endorsing, in various use cases like private organizations, GitHub repository contributors, and groups of wallets holding a specific NFT. 
+Bandada offers a plug-and-play infrastructure, reducing the time and complexity required for managing anonymity sets. It enables anonymous signaling, such as voting, messaging, logging in, or endorsing, in various use cases like private organizations, GitHub repository contributors, and groups of wallets holding a specific NFT.
 
 ### Features
 
@@ -21,7 +26,7 @@ Bandada offers a plug-and-play infrastructure, reducing the time and complexity
 
 ### Background
 
-In Spanish, "Bandada" means "flock" or "group” of birds or animals moving together in a coordinated manner. Groups are an important concept when we speak about privacy and zero-knowledge technologies, they can be thought of as anonymity sets. Credentials are a way to establish necessary trust between a set of participants while letting users keep control over how their identities are stored and used. 
+In Spanish, "Bandada" means "flock" or "group” of birds or animals moving together in a coordinated manner. Groups are an important concept when we speak about privacy and zero-knowledge technologies, they can be thought of as anonymity sets. Credentials are a way to establish necessary trust between a set of participants while letting users keep control over how their identities are stored and used.
 
 Bandada allows you to create groups and establish trust within the participants by ensuring that everyone who joins the group must meet the credential requirements.
 
@@ -59,7 +64,7 @@ Bandada also provides a preset of credential validators that can be extended wit
 
 export const bandada: ProjectInterface = {
   id: "bandada",
-  section: "pse",
+  category: ProjectCategory.APPLICATION,
   content,
   projectStatus: ProjectStatus.ACTIVE,
   image: "bandada.webp",

data/projects/channel-4.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const channel4: ProjectInterface = {
   id: "channel-4",
-  section: "archived",
   content,
   projectStatus: ProjectStatus.INACTIVE,
   image: "channel4.svg",

data/projects/chiquito.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const chiquito: ProjectInterface = {
   id: "chiquito",
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/coco.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const Coco: ProjectInterface = {
   id: "coco",
-  section: "archived",
   image: "coco.svg",
   name: "COCO",
   projectStatus: ProjectStatus.INACTIVE,

data/projects/cryptkeeper.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const cryptkeeper: ProjectInterface = {
   id: "cryptkeeper",
-  section: "archived",
   projectStatus: ProjectStatus.INACTIVE,
   content,
   image: "cryptkeeper.webp",

data/projects/discreetly.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const discreetly: ProjectInterface = {
   id: "discreetly",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "discreetly.svg",

data/projects/dsl-working-group.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const dslWorkingGroup: ProjectInterface = {
   id: "dsl-working-group",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/ecip-halo2.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,8 +14,8 @@ const content: ProjectContent = {
 
 export const ECIPHalo2: ProjectInterface = {
   id: "ecip-halo2",
-  section: "pse",
   image: "",
+  category: ProjectCategory.DEVTOOLS,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   imageAlt: "ECIP + Halo 2",

data/projects/eigen-trust.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const eigenTrust: ProjectInterface = {
   id: "eigen-trust",
-  section: "archived",
   projectStatus: ProjectStatus.INACTIVE,
   content,
   image: "",

data/projects/excubiae.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -21,7 +26,7 @@ We're actively developing on the official [Excubiae repository](https://github.c
 
 export const excubiae: ProjectInterface = {
   id: "excubiae",
-  section: "pse",
+  category: ProjectCategory.APPLICATION,
   content,
   projectStatus: ProjectStatus.ACTIVE,
   image: "",

data/projects/interep.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const Interep: ProjectInterface = {
   id: "interep",
-  section: "archived",
   image: "interep.svg",
   name: "Interep",
   projectStatus: ProjectStatus.INACTIVE,

data/projects/jubmoji.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const jubmoji: ProjectInterface = {
   id: "jubmoji",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/maci-platform.ts

@@ -1,11 +1,16 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
     tldr: "Run a voting round in your community! Forked from EasyRetroPGF and enhanced with MACI for privacy, anti-bribery and anti-collusion",
     description: `### Overview
 
-[MACI Platform](https://github.com/privacy-scaling-explorations/maci-platform/tree/main) is an implementation of EasyRetroPGF with MACI. 
+[MACI Platform](https://github.com/privacy-scaling-explorations/maci-platform/tree/main) is an implementation of EasyRetroPGF with MACI.
 
 This project enables any community, organization or ecosystem to run a voting round.
 It is highly configurable to enable different voting mechanisms (quadratic voting, quadratic funding, etc), gating mechanisms (token based, attestation based, hats-based, etc) and an easy-to-use UI for both round organizers and voters.
@@ -22,7 +27,7 @@ With MACI Platform, you can run different kind of voting rounds for your communi
 
 export const maciPlatform: ProjectInterface = {
   id: "maci-platform",
-  section: "pse",
+  category: ProjectCategory.APPLICATION,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "maci-platform.png",

data/projects/maci.ts

@@ -1,17 +1,22 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
     tldr: "An on-chain voting solution that protects privacy and minimizes the risk of collusion and bribery",
     description: `### Overview
 
-[MACI](https://github.com/privacy-scaling-explorations/maci/tree/dev) is a protocol designed to provide a highly secure e-voting solution. 
+[MACI](https://github.com/privacy-scaling-explorations/maci/tree/dev) is a protocol designed to provide a highly secure e-voting solution.
 
-It enables organisations to conduct on-chain voting processes with a significantly reduced risk of cheating, such as bribery or collusion. 
+It enables organisations to conduct on-chain voting processes with a significantly reduced risk of cheating, such as bribery or collusion.
 
-MACI uses zero-knowledge proofs to implement a receipt-free voting scheme, making it impossible for anyone other than the vote coordinator to verify how a specific user voted. This ensures the correct execution of votes and allows anyone to verify the results. 
+MACI uses zero-knowledge proofs to implement a receipt-free voting scheme, making it impossible for anyone other than the vote coordinator to verify how a specific user voted. This ensures the correct execution of votes and allows anyone to verify the results.
 
-It's particularly beneficial for governance and funding events, where its anti-collusion mechanisms help ensure fair and transparent outcomes. 
+It's particularly beneficial for governance and funding events, where its anti-collusion mechanisms help ensure fair and transparent outcomes.
 
 Please refer to MACI's [documentation](https://maci.pse.dev) for more details.
 
@@ -27,7 +32,7 @@ With MACI, you can take on chain voting to the next level:
 
 export const maci: ProjectInterface = {
   id: "maci",
-  section: "pse",
+  category: ProjectCategory.APPLICATION,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "maci.png",

data/projects/mopro.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -34,7 +39,7 @@ Developer Capabilities:
 export const mopro: ProjectInterface = {
   id: "mopro",
   content,
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   projectStatus: ProjectStatus.ACTIVE,
   image: "mopro.png",
   license: "MIT",

data/projects/mpc-stats.ts

@@ -1,10 +1,10 @@
-import { ProjectInterface, ProjectStatus } from "@/lib/types"
+import { ProjectCategory, ProjectInterface, ProjectStatus } from "@/lib/types"
 
 export const mpcStats: ProjectInterface = {
   id: "mpc-stats",
   image: "mpc-stats.png",
   name: "MPCStats",
-  section: "pse",
+  category: ProjectCategory.APPLICATION,
   projectStatus: ProjectStatus.ACTIVE,
   content: {
     en: {
@@ -32,4 +32,4 @@ MPCStats is a framework that enables data consumers to query statistical computa
     types: ["Legos/dev tools", "Lego sets/toolkits"],
     builtWith: ["MP-SPDZ", "tlsn", "python"],
   },
-}
+}

data/projects/mpc.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -21,7 +26,7 @@ You can find the detail of the protocol [here](https://eprint.iacr.org/2024/264)
 
 export const mpc: ProjectInterface = {
   id: "MPC",
-  section: "pse",
+  category: ProjectCategory.RESEARCH,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/nfctap.ts

@@ -11,7 +11,6 @@ NFC activations at SBC and FtC residency
 
 export const nfctap: ProjectInterface = {
   id: "nfctap",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/openpassport.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const OpenPassport: ProjectInterface = {
   id: "openpassport",
-  section: "grant",
+  category: ProjectCategory.APPLICATION,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "openpassport.jpg",

data/projects/p0tion.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const p0tion: ProjectInterface = {
   id: "p0tion",
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "p0tion.png",

data/projects/p256.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const p256: ProjectInterface = {
   id: "p256",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/pollen-labs.ts

@@ -24,7 +24,6 @@ const content: ProjectContent = {
 export const pollenLabs: ProjectInterface = {
   id: "pollen-labs",
   content,
-  section: "archived",
   projectStatus: ProjectStatus.INACTIVE,
   image: "pollen-labs.svg",
   name: "Pollen Labs",

data/projects/powers-of-tau.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const PerpetualPowersOfTau: ProjectInterface = {
   id: "perpetual-powers-of-tau",
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   image: "powers-of-tau.png",
   name: "Perpetual Powers of Tau",
   projectStatus: ProjectStatus.ACTIVE,

data/projects/pse-security.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const pseSecurity: ProjectInterface = {
   id: "pse-security",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "pse-security.png",

data/projects/rln.ts

@@ -12,7 +12,6 @@ Rate-Limiting Nullifier (RLN) is a protocol designed to combat spam and denial o
 export const rln: ProjectInterface = {
   id: "rln",
   content,
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   image: "rln.svg",
   name: "Rate-Limiting Nullifier",

data/projects/semaphore.ts

@@ -1,17 +1,22 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
     tldr: "A zero-knowledge protocol for anonymous interactions.",
     description: `### Overview
 
-[Semaphore](https://semaphore.pse.dev/) is a generic privacy layer. Leveraging zero-knowledge technology, users can prove their membership in groups and send messages (extending from votes to endorsements) 
+[Semaphore](https://semaphore.pse.dev/) is a generic privacy layer. Leveraging zero-knowledge technology, users can prove their membership in groups and send messages (extending from votes to endorsements)
 off-chain or across EVM-compatible blockchains, all without revealing their personal identity. Use cases include private voting, whistleblowing, anonymous DAOs, and mixers.
 
 Semaphore is designed to be a simple and generic privacy layer for decentralized applications (dApps). It encourages modular application design, allowing
 dApp developers to choose and customize the on-chain and off-chain components they need.
 
-The core of the protocol is the circuit logic. In addition to circuits, Semaphore provides [Solidity contracts](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts) and 
+The core of the protocol is the circuit logic. In addition to circuits, Semaphore provides [Solidity contracts](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts) and
 [JavaScript libraries](https://github.com/semaphore-protocol/semaphore/tree/main#-packages) that allow developers to generate zero-knowledge proofs and verify them with minimal effort.
 
 ### Features
@@ -41,7 +46,7 @@ As a Semaphore contributor, you'll be able to claim a special GitPOAP per year
 
 export const semaphore: ProjectInterface = {
   id: "semaphore",
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "semaphore.webp",

data/projects/summa.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const summa: ProjectInterface = {
   id: "summa",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "summa.svg",

data/projects/tlsn.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -11,8 +16,8 @@ const content: ProjectContent = {
 
 export const tlsn: ProjectInterface = {
   id: "tlsn",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
+  category: ProjectCategory.DEVTOOLS,
   content,
   image: "tlsn.webp",
   name: "TLSNotary",

data/projects/trusted-setups.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const trustedSetups: ProjectInterface = {
   id: "trusted-setups",
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "trusted-setups.svg",

data/projects/unirep-protocol.ts

@@ -39,7 +39,6 @@ Key UniRep features include:
 export const unirepProtocol: ProjectInterface = {
   id: "unirep-protocol",
   content,
-  section: "archived",
   projectStatus: ProjectStatus.INACTIVE,
   image: "unirep.svg",
   license: "MIT",

data/projects/voice-deck.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const voicedeck: ProjectInterface = {
   id: "voice-deck",
-  section: "collaboration",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "voiceDeck.svg",

data/projects/wax.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -11,8 +16,8 @@ const content: ProjectContent = {
 
 export const wax: ProjectInterface = {
   id: "wax",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
+  category: ProjectCategory.DEVTOOLS,
   content,
   image: "wax.webp",
   name: "Wallet Account eXperiments - WAX",

data/projects/zk-email.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,7 +14,7 @@ const content: ProjectContent = {
 
 export const zkemail: ProjectInterface = {
   id: "zk-email",
-  section: "collaboration",
+  category: ProjectCategory.APPLICATION,
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "zk-email.jpeg",

data/projects/zk-id.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const zkID: ProjectInterface = {
   id: "zk-id",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "",

data/projects/zk-kit.ts

@@ -1,40 +1,45 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
     tldr: "A set of reusable libraries for zero-knowledge technologies.",
     description: `### Overview
 
-ZK-Kit is an innovative toolkit that provides reference implementations of cryptographic primitives across multiple 
-programming languages. It is designed to streamline the development of production-level projects involving zero-knowledge 
+ZK-Kit is an innovative toolkit that provides reference implementations of cryptographic primitives across multiple
+programming languages. It is designed to streamline the development of production-level projects involving zero-knowledge
 proofs (ZKPs), offering developers a robust foundation for building secure and efficient applications.
-    
+
 ### Motivations
 
-One of the primary motivations behind ZK-Kit is to address a common challenge in the cryptographic development space: 
-the tendency to reinvent the wheel with each new project. Cryptographic primitives, especially those related to zero-knowledge 
-proofs, are complex and require deep expertise to implement correctly. By providing ready-to-use, well-tested implementations, 
-ZK-Kit allows developers to focus on their specific application logic rather than spending valuable time and resources on 
+One of the primary motivations behind ZK-Kit is to address a common challenge in the cryptographic development space:
+the tendency to reinvent the wheel with each new project. Cryptographic primitives, especially those related to zero-knowledge
+proofs, are complex and require deep expertise to implement correctly. By providing ready-to-use, well-tested implementations,
+ZK-Kit allows developers to focus on their specific application logic rather than spending valuable time and resources on
 recreating fundamental building blocks.
 
-It also aims to foster a collaborative community where developers can engage in open discussions, share insights, 
-and tackle complex challenges in cryptography. By creating an environment that encourages knowledge exchange and 
-innovation, ZK-Kit aspires to become a hub for cryptographic advancement, empowering developers to experiment, 
+It also aims to foster a collaborative community where developers can engage in open discussions, share insights,
+and tackle complex challenges in cryptography. By creating an environment that encourages knowledge exchange and
+innovation, ZK-Kit aspires to become a hub for cryptographic advancement, empowering developers to experiment,
 contribute, and drive progress in privacy-focused technologies.
 
 ### Key aspects
 
-One of ZK-Kit's standout features is its commitment to providing a consistent developer experience 
-across various programming languages. By maintaining a common API structure, ZK-Kit enables developers to switch 
-languages effortlessly. 
-Additionally, ZK-Kit emphasizes code quality and reliability through rigorous code checks, integrating linters, 
+One of ZK-Kit's standout features is its commitment to providing a consistent developer experience
+across various programming languages. By maintaining a common API structure, ZK-Kit enables developers to switch
+languages effortlessly.
+Additionally, ZK-Kit emphasizes code quality and reliability through rigorous code checks, integrating linters,
 formatters, comprehensive testing, and regular audits, ensuring robust and maintainable code throughout development.`,
   },
 }
 
 export const ZKKit: ProjectInterface = {
   id: "zk-kit",
-  section: "pse",
+  category: ProjectCategory.DEVTOOLS,
   image: "zk-kit.svg",
   name: "ZK-Kit",
   projectStatus: ProjectStatus.ACTIVE,

data/projects/zkevm-community.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const zkevmCommunity: ProjectInterface = {
   id: "zkevm-community",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   content,
   image: "zkevm.jpg",

data/projects/zkitter.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const zkitter: ProjectInterface = {
   id: "zkitter",
-  section: "archived",
   projectStatus: ProjectStatus.INACTIVE,
   content,
   image: "zkitter.webp",

data/projects/zkml.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const zkml: ProjectInterface = {
   id: "zkml",
-  section: "pse",
   projectStatus: ProjectStatus.ACTIVE,
   image: "zkml.png",
   name: "ZKML",

data/projects/zkopru.ts

@@ -9,7 +9,6 @@ const content: ProjectContent = {
 
 export const Zkopru: ProjectInterface = {
   id: "zkopru",
-  section: "archived",
   image: "zkopru.svg",
   name: "ZKOPRU",
   projectStatus: ProjectStatus.INACTIVE,

data/projects/zkp2p.ts

@@ -1,4 +1,9 @@
-import { ProjectContent, ProjectInterface, ProjectStatus } from "@/lib/types"
+import {
+  ProjectCategory,
+  ProjectContent,
+  ProjectInterface,
+  ProjectStatus,
+} from "@/lib/types"
 
 const content: ProjectContent = {
   en: {
@@ -9,8 +14,8 @@ const content: ProjectContent = {
 
 export const zkp2p: ProjectInterface = {
   id: "zkp2p",
-  section: "grant",
   projectStatus: ProjectStatus.ACTIVE,
+  category: ProjectCategory.APPLICATION,
   content,
   image: "zkp2p.webp",
   name: "ZKP2P",

lib/types.ts

@@ -1,5 +1,12 @@
 import { ReactNode } from "react"
 
+export enum ProjectCategory {
+  APPLICATION = "APPLICATION",
+  DEVTOOLS = "DEVTOOLS",
+  RESEARCH = "RESEARCH",
+}
+
+export const ProjectCategories = Object.values(ProjectCategory) as string[]
 // list of project groups
 export const ProjectSections = [
   "pse",
@@ -18,6 +25,12 @@ export interface Faq {
   answer: ReactNode
 }
 
+export const ProjectCategoryLabelMapping: Record<ProjectCategory, string> = {
+  [ProjectCategory.APPLICATION]: "DEVTOOLS",
+  [ProjectCategory.DEVTOOLS]: "APPLICATIONS",
+  [ProjectCategory.RESEARCH]: "RESEARCH",
+}
+
 export const ProjectSectionLabelMapping: Record<ProjectSection, string> = {
   pse: "PSE projects",
   grant: "Grants",
@@ -96,8 +109,8 @@ export interface ProjectInterface {
   id: string
   hasWiki?: boolean // show project with wiki page template
   license?: string
-  content: ProjectContent // project tldr and description with support for multiple language
-  section: ProjectSection
+  content: ProjectContent //  project tldr and description with support for multiple language
+  category?: ProjectCategory // project category used as filter to replace section
   image: string
   previousBrandImage?: string
   imageAlt?: string

state/useProjectFiltersState.ts

@@ -3,7 +3,7 @@ import Fuse from "fuse.js"
 import i18next from "i18next"
 import { create } from "zustand"
 
-import { ProjectInterface } from "@/lib/types"
+import { ProjectCategory, ProjectInterface } from "@/lib/types"
 import { uniq } from "@/lib/utils"
 import { LocaleTypes, fallbackLng } from "@/app/i18n/settings"
 
@@ -55,7 +55,7 @@ interface ProjectStateProps {
   filters: FiltersProps
   activeFilters: Partial<FiltersProps>
   queryString: string
-  currentSection: string | null
+  currentCategory: ProjectCategory | null
 }
 
 interface SearchMatchByParamsProps {
@@ -76,7 +76,7 @@ interface ProjectActionsProps {
   onFilterProject: (searchPattern: string) => void
   onSelectTheme: (theme: string, searchPattern?: string) => void
   sortProjectBy: (sortBy: ProjectSortBy) => void
-  setCurrentSection: (section: string | null) => void
+  setCurrentCategory: (section: ProjectCategory | null) => void
 }
 
 const createURLQueryString = (params: Partial<FiltersProps>): string => {
@@ -207,7 +207,7 @@ const sortProjectByFn = (
 export const useProjectFiltersState = create<
   ProjectStateProps & ProjectActionsProps
 >()((set) => ({
-  currentSection: null,
+  currentCategory: null,
   sortBy: DEFAULT_PROJECT_SORT_BY,
   projects: sortProjectByFn(projects, DEFAULT_PROJECT_SORT_BY),
   queryString: "",
@@ -298,15 +298,15 @@ export const useProjectFiltersState = create<
       }
     })
   },
-  setCurrentSection(section: string | null) {
+  setCurrentCategory(category: ProjectCategory | null) {
     set((state: any) => {
       return {
         ...state,
         projects: projects.filter((project) => {
-          if (section == null) return true // return all projects
-          return project?.section?.toLowerCase() === section
+          if (category == null) return true // return all projects
+          return project?.category === category
         }),
-        currentSection: section,
+        currentCategory: category,
       }
     })
   },