@maci-protocol/website 0.0.0-ci.1e276ed

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@maci-protocol/website",
+  "version": "0.0.0-ci.1e276ed",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "setup-typedoc": "ts-node ./src/scripts/setupTypedoc.ts",
+    "setup-soliditydocs": "ts-node ./src/scripts/setupSolidityDocs.ts",
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "prebuild": "pnpm run setup-typedoc && pnpm run setup-soliditydocs",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "types": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^3.7.0",
+    "@docusaurus/preset-classic": "^3.7.0",
+    "@docusaurus/theme-classic": "^3.7.0",
+    "@docusaurus/theme-common": "^3.7.0",
+    "@easyops-cn/docusaurus-search-local": "^0.49.1",
+    "@mdx-js/react": "^3.1.0",
+    "clsx": "^2.1.1",
+    "docusaurus-plugin-image-zoom": "^3.0.1",
+    "docusaurus-plugin-matomo": "^0.0.8",
+    "gray-matter": "^4.0.3",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.7.0",
+    "@docusaurus/tsconfig": "^3.7.0",
+    "@docusaurus/types": "^3.7.0",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0"
+  },
+  "gitHead": "4d521a0ec67d0ab5be062cb0354cd3145cc883fe"
+}

package/src/components/ActionCard/index.tsx

