project labeled sections divider

app/[lang]/projects/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from "next"
 
 import ProjectFiltersBar from "@/components/project/project-filters-bar"
-import ProjectList from "@/components/project/project-list"
+import { ProjectList } from "@/components/project/project-list"
 import { ProjectResultBar } from "@/components/project/project-result-bar"
 import { useTranslation } from "@/app/i18n"
 

app/i18n/locales/en/common.json

@@ -45,8 +45,9 @@
     "fullyPSE": "Fully PSE"
   },
   "status": {
-    "archived": "Archived",
-    "active": "Active"
+    "archived": "Inactive",
+    "active": "Active",
+    "inactive": "Inactive"
   },
   "sortBy": "Sort by: {{option}}",
   "tryItOut": "Try it out!",

app/i18n/locales/it/common.json

@@ -40,7 +40,8 @@
   },
   "status": {
     "archived": "Archiviato",
-    "active": "Attivo"
+    "active": "Attivo",
+    "inactive": "Inattivo"
   },
   "sortBy": "Ordina per: {{option}}",
   "tryItOut": "Prova!",
@@ -63,4 +64,4 @@
   "whatDoYouWantDoToday": "Cosa vuoi fare oggi?",
   "showingProjects": "Mostrando {{count}} progetti",
   "showingProjectsWith": "Mostrando {{count}} progetti con:"
-}
+}

components/project/project-card.tsx

@@ -67,10 +67,10 @@ export default function ProjectCard({
             alt={`${name} banner`}
             width={1200}
             height={630}
-            className="min-h-[160px] w-full rounded-t-lg object-cover"
+            className="min-h-[160px] w-full overflow-hidden rounded-t-lg border-none object-cover"
           />
           {!image && (
-            <span className="w-full px-5 text-xl text-center font-bold text-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+            <span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 px-5 text-center text-xl font-bold text-black">
               {imageAlt || name}
             </span>
           )}

components/project/project-filters-bar.tsx

@@ -69,7 +69,7 @@ export const ThemesStatusMapping = (lang: LocaleTypes): IThemeStatus => {
       icon: <Icons.checkActive />,
     },
     archived: {
-      label: t("status.archived"),
+      label: t("status.inactive"),
       icon: <Icons.archived />,
     },
   }

components/project/project-list.tsx

@@ -4,12 +4,19 @@ import React from "react"
 import Image from "next/image"
 import NoResultIcon from "@/public/icons/no-result.svg"
 import { useProjectFiltersState } from "@/state/useProjectFiltersState"
+import { cva } from "class-variance-authority"
 
 import { LangProps } from "@/types/common"
+import { ProjectSection, ProjectSections } from "@/lib/types"
+import { cn } from "@/lib/utils"
 import { useTranslation } from "@/app/i18n/client"
 
 import ProjectCard from "./project-card"
 
+const sectionTitleClass = cva(
+  "relative font-sans text-base font-bold uppercase tracking-[3.36px] text-anakiwa-950 after:ml-8 after:absolute after:top-1/2 after:h-[1px] after:w-full after:translate-y-1/2 after:bg-anakiwa-300 after:content-['']"
+)
+
 const NoResults = ({ lang }: LangProps["params"]) => {
   const { t } = useTranslation(lang, "common")
 
@@ -28,25 +35,76 @@ const NoResults = ({ lang }: LangProps["params"]) => {
   )
 }
 
-export default function ProjectList({ lang }: LangProps["params"]) {
+const ProjectSectionLabelMapping: Record<ProjectSection, string> = {
+  pse: "PSE projects",
+  grant: "Grants",
+  collaboration: "Collaborations",
+}
+
+export const ProjectList = ({ lang }: LangProps["params"]) => {
+  const { t } = useTranslation(lang, "common")
+  const { t: tResource } = useTranslation(lang, "resources-page")
   const { projects } = useProjectFiltersState((state) => state)
 
   const noItems = projects?.length === 0
 
   if (noItems) return <NoResults lang={lang} />
 
   return (
-    <div className="flex flex-wrap justify-center gap-6 pb-6">
-      {projects.map((project) => (
-        <ProjectCard
-          key={project?.id}
-          project={project}
-          lang={lang}
-          showBanner
-          showLinks
-          border
-        />
-      ))}
+    <div className="relative grid grid-cols-[1fr_200px] justify-between gap-10">
+      <div className="flex flex-col gap-14 md:gap-20">
+        {ProjectSections.map((section) => {
+          const sectionProjects =
+            projects.filter(
+              (project) =>
+                project.section?.toLowerCase() === section?.toLowerCase()
+            ) ?? []
+
+          const hasProjectsForSection = sectionProjects.length > 0
+
+          const sectionTitle =
+            ProjectSectionLabelMapping[section as ProjectSection]
+
+          return (
+            <div className="flex justify-between gap-10">
+              <div
+                className={cn(
+                  "flex w-full flex-col",
+                  hasProjectsForSection ? "gap-10" : "gap-2"
+                )}
+              >
+                <div className="overflow-hidden">
+                  <h3 className={cn(sectionTitleClass())}>{sectionTitle}</h3>
+                </div>
+                <div className="flex flex-wrap gap-6">
+                  {hasProjectsForSection ? (
+                    sectionProjects.map((project) => (
+                      <ProjectCard
+                        key={project?.id}
+                        project={project}
+                        lang={lang}
+                        showBanner
+                        showLinks
+                        border
+                      />
+                    ))
+                  ) : (
+                    <span> {t("noResults")}</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      <div className="sticky top-16">
+        <div className="flex flex-col gap-4">
+          <h6 className="font-display text-lg font-bold text-tuatara-700">
+            {tResource("onThisPage")}
+          </h6>
+        </div>
+      </div>
     </div>
   )
 }

components/ui/anchor-list.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "@/app/i18n"
+
+interface AnchorListProps {
+  lang: string
+}
+
+const AnchorList = ({ lang }: AnchorListProps) => {
+  const { t } = useTranslation(lang, "resources-page")
+
+  return <div></div>
+}
+
+AnchorList.displayName = "AnchorList"
+
+export { AnchorList }

data/projects.ts

@@ -78,9 +78,6 @@ export const projects: ProjectInterface[] = [
   p0tion,
   jubmoji,
   nfctap,
-  /**
-  * Grant projects hidden until we have grant tag
   zkp2p,
   zk3,
-   */
 ]

data/projects/p0tion.ts

@@ -6,8 +6,9 @@ p0tion is an agnostic-from-ceremony public good toolkit, with the aim of making
 
 export const p0tion: ProjectInterface = {
   id: "p0tion",
+  section: "pse",
   projectStatus: "active",
-  image: "",
+  image: "p0tion.png",
   name: "p0tion",
   tldr: "Toolkit for Groth16 Phase 2 Trusted Setup ceremonies.",
   description,
@@ -16,10 +17,7 @@ export const p0tion: ProjectInterface = {
     github: "https://github.com/privacy-scaling-explorations/p0tion",
   },
   tags: {
-    keywords: [
-      "Toolkits",
-      "Infrastructure/protocol"
-    ],
+    keywords: ["Toolkits", "Infrastructure/protocol"],
     themes: ["build"],
     types: ["Legos/dev tools"],
     builtWith: [],

data/projects/p256.ts

@@ -6,6 +6,7 @@ P256 is an ERC-4337 smart contract wallet that leverages zk-SNARKs for WebAuthn
 
 export const p256: ProjectInterface = {
   id: "p256",
+  section: "pse",
   projectStatus: "active",
   image: "",
   name: "P256",

data/projects/pollen-labs.ts

@@ -6,6 +6,7 @@ Pollen Labs is driven by a mission to make a significant impact on global lives
 
 export const pollenLabs: ProjectInterface = {
   id: "pollen-labs",
+  section: "pse",
   projectStatus: "active",
   image: "pollen-labs.svg",
   name: "Pollen Labs",

data/projects/powers-of-tau.ts

@@ -1,23 +1,28 @@
-import { ProjectInterface } from "@/lib/types";
+import { ProjectInterface } from "@/lib/types"
 
 export const PerpetualPowersOfTau: ProjectInterface = {
   id: "perpetual-powers-of-tau",
-  image: "",
+  section: "pse",
+  image: "powers-of-tau.png",
   name: "Perpetual Powers of Tau",
-  tldr: 'An ongoing (since 2019) zk-SNARK trusted setup ceremony for circuits up to 2^28 constraints.',
-  description: "The Perpetual Powers of Tau is a multi-party trusted setup ceremony, rooted in the Zcash Powers of Tau. Its primary objective is the secure generation of zk-SNARK parameters for circuits accommodating up to 2^28 (260+ million) constraints. This translates to the creation of over 530 million powers of tau. The ceremony's integrity hinges on the principle that as long as one participant acts honestly and remains uncompromised, the entire setup remains trustworthy. It's a pivotal step for zk-SNARK projects, ensuring the security and privacy of the system. Those who can handle a 100Gb download and many hours of compute time are invited to join by contacting [@glamperd on Twitter](https://twitter.com/glamperd) or Telegram, or asking questions via the PSE [Discord](https://discord.com/invite/sF5CT5rzrR).",
-  projectStatus: 'active',
+  tldr: "An ongoing (since 2019) zk-SNARK trusted setup ceremony for circuits up to 2^28 constraints.",
+  description:
+    "The Perpetual Powers of Tau is a multi-party trusted setup ceremony, rooted in the Zcash Powers of Tau. Its primary objective is the secure generation of zk-SNARK parameters for circuits accommodating up to 2^28 (260+ million) constraints. This translates to the creation of over 530 million powers of tau. The ceremony's integrity hinges on the principle that as long as one participant acts honestly and remains uncompromised, the entire setup remains trustworthy. It's a pivotal step for zk-SNARK projects, ensuring the security and privacy of the system. Those who can handle a 100Gb download and many hours of compute time are invited to join by contacting [@glamperd on Twitter](https://twitter.com/glamperd) or Telegram, or asking questions via the PSE [Discord](https://discord.com/invite/sF5CT5rzrR).",
+  projectStatus: "active",
   tags: {
-    keywords: ['scaling']
+    keywords: ["scaling"],
   },
   links: {
-    github: 'https://github.com/privacy-scaling-explorations/perpetualpowersoftau',
-    website: 'https://perpetualpowersoftau.com/'
+    github:
+      "https://github.com/privacy-scaling-explorations/perpetualpowersoftau",
+    website: "https://perpetualpowersoftau.com/",
   },
   extraLinks: {
-    learn: [{
-      label: 'Announcing the Perpetual Powers of Tau Ceremony',
-      url: 'https://medium.com/coinmonks/announcing-the-perpetual-powers-of-tau-ceremony-to-benefit-all-zk-snark-projects-c3da86af8377'
-    }],
+    learn: [
+      {
+        label: "Announcing the Perpetual Powers of Tau Ceremony",
+        url: "https://medium.com/coinmonks/announcing-the-perpetual-powers-of-tau-ceremony-to-benefit-all-zk-snark-projects-c3da86af8377",
+      },
+    ],
   },
 }

data/projects/pse-security.ts

@@ -6,8 +6,9 @@ PSE Security is a division of the Privacy & Scaling Explorations team at the Eth
 
 export const pseSecurity: ProjectInterface = {
   id: "pse-security",
+  section: "pse",
   projectStatus: "active",
-  image: "",
+  image: "pse-security.png",
   name: "PSE Security",
   tldr: "Proactively securing Ethereum's L2 and ZK ecosystems.",
   description,

data/projects/rln.ts

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

data/projects/semaphore.ts

@@ -6,6 +6,7 @@ Semaphore is a protocol that allows users to prove their membership in a group a
 
 export const semaphore: ProjectInterface = {
   id: "semaphore",
+  section: "pse",
   projectStatus: "active",
   image: "semaphore.webp",
   name: "Semaphore",

data/projects/summa.ts

@@ -6,6 +6,7 @@ Summa allows centralized exchanges to demonstrate that their assets exceed their
 
 export const summa: ProjectInterface = {
   id: "summa",
+  section: "pse",
   projectStatus: "active",
   image: "summa.svg",
   name: "Summa",

data/projects/tlsn.ts

@@ -8,6 +8,7 @@ TLSNotary is ideal for developers of privacy-focused projects that require **dat
 
 export const tlsn: ProjectInterface = {
   id: "tlsn",
+  section: "pse",
   projectStatus: "active",
   image: "tlsn.webp",
   name: "TLSNotary",
@@ -26,12 +27,12 @@ export const tlsn: ProjectInterface = {
       "Plugin",
       "Application",
     ],
-    builtWith: ['rust'],
+    builtWith: ["rust"],
     keywords: [
       "Anonymity/privacy",
       "Identity",
       "Reputation",
-      "Data portability"
+      "Data portability",
     ],
   },
 }

data/projects/trusted-setups.ts

@@ -5,6 +5,7 @@ The Trusted Setups project is dedicated to simplifying the process of trusted se
 `
 export const trustedSetups: ProjectInterface = {
   id: "trusted-setups",
+  section: "pse",
   projectStatus: "active",
   image: "trusted-setups.svg",
   name: "Trusted Setups",

data/projects/unirep-protocol.ts

@@ -8,6 +8,7 @@ Using anonymous identifiers (epoch keys), the protocol allows for trustless enga
 
 export const unirepProtocol: ProjectInterface = {
   id: "unirep-protocol",
+  section: "pse",
   projectStatus: "active",
   image: "unirep.svg",
   name: "UniRep Protocol",

data/projects/wax.ts

@@ -12,6 +12,7 @@ The primary use cases for WAX include scaling, key management, and the creation
 
 export const wax: ProjectInterface = {
   id: "wax",
+  section: "pse",
   projectStatus: "active",
   image: "wax.webp",
   name: "Wallet Account eXperiments - WAX",

data/projects/zk-kit.ts

@@ -1,20 +1,22 @@
-import { ProjectInterface } from "@/lib/types";
+import { ProjectInterface } from "@/lib/types"
 
 export const ZKKit: ProjectInterface = {
-    id: "zk-kit",
-    image: "zk-kit.svg",
-    name: "ZK-kit",
-    tldr: "A monorepo of reusable libraries for zero-knowledge technologies.",
-    description: "ZK-kit is a set of libraries (plugins, algorithms or utility functions) that can be reused in different projects and zero-knowledge protocols, making it easier for developers to access user-friendly, tested, and documented libraries.",
-    projectStatus: 'active',
-    links: {
-        website: 'https://zkkit.pse.dev',
-        github: 'https://github.com/privacy-scaling-explorations/zk-kit',
-    },
-    tags: {
-        keywords: ['Education', 'Toolkits', 'Anonymity/Privacy', 'Algorithms'],
-        themes: ["build"],
-        types: ["Legos/dev tools"],
-        builtWith: ["Circom", "JavaScript", "Solidity", "Noir"]
-    }
+  id: "zk-kit",
+  section: "pse",
+  image: "zk-kit.svg",
+  name: "ZK-kit",
+  tldr: "A monorepo of reusable libraries for zero-knowledge technologies.",
+  description:
+    "ZK-kit is a set of libraries (plugins, algorithms or utility functions) that can be reused in different projects and zero-knowledge protocols, making it easier for developers to access user-friendly, tested, and documented libraries.",
+  projectStatus: "active",
+  links: {
+    website: "https://zkkit.pse.dev",
+    github: "https://github.com/privacy-scaling-explorations/zk-kit",
+  },
+  tags: {
+    keywords: ["Education", "Toolkits", "Anonymity/Privacy", "Algorithms"],
+    themes: ["build"],
+    types: ["Legos/dev tools"],
+    builtWith: ["Circom", "JavaScript", "Solidity", "Noir"],
+  },
 }