From 64ff68314e36d9ea3aee63c4af33e2cc164f5037 Mon Sep 17 00:00:00 2001
From: Hendrik Eeckhaut <hendrik@eeckhaut.org>
Date: Thu, 15 May 2025 11:10:11 +0200
Subject: [PATCH] Added projects to use cases page

---
 docusaurus.config.ts                      |   2 -
 src/components/ProjectCard/index.tsx      |  22 +-
 src/components/ProjectList/index.tsx      | 135 ++--------
 src/content/projects.json                 | 296 +++-------------------
 src/icons/IconTwitter.tsx                 |  17 ++
 src/pages/projects.tsx                    |   2 +-
 src/pages/{use_cases.md => use_cases.mdx} |  21 +-
 src/utils/getProjectsByFilter.ts          |  40 ---
 8 files changed, 90 insertions(+), 445 deletions(-)
 create mode 100644 src/icons/IconTwitter.tsx
 rename src/pages/{use_cases.md => use_cases.mdx} (69%)
 delete mode 100644 src/utils/getProjectsByFilter.ts

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 536de2a..b8e519d 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -103,8 +103,6 @@ const config: Config = {
 
         { to: '/docs/faq', label: 'FAQ', position: 'left' },
 
-        { to: '/projects', label: 'Projects', position: 'left' },
-
         { href: 'https://tlsnotary.github.io/tlsn/tlsn_prover/', label: 'API', position: 'left' },
         { to: '/blog', label: 'Blog', position: 'left' },
         {
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
index dfd4c42..f13dc96 100644
--- a/src/components/ProjectCard/index.tsx
+++ b/src/components/ProjectCard/index.tsx
@@ -3,43 +3,31 @@ import { useColorMode } from "@docusaurus/theme-common";
 import IconDiscord from "../../icons/IconDiscord";
 import IconGithub from "../../icons/IconGithub";
 import IconWebsite from "../../icons/IconWebsite";
-
+import IconTwitter from "../../icons/IconTwitter";
 import styles from "./styles.module.css";
 
 interface ProjectLinks {
   website?: string;
   github?: string;
   discord?: string;
+  twitter?: string;
 }
 
 interface ProjectCardProps {
   name: string;
   description: string;
-  hackathon?: string;
-  status?: string;
   links: ProjectLinks;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({
   description,
-  hackathon = "",
   links,
   name,
-  status = "",
 }: ProjectCardProps) => {
-  const categories = hackathon ? [hackathon] : [status];
   const { colorMode } = useColorMode();
 
   return (
     <div className={`${styles.card} ${styles[colorMode]}`}>
-      <div className={styles.cardTags}>
-        {categories.map((category) => (
-          <span key={category} className={styles.tag}>
-            {category}
-          </span>
-        ))}
-      </div>
-
       <div className={styles.cardBody}>
         <h2 className={styles.cardTitle}>{name}</h2>
 
@@ -65,6 +53,12 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
               <IconDiscord />
             </a>
           )}
+
+          {links.twitter && (
+            <a aria-label="Twitter" href={links.twitter} rel="noopener noreferrer" target="_blank">
+              <IconTwitter />
+            </a>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/ProjectList/index.tsx b/src/components/ProjectList/index.tsx
index eaad1ea..05e7cfc 100644
--- a/src/components/ProjectList/index.tsx
+++ b/src/components/ProjectList/index.tsx
@@ -2,7 +2,6 @@ import { useColorMode } from "@docusaurus/theme-common";
 import React, { useState, useEffect, useCallback } from "react";
 
 import projects from "../../content/projects.json";
-import { getProjectsByFilter, getUniqueHackathons, getUniqueStatuses } from "../../utils/getProjectsByFilter";
 import ActionCard from "../ActionCard";
 import ProjectCard from "../ProjectCard";
 
@@ -11,12 +10,11 @@ import styles from "./styles.module.css";
 interface Project {
   name: string;
   description: string;
-  hackathon: string | null;
-  status: string;
   links: {
     website?: string;
     github?: string;
     discord?: string;
+    twitter?: string;
   };
 }
 
@@ -33,122 +31,32 @@ function chunkArray(array: Project[]): Project[][] {
   return result.length === 0 ? [[]] : result;
 }
 
-const typedGetProjectsByFilter = getProjectsByFilter as (
-  projects: Project[],
-  filters: { hackathon: string; status: string },
-) => Project[];
-const typedGetUniqueHackathons = getUniqueHackathons as (projects: Project[]) => string[];
-const typedGetUniqueStatuses = getUniqueStatuses as (projects: Project[]) => string[];
-
 const ProjectList: React.FC = () => {
-  const [filteredProjects, setFilteredProjects] = useState<Project[][]>(chunkArray(sortedProjects));
-  const [selectedHackathon, setSelectedHackathon] = useState("");
-  const [selectedStatus, setSelectedStatus] = useState("");
+  const [projects, setProjects] = useState<Project[][]>(chunkArray(sortedProjects));
   const [currentPage, setCurrentPage] = useState(0);
   const { colorMode } = useColorMode();
 
-  const filterProjects = useCallback(() => {
-    const filtered = typedGetProjectsByFilter(sortedProjects, {
-      hackathon: selectedHackathon,
-      status: selectedStatus,
-    });
-    setFilteredProjects(chunkArray(filtered));
-    setCurrentPage(0);
-  }, [selectedHackathon, selectedStatus]);
-
   useEffect(() => {
-    filterProjects();
-  }, [filterProjects]);
-
-  const hackathons = typedGetUniqueHackathons(sortedProjects);
-  const statuses = typedGetUniqueStatuses(sortedProjects);
+    setProjects(chunkArray(sortedProjects));
+    setCurrentPage(0);
+  }, []);
 
   return (
     <div className={`${styles.projectList} ${styles[colorMode]}`}>
-      <div className={styles.filters}>
-        <div className={styles.filterGroup}>
-          <h3>Status</h3>
-
-          <div className={styles.filterOptions}>
-            <button
-              className={selectedStatus === "" ? styles.active : ""}
-              type="button"
-              onClick={() => {
-                setSelectedStatus("");
-              }}
-            >
-              All
-            </button>
-
-            {statuses.map((status) => (
-              <button
-                key={status}
-                className={selectedStatus === status ? styles.active : ""}
-                type="button"
-                onClick={() => {
-                  setSelectedStatus(status);
-                }}
-              >
-                {status}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className={styles.filterGroup}>
-          <h3>Hackathon</h3>
-
-          <div className={styles.filterOptions}>
-            <button
-              className={selectedHackathon === "" ? styles.active : ""}
-              type="button"
-              onClick={() => {
-                setSelectedHackathon("");
-              }}
-            >
-              All
-            </button>
-
-            {hackathons.map((hackathon) => (
-              <button
-                key={hackathon}
-                className={selectedHackathon === hackathon ? styles.active : ""}
-                type="button"
-                onClick={() => {
-                  setSelectedHackathon(hackathon);
-                }}
-              >
-                {hackathon}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
       <div className={styles.projectsGrid}>
-        {filteredProjects[currentPage]?.length > 0 ? (
-          filteredProjects[currentPage].map((project) => (
+        {
+          projects[currentPage].map((project) => (
             <ProjectCard
               key={project.name}
               description={project.description}
-              hackathon={project.hackathon || undefined}
               links={project.links}
               name={project.name}
-              status={project.status}
             />
           ))
-        ) : (
-          <div className={styles.noResults}>
-            <p>
-              <strong>No results found.</strong>
-            </p>
-
-            <p>No projects matching these filters. Try changing your search.</p>
-          </div>
-        )}
+        }
       </div>
 
-      {filteredProjects.length > 1 && (
+      {projects.length > 1 && (
         <div className={styles.pagination}>
           <span
             className={`${styles.paginationArrow} ${currentPage === 0 ? styles.disabled : ""}`}
@@ -166,7 +74,7 @@ const ProjectList: React.FC = () => {
             ←
           </span>
 
-          {filteredProjects.map((_, index) => (
+          {projects.map((_, index) => (
             <span
               key={`page-${String(index)}`}
               className={`${styles.paginationNumber} ${currentPage === index ? styles.active : ""}`}
@@ -186,15 +94,15 @@ const ProjectList: React.FC = () => {
           ))}
 
           <span
-            className={`${styles.paginationArrow} ${currentPage === filteredProjects.length - 1 ? styles.disabled : ""}`}
+            className={`${styles.paginationArrow} ${currentPage === projects.length - 1 ? styles.disabled : ""}`}
             role="button"
             tabIndex={0}
             onClick={() => {
-              setCurrentPage((prev) => Math.min(filteredProjects.length - 1, prev + 1));
+              setCurrentPage((prev) => Math.min(projects.length - 1, prev + 1));
             }}
             onKeyDown={(e) => {
               if (e.key === "Enter" || e.key === " ") {
-                setCurrentPage((prev) => Math.min(filteredProjects.length - 1, prev + 1));
+                setCurrentPage((prev) => Math.min(projects.length - 1, prev + 1));
               }
             }}
           >
@@ -205,12 +113,21 @@ const ProjectList: React.FC = () => {
 
       <div className={styles.actionCardContainer}>
         <ActionCard
-          buttonText="Submit your project"
-          buttonUrl="https://github.com/privacy-scaling-explorations/maci/issues/new?title=Add+a+Project+to+the+Projects+Showcase"
-          description="We are missing your project! Add your project to this page and show your awesomeness to the world."
-          title="Show what you have built"
+          buttonText="Join our Discord"
+          buttonUrl="https://discord.gg/9XwESXtcN7"
+          description="Are you using TLSNotary in your project? Reach out on Discord and tell us about your work!"
+          title="Share what you're building with TLSNotary"
         />
       </div>
+
+      {/* <div className={styles.actionCardContainer}>
+        <ActionCard
+          buttonText="Submit your project"
+          buttonUrl="https://github.com/tlsnotary/landing-page/issues/new?title=Add+a+Project+to+the+Projects+Showcase"
+          description="Submit your project to this page."
+          title="Are we missing your project?"
+        />
+      </div> */}
     </div>
   );
 };
diff --git a/src/content/projects.json b/src/content/projects.json
index e9a8ebd..52309f9 100644
--- a/src/content/projects.json
+++ b/src/content/projects.json
@@ -1,294 +1,60 @@
 [
   {
-    "name": "clr.fund",
-    "description": "a protocol for efficiently allocating funds to public goods that benefit the Ethereum Network.",
-    "hackathon": null,
-    "status": "Production",
+    "name": "ZKP2P",
+    "description": "Completely peer-to-peer leveraging everyday payment networks",
     "links": {
-      "website": "https://clr.fund/",
-      "github": "https://github.com/clrfund/monorepo/",
-      "discord": "https://discord.com/invite/ZnsYPV6dCv"
+      "website": "https://zkp2p.xyz",
+      "twitter": "https://x.com/zkp2p",
+      "github": "https://github.com/zkp2p"
     }
   },
   {
-    "name": "MACI_QF in Allo",
-    "description": "a MACI Quadratic Funding strategy to be used within Gitcoin's Allo Protocol.",
-    "hackathon": null,
-    "status": "Production",
+    "name": "OpenLayer (Jomo)",
+    "description": "Scale web3 through optimistic verifiable computation",
     "links": {
-      "github": "https://github.com/gitcoinco/MACI_QF"
+      "website": "https://www.openlayer.tech/",
+      "twitter": "https://x.com/OpenLayerHQ",
+      "github": "https://github.com/0xJomo"
     }
   },
   {
-    "name": "DoraHacks Light-Weight MACI",
-    "description": "DoraHacks MACI is a light-weight implementation of MACI.",
-    "hackathon": null,
-    "status": "Production",
+    "name": "Opacity Labs",
+    "description": "The ZKP protocol for proving anything without revealing the details",
     "links": {
-      "github": "https://github.com/dorahacksglobal/qf-maci",
-      "website": "https://dorahacks.io/blog/guides/maci-qv-guide/"
+      "website": "https://www.opacity.network/",
+      "twitter": "https://warpcast.com/~/channel/opacity"
     }
   },
   {
-    "name": "MACI Platform",
-    "description": "a platform that allows to run different types of vote and funding rounds using MACI.",
-    "hackathon": null,
-    "status": "Production",
+    "name": "vlayer",
+    "description": "Empowering web3 with Verifiable Data",
     "links": {
-      "github": "https://github.com/privacy-scaling-explorations/maci-platform",
-      "website": "https://maci-platform.vercel.app/"
+      "website": "https://www.vlayer.xyz",
+      "twitter": "https://x.com/vlayer_xyz",
+      "github": "https://github.com/vlayer-xyz"
     }
   },
   {
-    "name": "MACI Starter Kit",
-    "description": "a starter kit for quickly prototyping applications with MACI.",
-    "hackathon": null,
-    "status": "Utility",
+    "name": "KapWork",
+    "description": "Automated invoice verification for Factoring Companies",
     "links": {
-      "github": "https://github.com/yashgo0018/maci-wrapper"
+      "website": "https://kapwork.com/",
+      "github": "https://github.com/antojoseph/ZeroTrustBounty"
     }
   },
   {
-    "name": "Voto",
-    "description": "Voto is an on-chain censorship-resistant anonymous voting solution built on decentralised identities.",
-    "hackathon": "ETHBerlin 2024",
-    "status": "Hackathon",
+    "name": "Keyring Network",
+    "description": "Institutional-grade compliance",
     "links": {
-      "website": "https://projects.ethberlin.org/submissions/334",
-      "github": "https://github.com/Vote-tech/voto-tech"
+      "website": "https://keyring.network",
+      "twitter": "https://x.com/KeyringNetwork"
     }
   },
   {
-    "name": "0xFeedback",
-    "description": "A privacy preserving B2C Survey Platform.",
-    "hackathon": "ETHDam 2024",
-    "status": "Hackathon",
+    "name": "Usher Labs",
+    "description": "Secure and verifiable data pipelines between traditional systems and blockchains",
     "links": {
-      "website": "https://taikai.network/cryptocanal/hackathons/ethdam2024/projects/cluyuw0j200y3yz01yjjd4rap/idea"
-    }
-  },
-  {
-    "name": "StealthAlloc",
-    "description": "MACI as an Allo protocol Quadratic Funding Strategy for collusion-resistant, privacy-protecting allocations.",
-    "hackathon": "ETHDam 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://taikai.network/cryptocanal/hackathons/ethdam2024/projects/cluxse8cz00pjz3010wbq3thf/idea",
-      "github": "https://github.com/tse-lao/ethdam24"
-    }
-  },
-  {
-    "name": "NEVO",
-    "description": "MACI's anti-collusion voting system with Near Protocol's Cross-Chain Signatures.",
-    "hackathon": "ETHDam 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://taikai.network/cryptocanal/hackathons/ethdam2024/projects/cluz9746q01c2z301tupriiuq/idea",
-      "github": "https://github.com/atahanyild/NEVO"
-    }
-  },
-  {
-    "name": "EtherTale",
-    "description": "a decentralized, interactive fiction platform powered by AI.",
-    "hackathon": "ETHTaipei 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://taikai.network/ethtaipei/hackathons/hackathon-2024/projects/clu501yr50l1ey501e65jj8nr",
-      "github": "https://github.com/saurabhchalke/EtherTale"
-    }
-  },
-  {
-    "name": "Demokratia",
-    "description": "Offers infrastructure to create and seamlessly integrate personalised AI agents for DAO voting.",
-    "hackathon": "ETHGlobal London 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ethglobal.com/showcase/demokratia-c7bab",
-      "github": "https://github.com/ConfidentiDemokratia"
-    }
-  },
-  {
-    "name": "SkaffoldMACI+ZkOSIOS",
-    "description": "User-friendly voting system UI (powered by Skaffold) for sports fans using MACI for enhanced security and privacy.",
-    "hackathon": "ETHGlobal London 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ethglobal.com/showcase/skaffoldmaci-zkosios-2no6q",
-      "github": "https://github.com/GaetanoMondelli/ETH-GLOBAL-LONDON"
-    }
-  },
-  {
-    "name": "Vota Protocol",
-    "description": "a privacy-preserved fair and trustless election Voting System on Blockchain programmable for global constituencies.",
-    "hackathon": "ETHGlobal London 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ethglobal.com/showcase/vota-protocol-qxf3z",
-      "github": "https://github.com/Vota-Protocol"
-    }
-  },
-  {
-    "name": "Votelik Pollerin",
-    "description": "Sybil- and bribery-resistant polling on Farcaster, utilizing World ID and MACI.",
-    "hackathon": "ETHGlobal London 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ethglobal.com/showcase/votelik-pollerin-u0dcs",
-      "github": "https://github.com/pauldev20/farcaster-frames-polls"
-    }
-  },
-  {
-    "name": "Anon Vote",
-    "description": "an on-chain anonymous voting solution with guaranteed proof of personhood.",
-    "hackathon": "ETHGlobal London 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ethglobal.com/showcase/anonvote-uc7w0",
-      "github": "https://github.com/gasperpre/veripoll"
-    }
-  },
-  {
-    "name": "MACI Subgraph",
-    "description": "a subgraph to index data from MACI protocol to serve as data layer for frontend integration",
-    "hackathon": "ETHGlobal Circuit Breaker 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ethglobal.com/showcase/maci-subgraph-89h7c"
-    }
-  },
-  {
-    "name": "Quadratic Dollar Homepage",
-    "description": "The Quadratic Dollar Homepage is a spin on the Million Dollar Homepage.",
-    "hackathon": null,
-    "status": "Unmaintained",
-    "links": {
-      "github": "https://github.com/privacy-scaling-explorations/qdh",
-      "website": "https://quadratic.page/"
-    }
-  },
-  {
-    "name": "PriVote",
-    "description": "An open-source, decentralized voting platform that uses MACI for privacy and offers various authentication methods for secure, private polling.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "github": "https://github.com/Privote-project"
-    }
-  },
-  {
-    "name": "PolyVote",
-    "description": "An end-to-end private voting service using MPC, ZK and AI to recommend and process votes.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "github": "https://github.com/ElectionZap/eth-singapore"
-    }
-  },
-  {
-    "name": "ChillVille",
-    "description": "A private onchain voting system with sybil resistance by combining MACI and zkTLS.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://eth-sg.vercel.app/",
-      "github": "https://github.com/wasabijiro/ChillVille"
-    }
-  },
-  {
-    "name": "MACPI",
-    "description": "A reliable DAO voting infrastructure for next billion users",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://maci-tap.vercel.app/",
-      "github": "https://github.com/0xhardman/tap-maci"
-    }
-  },
-  {
-    "name": "Silent Wars",
-    "description": "A telegram mini-app guild based game with resource collection and voting.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://2024-eth-singapore-5k28.vercel.app/",
-      "github": "https://github.com/taijusanagi/2024-eth-singapore"
-    }
-  },
-  {
-    "name": "Judg3",
-    "description": "A next-generation voting system that leverages the power of consensus over your conscious mind.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "github": "https://github.com/team-somehow/judg3"
-    }
-  },
-  {
-    "name": "EZKPoll",
-    "description": "A polling system utilizing MACI to empower ZK on polling and A/B testing.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://ezkpoll.onrender.com/",
-      "github": "https://github.com/abcd5251/EzkPoll"
-    }
-  },
-  {
-    "name": "Geist",
-    "description": "A Decentralized Autonomous Website (DAW) builder that enables censorship-resistant, trustless deployments and governance for DAOs through private previews, zk-proof-based deployments, and anti-collusion voting.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://gateway.geist.network/",
-      "github": "https://github.com/debuggingfuture/geist"
-    }
-  },
-  {
-    "name": "Sniper",
-    "description": "An AI companion designed to improve personal productivity and growth.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "github": "https://github.com/MusubiLabs/sniper"
-    }
-  },
-  {
-    "name": "zkElect",
-    "description": "A blockchain-based platform using zk-SNARKs and MACI for secure, anonymous, and transparent voting, preventing tampering, coercion, and bribery.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "github": "https://github.com/anvats/zkElect"
-    }
-  },
-  {
-    "name": "clr.wiki",
-    "description": "Collusion-resistant information dispute resolution tool using MACI.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://www.cl3r.wiki/",
-      "github": "https://github.com/seigneur/clr-wiki"
-    }
-  },
-  {
-    "name": "DAOTown",
-    "description": "The project streamlines DAO activities, governance, and tokenomics with decentralized infrastructure.",
-    "hackathon": "ETHGlobal Singapore 2024",
-    "status": "Hackathon",
-    "links": {
-      "website": "https://eth-global-sg.vercel.app/",
-      "github": "https://github.com/MukulKolpe/ETHGlobalSG"
-    }
-  },
-  {
-    "name": "Pixel Game Assistant",
-    "description": "PGA is a tool that helps Pixel Game players to give community feedback on game features.",
-    "hackathon": null,
-    "status": "Production",
-    "links": {
-      "website": "https://voting.guildpal.work/",
-      "github": null
+      "website": "https://www.usher.so/"
     }
   }
-]
+]
\ No newline at end of file
diff --git a/src/icons/IconTwitter.tsx b/src/icons/IconTwitter.tsx
new file mode 100644
index 0000000..373482f
--- /dev/null
+++ b/src/icons/IconTwitter.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+interface IconDiscordProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const IconTwitter: React.FC<IconDiscordProps> = ({ size = 24, ...props }) => (
+  <svg fill="none" height={size} viewBox="0 0 24 19" width={size} xmlns="http://www.w3.org/2000/svg" {...props}>
+
+    <path
+      d="M15.7782 4.00634C15.2374 4.24554 14.6639 4.40264 14.0768 4.47243C14.6957 4.10227 15.1589 3.51973 15.3801 2.83334C14.7993 3.17901 14.1625 3.42126 13.4988 3.5523C13.0529 3.07529 12.462 2.75894 11.8178 2.65242C11.1737 2.54591 10.5124 2.65519 9.93673 2.96329C9.36109 3.27139 8.90336 3.76104 8.63471 4.35611C8.36606 4.95119 8.30153 5.61835 8.45117 6.25388C7.27329 6.19485 6.12099 5.88876 5.06908 5.35548C4.01717 4.8222 3.08918 4.07367 2.34533 3.15847C2.08204 3.6107 1.94368 4.12479 1.94442 4.64809C1.94442 5.67518 2.46717 6.58255 3.26192 7.1138C2.79159 7.09899 2.33162 6.97198 1.92033 6.74334V6.78018C1.92048 7.46421 2.15718 8.12715 2.59031 8.65659C3.02344 9.18603 3.62634 9.54939 4.29679 9.68505C3.86019 9.80337 3.40239 9.82081 2.95804 9.73605C3.14707 10.3248 3.51551 10.8398 4.01175 11.2088C4.508 11.5777 5.10722 11.7823 5.7255 11.7938C5.11101 12.2764 4.40742 12.6331 3.65496 12.8436C2.9025 13.0541 2.11593 13.1143 1.34021 13.0206C2.69433 13.8914 4.27065 14.3538 5.88063 14.3523C11.3298 14.3523 14.3098 9.83805 14.3098 5.92309C14.3098 5.79559 14.3063 5.66668 14.3006 5.54059C14.8806 5.12138 15.3812 4.60206 15.7789 4.00705L15.7782 4.00634Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default IconTwitter;
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index 86827f2..4d38a06 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -27,7 +27,7 @@ const Projects: React.FC = () => (
     <LayoutProvider>
         <Layout description="A list of projects built with the MACI protocol" title="Projects built with MACI">
             <div>
-                <ProjectspageHeader tagline="Explore the projects built by the MACI community" title="Projects" />
+                <ProjectspageHeader tagline="Projects using TLSNotary" title="Projects" />
             </div>
 
             <main>
diff --git a/src/pages/use_cases.md b/src/pages/use_cases.mdx
similarity index 69%
rename from src/pages/use_cases.md
rename to src/pages/use_cases.mdx
index 77caca8..cd7ffc7 100644
--- a/src/pages/use_cases.md
+++ b/src/pages/use_cases.mdx
@@ -1,10 +1,9 @@
 ---
-title: my hello page title
-description: my hello page description
 hide_table_of_contents: true
 ---
 import styles from './index.module.css';
 import Link from '@docusaurus/Link';
+import ProjectsList from "../components/ProjectList";
 
 # Use cases
 
@@ -26,16 +25,10 @@ You can use TLSNotary for:
 
 ...and more!
 
-<!-- TODO: Projects using TLSNotary -->
+## Projects using TLSNotary
 
-## Share what you're building with TLSNotary
-
-Are you using TLSNotary in your project? Reach out on Discord and tell us about your work!
-
-<div className={styles.buttons}>
-    <Link
-    className="button button--secondary button--lg"
-    to="https://discord.gg/9XwESXtcN7">
-        Join our Discord
-    </Link>
-</div>
\ No newline at end of file
+<section className={styles.introduction}>
+    <div className="container">
+        <ProjectsList />
+    </div>
+</section>
diff --git a/src/utils/getProjectsByFilter.ts b/src/utils/getProjectsByFilter.ts
deleted file mode 100644
index 9ba1fed..0000000
--- a/src/utils/getProjectsByFilter.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type Projects from "../content/projects.json";
-
-/**
- * Filters projects based on hackathon and status criteria.
- * @param projects An array of objects where each object represents a project.
- * @param filter An object containing optional hackathon and status filter criteria.
- * @returns An array of projects that match the given filter criteria.
- */
-export function getProjectsByFilter(
-  projects: typeof Projects,
-  filter: { hackathon?: string; status?: string },
-): typeof Projects {
-  return projects.filter((project) => {
-    const hackathonMatch = !filter.hackathon || project.hackathon === filter.hackathon;
-    const statusMatch = !filter.status || project.status === filter.status;
-    return hackathonMatch && statusMatch;
-  });
-}
-
-/**
- * Extracts unique hackathons from the projects list.
- * @param projects An array of objects where each object represents a project.
- * @returns An array of strings, where each string is a unique hackathon from across all projects.
- */
-export function getUniqueHackathons(projects: typeof Projects): string[] {
-  const hackathons = projects
-    .map((project) => project.hackathon)
-    .filter((hackathon): hackathon is string => hackathon !== null && hackathon !== "");
-  return Array.from(new Set(hackathons));
-}
-
-/**
- * Extracts unique statuses from the projects list.
- * @param projects An array of objects where each object represents a project.
- * @returns An array of strings, where each string is a unique status from across all projects.
- */
-export function getUniqueStatuses(projects: typeof Projects): string[] {
-  const statuses = projects.map((project) => project.status);
-  return Array.from(new Set(statuses));
-}