@@ -0,0 +1,30 @@
+import styles from "./styles.module.css";
+
+interface ActionCardProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonUrl: string;
+}
+
+const ActionCard: React.FC<ActionCardProps> = ({ buttonText, buttonUrl, description, title }: ActionCardProps) => (
+  <div className={styles.actionCard}>
+    <div className={styles.actionCardBody}>
+      <div className={styles.actionCardContent}>
+        <div className={styles.actionCardText}>
+          <h2 className={styles.actionCardTitle}>{title}</h2>
+
+          <p className={styles.actionCardDescription}>{description}</p>
+        </div>
+
+        <div className={styles.actionCardButtonContainer}>
+          <a className={styles.actionCardButton} href={buttonUrl} rel="noopener noreferrer" target="_blank">
+            {buttonText}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default ActionCard;

package/src/components/ActionCard/styles.module.css

@@ -0,0 +1,96 @@
+.actionCard {
+  background-color: #1a202c; /* darkBlue */
+  color: white;
+  border-radius: 24px;
+  width: 100%;
+  padding: 64px 32px;
+}
+
+.actionCardBody {
+  padding: 0;
+}
+
+.actionCardContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+
+.actionCardText {
+  width: 100%;
+}
+
+.actionCardTitle {
+  font-size: 30px;
+  line-height: 44px;
+  font-weight: normal;
+  color: white;
+}
+
+.actionCardDescription {
+  margin-top: 1rem;
+  font-size: 16px;
+  line-height: 25px;
+  font-weight: normal;
+  color: #a0aec0; /* text.400 */
+}
+
+.actionCardButtonContainer {
+  width: 100%;
+}
+
+.actionCardButton {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: #3182ce; /* primary */
+  color: white;
+  text-decoration: none;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .actionCardContent {
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .actionCardText {
+    width: 522px;
+  }
+
+  .actionCardTitle {
+    font-size: 40px;
+  }
+
+  .actionCardDescription {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .actionCardButtonContainer {
+    width: auto;
+  }
+
+  .actionCardButton {
+    padding: 0.75rem 1.5rem;
+    font-size: 1.125rem;
+    border-radius: 30px;
+  }
+}
+
+@media (min-width: 992px) {
+  .actionCard {
+    padding: 41px 80px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .actionCard {
+    width: 1110px;
+  }
+}

package/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,91 @@
+import { useColorMode } from "@docusaurus/theme-common";
+import Heading from "@theme/Heading";
+import clsx from "clsx";
+
+import type { ReactElement } from "react";
+
+import boxImage from "../../../static/img/box.png";
+import boxDarkImage from "../../../static/img/box_dark.png";
+import chainImage from "../../../static/img/chain.png";
+import chainDarkImage from "../../../static/img/chain_dark.png";
+import chartImage from "../../../static/img/chart.png";
+import chartDarkImage from "../../../static/img/chart_dark.png";
+
+import styles from "./styles.module.css";
+
+interface FeatureItem {
+  title: string;
+  img: string;
+  imgDark: string;
+  description: ReactElement;
+}
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: "Highly secure",
+    img: boxImage as string,
+    imgDark: boxDarkImage as string,
+    description: (
+      <>
+        Our Ethereum smart contracts enforce correct execution. Votes cannot be faked, censored, double-counted, or
+        tampered with.
+      </>
+    ),
+  },
+  {
+    title: "Protects privacy",
+    img: chainImage as string,
+    imgDark: chainDarkImage as string,
+    description: (
+      <>
+        Votes are encrypted before submitting them on-chain to ensure individual privacy is preserved throughout the
+        voting process.
+      </>
+    ),
+  },
+  {
+    title: "Powered by zk-SNARKs",
+    img: chartImage as string,
+    imgDark: chartDarkImage as string,
+    description: (
+      <>
+        Vote tallying happens off-chain but ZK-proofs are submitted and verified on-chain, which guarantees votes are
+        counted correctly without revealing the individual votes.
+      </>
+    ),
+  },
+];
+
+const Feature = ({ title, img, imgDark, description }: FeatureItem) => {
+  const { isDarkTheme } = useColorMode();
+
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <img alt={title} className={styles.featureImg} src={isDarkTheme ? imgDark : img} />
+      </div>
+
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3" className={styles.featureTitle}>
+          {title}
+        </Heading>
+
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+};
+
+const HomepageFeatures = (): ReactElement => (
+  <section className={styles.features}>
+    <div className="container">
+      <div className="row">
+        {FeatureList.map((data) => (
+          <Feature key={data.title} {...data} />
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+export default HomepageFeatures;

package/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,17 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+  font-size: 1.1rem;
+}
+
+.featureImg {
+  width: 200px;
+}
+
+.featureTitle {
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-color);
+  text-underline-offset: 0.5rem;
+}

package/src/components/ProjectCard/index.tsx

@@ -0,0 +1,74 @@
+import { useColorMode } from "@docusaurus/theme-common";
+
+import IconDiscord from "../../icons/IconDiscord";
+import IconGithub from "../../icons/IconGithub";
+import IconWebsite from "../../icons/IconWebsite";
+
+import styles from "./styles.module.css";
+
+interface ProjectLinks {
+  website?: string;
+  github?: string;
+  discord?: 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>
+
+        <p className={styles.cardDescription}>{description}</p>
+      </div>
+
+      {(links.website || links.github || links.discord) && (
+        <div className={styles.cardFooter}>
+          {links.github && (
+            <a aria-label="GitHub" href={links.github} rel="noopener noreferrer" target="_blank">
+              <IconGithub />
+            </a>
+          )}
+
+          {links.website && (
+            <a aria-label="Website" href={links.website} rel="noopener noreferrer" target="_blank">
+              <IconWebsite />
+            </a>
+          )}
+
+          {links.discord && (
+            <a aria-label="Discord" href={links.discord} rel="noopener noreferrer" target="_blank">
+              <IconDiscord />
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProjectCard;

package/src/components/ProjectCard/styles.module.css

@@ -0,0 +1,77 @@
+.card {
+  border-radius: 18px;
+  padding: 34px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.3s ease;
+}
+
+.card.light {
+  background-color: var(--ifm-color-gray-100);
+  border: 1px solid var(--ifm-color-gray-300);
+  color: var(--ifm-color-gray-900);
+}
+
+.card.dark {
+  background-color: var(--ifm-color-gray-900);
+  border: 1px solid var(--ifm-color-gray-800);
+  color: var(--ifm-color-gray-100);
+}
+
+.card:hover {
+  border-color: var(--ifm-color-primary);
+}
+
+.cardTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 2rem;
+}
+
+.tag {
+  border: 1px solid var(--ifm-color-gray-600);
+  border-radius: 9999px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.cardBody {
+  flex-grow: 1;
+}
+
+.cardTitle {
+  font-size: 24px;
+  line-height: 33px;
+  margin-bottom: 1rem;
+}
+
+.cardDescription {
+  font-size: 14px;
+  line-height: 22.4px;
+}
+
+.cardFooter {
+  display: flex;
+  gap: 1rem;
+  padding-top: 1rem;
+}
+
+.cardFooter a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.cardFooter svg {
+  width: 24px;
+  height: 24px;
+}
+
+@media (max-width: 768px) {
+  .cardFooter svg {
+    width: 16px;
+    height: 16px;
+  }
+}

package/src/components/ProjectList/index.tsx

@@ -0,0 +1,218 @@
+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";
+
+import styles from "./styles.module.css";
+
+interface Project {
+  name: string;
+  description: string;
+  hackathon: string | null;
+  status: string;
+  links: {
+    website?: string;
+    github?: string;
+    discord?: string;
+  };
+}
+
+const typedProjects = projects as unknown as Project[];
+
+const sortedProjects = typedProjects.slice().sort((a, b) => a.name.localeCompare(b.name));
+
+function chunkArray(array: Project[]): Project[][] {
+  const result = [];
+  for (let i = 0; i < array.length; i += 9) {
+    const chunk = array.slice(i, i + 9);
+    result.push(chunk);
+  }
+  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 [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);
+
+  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) => (
+            <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 && (
+        <div className={styles.pagination}>
+          <span
+            className={`${styles.paginationArrow} ${currentPage === 0 ? styles.disabled : ""}`}
+            role="button"
+            tabIndex={0}
+            onClick={() => {
+              setCurrentPage((prev) => Math.max(0, prev - 1));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setCurrentPage((prev) => Math.max(0, prev - 1));
+              }
+            }}
+          >
+            ←
+          </span>
+
+          {filteredProjects.map((_, index) => (
+            <span
+              key={`page-${String(index)}`}
+              className={`${styles.paginationNumber} ${currentPage === index ? styles.active : ""}`}
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                setCurrentPage(index);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  setCurrentPage((prev) => Math.max(0, prev - 1));
+                }
+              }}
+            >
+              {index + 1}
+            </span>
+          ))}
+
+          <span
+            className={`${styles.paginationArrow} ${currentPage === filteredProjects.length - 1 ? styles.disabled : ""}`}
+            role="button"
+            tabIndex={0}
+            onClick={() => {
+              setCurrentPage((prev) => Math.min(filteredProjects.length - 1, prev + 1));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setCurrentPage((prev) => Math.min(filteredProjects.length - 1, prev + 1));
+              }
+            }}
+          >
+            →
+          </span>
+        </div>
+      )}
+
+      <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"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectList;